While using the seo tem­plate files dur­ing web­de­sign I found out I used the same CSS design tricks over and over again. They’re small things you can do to lift your website’s look tremen­dously. That’s why I’ve incor­po­rated them in my seo tem­plate (a FREE web­site tem­plate zip pack­age to give you a head start with your own webdesign).

Sim­ple CSS Design Tips Overview

Use of bor­ders for top and bot­tom
It wasn’t until I zoomed in on exist­ing web­sites that I found out they used the “bor­der” rule to ad shad­ing to their div tags. Since then I’ve used it con­sis­tently in my own designs with all my main ID’s (#header, #ban­ner, #con­tent and #footer). As a gen­eral rule I cre­ate arti­fi­cial light­ing by mak­ing the border-bottom darker than the border-top. For example;

header {
border-bottom: 1px solid black;
}
ban­ner {
border-top: 1px solid white;
}

For an added effect I almost always give the header, ban­ner and footer ID back­ground images being dark in the bot­tom and lighter in the top.

Use of text shadow
To add to the arti­fi­cial light­ing effect I use the text shadow. Mostly on the H-tags because they can dimin­ish read­abil­ity. I use a dark color in the upper right cor­ner but more often a light color in the bot­tom left. For example

H1 {
text-shadow: –1px 1px white;
}

–1px 1px: stands for 1 pixel to the left and 1 pixel to the bot­tom
1px –1px: would stand for the oppo­site: 1px to the right and up

Use of Hover effects with links

Sim­ple but very effec­tive: hover effects. I always use them in this par­tic­u­lar way to main­tain consistency:

a:link,
a:visited {
color: black;
}
a:hover {
color: white;
}

Why this way? I’ve added the “vis­ited” state so the links will not look pur­ple when already clicked on in the past. Most of the time for usabil­ity and con­ver­sion pur­poses I also add the “text-decoration: under­line” to the hover-state. I never use this when the link looks like a but­ton because it has a back­ground image.

a:link,
a:visited {
color: black;
}
a:hover {
color: white;
text-decoration: under­line;
}

Only using “margin-bottom” to sep­a­rate main styles

Less obvi­ous but defi­nately a css design tip is only using the margin-bottom to sep­a­rate styles like H-tags with lists and para­graphs. This way you’ll ALWAYS know which style to tar­get and don’t get con­fused how to make your text more read­able or bet­ter look­ing with respect to other ele­ments in the page. If you do a CTRL-F on “margin-top” you prob­a­bly won’t even find any of those in my css tem­plate. Let’s say we want to divide an H1 tag with a sub­se­quent para­graph which con­tains a list. My advice would be to do it always like this;

H1 {
margin-bottom: 20px;
}
p {
margin-bottom: 10px;
}
ul {
margin-bottom: 15px
}

Although the mar­gins may very you’ll know that if you want to have more space between your head­ing and what­ever fol­lows you have to tar­get the H-tag. Often times the H-tag will be the top ele­ment in some other con­tain­ing ID. To give the H-tag (or any­thing else with it’s nose to the ceil­ing) some breath­ing space I give the con­tain­ing ID padding:

#con­tainer {
padding: 20px 0;
}
H1 {
margin-bottom: 20px;
}
p {
margin-bottom: 10px;
}
ul {
margin-bottom: 15px
}

20px 0: means 20 to the top and bot­tom, 0 to the left and right. This makes cod­ing your markup extremely easy and you’ll be able to achieve an extreme level of effi­ciency and qual­ity in your CSS.

Take a look at the seo tem­plate to find a com­pletely fleshed-out exam­ple of these CSS Design Tips.

Related posts:

1. SEO Tem­plate — The CSS tem­plate file