CSS tips and tricks, Part 1

As I stated in my recent article on CSS shorthand properties, I get a lot of questions about CSS from people who haven’t spent quite as much time working with CSS as I have. Their CSS is often not as efficient as it could be, and I come across some mistakes that are easy to make when you’re starting out with CSS.

Since I’ve been using CSS extensively for a couple of years I’ve picked up some tricks that either make the CSS more efficient or solve a specific problem. I’d like to share my favourite CSS tricks and explain some of the most common beginner’s mistakes (of which I’ve made several). If you’re experienced with CSS you’ll have seen most of these tips and tricks before, but who knows – maybe you can find one or two you haven’t seen before.

This was originally meant to be a single article, but the list of tips and tricks just kept on growing, so I’ve decided to split it into two parts for easier digestion.

Use CSS shorthand

To save space and make your CSS files easier to read I recommend using shorthand syntax to declare several properties in a single declaration. How the available shorthand properties are used is described in my article Efficient CSS with shorthand properties, so I’m referring you to that instead of going into any details here.

Specify a unit unless the value is 0

Not specifying a unit for length values is a very common mistake among CSS beginners. In HTML you can get away with that, but in CSS all length values must have a unit. There are two exceptions: line-height and 0 (zero) values. Note that the value must be immediately followed by the unit – do not insert a space between them.

There is no need to specify a unit for 0 (zero) values because zero pixels equals zero centimeters equals zero of any other length unit. Despite this it’s very common to see something like padding:0px where padding:0 would do.

While there’s nothing wrong with specifying a unit when the value is 0, it’s a waste of space and – at least to me – looks untidy.

Remember case sensitivity

When CSS is used with XHTML, element names in selectors are case sensitive. To avoid getting caught by this I recommend always using lowercase for element names in CSS selectors.

Values of the class and id attributes are case sensitive in both HTML and XHTML, so avoid mixed case for class and id names. If for some reason you do use mixed case, make doubly sure to match the case in your CSS with that in the markup.

Specifying colours

This tip is in the shorthand article mentioned earlier, but I use it so much I’ll repeat it here: in CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit:

#000 is the same as #000000, #369 is the same as #336699.

And remember that octothorpe (#) before the colour code.

Another colour related tip is that you can specify web safe colours by using only digits that are multiples of 3 for the red, green, and blue values: 0, 3, 6, 9, C, and F. #99c is a web safe colour, #98c is not.

Eliminate element types for class and id selectors

When writing selectors that target an element with a certain class or id value, you can omit the element type before the . (class selector) or # (id selector).

So, instead of writing

div#content { /* declarations */ }

fieldset.details { /* declarations */ }

you can write

#content { /* declarations */ }

.details { /* declarations */ }

and save a few bytes for each selector.

This is especially useful for id selectors since they must be unique in a document, which reduces the risk of rules conflicting with each other. class names on the other hand can be used any number of times in a document, and different element types can be assigned the same class name (or names). To style element types with the same class name differently you will need to specify the element types in the selector.

Be aware that the above rules are not identical. If you write one rule with and one rule without the element type in the selector, the rule that uses the element type will have higher specificity.

Default values

You can often eliminate the need to specify a value for a property by taking advantage of that property’s default value. This is especially important to consider when you use shorthand properties, since any unset properties are assigned the default values of the corresponding individual property.

Some common default values are 0 for padding (though there are exceptions to this), and transparent for background-color.

Since there are slight differences in the default values between browsers, some people like doing a Global white space reset by zeroing both margin and padding for all elements at the top of their stylesheets:

* {

margin:0;

padding:0;

}

Don’t redeclare inherited values

The values of many properties are inherited by any descendants of the element that you specify the property for. color and the font related properties are the most common examples of such properties.

Be aware that some properties may be overridden by browser specific user agent style sheets, i.e. the browser’s defaults. That’s why you can’t make all headings non bold with the following rule:

body { font-weight:normal; }

The browser’s predefined rules are more specific because of the cascade, which is described next.

Take advantage of the cascade

The cascade lets you use multiple rules to specify the properties for an element. You can either redefine the same property or define additional properties. Let’s say you have the following markup:

<p class="update">Update: Lorem ipsum dolor set</p>

In the CSS, you can use separate rules to specify the properties that are common to allp elements and those that are specific to p elements with class="update":

p {

margin:1em 0;

font-size:1em;

color:#333;

}

.update {

font-weight:bold;

color:#600;

}

The two rules will be combined for p elements with class="update". Since a class selector is more specific than a type selector, the properties defined in the second rule will be used when a conflict occurs, as for color in this case.

Multiple class names

You can assign multiple class names to an element. This allows you to write several rules that define different properties, and only apply them as needed. Let’s assume you’re marking up an image gallery that contains some images that are royalty free and some that are not. There may also be a special offer on some images. Here’s the markup for three images:

<img src="foo.gif" class="special" alt="" />

<img src="bar.gif" class="royaltyfree" alt="" />

<img src="baz.gif" class="royaltyfree special" alt="" />

To style the images that are royalty free to make them differ from the others you can make a rule for elements that have a class name of royaltyfree, and if you want the images with a special offer to stand out a bit you can use the special class to make a CSS rule for that.

The CSS could then look something like this:

.royaltyfree { border:2px solid #666; }

.special {

padding:2px;

background:#ff0;

}

Any images that have a class name of special will have a padding and a yellow background. Images that have a class name of royaltyfree will have a border, and those that have both class names will have a border, a padding, and a yellow background.

You can take this much further – this is just a simple example. And do try to use semantic class names that describe what an element is or does rather than what it looks like.

Use descendant selectors

Not using descendant selectors is one of the most common examples of inefficient CSS I see from novice CSS authors. Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient. Take the following code structure:

Keep it as clean as possible and both your markup and your CSS will be more efficient and easier to read.

Avoid quoting URLs

To save a couple of bytes here and there, I avoid quoting the URLs for background images. Quoting isn’t necessary, and there have been reports of some browsers (most notably IE/Mac) having problems when URLs are surrounded by quotation marks.

Harold, that’s the right order. Any rule may be over-written by following rules. So in the first example above, your “:hover” style will apply to all unvisited links, and in the second to all links, regardless of whether they have been visited.

Nice article, Roger. I was of the opinion web-safe colours are not really important any more - can you elaborate on that? What sort of percentage (if it’s possible to tell) would have a problem with non-web-safe colours?

Your last tip about quoting urls was actually most useful for me as I had some confusion about quoting (or not) with regards to the @import directive and url() in stylesheets. I know there are some tables about which browser supports what, but a bigger writeup (hint ;)) would help end a lot of confusion.

Great blog, I really enjoy your focus on writing your own articles, even if some things you write about are not new to me I still enjoy a good article much more then a uncomprehensible paragraph linking to other blogs :)

What a brilliant reminder of lots of things I should do but often don’t. More details about inheritance might be useful - I get loads of emails about that. I still think CSS inheritance confuses people, especially when they go back to edit the sheet. Sensible methods of annotating CSS might be a useful thing to cover.

Thank you very much for this article. I’m designing with CSS for about a half a year now and I’m still confused about several aspects of it. With your article you just helped to end some of that confusion. I’m eagerly waiting for your part 2.

One word, octothorpe.
I have never heard that before, but I will just take that as some high ranking CSS-guru terminology.
Seriously, great article. I only wish I had seen something like this sooner in my CSS journey, as I have made many of these common mistakes.

In the section: “Eliminate element types for class and id selectors”. I think the specificity should be explained a little further if this is to make any sense to a beginner CSSer. I remeber when I first started trying to write my selectors short-hand style (without the element) and I kept have specificity issues. Needless to say, I had no idea what the heck specificity was or how it worked.

ghola, the :hover pseudo class is not the same as the :focus pseudo class. I would not recommend lumping them together. They are two different actions and should be differentiated as such. Take a look at these form fields, the :focus pseudo class is styled (the border changes) while the :hover pseudo class is not touched (there is not hover action on the field).

Sorry ghola, I have a knack for misinterpretting questions.
It really depends on the effect you are trying to achieve. If you want elements that have focus to still be able to display the hover effect, then you put the :hover after the :focus. If you don’t, then you put the :focus last in your list of pseudo classes.

Since all these pseudo classes have the same specificity, the order really determines the effect, and it boils down to what you are looking for.

Hi Dan, I haven’t had any problems with the pseudo classes either. I was just trying to make clear that the order of the pseudo classes determines the effect.

LVFHA works if you want elements that have focus to still display hover behavior (not always desired). If you want the :focus effect to trump the :hover effect, then you want LVHFA or
Lord Vader Has a Funky Ass

@ multiple classes: these are not meant to attach different rules to your element. In general classes have nothing to do with style whatsoever.

Class defines a (sub) class of elements, a group of elements that have a slightly different function than others. Therefore they might have a specific appearance. Think of classnames as jobnames. Different jobs: different appearance (police officer), multiple jobs: combined appearance.

As for leaving off the element names for IDs (#id) and CLASSes (.className), I actually tend to leave them off id but ON for a class. That way I can apply the same class name to multiple elements. Whereas I’m less likely to use an ID more than once (y’know, cuz you can only use one on a page!)

One great thing about this article is that it’s not just good for beginners - it’s also terrific for those of us who have a certain comfort level with CSS but want to take it to the next level. Well done, Roger!

That’s just great - here I am struggling to track down all the info I can on the correct coding and exactly what all the features there are in CSS and how to use them properly, THEN I find some clever dick has produced all this shorthand nonesense!!!

Seriously though, great article which as I keep going back to it I am sure I will learn a great deal from. BUT as a complete beginner in CSS and XHTML I am wary of trying to run before I can walk, although I will now be going back through the coding of my site (my first attempt at using CSS btw) to see what mistakes I have already made!

Some one asked how to get CDCDCD into shorthand, well you could try rounding. CDCDCD is almost the same as DDDDDD which is DDD.
Take each two numbers/letters and look at the second one and if it is between 0-8 leave the first alown if is is between 9-F round it up. Do this for each of the three pairs. The color will be almost the same.
This dose not work for all colors, like efefef is a light gray but if rounded if becomes fff which is white.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.