Introduction
Cascading Style Sheets, or CSS, is a W3C standard for providing styling and formating capabilities to HTML pages. With CSS, you can control just about any aspect of an HTML page including: fonts, font sizes, positioning, and colors. Knowing the basics of CSS is vital to the creation of modern web sites and web user interfaces.
CSS Rules
A CSS style or style sheet consists of a series of rules. These rules define the style elements that are applied to an HTML tag. The following rule defines the color and font size of paragraph elements on a page.
p{ color:blue; font-size:large; }
Selector
The p in this example is a selector. It identifies which HTML tags to apply this style rule to. In a basic case like this, the rule would apply to all <p> tags in the HTML document.
Declaration Block
The two curly brackets ({ }) represent a declaration block. Each rule is defined by one block which may contain one or more declarations. Each CSS rule has only 1 declaration block.
Declarations
This CSS example contains two declarations. The first, color:blue; defines the default color for any text contained in the HTML tag defined in the selector. The second, font-size:large; defines the size of the text relative to the default size.
Declarations is where are the real styling occurs. CSS rules often contain many declarations in one block.
Property and Value
Declarations can further be broken down into properies and values. For example, for out first declaration color:blue;, color is the property and blue is the value. The available list of properies and values allowed for those properties are defined in the CSS specification. Going into any detail about all the availble properies and values is beyond the scope of this How To. But there are a number of books, pocket references, and websites that cover all the possibilities in excrutiating detail.
Storing CSS Rules
Now that you have seen how to create a rule, you are probably wondering, where do I put the darn thing. Well, in the world of the Web, this can be a bit tricky because you can put the style rules in a number of places.
Storing in External Files
The most common and probably the best place to store CSS rules is in external files. This allows the style sheet to be used in many pages. When the CSS file is updated, all changes flow to the pages linked to the style sheet.
To include a CSS style sheet from a separate file just use the <link> tag in the <head> section of your HTML document. For example:
<link href="mystyles.css" rel="stylesheet" type="text/css"></link>
The href attribute is the name of the CSS file. The rel attribute identifies the kind of link, in this case a stylesheet. Finally the type attribute identifies the mime-type for the document. Just use text/css, we don't really need to get into mime-types! :)
This web site includes its style sheets using this method. However, to keep the examples simple, all sample CSS code will be included in the example documents.
Storing CSS in the Document
The other option is to include your CSS within the HTML page itself. This would generally be considered bad form. Since the styling takes place in the document, it must be manually copied to other documents for reuse. However, our examples will be much easier to follow if they are kept in one document, so we will be using this method for CSS pages.
An Example
Time for an example. Below is the source code for the first example. In a frame below you will see what the output of the document looks like.
1:<html>
2:<head>
3: <title>CSS Basics Example 01</title>
4: <style type="text/css">
5: <!--
6: /* Rule Defined in document Header */
7: p {
8: color:blue;
9: font-size:large;
10: }
11:
12: h4 {
13: color:teal;
14: }
15: -->
16: </style>
17:</head>
18:<body>
19: <h2>CSS Basics Example 01</h2>
20: <p>This is a normal paragraph. Notice the color and size are defined in the document header.</p>
21: <p style="{ color:green; }">I can also define styles inline like this. Possible, but generally a bad idea.</p>
22: <p>Notice this para is back to blue.</p>
23: <h4>This is teal</h4>
24:</body>
25:</html>
Let us examine the code. (Notice the output is displayed below.) Notice first that the CSS rules are put in a <style> tag one line 4. Lines 5 and 15 put the rules in HTML comments so that they won't be displayed in older browsers. (Not sure this is necessary anymore, but it doesn't seem to hurt anything.) Lines 7 and 12 start our rules for the <p> tag and for the <h4> tag.
Given the rules, one would think all the paragraphs would be blue. Notice line 21. In this <p> tag, a color declaration is made in a style attribute. This is an example of an inline style declaration (also bad form, you really would not want to build documents this way). Notice the color of the paragraph does in fact change to green. This little piece of code demonstrates the golden rule of CSS. Which is:
Golden Rule: Whatever is closest wins!
What do I mean? The style rule defined closest to the text being marked up, will be applied. So an inline style will be applied instead of a style defined in the document <head> section. A style defined in the <head> section will be applied instead of a style defined in an external file. This is the cascading effect from which CSS gets its name. Many styles can be applied, but the rules will cascade to the style defined closest to the target text.
Notice that since the style was applied only to the <p> tag, only the text for that element is effected. Since the <p> tag following has no such inline style, the document reverts back to the style defined in the header.
HTML Output
CSS Basics Example 01
This is a normal paragraph. Notice the color and size are defined in the document header.
I can also define styles inline like this. Possible, but generally a bad idea.
Notice this para is back to blue.
This is teal
Summary
Well, that is the basics. If you would like to get started playing around with CSS, download the example document. Change some colors, add new rules, have fun. It doesn't take much to get started with CSS.