Classes let you identify a content area regardless of the tags used to create
it and assign a style to it. For example, a <p> tag with header class
would look like this:
| <p class="header">This is the header</p> |
You can define rules for classes just as easy as for regular tags except classes always start with a period. Here's an example of a class declaration.
| .header { font-family: "ms sans serif"; font-size: 24pt; } .content { font-family: "arial"; font-size: 12pt; color: blue; } |
This makes it easy to set up a CSS definition that defines the style for the various elements in your page without having to hard-code each one. It's easier, saves time, and makes for smaller HTML files.
CSS lets you add styles to your pages in several ways. As we saw above, you can use the <STYLE> tag to add your style declarations at the top of each individual page. This is great when you only want to modify one page but a better solution is to put all your style declarations in an external file and link to them from your Web page. This way you can update your entire Web site by modifying just one file. Using the first example we could create a style sheet file named "styles.css":
| P { font-family: "ms sans serif"; font-size: 12pt; background-color: yellow; } H1 { font-family: "impact"; font-size: 35pt; color: blue; } |
and link to it by inserting the following within the <HEAD> of your Web page.
| <HEAD> <TITLE>Page Title</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="styles.css"> </HEAD> |
Finally, if you want to apply a style declaration to just a single HTML element, you can do that too. Here's an example.
| <font face="arial" style="background-color: yellow; font-size: 16pt;"> Inline Style Declaration </font> |
More HTML and CSS: 
