Cascading style sheets

In the previous post, you learned what is HTML and XHTML and a few of the most commonly used tags. If you simply added a few more tags to your HTML vocabulary you could make some decent websites. But why would you want to stop there when there is the wide and wonderful world of Cascading Style Sheets (CSS) just over the horizon…

Pre-CSS: the dark age of website design

Before Cascading Style Sheets came into being in the world of website design, designers had to put detailed HTML tags into every web page. These tags controlled things like font size, font color, background color, line height, lists, etc. etc. etc. This was all fine and dandy if your website only had a few pages.

As the web grew so did the size of websites. Gone were the days of sites that had a dozen or two pages only. The next generation of websites grew to hundreds and hundreds of pages. News sites are a prime example.

Now imagine this:

For months and months you’ve slaved over a new website. On this particular day you just completed the 81st article page… then your boss walks in. “David, I need you to do me a favor. The headings of the article titles are just a little too small. Could you make them a touch bigger? Oh, and while you’re at it, make the font color a little more… uh… cornflower blueish.”

Well, after uttering a few choice four letter words under your breath, you hit the keyboard. You see, poor David now has to edit ALL 81 PAGES of the website for the new changes to occur.

There’s gotta be an easier way… and there is. It’s called CSS.

Life in the golden age of website design

The beauty of CSS lies in the fact that you can actually separate the style that handles how a web page is to be layed out and displayed from the actual content (text, images, graphics, etc.). Let’s take a gander at an image to clear it up a bit:

before

As stated above, the old way combined the style and the content together. But with CSS, you create an external file that holds all of the styles for the ENTIRE website. They are global styles. So now, even if you have dozens and dozens of pages and want to change some part of the style, then all you have to do is edit the one style sheet and all of the individual web pages will immediately show the new style:

css

This method of CSS uses an external style sheet. It is by far the most commonly used method. Each web page has a tiny little bit of HTML in it that tells the browser where to find the external CSS file and to use it to control the layout and style of the web page.

Simple, yet powerful!

There are two other ways to utilize CSS: inline styles and embedded styles. Both have the right place and time for their use… which in my experience isn’t too often (with that said, Newbie Website Design will mainly focus on the use of the external style sheet.)

So, what is that whole ‘cascading’ thingy?

The ‘cascading’ part of Cascading Style Sheets is sort of like trickle-down economics (if you’re old enough to know what that is.) If not, here’s a better explanation:

With CSS, once you declare a style — for example, the H1 heading will be the color blue — all H1 headings will be that color no matter where they are located on your website. The only way to make other H1 headings a different color is to declare those in a special way. In other words, the style will cascade all throughout your website unless you say otherwise. (You’ll learn how to do that in later posts.)

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *