The Basics of Cascading Style Sheets (CSS)

  • By: rcable
  • On: 09/19/2009 19:10:02
  • In: CSS
  • Comments: 0

Back in 1995 when I started learning how build web pages using HTML (version 1.0) we didn't have cascading style sheets and each individual HTML tag had only a few simple attributes or properties you could use to control the limited styling of each element making web page and site maintenance an absolute nightmare.  A good example is the font tag and even though browsers still support it, it is a really lousy way to design a website.

<p><font size="2" color="blue">Sample Text</font></p>

It was not uncommon back then to have a hundred font tags in your page and when it came to make a change like font color from blue to red you would have to make that change manually.  Many web designers spent countless hours going through thier code everytime a client changed their mind looking for and changing the many instances of that specific tag. 

To solve this problem, the World Wide Web Consortium (W3C) created CSS.  In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file. Since all modern browsers support CSS so you can now define styles for HTML elements, elements with specific ID attributes and create custom classes.

I believe the easiest way to think about the relationship between CSS  and HTML is that it allows you to separate style from structure. So to make this simple, HTML is about the structure of the document and CSS is about the style or display of the elements in the page.

To address the same problem today we could use a stylesheet to apply a style to the paragraph tag <p> or we can even apply style directly in to the tag using the style attribute.

New code using CSS w/ inline style:

<p style="color: red">Sample Text</p>
As you can see we have discarded the font tag all together and simply added a style attribute and told it that the color is red.

CSS Hierarchy

 There are three methods you can use to apply CSS to your HTML elements and each one can be overridden by the next.

  1. External Stylesheet or .css file
  2. Style Tag used inside the HTML document - Overrides styles set in the external style sheet.
  3. Inline style attribute used inside the HTML tag itself - Overrides all other styles set in the previous methods.

If you were going to use the above sample in the external style sheet then or inside the style tags in the HTML it would look like this...

<style>
     p {
            font: 12px Arial;
            color: red;      
}
</style>

You can probably start to see some patterns here. Each attribute like "font" is followed by a colon then the specification followed by a semi-colon that signifies this is the end of this line.

Hopefully you're getting the idea now that using style sheets to apply stylization to the various elements on your website was a huge breakthrough for web designers.

Those are the basic concepts of CSS. I'll be posting more articles on css along with some samples so you can check it out for yourself.


Comments

There have been no comments made on this article. Why not be the first and add your own comment using the form below.

Leave a comment

Commenting is restricted to registered users only. Please register or login now to submit a comment.