TyCamTech.com

It's fairly obvious where the term Style Sheets may come from since CSS is essentially a tool for styling the content on a website. It's general purpose is to take the images, text and other stuff on a page and style them such that it looks nice and works well in terms of navigation and flow.

But why did they add 'cascading' to the title? Once you learn why, and get used to it, you'll be very very glad they did! Cascading Style Sheets (CSS) is not named as such by accident. The common thing to do when learning CSS is to give each unique element it's own ID and common elements Class names and to set style sheets for every single element individually or in groups and to have one really big list of CSS attributes to call on to controll it all.

The truth is that it doesn't have to be that way. CSS can reference HTML elements as they are, without the use of an ID or Class name... and this is very important in the cascading style that you really should get used to using.

The very first thing I want you to learn is that CSS works like a flow chart, it starts at the very top and works it's way down. This gives you the ability to set something once, and modify how it's set further down. You may ask, why would you want to do that when ALL of the css is loaded before a web page is? Well, the best way to explain it is to show you.

View this page and then view the CSS below which creates this page:

The first thing you should notice is that I used a * in the first position. This tells the CSS to work on EVERYTHING. It says that every piece of text on the page should be arial and size 11px. So now we don't have to set it anywhere else for any other elements.

The second is that I used the 'a' to tell CSS to affect all links on the page. To make sure they have no underlines and to give them spaces apart from each other. You'll notice that all of the links on the page do have those attributes, in the top menu and the bottom menu.

The header, content and footer are just for spacing but notice the last position? #footer a tells CSS to affect links in the div with a 'footer' ID! This makes them bold and green.

We want all links to have no underlines and we want them all spaced but we want the bottom links to have these attributes different than the top links... we could put each set of links into their own special id's, or class names but that would require telling them both to be arial, both to be 11px, both to have no underline and both to have spacing. That would be a LOT of doubling up on instructions that really isn't needed.

Instead, we set everything up near the top that will pertain to the majority of the page and the rest of the site... and override that information for little bits and pieces as needed further down the CSS and it inherits the rest from what is already set. This is called, cascading!

This is extremely useful for setting all your margins and padding, font information, header tags, lists... and other elements that will be common through out your site. Then override small pieces of information as necessary instead of having to do things more than once!