CSS tips

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.

1 Use default values

There is no need to specify a value for a property if you use that property's default value.

2 Less is more

The less code that has to be downloaded, the faster the page loads. So shorten hexadecimal colour notation, where possible.

#000 is the same as #000000, #ffffff is the same as #fff, and #123 is the same as #112233, etc.

3 Less CSS is definitely better

For fonts:

Bad CSS

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: arial;

Good CSS

font: 1em/1.5em bold italic small-caps arial

You must specify both the font-size and the font-family. Unspecified values (font-weight, font-style, or font-variant) default to a value of normal.

For background:

Bad CSS

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Good CSS

background: #f5f5dc url(es.gif) no-repeat top left

For list-style:

Bad CSS

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(es.gif)

Good CSS

list-style: disc outside url(es.gif)

For margins:

Bad CSS

margin-top: 2px;
margin-right: 3px;
margin-bottom: 4px;
margin-left: 3px

Good CSS

margin: 2px 3px 4px 3px

(top, right, bottom, left)

For borders:

Bad CSS

border-width: 1px;
border-color: black;
border-style: solid

Good CSS

border: 1px black solid

4 Using two classes together

Two classes can be combined. They must be separated by a space (not a comma) in the HTML. The rules is that where an overlap between classes occurs (in this case, one and two), the class nearest the bottom of the CSS file takes precedence.

HTML

<p class="one two">...</p>

5 Dividing a Web page into parts

You can use CSS to divide a Web page into four parts - an area across the top, then underneath that an area on the left for buttons, an area in the middle for text, and an area on the right.

CSS

#top {
position: absolute;
background: #ffffff;
top:145px;
left:80px;
right:100px
}
#leftcontent {
position: absolute;
left:80px;
top:200px;
width:80px;
background: #f5f5dc;
}
#centercontent1 {
position: absolute;
top:200px;
left:200px;
width: 35%;
margin-left: 81px;
}
#rightcontent {
position: absolute;
right:0px;
top:500px;
width:30%;
background:#f5f5dc;
}

HTML

<div id="top">
</div>
<div id="leftcontent">
</div>
<div id="centercontent1">
</div>
<div id="rightcontent">
</div>

6 printing your page

You may want people to print a Web page as black text on a white background while at the same time having lots of fancy stuff on the page. You can achieve this by having a print stylesheet associated with the page.

HTML

<link rel="stylesheet" type="text/css" href="print.css" media="print">

or:

<style type="text/css" media="print"> @import url(print.css);
</style>

You need to put appropriate styles in the print.css stylesheet.

7 Use "title" and "alt" attributes for images

With these encoded, screen readers can correctly parse your page.

HTML

<img src="myimg.gif" alt="me" title="me" />

8 Invisible text

Invisible text can be useful for people who use screen readers. It can also be useful where images contain text because search engines can't "read" images.

CSS

position: absolute; left: -5000px

The text is positioned 5000px to the left of the left edge of the screen.

9 Drop cap

This adds a drop cap to the left of a block of text.

HTML

<span style="margin-right:6px; margin-top:5px; float:left; color:white; background:gold; border: 1px solid #000; font-size:80px; line-height:60px; padding-top:2px; padding-right:5px; font-family:arial;">H</span>ere is a drop cap with a gold background, white text, and a black border.
<div style="clear:both;"><br />
</div>

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>

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) appears 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;v }
a.ttt:hover {
color : navy;
background-color : red;
font-style : italic;
cursor : pointer;
}
a.ttt:active {
background-color : navy;
color : red;
}

HTML

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

18 Simple 3D link button effect

HTML

<a href="#">LINK</a>

CSS

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}
a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

19 CSS buttons with mouseover effects

CSS

div#buttonA {
margin-left: 10px;
margin: 0px;
padding: 0px;
font-family: arial;
font-size: 8pt;
color: #fcfcd5;
font-weight: bold;
list-style-type: none;
height: 24px;
width: 150px;
margin: 2px;
text-align:center;
}
div#buttonA a {
display: block;
text-decoration: none;
font-weight: bold;
border-width: 6px;
}
div#buttonA a:link {
color: green;
font-weight: bold;
background-color: #fcfcd5;
border-style: outset;
}
div#buttonA a:visited {
color: green;
font-weight: bold;
background-color: #fcfcd5;
border-style: outset;
}
div#buttonA a:hover {
font-weight: bold;
color: #fdd017;
background-color: #fcfcd5;
border-style: outset;
}
div#buttonA a:active {
font-weight: bold;
color: red;
background-color: #fcfcd5;
border-style: inset;
}

HTML

<div id="buttonA">
<a href="index.htm" onmouseover="window.status='Home page';return true;" onmouseout="window.status='Elegant Solutions';return true;">Home page</a>
</div>

This repeats for the other buttons.

20 Table that highlights lines on mouseover

HTML

<table id="hilite-table" summary="Retirement age for women">
<thead>
<tr>
<th scope="col">Date of birth</th>
<th scope="col">Pension age</th>
<th scope="col">Pension year</th>
</tr>
</thead>
<tbody>
<tr>
<td>April 1950</td>
<td>60yrs 1mth</td>
<td>2010</td>
</tr>
<tr>
<td>October 1950</td>
<td>60yrs 7mths</td>
<td>2011</td>
</tr>
<tr>
<td>April 1951</td>
<td>61yrs 1mth</td>
<td>2012</td>
</tr>
</tbody>
</table>

There are more entries in the table than shown - but you get the idea.

CSS

#hilite-table
{
font-family: arial;
font-size: 12px;
font-weight: bold;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
#hilite-table th
{
font-size: 13px;
font-weight: normal;
padding: 8px;
background: green;
border-top: 4px solid green;
border-bottom: 1px solid green;
border-right: 1px solid #f5f5dc;
border-left: 1px solid #f5f5dc;
color: gold;
font-weight: bold;
}
#hilite-table td
{
padding: 8px;
background: #f5f5dc;
border-bottom: 1px solid green;
color: green;
border-top: 1px solid green;
border-right: 1px solid green;
border-left: 1px solid green;
vertical-align: top
}
#hilite-table tr:hover td
{
background: green;
color: gold;
font-weight: bold;
}

If you need help with Web design and development, contact Trevor Eddolls at iTech-Ed.
iTech-Ed's telephone number and street address are shown here.