Cascading Style Sheets Basics

If you're not a web designer, but have nevertheless experimented with HTML or popular editors like FrontPage to try to build a website, if you didn't use cascading style sheets you probably came across most of the common problems that cascading style sheets were created to solve.

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 of (1), the size of your pages will turn out to be many kilobytes more than if you didn't have to repeatedly specify all those attributes in every page.
  
  
• As a consequence of (2), you will incur in higher hosting costs, since you will need more server space and a higher data transfer allowance. In addition to that, your pages will take longer to load.

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.

At this point, you've probably concluded that there must be a better way. Fortunately, there is, and that better way is to use 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. If you want a web page to follow the rules outlined in a style sheet, it must contain a link 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 style attributes defined in the style sheet.

What are 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.

For more in-depth informaton about cascade style sheets, read our cascade style sheets tutorial.

You can freely reprint this article provided that you include the following resource box:

Mario Sanchez is a Miami based freelance writer who focuses on Internet marketing and web design topics.  He publishes The Internet Digest ( http://www.theinternetdigest.net ), a growing collection of web design and Internet marketing articles, tips and resources.  You can freely reprint his weekly articles in your website, ezine, or ebook.

To read other tips, visit our archive.

Get a short Email message every time a new tip goes online:

Your Email address:

Privacy Policy: Your e-mail address will never be sold, rented or given away to anybody. You can unsubscribe at any time.

Send This Article to a Friend: