Cascading Style Sheets (CSS)

If you've ever created a website without any CSS codes, you've most likely used a lot of <font> and other tags to control how your pages look. This ties the presentation of your site with its content, making it hard to modify your website design. If you later decide to change the color scheme or fonts used in your site, you'll have to edit every page in order to do this.

Cascading style sheets (CSS) provide a solution to this problem. Instead of defining the website design in each and every page, you can use a style sheet to control the overall layout of your site. Then if you want to change how your site looks, you simply modify the style sheet.

What do cascading style sheets look like?

Style sheets are made up of one or more rules that look something like this...

Each rule begins with a selector, which is H1 in the example above. A selector is often one or more HTML tags, and the declarations inside the rule describe how those elements should appear. The above CSS codes will force all H1 tags on the page to use a 12 pt Arial or Helvetica font in green text.

You can also use classes as selectors, which aren't tied to specific HTML elements...

Note that .orange doesn't mean anything special - you can use anything as a class name provided that it starts with a period and is composed of a single word (spaces and underscores are not allowed).

To apply a class to an HTML tag, you use the the class attribute (which was introduced in HTML 4.0). For example, to highlight important text on your page, apply the above style to a <p> tag...

Note that the period before the class name is not included.

How to use style sheets?

There are three ways you can use cascading style sheets...

1) Embedding CSS codes into the style attribute of HTML tags. Most HTML tags now support this attribute, but by applying styles within your tags, you're missing out on the benefits of keeping your content separate from your design. For example...

2) Embedding CSS codes using a style block in the HEAD section of your HTML document. A style block is composed of an opening <STYLE> tag followed by a set of CSS rules followed by a closing </STYLE> tag.

For example, you can make your text links change color when the mouse passes over them by inserting these CSS codes into the HEAD of your document...

While this method is better than applying styles on a tag-by-tag basis, it still ties the style to a particular HTML document.

3) Linking external cascading style sheets to HTML documents using a <LINK> tag in the HEAD section of every document you wish to apply the style sheet to. For example...

Once you've linked a style sheet to your pages, any changes to that style sheet will apply to every HTML document it's linked to. This is where the benefits of cascading style sheets are most apparent, since you no longer have to update every single page in order to overhaul your website design.

The drawbacks of cascading style sheets

Right now the biggest problem is the imperfect style sheets implementations that today's browsers offer. Although recent browsers include fairly complete CSS1 support, older browsers - Internet Explorer 3 and Netscape 4 in particular - are not only incomplete in their CSS support, but what they do support is often very buggy as well.

This makes it very difficult to create CSS codes that work across all browsers, since what looks good in one browser may look awful in another.

This is where products like TopStyle CSS editor come in. TopStyle helps you create cascading style sheets that work across browsers by alerting you of problems as you work. If you're using the full version of TopStyle, the style checker will validate your code, warning you not only of errors in your style sheet, but also of bugs in popular browsers that may affect its rendering.

Only a very basic overview of cascading style sheets is provided here - several important topics, such as positioning, are even not mentioned.

CSS tutorials

HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Daniel Shafer This book is a comprehensive guide to learning and applying the principles of CSS to your website. It also includes the most complete CSS property reference of any book ever written about CSS - with over 150 CSS properties described.

For more books on CSS see Resources: Books on Web Designing.

You may also find it helpful to browse these online CSS tutorials...

• General Cascading Style Sheets Info
• SitePoint CSS reference

• Overview
• Cascading Style Sheets (CSS)
• HTML Frames
• JavaScript
• PHP
• CGI Scripts
• .htaccess file