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 you're learning new stuff all the time. I wanted to take the moment to give you some tips and tricks that I wish I knew when I first started using CSS.

It's not big secret that all browsers are not 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 the resetting only the margin & padding wasn't really enough. A developer called Eric Meyer created a CSS Reset (and other developers). Eric Meyer created a better, more complete collection 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 notice that some elements have been deliberately excluded from the list, including Input, Button and HR.

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; }


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; }


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; }

Using CSS Shorthand has two beneficial aspects to it. 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 do exactly the same thing with the following:

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

The box model is the basis for all layouts. 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.

In 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;
}

IE is one of the worst browsers 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 little or 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.:



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 for now. I am always learning new stuff, and with CSS3 making its way through, there will be a lot more new stuff to learn.