CSS stylesheets, in my experience, are things that are often thrown or hacked together to make a website look a certain way without really caring much about how it is done. CSS is a very powerful tool when creating websites and this tutorial will hopefully show you how a little bit of structure and some CSS wizardry can make your stylesheets look and work a whole lot better.

As always I will say that the techniques described here are by no means the only way of doing these things and are not superior to any other alternative that you may use. These hints and tips are purely suggestions to help you structure and work with CSS stylesheets.

Stylesheet Header and Global Reset

First thing first I suppose. It’s always good practice to add some kind of header to your stylesheet with general information about the stylesheet and the website it relates to. This is not only for your own benefit but for others that might be working on the site with you, or who might pick up the stylesheet after you’ve gone.

/*=====================================================================
 *
 * Filename: style.css
 * Website: www.exmaple.com
 * Author: Gilbert Pellegrom
 * Date Created: 18/8/2008
 * Media: Screen
 *
 * Description
 * -----------
 * Put an description of your stylsheet here. Things you
 * might include could be colour schemes and dimensions.
 *
 *=====================================================================*/

So now we have a header the first bit of actual code we should add is a global reset. A global reset is a bit of CSS code that resets elements to some predefined defaults. Why do this you might ask? Well when you partake in the oh-so-joyful task of cross browser website development you quickly realize that things can look very different across different web browsers. The main culprit being IE. A global reset helps stop this problem by setting defaults for elements that might look different on other browsers.

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

The above exmaple was created by Eric Meyer, a CSS pro. For more information on why some things are in this reset then see this page.

Styles Formatting and Grouping

Style formatting is one of those things that really comes down personal preference. As in all languages there are many ways to write the same line of code. Personally I prefer to use the single-line-per-property approach. It’s easy to read and doesn’t look to cluttered.

/* I use this... */
.class {
    property1: value;
    property2: value;
}
/* ...but you could do this... */
.class { property1: value; property2: value;}
/* ...and so on */

Another good idea when formatting your CSS code is to group your styles. Use logical, intuitive titles to group your styles. This really helps the readability of the code especially as the document grows. It also make finding styles a whole lot easier.

/* === text style === */
...
/* === header === */
...
/* === navigation === */
...
/* === body === */
...
/* === footer === */

You’ll probably find that most website follow a similar CSS structure to the above example.

Shorthand

One great feature of CSS is the ability to write certain properties in shorthand. Use this to avoid clutter and save time when writing your CSS styles.

div {
    /* top right bottom left */
    margin: 10px 5px 10px 5px;
    /* width style color */
    border: 1px solid #CCC;
}

IE6 Workaround

As I mentioned above if you have ever worked with cross browser compatibility issues (and all websites should be cross browser compatible) then you will understand my annoyance with IE6. Unfortunately IE6 is ridden with rendering bugs which means that web designers usually spend half their time just fixing a site for IE6. There are many ways to work around IE6’s bugs but my favorite is using the !important decleration.

p {
	margin-top: 20px !important; /* all correct rendering browsers */
	margin-top: 10px; /* IE6 */
}

The !important declaration tells web browsers to use the first margin-top value over and above the subsequent margin-top value, which would otherwise be applied. IE6 does not understand the !important declaration and as such uses the value from the second margin-top property. The best thing about this method is that it keeps your CSS code valid.

Another way of getting round IE6 bugs is to use conditional comments in your HTML.

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Conclusion

So I hope this tutorial might help you work with and structure your CSS stylesheets. Remember that taking a little time to structure your CSS document properly can save you a lot of time in the long run.

For further reading why not have a look at:

Related Posts

More?

If you enjoyed this post, please consider promoting it.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Design Float
  • Reddit
  • Mixx
  • Technorati

Remeber to subscribe to the feed and get future articles delivered to your feed reader.

If you want to discuss this tutorial or any other thoughts you have then you can do so over on our fourm.

Comments

  1. An article published today at smashingmagazine.com is another good resource:
    http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/

  2. [...] Do not fear freelancer-san, you’ll be a CSS master someday, especially with the help of this anatomy of a CSS stylesheet. When you’re mastered that lesson move on to this one from Grand Master Smash: 7 principles [...]

  3. [...] Do not fear freelancer-san, you’ll be a CSS master someday, especially with the help of this anatomy of a CSS stylesheet. When you’re mastered that lesson move on to this one from Grand Master Smash: 7 principles [...]

  4. [...] The anatomy of a stylesheet – More CSS tips and advice, this time regarding the structure of a stylesheet [...]

  5. Double margin problems can be fixed in ie 6 simply by using

    display:block;

  6. I love this stuff. You might be interested in the CSSDoc commenting standard. For some it’s a little anal, but I LOVE it. I wrote about it over on Devlounge [1] a couple weeks back. You should definitely check it out.

    1. http://www.devlounge.net/code/getting-started-with-cssdoc-commenting

  7. [...] public links >> ie6 The Anatomy of a Stylesheet - CSS Hints & Tips First saved by herrsergio | 9 days ago Are you still using Internet Explorer 6? First saved by [...]

  8. [...] Tabular XML Data to Hierachical XML Data Translation with XSLT Saved by lloles on Fri 10-4-2009 The Anatomy of a Stylesheet - CSS Hints & Tips Saved by arunbabun on Sun 05-4-2009 How to Create a WordPress Login Form Overlay Saved by [...]

Leave a Comment

(required)

(required)