Cascading Style Sheets Tutorials and Lessons: Adding Styles to your HTML Web Pages

Stay at Home and Learn

Cascading Style Sheets

Adding Styles To Your Web Pages

Computer Tutorials List

Adding an Inline Style

The first code we're going to write will cause a hyperlink to change colour when the mouse is moved over it. So start your HTML Editor and do the following:

Inline Style

Create a new web page with a white background colour
Insert a hyperlink by clicking Insert from the menu bar
From the drop down menu click Link > Blank Hyperlink
When the link is inserted, highlight it all
The HTML code in your editor should now look like this:

<HTML>
<HEAD>
<TITLE>Inline Style</TITLE>
</HEAD>
<BODY>

<A Href = ""></A>

</BODY>
</HTML>

With the link highlighted, click on Add from the menu bar
From the drop down menu, click Style
From the sub menu that appears, click Mouse Over/Out Colour
The following dialogue box appears:

Mouse Over Dialogue box

Select a colour from the "Mouse Over Colour" drop down list. This is the colour your hyperlink will change to when a user places the mouse over your link
Select a colour from the "Mouse Out Colour" drop down list. This is the colour your hyperlink will change to when a user moves the mouse from your link
Click OK
Your editor will then look like this (after it's cleaned up a bit, because the Editor puts the code all on one line.)

<A Href = "" onmouseover="this.style.color='Red'" onmouseout="this.style.color='Blue'">
Click Me Now!
</A>

The text "Click Me Now!" has been added for the link. Add some text for your link, and then save your work. View it in a browser, and test it out by moving your mouse over the hyperlink and moving it away.

Of course, the link doesn't work because it was a Blank Hyperlink. But you can easily insert a real link, and apply the Style. Note what the style was in all that code, though:

this.style.color=

The word "this" doesn't have to be there. It means "this document" and tells the browser exactly which web page you mean. It's used more on the scripting side of things than on the Style side. It could have been shortened to:

style.color=

With that code, we're changing the behaviour of the Inline A HREF element. We told the browser what to do when it detects an "OnMouseOver" event (more on this in the scripting section), and what to do when it detects an "OnMouseOut" event. What it does is to change the colour of the text for the link.

Test your new link out, and see the results. It should look like the link below. Move your mouse over this link:

Move Your Mouse over Me

HTML Selectors

This next exercise will add some code to your page that switches off the underline from a hyperlink when the mouse is moved over it. It is an example of a HTML Selector in action. So, create a new web page in your Editor and do this:

Insert a blank hyperlink (or a real one, if you prefer) just as you've done above
Highlight the hyperlink, then click Add from the menu bar
From the drop down menu, click Style > Mouse Over/Out Underline Off
The Editor adds the Style code to the HEAD section of your web page:

<STYLE type=text/css>
a:hover { color: #0000FF; text-decoration: None}
a:link { color: #FF0000}
</STYLE>

</head>
<body>
<a href = ""></a>

The HTML Selector "A" (for Anchor) is the one that will be changed. The Rule the Editor sets up means that all Anchor links will now have their "Hover" behaviour and their "Link" behaviours changed. The Property that removes the link underline is text-decoration, and the Value that is used is None.

Type some text for the link, then save your web page and test it out in a browser.

In the next part, we'll see how to change the background colour behind some text

<-- Back One Page Move on to the Next Part -->

<--Back to the Style Sheets Contents Page

View all our Home Study Computer Courses