Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Just change the values inherited from body

You can save your time when design css and make the css style look simple, easy to read and easy to edit by define all HTML tags you’ll use in css style. When you use each tag in different cases, you dont need to re-style it, just re-use it with changing some properties you want. And you need to understand that in css, most of HTML tags will inherit properties from body tag, so that, just one time define in body tag, just change value of properties when you use tags: h1, h2, span, p, div…

Note: This is just an example for inherited selectors. Others case will be a bit difference.

body {
 background-color: #fff;
 color: #333;
 font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
 font-size: 12px;
 line-height: 18px;
}

h1 {
 font-size: 24px;
}

Group HTML tag selectors in one style

With some tags like html,body,div,ul,ol,li,dl,dt,dd …similar properties, you can group that all into one style, save your stylesheet file size, save your time… And when you use it somewhere in your css, you dont need to replace the same style in so many selectors.

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

Target css property in each Web Browser

You know that sometime, each web browser will display your css differently. When you add property like margin-left to your selector, maybe Firefox margin exactly but maybe IE do nothing. How to resolve this problem? Follow this example below:

#box {
   margin-left: 20px; /* all browsers including Mac IE */
   *margin-left: 22px; /* IE 7 and below */
   _margin-left/**/:/**/ 18px; /* IE 6 only */
}

With this solution, you can target your css property to each web browser if something went wrong with any web browser displaying. Read my entry here to find some tips about css in IE.

Use short rule in one selector.

In CSS2, you can use the short rule, this is much better when you are a lazier. Some time, when i design css with Dreamweaver, it automatically generates the background for a selector like this:

#box {
 background-attachment: fixed;
 background-color: #fff;
 background-image: url(images/bg.gif);
 background-position: left top;
 background-repeat: repeat-x;
}

But you can do it by following rule:

#box {
 background: #fff url(images/bg.gif) repeat-x fixed top left;
}

and this below is rule for font:

h3 {
 font: 1em/1.5em bold italic small-caps verdana,serif;
}

Whenever out-line css style is a big mistake

Don’t ever think everything you can style css in out-line style by set attribute for HTML tag like class, id. I think give you an example help you get better than saying a lot. This mistake is not a big problem, but it make your design poor and look not professionally.

By normal, you do a menu separated by a border like this:

ul li {
 display: block;
 float: left;
 margin: 5px;
 border-right: solid 1px #000;
}

You think it’s ok? I’m fastidious and i really don’t like at the end of menu, it has one | odd. And now, you need to style in-line it by do HTML like this:

<ul>
    <li>Text 1</li>
    <li>Text 2</li>
    <li>Text 3</li>
    <li style="border-right: none;">Text 4</li>
</ul>

You can do that tip when you have close DIV tags and don’t want it double border size, just remove border at the close side from one of two.

Write your css with Alphabet and Paragraph and Commenting

I know that it not difficult to find and edit your css seletors, with any css design application, you can easy find your one css selector you want to edit by using finder feature(normal use hot key Ctrl + F). But formatting your css is a good skill you need to have as a good habits. Something will like this below:

/* IMAGES */
img {
 border: 0;
}

img.across {
 margin: 2px 0 16px 0;
}

img.left {
 float: left;
 margin: 2px 20px 16px 0;
}

img.right {
 float: right;
 margin: 2px 0 16px 20px;
}

img.flushleft {
 margin-left: -20px;
}

img.flushright {
 margin-right: -20px;
}

So, you know, css maybe easy to learn, but it’s not easy to use, and using well is more difficult. Keep your good working in css by training yourself and improve your css skill, right now!