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>
One Response
Great thread! , i like these tips, its looks that i knew just small part of it.