1
Universal Selector – This sets ALL html tags to have zero border and padding. You then build your css up from there:
*{padding:0; margin:0; }
2
Image Replacement is the process of using images instead of text yet still using semantic html code. Whilst image replacement is great for static sites, the SiFR method is better for dynamic sites. Sifr uses a mix of Javascript and Flash to produce the text in any font. Both are great methods of making your site and typography more attractive and “designed”.
3
Comment tags are a great way of organising your CSS. Comments are inserted like
/* Details about the Css are help within is very useful tag */
They are very useful for breaking up sections of your CSS code. For instance you could have
/* ...All link styles ...*/
a:link, a:hover{ color:#f00; }
a:visited{ color#000; }
/*...Below is the left nav system section ...*/
#nav{ clear:both: float:left; }
Im sure you get the idea
4
Structure of the file ( the order in which selectors come etc ). There are many methods of doing this but the way I work is generally from the top of the page to the bottom. So the top divs and everything within those divs such as list items progress down the page. I tend to put generic html tags such as the links and list items before the main stucture:
*{padding:0; margin:0; }
a:link, a:hover{ color:#f00; }
a:visited{ color#000; }
li{ padding:5px; }
#nav {clear:both; float:left;}
#content{ width: 550px; padding: 5px 15px;}
..............
#footer{clear:both;}
This method is logical and therefore you can find things easily.
5
Shorthand:- This is a code saver and is quicker to type when you get used to it. Instead of
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
You can have:
background:#f00 url(background.gif) no-repeat fixed 0 0;
Another quick shortcut is for colours “#f00″ is short for “#ff0000″.
6
Centreing:- ( I’m from the UK) elements is very easy with CSS, simply give a width and a margin of “auto” to the left and right margins:
#div-id{width:550px; margin 0 auto;}
7
Font Sizes:- For accessiblility its better to use ems instead of pixels for font sizes. Simply set:
body{font-size:62.5%;}
p{font-size:1em;}
Setting the body to 62.5% rounds 1em off to 10px in most browsers. That allows you give almost pixel perfect measures, for example 1.3 em would be equal to 13 pixels.
8
Conditional Statements:- Internet Explorer is the enemy of most CSS designers and while version 7 is a lot more standards compliant, many users are still using version 6 and some are still using IE5. These browsers can easily be targeted by using Conditional Statements though.
I highly recommend you read this article about conditional statements if you are serious about web design!
9
DIVS:- Don’t be diagnosed with “Divitus”! While divisional (div) tags are great – don’t over use them
Larger Font size goes here as a heading
Smaller text goes in here, bla bla bla, like a paragraph
Can be rewritten as:
Larger Font size goes here as a heading
Smaller text goes in here, bla bla bla, like a paragraph
The 1st (the h2) and the 2nd ( the p) tag can then be targetted like this:
#mainholder h2{ font-size: 1.3em;} #mainholder p{ font-size: 1em;}
DIVS – Tip 2
CSS classes can be used twice for instance you could have:
Red Text
class="warning underlined">Red Text and underlined';
?>
At then this CSS:
.warning color:#f00; font-size: 1.3em;}
.underlined {text-decoration: underline;}
This keeps our stylesheet tidy and clean, which is never a bad thing.
10
ZERO equals ZERO:- Short and sweet for the last tip: There is no need to use any px or % when stating zero. For instance:
#divname{padding: 0px 4px;}
Can be replaced with:
#divname{padding:0 4px;}
Ok its not going to halve your CSS load time but every little helps.
SummaryHopefully these CSS Web Design Tips will help you order and code your web pages that bit cleaner. If you have anything to add or know of an ever better method please leave a comment.
