SubscribeFeb 2 CSS Tips
Check out some tips and tricks for CSS and style sheets.
Link Color
Want to make some of your links a different color? Try adding a color style to your link.
<A href="file.html" style="color: green" > click here </A>
Mouseover Link Color
Want to make your links change a different color? Try using the hover declaration.
<style>
A:hover {color:green}
</style>
<A href=”file.html” > click here </A>
No Underline Link
Want to remove the underline from your links? Try adding a color style to your link.
<A href=”file.html” style=”text-decoration: none” > click here </A>
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>
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>
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 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>
