6.1 Fundamentals of CSS

Style sheets word has been mentioned many times in the previous sections. In particular, you would have noticed that certain HTML elements and attributes are not supported in XHTML and there you should use styles instead. This chapter explains about these style sheets.

Using style sheets to control how your Website looks to separate content from presentation, which is a good thing. This way, when you want to change the look and feel of your Website, all you need to change is the style sheets.

Style sheets, or say Cascading Style Sheets (CSS), provide a method for specifying formatting in an HTML document. When you use CSS, you can avoid using most or all of the HTML tags and attributes that control formatting. The main advantage of CSS is that it allows you to define the formatting of a Web page separately from the content of the Web page. Let us look at an example:

Suppose you want to define a special appearance for certain text in your Web pages: larger than normal text in the Palatino font, green. Using regular

HTML tags, you would do it like this:

<font size=4 facePalatino color=green>This is the Text </font>

In fact, you would have to use this tag for each and every instance text that you want formatted this way. So, that’s fine for one time. But, then suppose your boss decided that he wants this text in Arial font, red. Guess what? Yes, you have to go through the entire page, and change each and every tag. This is not at all cool.

But, what if you had used a style to define this special text? Here’s what the style definition would look like:

.special {font-family: Bazooka; font-size:14pt; color: #0000FF; }

And here’s how you would apply it to text:

<p class='special'>This is the text</p>