The five things every CSS beginner must know

Being a CSS beginner is difficult because you never know where to start the learning process. If you pose the question to any forum, you will get a myriad of answers, some good, but mostly, not so good. The worst is when you’re instructed to read the W3C documentation. That’s like asking a pilot in training to read the mechanic’s manual for the propeller. Only refer to the W3C when you’re looking for the technical recommendation. Eventually, when you have something specific you want to accomplish with CSS, and are unsure how, use Google to find the answer.

Along with a good search engine at your disposal, for Web programming technologies, I almost always suggest W3Schools. You can get to the CSS tutorial on W3Schools by visiting this URL. Here you will get the basics, and a great high-level overview of what CSS has to offer. Once you understand the syntax and have taken a few examples for a test run, I suggest you concentrate on the following:

1.) Learn the box model

You will hear this term used often in the CSS inner circles. Every element, like the span, paragraph or div, is considered a box. Each box, depending on the rules for its particular display, has certain properties, like a border, padding and margins. The box model is also important to know because Internet Explorer applies properties to each box differently than other browsers. For a more in-depth visual presentation of the box model, visit this URL.

2.) Get a good grasp of positioning

There is a lot of misrepresentation regarding positioning. There are actually several methods to position an element to a specific location, but most layout tutorials primarily focus on the float property. For this reason, the values of the actual position property (absolute, relative, static, fixed) are rarely understood completely. Before you move onto floats, get a good grasp of how the values for the position property affect the display of the elements on your page.

3.) For vertical navigation use unordered lists

After learning CSS a few years back, I was surprised how much you could do with unordered lists. If you’re used to bullet points, get on the gravy train and start formatting those unordered lists — especially with vertical navigation. As you get more adept at what can be done, you will find that you use formatted unordered lists quite often. An added benefit is that search engines like lists because humans process them quickly, and we perceive them as additionally important. In the instance of navigation, this is especially true.

4.) Use grouped selectors

There will come a time when you’re entering styles into your style sheet, and you will realize you’re repeating the same properties and values for several of the elements in your page. Other than a good amount of preparation and forethought, a good way to trim your style sheet down to size, is by using grouped selectors. Using this method, you can group several class and/or ID selectors, separated by a comma, and then give them all the same properties and values. How nifty!

5.) Use shorthand

The best way of course to trim your style sheet down to size is by using shorthand. Several properties can be grouped into a single property and the values associated with them are all placed into that single property. Although the order and placement of those values can have a different effect depending on the browser. I suggest visiting this URL for a great example of the most commonly used shorthand properties.

Why not mention floating?

I consider floats to be an intermediate to advanced concept when learning CSS. If you do plan to build your Web sites only using CSS, then depending on the complexity, you will have to understand the float property. You will also have to understand all the issues that come with it, including the difficulties with clearing your floats in a cross-browser consistent fashion. Under my list of Web development links, you will find a few CSS tutorials that can assist you.

• Posted by Brian
• August 13th, 2006