Even more CSS tips

As I said about a month ago, while I’ve been designing Web sites recently – to W3C standards I might add – I have put together some CSS tips that I’d like to share with you.

10 If you are using numbered lists or bullet points
Remember to define the style.

CSS
li {
font-family: arial;
font-size: 10pt;
color: green;
}

11 Format pseudo classes in the right order - Lord Voldemort Hates Apples
Text rollover effects won’t work correctly in all browsers unless they are in the correct order in the CSS.

CSS
a:link { color: red; }
a:visited { color: yellow; }
a:hover { color: green; }
a:active { color: blue; }

12 Place an image permanently in the bottom left-hand corner of a Web page

CSS
body {
margin:10px 10px 0px 10px;
padding:0px;
background: #f5f5dc url("es.gif") no-repeat fixed left bottom;
}

13 Drawing a green line

HTML
<hr />

CSS
hr {
border: 0;
width: 80%;
color: green;
background-color: green;
height: 5px;
}

14 Making an orange XML or RSS buttons or other icons without using an image

HTML
<a class="feed" href="http://h1.ripway.com/t_eddolls/teblog.xml">FEED</a>

CSS
.feed {
border:1px solid;
border-color:#FC9 #630 #330 #F96;
padding:0 3px;
font:bold 10px arial;
color:#FFF;
background:#F60;
text-decoration:none;
margin:4px;
}

15 Centering text in a paragraph

HTML
<p style="TEXT-ALIGN: center">

16 Positioning within a container
In the example below, the … (or whatever) appear exactly 200px from the left and 150px from the top of the container box.

HTML
<div id="container"><div id="navigation">...</div></div>

CSS
#container
{
position: relative;
}
#navigation
{
position: absolute;
left: 200px;
top: 150px;
}

17 Making links more exciting

CSS
a.ttt {
font-family: arial;
font-size: 10pt;
text-decoration: none;
color: red;
cursor: pointer;
}
a.ttt:visited {
color: gold;
}
a.ttt:hover {
color: navy;
background-color: red;
font-style: italic;
cursor: pointer;
}
a.ttt:active {
background-color: navy;
color: red;
}

HTML
<a class="ttt" href="http://www.itech-ed.com/">hello world</a>

More hints and tips next time.

By the way: anyone looking for an experienced technical writer or Web designer can contact me at trevor@itech-ed.com. Also, if you haven’t completed the mainframe user survey yet, go to www.arcati.com/usersurvey09. And if you’re a vendor, then you need to complete the form at www.arcati.com/vendorentry - and there are still Yearbook sponsorship opportunities available.