Tips & Tricks
Link Color
Want to make some of your links a different color?
Try adding a color style to your link.
<A href="span.html" style="color: green" > click here </A>
click here
Mouseover Link Color
Want to make your links change a different color?
Try using the hover declaration. Works in IE4 & IE5
<style>
A:hover {color:green}
</style>
<A href="span.html" > click here </A>
click here
No Underline Link
Want to remove the underline from your links?
Try adding a color style to your link.
<A href="span.html" style="text-decoration: none" >
click here </A>
click here
Change the font inside a table
So you made a table but you would like to change the style of font used in your
columns.
Instead of inserting font tags inside each of the cells change your font with
CSS.
<style>
TD.red {color:red }
TD.Arial {font-family:Arial }
</style>
</head>
<table>
<tr><td class="red">
This is some text
</td></tr>
<tr><td class="Arial">
This is some text
</td></tr>
</table>
This is some text
This is some text
Special Headline
Want to make a special headline for your page?
Try using positioning to place text over text.
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor=yellow>
<DIV style="position: absolute;
top: 15px;
width: 370px;
height: 80px;
font-size: 60pt;
font-family:Verdana;
color:red">CHICKEN</DIV>
<DIV style="position: absolute;
top: 35px;
left: 110px;
width: 300px;
color:blue;
height: 20px;
font-style:italic;
font-family:Arial;
font-size: 45pt ">
Super</DIV>
</BODY>
</HTML>
Click here for SuperChicken Absolute Position Example
Drop Shadow
Want to make a Text drop shadow but you don't want to use a large gif or jpeg
image.
Use absolute positioning to make a duplicate block of text. Then offset the
first text block and use a dark gray color for the text.
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor=yellow>
<DIV style="position: absolute;
top: 15px;
width: 370px;
height: 80px;
font-size: 60pt;
font-family:Verdana;
color:808080">CHICKEN</DIV>
<DIV style="position: absolute;
top: 10px;
width: 370px;
height: 80px;
font-size: 60pt;
font-family:Verdana;
color:red">CHICKEN</DIV>
</BODY>
</HTML>
Drop Shadow
Drop Caps
Want to make the first letter in your paragraph a drop cap?
Try floating that character in a span element.
<HTML>
<HEAD>
<style>
.dropcap {
width: 1em;
height: 1em;
float: left;
text-align: center;
font-size: 20pt;
color:red;
font-style:italic
}
</style>
</HEAD>
<BODY bgcolor=ddddaa>
<TABLE><TR><TD width="200">
<p><SPAN class="dropcap" >
T</span>his is a dropcap
text text text text text text text text
text text text text text text text text
text text text text text text </p>
</TD></TR></TABLE>
</BODY>
</HTML>
Drop Caps