CSS a
Sample of the pdf document
CSS Introduction
It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and feel of your HTML documents in an organized and efficient manner. With CSS you will be able to:- Add new looks to your old HTML
- Completely restyle a web site with only a few changes to your CSS code
- Use the "style" you create on any webpage you wish!
Intended Audience
Before you begin the CSS Tutorial we suggest that you check to see you meet the following recommendations:- You have used HTML in the past
- You know the basic HTML tags and vocabulary.
- You want to be a better web designer!
When you are ready, continue the tutorial to learn about the basic form of CSS and where you should place your CSS code.
CSS Selector
CSS selectors are the heart and soul of CSS. They define which HTML elements you are going to be manipulating with CSS code and you should have a solid understanding of them when you are finished with this tutorial. Luckily for you, they are pretty simple to comprehend!CSS Selector: Where It Fits In
In a typical CSS statement you have the following:- SELECTOR { PROPERTY: VALUE }
CSS Selector Name
The selector name creates a direct relationship with the HTML tag you want to edit. If you wanted to change the way a paragraph tag behaved, the CSS code would look like:- p { PROPERTY: VALUE }
Internal CSS
Cascading Style Sheets come in three flavors: internal, external, and inline. We will cover internal and external, as they are the only flavors a designer should utilize. In this lesson, we cover the basics of the easier type, internal. When using internal CSS, you must add a new tag, <style>, inside the <head> tag. The HTML code below contains an example of <style>'s usage.CSS Code:
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<p>Your page's content!</p>
</body>
</html>
This doesn't actually do anything visually. The code style
tag just tells the browser that we will be defining some CSS to be used on this
page.Creating Internal CSS Code
CSS code is not written the same way as HTML code is. This makes sense because CSS is not HTML, but rather a way of manipulating existing HTML. Below is an example of some simple, yet fully functional, CSS code.CSS Code:
<html>
<head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>White text on a black background!</p>
</body>
</html>
Display:
White text on a black background!
You probably noticed that in our CSS code we were altering
the <body> and <p> HTML tags. The great thing about CSS is that it
is an intuitive language. Once you understand the general format for CSS code,
you are pretty much set. General CSS Format:
- "HTML tag" { "CSS Property" : "Value" ; }
- We chose the HTML element we wanted to manipulate. - p{ : ; }
- Then we chose the CSS attribute color. - p { color: ; }
- Next we choose the font color to be white. - p { color: white; }
- We choose the HTML element Body - body { : ; }
- Then we chose the CSS attribute. - body { background-color: ; }
- Next we chose the background color to be black. - body { background-color: black; }
Click here for Download PDF / FREE
0 commentaires: