CSS tips and tricks, Part 2

Filed as Features, Guides on May 22, 2007 8:00 am

Repost This

Everyone seemed to like the last article I wrote about CSS…forever ago, so I thought I’d tackle some more CSS tips and tricks – give the people what they want, right? These are some more “basic tips,” but things that I use every day and thought others might find useful. I know I said I’d write more about web analytics as they relate to design but I decided this would be faster as I’m getting close to the deadline…

1. Reset your styles without using * {margin: 0; padding: 0; }
Eric Meyer made resetting your styles very easy. All you have to do is load his reset.css file int your page’s CSS file and you’re done. Head on over to Eric’s site and copy his code into your own file called reset.css.

Open up your site’s style.css file and add the following line of code to the top of your CSS file:

/* Eric Meyer's reset.css fileMore Info:
http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/  */

@import url('reset.css');

But why is this useful? I like it because it does exactly what it’s intended to do: it resets all the styles that a browser has by default. With just one line of code I got rid of any default padding, margin, border, or anything else that could cause a bug in my design and take time to find and fix.

2. Use shortcuts for colors, font family and size, and margins and padding

A shortcut for colors:

color:#ffc

This code will give you the same color as writing “#ffffcc.” If you’re new to colors they work like this: “RRGGBB” – how much red, green, and blue do you want your color to have?
“#000000″ is black, “#ffffff” is white. Instead of RRGGBB you can just use “RGB” in your CSS. So “#000″ is black, “#FFF” is white.

Some people write their code for fonts like this:

body {
   font-size: 1em;
   font-family: Arial, Helvetica, Sans-Serif;
   line-height: 1.5em;
   font-weight: bold;
}

I would write my code like this:

body { font: 1em/1.5em bold Helvetica, Arial, Sans-serif; }

And then of course, the margins and padding. I have looked at a lot of CSS that is full of styles that look sort of like…

body {
     margin-top: 5px;
     margin-left: 5px;
     margin-bottom: 0;
     margin-right: 0;
 }

Why not simply write

body { margin: 5px 0 0 5px; }

The way the margin and padding code works is very simple:

margin: [top] [right] [bottom] [left].

Or, if the top/bottom and left/right are the same you could write it

margin: [top/bottom] [left/right]

Shortcuts may not seem like a big deal when you can type 100 words per minute, but when you’re writing CSS all day long they make a huge difference in the size of your CSS file and the time it takes to write, update, or change your code.

3. The difference between classes and IDs is important
If you’re truly interested in understanding why and how to use IDs vs. classes there is all sorts of material available on the subject. The simple rule to follow is this:

An ID is used once per page, for a unique element. A class is used to style multiple elements the same way.

For example, on your main page you might have a <div> that encloses your posts. That should be styled using a class. However, you might have another <div> that holds your logo – that can be styled using an ID since it is a unique element used only once on the page.

4. An element is allowed to have more than one class.
I didn’t realize this for far too long, but you can give any element more than once class. This comes in handy pretty regularly when you’re working on large projects and want to keep the CSS and XHTML light and easy to update.

The XHTML might look like this:

<div class="post featured">
...featured post content...
</div>

and the CSS imight look like this:

.post { color: #333; margin: 0; padding: 0; }
.featured { background: #ccc; }

So the featured post has the same font colors and margin/padding as all the other posts but it gets its own background color so that it stands out as featured.

Tags:

This post was written by

You can visit the for a short bio, more posts, and other information about the author.

Submissions & Subscriptions

Submit the post to Reddit, StumbleUpon, Digg or Del.icio.us.

Did you like it? Then subscribe to our RSS feed!



  1. By GadgetChick posted on May 22, 2007 at 5:10 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thank you! CSS is one of my many technical difficulties LOL. I can change details in templates, but I am really trying to get a better grasp of it..

  2. By Tony Hung posted on May 22, 2007 at 6:12 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Getting back to the basics is important GadgetChick, and CSS can be *so* ornery at times. ;)

    Thanks for stopping by!

  3. By Jenny posted on May 22, 2007 at 11:44 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    those are some really nifty tips. i think i’ll try some of them out.

  4. Blog News Watch » Blog Archive » Wednesday Roundup: May 23, 2007May 23, 2007 at 10:42 am
  5. By ia posted on May 23, 2007 at 10:43 am
    Want an avatar? Get a gravatar! • You can link to this comment

    You missed one more thing with the margin shortcut:

    margin: [top] [left/right] [bottom]

    This also applies to padding and border