Score with Cascading Style Sheets!

    March 24, 2003

CSS is an exciting feature of HTML that gives Web-site developers more control over how they want their pages displayed by specifying how each element should appear in a style sheet. Prior to the advent of CSS, the layouts of HTML documents were left up to the browsers, whilst HTML tags merely served to define a document’s contents.

This reflected the preoccupation of the Web’s initial users (mostly from the academic or scientific circles) with content and not aesthetic value. However, the latter became more of a concern as the number of communities and users rapidly increased. The continued evolution of the Web and the browser wars led to the World Wide Web Consortium (W3C) stepping in to standardize HTML and the creation of CSS. Anyways, enough with the history lessons – time to look at how CSS can help you!

<I><b>1: </b><html>
<b>2: </b><head>
<b>3: </b><style type=”text/css”>
<b>4: </b>body {background-color: white}
<b>5: </b>h1 {color: red}
<b>6: </b>font {font-family: “Arial”; color: blue}
<b>7: </b></style>
<b>8: </b></head>
<b>9: </b><body>
<b>10: </b><h1> Hello World!!</h1>
<b>12: </b></body>
<b>13: </b></html></I>

The sample code above is an example of an internal style sheet because it has the <style> tags located in the head of the HTML document. This will help define what the elements ‘body’, ‘h1’ and ‘font’ will look like. The actual syntax is made up of a selector, a property and a value:

<I>selector { property: value }</I>

From line 5, you can see that ‘h1’ is the selector and ‘color’ is the property to which the value ‘red’ is assigned. You can have multiple properties (line 6 has font-family and color) but they have to be separated by a semi-colon. Now how about changing that ‘red’ to ‘fuchsia’? Done? Taadaa!! Not only does the word ‘fuchsia’ sound cooler but you have also changed the color of the font in the page!

So how on earth is this useful? Well changing the value of ‘h1’ is now going to be reflected throughout this entire document. As we shall see shortly in the case of external style sheets, a single change like this can also be made to affect an entire web site!

External style sheets require the layout information to be stored in another file with a .css extension. This helps the developer to achieve the separation between the content and look of the website. So by making changes to this file, you can update the appearance of your website. To create this file, move lines 4-6 to another file and call it ‘worldCup.css’ and get rid of lines 3 and 7. Next step is to copy the following code after the <head> tag:

<I><link rel=”stylesheet” type=”text/css” href=”worldCup.css” /> </I>

All this line does is to simply say to the browser, “C’mon lad, hurry up and look in that ‘worldCup.css’ file for the silly layout information before the game comes on the telly.” While it may not say that in those exact words, any change in the ‘worldCup.css’ file will be reflected throughout all the files that are linked to the style sheet. This can be extremely useful when having to update huge sites! The use of style sheets can also make for smaller, faster pages because you now do not have to update every single tag, which save on time. It is also ‘browser-friendly’ and will not die on you if the browser you use does not support the use of style sheets (IE 4.0+ and Netscape 4.0+ support CSS).

Another way of using style sheet is to use inline styles, which is merely plopping your style sheet rules into your document. <b>Take a look below: </b>

<I><b>1: </b><html>
<b>2: </b><head>
<b>3: </b></head>
<b>4: </b><body>
<b>5: </b><h1 style=”color: red”> WORLD CUP 2002!!!! </h1>
<b>6: </b><font style=”color: fuchsia”> GOAAAAAAAAAAAAAAAAAAAAALLLLL! 7: </font>
<b>8: </b></body>
<b>9: </b></html></I>

This is similar to the first example we looked at with the noticeable exception being that the style tag is not included between the <head> tags. Instead the developer would have to add it after the element’s tag by typing ‘style = …‘ The problem with using inline style is that it defeats the purpose of separating content from layout but that does not mean it is bad.

Now if you are wondering about what might happen if you have a combination of these styles in the document, CSS works has it’s order of importance decreasing from inline to internal and finally to the external style.

Now looking at the replay, we see that we learnt a little bit about the history of CSS and how it can help us separate the content from the layout in order to make Web-site development easier and faster. We covered the three main ways in which the style sheets were used – namely internal, external and inline. However, everything that I have written about so far is actually a mere introduction to CSS and if you would like to read more about it, there are some resources that have been included below for further reading. And it is all over!!! The referee has blown his whistle to signal full-time! The game is over but hopefully you are on your way to reap the benefits of CSS for your own website! Hope you enjoyed this article! Until next time!

CSS Tutorial:

Web monkey tutorial:

iEntry provides free highly informative newsletters for web developers, IT professionals and small business owners. We deliver 50 million email newsletters per month and have over 4,000,000 unique opt-in subscribers. From our extensive range of email newsletters we can provide you with a selection of newsletters that best meet your interests.