CSS Tips I Wish I Knew When I First Started



I have been working with CSS for many years now, and although it is relatively easy to learn, there are always some tips and tricks that you don’t know about, and new stuff to be learnt all the time. I wanted to take a moment to give you some tips and tricks that I wish I knew when I first started using CSS.

Resets & Browser Inconsistencies

It’s not big secret that not all browsers are created equal. Internet Explorer may show something completely different than Mozilla Firefox. Mozilla Firefox may show something completely different to Apple Safari.

We also don’t know what the default margin, padding, font-size, etc. are for these browsers. To handle these differences, many CSS developers like to level the playing field by creating a CSS Reset. In the early stages, we would have just used a global reset, which would look like the following:

* { margin: 0; padding: 0; }

It soon became clear that resetting only the margin & padding wasn’t really enough. Developers started to created a CSS Reset.  Eric Meyer created a widely accepted and comprehensive set of reset rules.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

/* remember to define focus styles! */

:focus {

outline: 0;

}

body {

line-height: 1;

color: black;

background: white;

}

ol, ul {

list-style: none;

}

/* tables still need ‘cellspacing=”0″‘ in the markup */

table {

border-collapse: separate;

border-spacing: 0;

}

caption, th, td {

text-align: left;

font-weight: normal;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: “”;

}

blockquote, q {

quotes: “” “”;

}

This has become the most popular CSS reset available today. It is also important to note that some elements have been deliberately excluded from the list, including Input, Button and HR.

User ‘Overflow: Hidden’ to clear floats

I always used to use a clearing div to clear any floating divs I was using. This would always look like the following:

.clear { clear:both; }
<div>
<div></div>
<div></div>
<div></div>
</div>

Although this does work perfectly fine, it can make your code look messy. Instead you can use overflow: hidden on your container div tag. So you could use the following:

#contain { overflow: hidden; }
<div>
<div></div>
<div></div>
</div>

Grouping elements together

One of the rules of keeping good coding is to keep your code simple, clean and easy to read. This technique helps with readability as well as performance. In the early days, I used to do two or three elements that are doing the same thing, until I found out you can group these elements together.

So instead of writing:

h1 { color: #444; }
h2{ color: #444; }

You can group these elements like so:

h1, h2 { color:#444; }

Use CSS Shorthand

Using CSS Shorthand has two beneficial aspects to it, the first one being less code. The second is improving the performance. So instead of writing the following:

body {
font-family: verdana;
font-size: .7em;
line-height: 1.4em;
margin-bottom: 10px;
margin-top: 10px;
}

You can write the same thing with less lines and less coding:

body {
font: normal .7em/1.4em verdana,;
margin: 10px 0;
}

Box Model – Margin, Padding & Borders

The box model is the basis for all layouts. If you use CSS, you need to take the box model into account. It governs the dimensions & spacing of the elements on a page.

All box models have five spacing properties: width, height, padding, margin and border. Width and height are tricky attributes, as they require a bit of calculation. When measuring an element’s width, designers must consider the entire box.

Using the example above, the box has a total width of 260px. The margin, padding, and border are 30px each (remember, that’s 30px on top, 30 on bottom, 30 right, and 30 left). So, in this example, the margin takes up 60 pixels of the box’s width. Likewise, the border and padding consume 60px each. All together, the margin, border, and padding amount to 180 pixels of the box’s total width.

We know that the box’s total width is 260px, but in CSS the width attribute refers to the content area on the inside of the box. So, for this example, we have to subtract 180 pixels (for margin, border, and padding) from 260 (total box width), leaving us with a content area of 80px. Therefore, our CSS looks like this:

div {
margin:30px;
border:30px solid yellow;
padding:30px;
width:80px;
height:80px;
}

Conditional Comments

IE is one of the worst browsers to develop CSS for, while most browsers show the same thing about 80% of the time, IE will not. Therefore you will be doing a lot of IE Hacks to make sure your website shows the same in all browsers.

This can take a lot of CSS to accomplish, making your main style sheet larger than it really needs to be. So the easiest way to accomplish this is to use the HTML conditional comments to detect IE browsers and display the CSS.:

<!–[if IE]>
Target All versions of IE
<![endif]–>

Using conditional comments to target IE and cut out your hacks will slim down your main style sheet, and help load the page quicker in browsers that don’t need the correction code.

That’s it

That’s it for now. I am always learning new stuff, and with CSS3 making its way through, there will more than likely be another tutorial on the way.



Comments
  1. Hi David,
    very good compilation of Tips. Thank’s!
    I am looking forward to the CSS3 Tutorial.
    Sabine

  2. These are surely awesome tips and some are new to me. I will try to apply these when I start a new site, this will surely shorten my css codes. Thanks!

  3. Pretty good tut for beginers. Keep going ;)

  4. let me save that first rule

  5. Thank you guys, I’m glad you liked the post, and glad you find it useful.

  6. Thanks for the tips, especially using CSS shorthand. Thanks.

  7. Those are awesome tips! I had never thought of creating a css reset section in my style sheet but I can see how that could prevent some headaches.

  8. Very useful tips. I’m allways fighting with boxes and they are really a mess!!!

  9. You should never use conditional comments. Learn the differences between IE’s rendering habits and those of other browsers, and cross-browser woes will become a thing of the past.

  10. Awesome tips, just what i need, im a begineer to web design & am learning CSS @ moment, thanks David & very well explained, like some who dont, will subscribe and keep an eye out for more of your tutorials, thanks again David.

  11. Am I the only person who hates using DIV’s? Dont understand everyone’s obsession with them

  12. This is absolutely essential for some sites to appear correctly in Internet Explorer. Thanks for the great information!