The 6 Most Important CSS Techniques You Need To []

From: http://trevordavis.net/blog/tutorial/the-6-most-important-css-techniques-you-need-to-know/

Posted on March 30, 2008 in Tutorial | 40 Comments »

I thought I would give a quick tutorial, with examples, of the 6 most important CSS techniques that I think you need to know:

1. Get a Consistent Base Font Size
2. Get Consistent Margins
3. Set a Float to Clear a Float
4. Image Replacement
5. Faux Columns
6. CSS Sprites

 

1. Get a Consistent Base Font Size

body { font-size: 62.5%; }

Until IE finally supports the resizing of text in pixels, this is the best technique to gain full control over your font sizes. By setting the body font-size to 62.5%, that will set your font size to 10 pixels. That way, 1em is equal to 10 pixels.

Although I typically then set my container font-size to 1.2em, which in turn sets the font-size to 12 pixels. But still, then you know that 1em is equal to 12 pixels.

See the example »

2. Get Consistent Margins

There are some great CSS resets out there, but I usually don’t need one that goes so far. I like to just remove the margin and padding from every element.

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Then, you can set the margins that you want accordingly.

See the example »

3. Set a Float to Clear a Float

Floating is probably one of the most important things to understand with CSS, but knowing how to clear floats is necessary too. All you need to remember is: Set a Float to Clear a Float.

I have created a simple page with two floating columns next to each other. You will notice in the example that the grey background does not contain the floating columns. So, the easiest thing to do is to set the containing element to float. But now, you will see that the container background doesn’t contain the content area.

Since the container has margin: 0 auto, we do not want to float it because it will move it to whichever side we float it. So another way to clear the float, is to insert a clearing element. In this case, I just use an empty div set to clear: both. Now, there are other ways to clear a float without markup, but I have noticed some inconsistencies with that technique, so I just sacrifice an empty div.

4. Image Replacement

Sure, there are a lot of different image replacement techniques. But, I think that you get to most benefits from this technique. I also discussed this technique in a previous article, Improved Navigation Image Replacement

The Markup

<h1 id="logo">Company Name<span></span></h1>

The CSS

h1#logo {
	height: 110px;
	overflow: hidden;
	position: relative;
	width: 560px;
}
h1#logo span {
	background: url(/wp-content/uploads/2008/03/logo.gif) no-repeat;
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

Basically, all we are doing is absolutely positioning an image over top of the HTML text.

The reason that I like this technique is because even when images are disabled, the text is still visible. Of course this means that you cannot use a transparent image to lay over top of the text, so it will not work in all situations.

See the example »

5. Faux Columns

It is very common in layouts to have 2 columns next to each other, with one column having a background color, and the other column just being white. Since the columns will almost never have the same amount of content in them, the easiest way to fake this, is to have a 1px tall background image being repeated vertically in the containing element of the 2 columns.

The Markup

<div id="container">
	<div id="primaryContent">
		<h1>Primary Column</h1>
		<p>…</p>
	</div>
	<div id="secondaryContent">
		<h2>Secondary Column</h2>
		<p>…</p>
	</div>
	<div class="clearing"></div>
</div>

The CSS

div#container {
	background: url(/wp-content/uploads/2008/03/content-bg.gif) repeat-y top right;
	padding: 10px 0;
	width: 640px;
}
div#primaryContent { float: left; padding: 0 10px; width: 400px; }
div#secondaryContent { float: right; padding: 0 10px; width: 200px; }

Pretty simple: a containing element, 2 floating columns, and a clearing element so that the containing element will contain the floating columns (as noted in the Set a Float to Clear a Float technique above).

See the example »

6. CSS Sprites

CSS sprites is the technique of combing images to lessen the number of calls that need to be made to the server. Then you just shift the position of the background image to view the correct part of the image. May sound complicated, but it just takes a little math. Note: In both of these examples, I am using the Image Replacement technique discussed above.

Example #1

For this example, we are just going to have one download link that we want to replace with a nice graphic. Then, on hover, we want to change the image.

The Markup

<a href="#" id="download">Download Now<span></span></a>

The CSS

a#download {
	display: block;
	height: 75px;
	overflow: hidden;
	position: relative;
	width: 150px;
}
a#download span {
	background: url(/wp-content/uploads/2008/03/download.gif) no-repeat;
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
a#download:hover span { background-position: 0 -75px; }

As you can see from the code, on hover, we shift the position of the background image to view a different part of the image.

Oh, and also, IE6 and 7 suck, so here are the styles we are serving to them:

Styles to IE6 and IE7

a#download { cursor: pointer; }

I realize that we could just put that in the regular stylesheet since it has no affect on other browsers, but I prefer to move stuff like that to the IE only stylesheets.

Styles to IE6 Only

a#download:hover { background-position: 0 0; }

This is some weird bug where the images shift when you hover, but then when you mouse-out, the images don’t shift back.

See the example »

Example #2

For the second example, we are going to use the CSS sprites technique, but for the entire navigation. This way, only one call needs to be made to the server to load the navigation. We are basically creating a CSS sprites matrix.

The Markup

<ul id="nav">
	<li id="home"><a href="#">Home<span></span></a></li>
	<li id="about"><a href="#">About<span></span></a></li>
	<li id="work"><a href="#">Work<span></span></a></li>
	<li id="play"><a href="#">Play<span></span></a></li>
	<li id="contact"><a href="#">Contact<span></span></a></li>
</ul>

The CSS

ul#nav { background: #91c6d5; float:left; list-style: none; width: 510px; }
ul#nav li { float: left; }
ul#nav a { color: #000; display: block; font-size: 1.5em; height: 38px; text-align: center; position: relative; }
ul#nav span { background: url(/wp-content/uploads/2008/03/nav.gif) no-repeat; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

ul#nav li#home a { width: 102px; }
ul#nav li#home a:hover span { background-position: 0 -38px; }

ul#nav li#about a { width: 106px; }
ul#nav li#about span { background-position: -102px 0; }
ul#nav li#about a:hover span { background-position: -102px -38px; }

ul#nav li#work a { width: 92px; }
ul#nav li#work span { background-position: -208px 0; }
ul#nav li#work a:hover span { background-position: -208px -38px; }

ul#nav li#play a { width: 79px; }
ul#nav li#play span { background-position: -300px 0; }
ul#nav li#play a:hover span { background-position: -300px -38px; }

ul#nav li#contact a { width: 131px; }
ul#nav li#contact span { background-position: -379px 0; }
ul#nav li#contact a:hover span { background-position: -379px -38px; }

That may seem crazy, but it all makes sense if you take the time to think about it.

Again, we have to serve some similar styles to IE6 and 7 from the previous example:

Styles to IE6 and IE7

ul#nav a { cursor: pointer; }

Styles to IE6 Only

ul#nav a:hover { background-position: 0 0; }

See the example »

In Conclusion

This list is definitely not exhaustive; they are just the 6 that I think are extremely important. What other techniques do you think are important to know?