Now Reading
CSS tips and tricks, Part 2

CSS tips and tricks, Part 2

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.

See Also
Stats

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.

View Comments (5)
  • 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..

  • You missed one more thing with the margin shortcut:

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

    This also applies to padding and border

Scroll To Top