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>

Did you like this post? Get monthly summary of our new tutorials, posts and tips to your inbox!

One Response

  • Great thread! , i like these tips, its looks that i knew just small part of it.

Post Your Comment

Your email address will not be published.