Cascading Style Sheets

What is CSS?

CSS stands for Cascading Style Sheets.  It is a simple styling language which allows you to attach style to HTML elements to change their appearance.  Every element type can be declared with a unique style, e.g. color, size, borders, margins and positioning.

Style Sheets work like a template for a desktop publishing application.  They contain a set of rules that declares the presentation for specific elements.

Style sheets exist to enable the following principle to be put into practice:
Web pages should separate content from appearance.

As a developer, this means that the information in your web site should go into your HTML files, but HTML files should not contain the rules on how that information is displayed. The display rules should go into CSS files.

Why Use CSS?

For anyone who has created a Web site, you are probably very familiar with the use of tags such as <font>.  This tag, as with many others, dictate the presentation of the content (mainly text) of your web pages.  By tying the presentation to the content, when you want to change the look of the content, then you edit the presentation (style) for each piece of content, on each page, that you want to change. 

But a problem arises when you have a lot of content and multiple pages.  If you want to retain consistency throughout your site and you want to change the look of some of your content, then you have to go to each page where that content resides and make changes to the values of the attributes of all the tags associated with that content. 

For example, say you had a website of 100 pages, and on each page you had the phrase "We Deliver", and you had <font> tags for that phrase that made the color of the text blue.  Lets say that you decide that you want the text to be red.  Then you would have to go to each page and make one edit change per page for a total of 100 edit changes.

Now lets say that you had 10 things that you wanted to change on each page.  Now we are talking about 1000 individual changes.  You can easily see that maintaining and updating your website would become a real PAIN.

The solution to this problem is Cascading Style Sheets (CSS).  It is a mechanism that has been developed to meet the needs of Web designers and users.  Instead of defining the Web site design in each and every page, you define the presentation in style sheets, and they will control the overall layout of your site.  Then if you want to change how your entire site looks, you simply change the style definitions in the style sheet.  This way is so much easier!

What Do External Cascading Style Sheets Look Like?

Style sheets are made up of one or more rules that look something like the following:

h1 {
font-size: 26px;
font-family: Times New Roman, Times;
color: #0000FF;
text-align: center}

• Each rule begins with a selector, such as h1 in the example above.  A selector can be one or more HTML tags. 

• Following the selector is a declaration that describes the display rules.

• The declaration is specified with text and completely enclosed within { } brackets.

• Each rule thus tells how elements should be displayed on an HTML page when viewed by a web browser

The above CSS code says that for all h1 tags, use a 26 pixel, Times New Roman or Times font with blue text and it should be left-right centered on the page.

How Do Style Sheets Work?

So we know that style sheets are plain text files (or they can be text embedded in the head of an HTML document) and they are used to separate the content from the display appearance. The content of a page goes into an HTML file and the display rules go into a style sheet.

Finally, we want to display this content in the right way using a viewer's browser.

A web browser picks up the set of display rules or instructions and these are actually suggestions for a web browser on how to draw the page, not "written in stone" rules.  Why?  Because CSS does not force a browser to display a page in particular way, it merely suggests to the browser how the page should be displayed.  This is an important distinction.

Different browsers are developed by different companies and so they all don't work exactly same.  Just like when you buy TV.  Each TV is manufactured a little differently and will display a picture a little differently.  When you go into the store to buy a TV, have you ever looked at a bunch of them sitting in a row while they were turned on?  The pictures do not all look exactly alike.

Some are more clear, while others seem a bit fuzzy.  Some are brighter, while others seem a bit dim.  One picture seems a little bluish, while another seems a bit on the yellow side.

Cascading style sheet languages such as CSS allow style information from several sources to be blended together.  These could be corporate style guidelines, styles common to a group of documents, and styles specific to a single document. By storing them separately, style sheets can be edited individually and reused in various locations, which simplifies authoring and makes website design much easier.

Here is an example that uses the LINK element.  This statement is placed in the HEAD section of the HTML page and it tells the browser to get it's STYLE information from the page called styles.css.

<link rel="stylesheet" type="text/css" href="styles.css">

The Drawback of CSS

Right now the biggest problem with using Style Sheets is that different browsers don't implement all style sheets in the same way.   Recent browsers include fairly good CSS1 support but older browsers, such as Internet Explorer 3 and Netscape 4 do not support it very well.  What they do support is often very buggy. 

But don't let this be a deterrent for you.  Style Sheets are widely used throughout the Internet and browser suppliers will continue to move in the direction of supporting Style Sheets.  For  web developers, style sheets are the best thing since "Sliced Bread".

Further References

It is not my intension to try and teach you about all of the tags, elements, attributes and values that you need to know in order to write proper CSS code.  It's much too broad a topic to try and learn with a few web pages.  It will take some study on your part, just like learning to write HTML or learning another language, it takes some time.  But in the long run, you will find using it to be extremely beneficial.  I merely want to familiarize you with CSS and encourage you to use it in your web work.

The first website I designed had about five pages and I did not use CSS.  I did not know what it was at the time.  I started learning CSS and used it on my second website and was amazed at how much time it saved me, not only in making changes, but in writing new HTML code as well. 

Below are some very good online resources to get you started.

The Complete CSS Guide by Web Standards Software and Learning. - This website has one of the best presentations on CSS information that I have found on the web.  Good explanations and the information is very thorough.  It covers pretty much all aspects of CSS.  If you can spend some time here, you will learn a lot:

The World Wide Web Consortium (W3C) provides standards, specifications, and guidelines for technologies that are commonly used on the Internet.  Here are some of their pages concerning CSS:

1. Introduction to style sheets

2. Cascading Style Sheets, level 1

3. Cascading Style Sheets, level 2 CSS2 Specification

4. WC3 organization Tutorials.
    

Zen Garden - This site is a great example of what can be done using CSS.  They have static content which then has many different style sheets applied to it and you'll be amazed at the different looks that are rendered by the various styles. 

Back To Top