Monday, 01 December 2008

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 href="http://h1.ripway.com/t_eddolls/teblog.xml" class="feed">FEED</a>

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

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.

If you need anything written, contact Trevor Eddolls at iTech-Ed.
Telephone number and street address are shown here.