• home
I
• contact us
I

Search

Cascading Style Sheets Basics

If you have experimented with HTML or popular editors like FrontPage to build a website, and didn’t use cascading style sheets, you probably have come across most of the problems that cascading style sheets were created to solve. For example, if you don’t use cascading style sheets, you will have to define the different web page attributes in each and every page you build, in order to preserve your site’s look and feel. This means that every time you create a new page, you will have to specify the background color, the font type and size, the color of your links, the type, size and color of your headings, the width and borders of your tables, etc.

As a consequence, your pages will be larger and load more slowly. However, the biggest problem will come when you decide to make a change in the look and feel of your site (for example: to change the color of your links). You will have to open each and every page you’ve ever built and manually change the link colors. You can avoid all that with cascading style sheets.

What are cascading style sheets?

A cascading style sheet is a separate file that contains all the style rules that tell a browser how to display a web page. You can use a style sheet to define the attributes that are common to all pages, for example, the background, the link colors, the font type and size, the width and borders of your tables, the size and color of your headings, etc. You can also use them to create specific attributes (called "classes") that you can refer to from any of your web pages at any moment.

How do I use a style sheet?

A style sheet is saved as a separate document (you can create it using a popular text editor, like Notepad, and saving the file with a .css extension). If you want a web page to follow the rules outlined in a style sheet, the web page must be linked to the style sheet. When a browser requests a web page, the web page will link to the style sheet, which will in turn instruct the browser to display the web page using the correct style attributes.

Summary: the advantages of style sheets

Style sheets ensure visual continuity throughout a site. By referring to the same style sheet, all pages in a site can display the same stylistic qualities. Style sheets simplify your site’s maintenance. By concentrating your style definition in one external file, any change you implement in your style sheet will instantly apply to all the web pages linked to it. By pulling the style definitions out of your pages, you will make them smaller and faster to download. This will allow you to make more efficient use of your web server space and your data transfer allowance.