Css Course

Hover Text Links

For our last lesson lets add some clickable text links with the HOVER attribute. What this will do is highlight with a background color your clickable text links. You could just add a HOVER text color without the background color. This will change just the color of the text when moused over. Another thing to try is adding a different font size to the HOVER attribute. This will allow the text to grow larger or smaller when moused over. CSS is very powerful indeed.

<HTML>
<HEAD>
<TITLE>My First CSS Web Page</TITLE>
<STYLE TYPE="text/css">
BODY { background: #000000 url(stars.gif); }
A:LINK { color: #ffffff; }
A:VISITED { color: #ffff00; }
A:ACTIVE { color: #ff0000; }
A:HOVER { color: #ff0000; background-color: #ffff00; }
H1 { font-size: 24pt;
        font-weight: bold;
        color: #66ccff;
        font-style: italic;
        text-align: center; }
H2 { font-size: medium;
       font-weight: 200;
       color: #ffffff;
       font-style: normal;
       text-align: left;
       text-decoration: underline;
       letter-spacing: 2mm;
       font-family: comic sans ms; }
P { font-size: 15pt;
       color: #7fffd4;
       text-align: center;
       margin-top: 100px; }
.par2 { font-size: large;
           color: #000000;
           margin-right: 20px;
           margin-left: 90px;
           background-color: #ff7f50; }
#image1 { background-color: purple;
           margin-left: 170px;
           margin-right: 170px;
           border-color: red green blue orange;
           border-style: ridge;
           border-width: 50px;
           padding: 10px; }
</STYLE>
</HEAD>
<BODY>
<H1>My First CSS Web Page</H1>
<BR><BR>
<H2>Learning With Draac.Com</H2>
<P>This is an example paragraph using CSS<br>
it has it's own text and alignment attributes.<br>
With these attributes you can set how the text<br>
will look and exactly where on the page it will appear.
</P>
<P CLASS="par2">
This is our second paragraph<br>
which is using a CLASS to govern<br>
how it looks and where it appears<br>
on the web page.
</P>
<P ID="image1">
<IMG SRC="toucan2.gif" WIDTH="225" HEIGHT="179" ALT="toucan">
<P STYLE="background-color: #ff0000; color: #ffffff">
Here is some text in a color set by the inline code<br>
and a background color also set by the inline code.
</P>>
<A HREF="http://www.draac.com/">
<B>BACK TO DRAAC.COM</B></A>
</BODY>
</HTML>

Click To View Our Page Here

Note: The Hover Attibute Is Not Supported by MSNTV

Well, I hope this small course in CSS has wet your beak and peaked your interest in CSS. I have not even scratched the surface of what CSS can do for you. It is not totally supported yet by all browsers but I believe this could be the future in how web pages are constructed. A mix of CSS and HTML seems to accomplish many cool things.

Next Prev