CSS TipsI’ve been working with cascading style sheets (CSS) for years and have learned quite a bit. So I thought I’d write down some of my tips and tricks for all those that are learning about CSS.

Here are my 10 CSS tips that web developers should know.

Start off with a CSS reset.

A CSS reset is a way of defining the default settings for your HTML document. There are different ways you can do a CSS reset, but most are to extreme for me. What I like to do is set the margin & padding to 0 and set the default font.

* {
margin: 0; padding:0; font: 12px "Lucida Grande", Lucida, Verdana, sans-serif
}

A CSS reset has really helped cut down on the number of issues that come from different browsers.

Use one style sheet.

A CSS file should be one global file. There shouldn’t be a need to create a different CSS file for each section of your site. I’ve come across developers before who had 8 style sheets for one site and it was a nightmare to make updates as I had to dig through every file.

If you do use multiple style sheets, there should be one global and a secondary one that provides additional code for a special area of the site.

Use external CSS.

Putting CSS inline or in the source of a document kind of defeats the purpose. It’s a global styling that should sit in an external file and be linked in each document. This makes it extremely simple when you need to make site wide changes.

It’s also beneficial to SEO to keep the CSS styles externally.

Use CSS Shorthand.

CSS shorthand is a way of condensing the code and making it easier to interact with.

p {
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 18px;
}

p {
font: bold 12px/18px "Lucida Grande", Lucida, Verdana, sans-serif;
}

Don’t re-declare the same things over and over.

Once you have your font set as part of the CSS reset, there is no need to re-declare it in the P tag or DIV tags.

Same goes for other elements on your site. If it was previously declared that X was going to be styled a certain way, you don’t need to re-declare the same styles for each child element.

p {
font: 12px/18px "Lucida Grande", Lucida, Verdana, sans-serif;
}
strong {
font: bold 12px/18px "Lucida Grande", Lucida, Verdana, sans-serif;
font-weight: bold;
}
strong a {
font: bold 12px/18px "Lucida Grande", Lucida, Verdana, sans-serif;
font-weight: bold;

color: blue;
}

Bundle styles.

You can define the same styles for multiple elements by separating them with a comma.

small, .comment date, .footer {
font: 10px "Lucida Grande", Lucida, Verdana, sans-serif; color: #ccc;
}

Clear your floats.

Floating blocks of content is really handy, however it can get very annoying if you forget to clear your floats.

.block1 {
float: left;
}
.block2 {
float: right;
}
.footer {
clear: both;
}

Avoid !important.

Any style marked with !important will be taken into use regardless if there’s an overwriting rule after it.

.box1 {
margin-left: 50px !important;
margin-left: 35px;
}

This is usually best used when dealing with IE as they are the only browser that ignores !important. Where as I have found it very helpful in the past, I think that there are other coding issues that can be fixed to make IE work better with the code.

!important is more of a band aid than a solution to the problem.

CSSEdit

Get a good CSS editor.

Don’t suffer with a bad CSS editor. Test out a few and find one that makes writing CSS easy and enjoyable.

I for one LOVE CSSEdit and think it’s worth every penny.

Test Test Test

No mater what you do on the web test it out and see how it renders in all browsers. It’s best to do this often throughout your design process. If you wait until the end, you’ll spend a lot more time troubleshooting and re-coding.

Now there are a lot of things to learn about CSS and it takes time and testing to figure them out. I’m still learning new things every day and I’m very interested to read CSS tips and tricks that other bloggers share. So if you come across something useful, do share!