Introduction to CSS

Welcome to the world of Cascading Style Sheets (CSS). Without CSS, HTML documents can look boring to say the least. Put it another way, if HTML is a naked person than CSS is that person's clothing. Depending on the web designer's skill, those clothes could be anything from a cheap and ugly outfit to an Armani suit. Sure, you could “present” yourself in your birthday suit, but wouldn't you want to wear a fitted suit instead? CSS allows you to go from naked to noteworthy.

Who Should Read This Guide?

In order to fully maximize the effectiveness of this guide, you should have a grasp of HTML/XHTML. If you are just getting involved with creating web pages and you have no prior knowledge of how to create a web page, you should check out our HTML Tutorial first before continuing. Learning CSS will draw on your knowledge of (X)HTML, so you will need at least a basic understanding of it.

Note: From now on I will use HTML and XHTML interchangeably.

In order to keep this guide succinct and meaningful, I have made a few assumptions about you the reader. I assume that you know how to operate a computer. Nothing serious, just that you know how to turn it on, install software, operate a keyboard and mouse.

I also assume that you have at least a understanding of (X)HTML. You don't have to be a master of it, you just need to know the terminology as well as be able to create basic (X)HTML documents.

Why Use CSS

Prior to the creation of CSS, HTML documents would be cluttered with countless additional pieces of information that told the User Client (i.e your web browser) how to “show” your content. This made maintaining HTML documents extremely difficult since the pages content was surrounded with large amounts of extra styling tags.

One example of this can be found in the HTML elements below:

 <font color=”#000000” face=”Verdana, Arial, Times New Roman”><u>Text goes here</u></font>

The above example is exactly the reason CSS was developed and standardized. The above code snippet  mixes content with presentation, makes the code cluttered and look messy. Using CSS we can use something more streamlined:

 <p class=”alert”>Text goes here</p>

This allows us to label this particular <p> tag and define the “alert” class outside of the content.

Another drawback of HTML without CSS was changing the “theme” of your site. If you wanted to change the size of all your paragraphs, you would have to edit all of your HTML documents. You would have to find every tag that styles your paragraphs and change them all. Using CSS allows you to change one setting and have it propagate through out all of your documents, thus saving you hours of playing the “Find and Replace” game.

Don't worry to much about not understanding this now, it will all be made clear further down the road.

Tools You Will Need

Before you get started learning CSS you will need a few basic pieces of software.

• A web browser such as Microsoft's Internet Explorer, Mozilla Firefox or Mac OSX's Safari.
• A text editor such as Notepad (Windows) or Kate or Gedit (Linux)

I personally recommend using Mozilla's Firefox (regardless of operating system) and Notepad++ (Windows Only). Notepad++ is an open source text editor that has lots of cool features like syntax highlighting, code folding and line numbering.
Syntax highlighting is especially useful since it “color codes” all the little pieces of data.

If you are running Linux, you can try Kate (packaged with KDE) or GEdit (packaged with GNOME). They both have roughly the same features.

If you want the most features you can try Microsoft's Web Developer (you can get a free trial), Kdevelop (KDE) or Geany (GNOME).

So lets get started!

Permalink