Create Cascading Style Sheets

A Cascading Style Sheet (CSS) is a plain text file that describes how an html file is rendered in a web browser and for print. Style sheets can also be embedded directly in a web page but that defeats one of the major benefits of using them; separation of presentation from specific content.

When you create cascading style sheets you place all your presentation formatting in one file, a .css file, and link it to all the pages in your web site which means that changing the visual appearance of your whole web site is as easy as changing one file as opposed to recoding all files in your site.

CSS Set of Rules

CSS are a set of rules with a specific syntax. CSS syntax includes statements and rule sets that define what should happen to HTML elements in a web page. A style can be applied to any HTML element. Rule sets consist of a selector, a declaration block, and the declarations that apply formatting to the selector and is also called a CSS statement. An example of a rule set for an HTML h1 element could be:

h1 is the selector or property name. Rule sets always start with a selector and are surrounded by curly braces. The declaration block is all the declarations inside the curly braces. A declaration is a property name and a value separated by a colon. So in the above example there are five declarations in the rule set. A style sheet can include one or many rule sets depending on your needs.

CSS also allows you to style items in the same HTML element differently by using classes and ids, which are used inline in an HTML file and declared in your style sheet. A class selector can be used over and over in an HTML file and is generally used to style text and other elements other than layout items although they can be used in layout items as well. An id can only be used once in an HTML file and is generally used for layout elements such as a div. A class selector is started with a period followed by the class name (.classname). An id selector is started with a number sign and followed by the id name (#idname).

An example would be:

Say you’d like certain hyperlinks not to be bold and perhaps in a different color. In your HTML file you could specify how you want them rendered in the following way:

Because you declared the class and the id in your CSS file it’s very simple to change styles for selected HTML elements without changing all similar HTML elements.

How to Create Cascading Style Sheets

1. Open a blank text file
2. Add your rule sets, class and id selectors
3. Save your file with a .css extension
4. Link your style sheet to your web page
5. Test, test, test!

Once you’ve created your style sheet you’ll need to link it to your HTML file. To link a style sheet to an HTML file you use HTML link element in the head section of your html document.

Browser Rendering Caveats

There are some caveats when you create cascading style sheets. If you are not trying to do something really zingy you shouldn’t get into any trouble. However, even when doing some of the most basic things you can break the correct rendering of your web page in some browsers. The key here is to test, test, test in as many browsers as you can. If you need to check your web pages in earlier versions of Internet Explorer there is a software program available that installs IE3, IE4.01, IE5, IE5.5 and IE6 and allows them to run side by side on Windows PC’s from Tredsoft. A way to see what your web page looks on a MAC with Safari is to go to BROWSRCAMP.com.

Cascading Style Sheets are a wonderful way to control the presentation elements of your web site easily. Below are links to other invaluable resources for learning CSS or when you run into a bug in rendering that you just can’t figure out.

Other CSS Resources

• Effective Use of Cascading Style Sheets by Jakob Nielson
• W3C (The World Wide Web Consortium)
• Position is Everything
• W3Schools
• 24ways.org Avoiding CSS Hacks for Internet Explorer
• CSS Play - Advanced Pure CSS navigation