Beginners Guide to Cascading Stylesheets - CSS

From Michael Bloch's "Taming The Beast" website

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 12 years later, many webmasters still haven't taken advantage of this *huge* time-saving technology. If you're one of the many confused about CSS, this guide to Cascading Style Sheets may help!

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:

< 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

Inline
Embedded
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

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: #64A6BC;
}

The background-color sets the background color for the page in hex values
The margin-x sets the size of the margins around the page (you can also use bottom, left and right statements).
The multiple fonts are listed in case a person doesn't have a particular font on their computer- in that case the next font type will be used. You can add as many fonts as you want, but it's recommended that you only used similar font types.
The font-size is ummmm... ;)
The font-color is the color that the font will be displayed using hex values.

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: #64A6BC;
}

{
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: #64A6BC;
}

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.

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:#64A6BC }

</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.