Lessons
Lesson 1: CSS properties and values
... Before you begin, you might want to take a look at our first 3 CSS tips.
A CSS stylesheet contains styles, which you use to "style" HTML. When you style HTML, some of the things you can do are to color a box's background or to specify what font its text should appear in or to define how much space should be between an image and its neighboring text.
A style consists of a property and a value that, combined, form a declaration.
Let's decipher that.
One CSS property is "color." Text can have color. It can be red or blue or whatever. Red and blue are some of the possible values that the color property can have.
Assiging a value to a property
You assign a value to a property this way: property: value.
Here's an example: color: blue.
Though the color property can only have one value, other properties can have multiple values, as in these examples:
- property: value value;
- property: value value value;
- property: value value value value;
- property: value, value, value, value;
The last example illustrates how you must separate the values when using the font-family property, used to specify in which font text should be displayed:
- font-family: arial, verdana, georgia, serif;
Returning to the color property, to what am I assigning the color blue? It has to be one of the text elements that can appear on a Web page. One such element is the paragraph, indicated by the HTML tag "p". But there's more to do before the color property can be associated with the paragraph element. You can't just write "p color:blue".
Remember, a property:value pair forms a declaration. After the last value in each declaration, insert a semi-colon and then place the "property: value;" declaration within braces like this: {color:blue;}. You've now created a declaration set.
Now you can attach the declaration set to an HTML element (also referred to as a "tag"); however, in CSS the entity you assign a declaration set to is called a selector.
To have the color:blue declaration affect all the paragraphs on an HTML page, you would assign the color:blue declaration to the paragraph tag, p, using the p selector:
p {color:blue;}
The pairing of the declaration set with a selector creates a CSS rule.
CSS rules and Web pages
The above rule "says" to display all paragraph text on the Web page to which the rule applies in the color blue.
How does that CSS rule get associated with the HTML on a Web page? Right now it's as independent of a Web page as George W. Bush is of the wishes of the American people.
The easiest way is to place the CSS code within the HTML. It would go in the Head section between these two tags:
<style type="text/css">
</style>
Here's how it would look:
<head>
<style type="text/css">
p {color:blue;}
</style>
</head>
The above CSS code will affect any text in your Web pages Body section that contains a "p" tag:
<body>
<p>This text will display in the color blue.</p>
</body>
In the next lesson you'll learn how to resize text.