What Is CSS? - Beginner’s Guide To Cascading Style Sheets

Warning: This post as the title may indicate is for REAL beginners to CSS

CSS has been around for some time and has gained a lot of popularity in recent years, specifically with designers who are concious with producing W3C compliant HTML/XHTML code.

It has been said that clean, compliant code helps the search engines crawl the website more efficiently and logically thinking, this is hard to argue.

CSS is an acronym for Cascading Style Sheets and it refers to the file or files which govern the visual formatting of elements on a webpage.

And now for the simple explanation. A style sheet can define or redefine the way traditional HTML elements are displayed to the user such as font, size, color and positioning to name a few.

The simplest example can be shown with the <h1> heading tag. Using this tag traditionally produces text in an ugly large size. There’s not really much point to use the <h1> tag “as is” because you will end up with a big chunk of text that’s going to mess up the look of your site. However for search engine optimization purposes these heading tags are great! So what are we going to do?

Let’s say the code starts off like this:

1

<;h1>;Heading Text Here<;/h1>;

Before CSS was hot stuff, the answer to the $64 question was:

1

<;h1>;<;font size="3">;Heading Text Here<;/font>;<;/h1>;

Additionally, if you wanted to change other properties as well such as color or font-family you had to do more:

1

<;h1>;<;font color="Red" face="Arial" size="3">;Heading Text Here<;/font>;<;/h1>;

Quite a bit of additional code as you can see.

Now with CSS, you can leave the code in it’s original state, and specify all the visual properties in the CSS file. The CSS file will have a definition such as below:

1
2
3
4
5

h1 {
color: Red;
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
}

In English we just wrote a new rule that “all <h1> elements should be red in color, be 100% of the base font size, and the font face should be Arial, followed be Helvetica then sans-serif.

You’ve just finished counting the number of characters in the CSS example and about to tell me “Daichi, you iiiiidiot. This doesn’t save me any time at all. I’ve typed more characters doing it your way than the original way!”.

Ok you are right in this example alone but I have a counter argument! What if you needed to define your <h2> tags in color, font and size and you had four <h2> tags on the page. You would only have to write the CSS definition once and it would apply to all 4 cases! So there, now we’re even. I have some more ammo. What if you decide later that pink is the new black (or whatever they call it) and you want to go and change the color….. you only have to change it in one place!

What about the search engine spiders who come to your site and crawl through less code to get to your important content? They will be happy too

This is such a basic intro to CSS that I feel like I need to ORDER you to keep reading the stuff I post here…. because really, there’s a lot more to CSS than what you’ve just read (you did read the warning right?).

Many years ago when I first heard of CSS, I found it difficult to grasp and didn’t give it enough thought. I couldn’t understand what all the fuss was about and thought I would just do a “find and replace” when I needed to change the same thing in multiple places. Since I have been in the SEO game, CSS is something I can not live without and I believe that it gives me the edge when designing and planning websites to rank well in search engines. So my advice to you (and it’s free) is to take a good look at CSS and my future posts right here!

This entry was posted on Tuesday, August 28th, 2007 at 7:08 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

• No related posts