Cascading Style Sheets (CSS) standards were originally introduced in 1996, but like so many technologies introduced by the W3C, the way the information was presented confused many non-geeks. Consequently, even 8 years later, many webmasters still haven’t taken advantage of this *huge* time-saving technology.
A cascading style sheet is a set of instructions in a linked external file or within the source code of a page that tells a browser how to render page elements – text, tables etc.
Advantages of using CSS
How can implementing CSS help you? Let’s say you have a 50 page web site and the main body text you use is 10pt. Times New Roman. This would entail numerous instances of repetition in your coding:
<p><font face="Times New Roman" size="2">This is a line of text </font></p>
If you wanted to change the font to Arial, you would need to edit every page to make the changes. By using a *linked* style sheet (we’ll cover the differences between different kinds of CSS a little later in this tutorial) you only need to change one file and then the entire site would be updated.
Using CSS also makes your coding a lot trimmer through making the repetition of formatting instructions obsolete. Trimmer code = faster download times and less bandwidth usage.
Types of Cascading Style Sheets
There are three types of CSS
1. Inline
2. Embedded
3. Linked (external)
The term Cascading Style Sheets is a little misleading; only one type could be really considered a “sheet”, i.e. a separate page – that is the “linked” or “external” style sheet type – and this is where the real power of using CSS lies.
The “cascading” refers to the hierarchy of control:
– Inline styles takes precedence
– Then Embedded styles rules follow
– The Linked external style sheet instructions will be used if In line or Embedded instructions are not present present.
How to use CSS:
Let’s start with the most useful kind :
Linked External Style Sheets
Control an entire site from one file! This is just a text file, saved with the tail extension of .css that contains a series of instructions. When a page links to this file, the browser references the CSS instructions to render the page.
Exercise – using an external style sheet
The easiest way to understand CSS is to see it in action.
Create a text file and save it in the root directory of your folder where you store your web pages as test.css. In the text file, add these instructions only:
BODY {
font-family: Arial;
font-size: 10pt;
}
Now start a new web page and save it as testcss.htm
Place the following line between the <head> and </head> tags
<link rel="stylesheet" type="text/css" href="test.css">
This line “attaches” the sample.css file. It instructs the browser to refer to the CSS file for element rendering instructions.
After you’ve ensured that both files are saved, close the page and then open it again. Try typing some text on the new page and then previewing it. You’ll notice that the text is now in Arial 10pt.
Try changing the font name in the test.css file to Verdana and the size to 14pt in sample.css, save it, also close testcss.htm and open it again. Type some text – it should be displaying in 14 pt. Verdana
Style sheets can be as simple or as complex as you like – there are so many elements that can be included in your CSS.
Let’s try a few more things – open the test.css file and replace the BODY statement with this:
BODY {
background-color: #ffffff ;
margin-top: 0%;
font-family: Arial, Verdana;
font-size: 10pt;
color: #0099CC;
}
In the above examples, we’ve only applied styles to the basic body element; but this isn’t even scratching the surface of CSS controls.
Let’s say you want to use 12pt. Arial as body text, but you also use tables where you wish to use 10pt Arial, and in a different color:
BODY {
background-color: #ffffff ;
margin-top: 0%;
font-family: Arial, Verdana;
font-size: 12pt;
color: #0099CC;
}
TD {
font-family: Arial, Verdana;
font-size: 10pt;
color: #000000;
}
The “TD” stands for Table Data – the cells within a table.
CSS gives you incredible flexibility. Here’s another example. Your main body text is in 12 pt. Arial, table text is in 10pt.; but you have other tables that use 8pt.
Since you’ve already used the TD element in your CSS file, you’ll need to create a new “class”. Here’s an example of this scenario:
BODY {
background-color: #ffffff ;
margin-top: 0%;
font-family: Arial, Verdana;
font-size: 12pt;
color: #0099CC;
}
TD {
font-family: Arial, Verdana;
font-size: 10pt;
color: #000000;
}
.smallblack {
font-family: Arial, Verdana;
font-size: 8pt;
color: #000000;
}
When creating your own classes, they can be called whatever you like, as long as it is a single word and is preceded by a “.” as shown above. If you’re coding with a text editor, you’ll need to add a class=”smallblack” (without the preceding “.”)to the element e.g:
<table border=”0″ cellpadding=”5″ cellspacing=”0″ class=”smallblack”>
If you’re using as WYSIWYG editor such as FrontPage or Dreamweaver, applying the new class is simple – just highlight the element; then select the class from the dropdown selector on the menu bar – it’s usually on the left hand side in FrontPage.
These examples are just to whet your appetite. With CSS you can customize just about any element on your web pages; from headings to scrollbars and form background colors to classy image borders.
This is just a small taste of what can be achieved with CSS – for more resources and references, see the end of this article.
Other CSS types
Inline Styles
Inline styles can be added individual html tag in a page by using the “style” attribute – e.g.
<p><font style="color: blue">This is a line of text </font></p>
If you have an external style sheet that states all your regular body text should be black, but you want to use blue for one block of text, the inline style can be introduced to override the linked style sheet statement for that text block.
Embedded Style Sheets
Embedded style sheets are used for controlling the display of elements on an individual page by adding formatting instructions between the <head> and </head> tags. Embedded styles will also override instructions contained in a linked style sheet for that page only.
<HEAD>
<TITLE> </TITLE>
<STYLE TYPE="text/css">
<!--
H1 { font-family: Arial, Verdana;}
P { color: #0099CC }
-->
</STYLE>
</HEAD>
CSS Compatibility issues
CSS, like many other coding technologies, is constantly being developed. CSS1 was released in 1996 and CSS2 was launched in 1998. Even though it’s nearly 6 years since the second set of standards was developed, some browsers are still not compatible with all those standards.
This means that some CSS2 instructions you may implement won’t be correctly translated by versions of web browsers more than a couple of years old – so for this reason, even now, sometimes it’s best to play it safe and stick with CSS1 standards.
Related learning resources:
If you’ve never created a CSS compliant site this book, “HTML Utopia” will get you up and running quickly. It also contains an extensive CSS Property Reference Guide and tips which can serve as a excellent desk reference. Chapters available for free download
W3schools has some excellent tutorials and references for CSS – well worth checking out.
Forget about frames – try Includes! – Still stuck using a framed site because you feel it makes web site administration and updates easier? Perhaps you don’t realize the number of disadvantages of frames. Read this article for the lowdown on framed sites and suggestions on alternatives.
Michael Bloch is the Business Operations Manager of ThinkHost, a USA based company that has been providing hosting solutions to the world since 1999.
