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
For more in-depth informaton about cascade style sheets, read our cascade style sheets articles