Cascading Style Sheets Basics

If you're not a web designer, but have neverthelessexperimented with HTML or popular editors like FrontPage to try tobuild a website, if you didn't use cascading style sheets you probablycame across most of the common problems that cascading style sheetswere created to solve.

If you don't use cascading style sheets:

You will have to define the different web page attributesin each and every page you build, in order to preserve your site's lookand feel. This means that every time you create a new page, you willhave to specify the background color, the font type and size, the colorof your links, the type, size and color of your headings, the width andborders of your tables, etc.

As a consequence of (1), the size of your pages will turnout to be many kilobytes more than if you didn't have to repeatedlyspecify all those attributes in every page.

As a consequence of (2), you will incur in higher hostingcosts, since you will need more server space and a higher data transferallowance. In addition to that, your pages will take longer to load.

However, the biggest problem will come when you decide to makea change in the look and feel of your site (for example: to change thecolor of your links). You will have to open each and every page you'veever built and manually change the link colors.

At this point, you've probably concluded that there must be abetter way. Fortunately, there is, and that better way is to usecascading 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 arecommon to all pages, for example, the background, the link colors, thefont type and size, the width and borders of your tables, the size andcolor of your headings, etc. You can also use them to create specificattributes (called "classes") that you can refer to from any of yourweb pages at any moment.

How do I use a style sheet?

A style sheet is saved as a separate document. If you want aweb page to follow the rules outlined in a style sheet, it must containa link to the style sheet. When a browser requests a web page, the webpage will link to the style sheet, which will in turn instruct thebrowser to display the web page using the style attributes defined inthe style sheet.

What are the advantages of style sheets?

Style sheets ensure visual continuity throughout a site. Byreferring to the same style sheet, all pages in a site can display thesame stylistic qualities.

Style sheets simplify your site's maintenance. Byconcentrating your style definition in one external file, any changeyou implement in your style sheet will instantly apply to all the webpages linked to it.

By pulling the style definitions out of your pages, you willmake them smaller and faster to download. This will allow you to makemore efficient use of your web server space and your data transferallowance.

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

The Low Down on Cascading Style Sheets
CSS has been around for more than 10 years already beginning in its development in 1997 but it seems it has been in the public consciousness for only a relatively short time. The reason for this is because it wasnt until the year 2000 that many web browsers began...
How To Design Your Web Site With CSS
Cascading Style Sheets (CSS) allows you to create fast loading pages, increase your search engine rankings, and modify your whole site with one style sheet. So why don?t more people use them? This is because they got so used to html design and are afraid or too lazy to upgrade their skills...
Dreamweaver CS3 and Cascading Style Sheets
Cascading Style Sheets (CSS) is a W3C standard mark-up language for defining the appearance of web pages. The use of CSS allows developers to fully separate the content of the page from its presentation, speeding up the development process and also making the...
Search Engine Friendly Web Design - 3 Ways to Use CSS
This article will point out 3 simple and highly effective web design techniques that use cascading style sheets to improve your web design and make your website perform better in the major search engines.
Cascading Stylesheets Advantages
If you think that CSS is something to be ignored then think again. This interesting article will show you all the advantages of CSS and will explain how it can help you.
Cascading Stylesheets Advantages: 5 Reasons To Use CSS
If you are not quite sold on why you should start using CSS then take a look at this interesting article. It might be all you need to convince you that it is time to try something new.
Cascading Stylesheets Advantages: 5 Reasons To Use CSS
Because you are able to create a separate Stylesheet and link it to all your webdocuments, you have great control over how your website looks. So if you want to change a certain aspect of your page, you only need to alter one file: your Stylesheet!
Make Your Website Rank Higher in Major Search Engines! Benefits of CSS in SEO
Cascading Style Sheets (CSS) is a style sheet language that permits web designers to attach style like spacing, color, font, etc. to HTML documents. Cascading style sheets work similarly to a template;
Web Design The Easy Way - Some Quick Tips To Get Started
This article gives you Web Design the Easy Way - Some Quick Tips to Get Started. The author makes an easy to read statement that is rich with the wisdom of getting to basics from the most practical point of view.
The Power of CSS
CSS or cascading style sheets are used to create a set of styles that can be applied to your fonts, tables and most other attributes of your web page. These styles allow you to create a much cleaner, faster web page that search engines love and also makes life much easier on the designer when global...