Quick Overview

CSS (Cascading Style Sheet) is meant to do one thing: manage the presentation of your site. This may sound simple but keep it in mind as we continue. An important thing to take away from that fact is that presentation is NOT the job of HTML. HTML defines the structure of your page (what’s a header, what’s a footer, etc). CSS takes that structure and does all the work regarding how that structure is presented.

The Wrong Way

To give you an idea of what CSS is meant to fix, take a look at this HTML code: Which shows up in your browser as something like this:

There are a number of potential problems here. For starters, it’s placing font and color information every time a new header or paragraph is drawn. Every new item on the site would need identical font and color definitions, even though they’re the same for each headline and paragraph. This amounts to loads of wasted bandwidth if you’ve got a lot of entries.
Next is the problem of scalability. If you’ve got 100 entries on this news page, and you decide that headlines should be red, you’ve got a lot of work ahead of you to change each headline tag to show the new color.
Third, and this is a matter of “proper procedure”, this page contains several elements that are “presentational”, not “structural”. The font, color, and linebreak tags all relate to how the page is presented and have nothing to do with the structure of the page. HTML is poorly suited to presentation, that job is best left to CSS, as we’ll show below.

Designing with CSS

So how can we remove all those extra tags? How can we reduce the page size while keeping our colors and layout? Well, image you could define in a single place what ALL your headlines should look like (say, large green text). Then you don’t need to define the color for each unique headline. The same applies to the paragraphs. If you want all paragraph text to be blue, you just set that as a CSS rule for the “p” tag. All further paragraphs will have blue text, without you having to specify it every time. CSS is best taught by example. Let’s start by defining exactly the rules described above – all headlines should be green and all paragraphs should be blue. Using the text editor of your choice, start a new file named style.css and add the following text: This defines all h1 tags as having green text, and all p tags as having blue text.
All we need to do now is connect it to the HTML with the link tag, and then remove all the useless font tags from the HTML. When finished, it should look something like this: Quite a bit cleaner, huh? We’ve already reduced the overall size of our site, and that was with only 2 entries in our “blog”.

CSS for Layout

Sure, it can make your fonts consistent, but that alone certainly isn’t enough to make CSS the complete tool for website presentation. To do that, it must be able to affect the layout of your site, giving you control over not just how things look but where they go. The full power of CSS over site layout is well beyond the scope of this guide, so we will introduce the concept through a single common scenario – a navigation sidebar.
Creating something like this is astonishingly simple in CSS. Go back to your style.css file and add the following section: Take note of the # at the start of the name sidebar. In short – this tells CSS that we’re working with a new unique item name that we made up, as opposed to a built-in tag like h1 or p. The long explanation involves the difference between an id and a class, and is explained in detail here.
You should be able to see several important bits here. First we created a new ID named sidebar, gave it a specific height and width, a solid border, and specified that it should have a 15px margin on the right side. We’ve told it to float on the left side of the screen, with other page elements (like your text) flowing around it. You can activate this element by adding a sidebar tag to the body of your HTML, something like this.
And now when you open your page, there’s your new sidebar!

Conclusion

Clearly we’ve only begun to scratch the surface of CSS’s capabilities, but hopefully it should be clear that these basic principles can be applied to a lot more than what we’ve done here. The text manipulations can be used to format text in countless ways, and by modifying the sidebar concept you can create infinite variations of site layout. For further study, this author highly recommends the CSS section of W3Schools.com. Image credit: geirarne