In CSS, a class is defined by using .classname in the stylesheet, where classname is whatever title you choose to name the element. For example, in the above sentence, I used <span class=”boldtext”>.classname<span> to apply a bold font to the selection. The corresponding CSS code would look like this:

Every time I used the class .boldtext in my document, the enclosed text will be bold. Pretty simple!

By using the ability to assign your own classes, you can have multiple elements share the same styling throughout the page.

Classes can be used more than once in a single page – in fact, the same class can be used as many times as you want.

Giving an element an ID is the same idea, with a couple of differences. With an ID, you replace ‘.’ with ‘#’ and end up with this:

which will do the same thing as the class did – style the element with a bold font. The other difference, and this is important! – is that an ID can only be used once within a page. I use IDs a lot for structual elements, like headers and footers, because those elements are generally only used once in an html page.

If you think of an ID as something unique, like a person’s name, and classes as something that has more than one, like a class of people, then you’ll remember how to use them in writing your CSS.

Now you may be asking – what’s the difference between using <span class=”bold”> in a stylesheet and <span style=”bold”> in your html? You still have to type it into your markup every time you want the text to be bold, right? Well, that is true, but once you get into using multiple values for the same element you’ll see what a difference CSS can make. Imagine that you not only want that text bold, but you want it to be bold, blue and in Comic Sans font. You can combine all of those attributes into one class and save yourself the headache of writing out all three styles every time you want that particular styling.

Your CSS would look like this:

and your html would look like this:

We’ll get further into multiple properties in another post.

Trust me, when you’re adding margins, padding, colors, backgrounds, positioning and font attributes all to one element, you’ll love using CSS!

• MyFonts.com – a great place for fonts, both free and for purchase. Free registration is required for downloading, but with over 400 free fonts available, it’s definitely worth the time to register.
• w3schools.com – an absolutely must have bookmark, full of references, tutorials and do it yourself examples for learning html, CSS, xml, scripting and lots more. I’d be lost without this one!
• StockXchng – an amazing site for finding images to use in your design projects, whether personal or professional. Free stock photos in tons of categories make this a great site to browse as well, just to check out the great photography. Free registration.
• BrowserShots.org – check out your website in different browsers and operating systems for free, you may be surprised at what you see!
• CSS Validation Service -does your website conform to current web standards? Find out here, where you can validate your CSS and html or xhtml documents. It can make a difference in how browsers interpret your site, so it pays to be valid!
• Pixie – simply the best little color picker around, made by Nattyware. I use this tool every single day and I’d feel like I lost my best friend if I didn’t have it. Really.

That’s the first installation, and please, if you have any links you’d like to share, don’t be shy!

Now that we’ve got that out of the way, the best place to begin with CSS is the syntax. CSS syntax is basically made up of three parts: the selector, the property, and the value.

p {font-size: 12px}

in this example, p = the selector (for paragraph), font-size = the property you want to style, and 12px = the value. So far, so good, right?

The property and the value are separated from the selector by those curly brackets, and from each other by a colon. The above example is telling the browser that in every instance of ‘p’ on the web page, the font size will be 12 pixels.

You can use this syntax to style everything on a web page, from font properties to backgrounds to positioning. This will replace <p style=”font-size: 12px”>this is your paragraph</p> in your html. If you have 30 paragraphs, each with the same font size, you can see how this would make writing markup a little easier!

That’s all there really is to it…the basics, anyway. Of course things get much more complicated, as they usually do, once you get into styling more than just your p’s and q’s, but as long as you understand the syntax of CSS, you’ll be able to understand the rest of it when you really get into it.

Most websites that are not using CSS to style their pages are using tables. While tables can be very easy to use, they just aren’t meant for designing websites. Tables will, by their very nature, limit your designs in terms of content placement, and depending on who you listen to, nested tables (tables inside tables inside tables) are very difficult for search engines to decipher, not to mention a pain for the browser to load quickly.

So…enter CSS – a language that is built specifically for what it’s used for. Giving elements on your page a class or id (which I talk further about in this post), then assigning styles to that specific class or id in the stylesheet allows you complete control over every aspect of that element, including color, positioning, stacking order, backgrounds etc. Elements with the same attributes that occur multiple times within the document can be assigned the same class or id, preventing lots of repeating markup.

Wait – you haven’t heard the best part yet…

As someone who used to waste a lot of time changing the look of my own websites (it’s addictive, you know!), CSS is a miracle tool. Let’s say you have some text that you originally liked in blue because it’s your favorite color. Well, now you want it to stand out in red…but the text is spread out 200 different times over 10 pages! If you were using CSS, you could have assigned all of that text with the class ‘favorite-color’ and with one little change to your CSS file, made it all red. 2 seconds, all done. Now that’s what got me going with CSS in the first place!

Obviously there’s more to CSS than that, but you get the basic idea. Content in one place, style in another. Easy to update, change and manipulate. Better control over content positioning. Possibly an advantage when it comes to the almighty search engines. What’s not to like??