Gold Coast Web Designs

Become a web design god and start dabbling with CSS. The easiest way to start dabbling with CSS is to create a simple style sheet which will change the color and behaviour of hyperlinks.

• Introduction
• Create a Simple CSS
• Linking CSS To Your HTML Documents
• Editing This Style Sheet

Introduction

Below is a free style sheet (CSS) which can be edited with NotePad or 1st Page 2000 free HTML editor. The following CSS will enable you to change the color of hyperlinks and control how they behave when the mouse hover over them.

More about changing hyperlink colors.

Create a Simple CSS

Copy and paste the code below into a new NotePad document or into 1st Page 2000 and save it as style.css. The name can be anything you want but the extention must be: .css.

Code

a:link {
COLOR: #0000FF;
TEXT-DECORATION: underline;
}
a:visited {
COLOR: #800080;
TEXT-DECORATION: underline;
}
a:hover {
COLOR: #FF0000;
TEXT-DECORATION: underline;
BACKGROUND: #FFFF80;
}
a:active {
COLOR: #00FF00;
TEXT-DECORATION: none;
BACKGROUND: #FFFF80;
}

Alternatively, you can download a pre made zipped CSS with the above code.

Select the hex colors you want and edit the Style Sheet by changing the hex values.

After you have finished editing the Style Sheet, upload it to your server in ascii mode. More about editing the Style Sheet.

Linking CSS To Your HTML Documents

Insert one of the following codes into the Head section of your HTML documents and upload them to your web site.

Relative Path Code

<link href="style.css" rel="stylesheet" type="text/css" media="screen">

Absolute Path Code

<link href="http://www.YourDomain.com/style.css" rel="stylesheet" type="text/css" media="screen">

Editing This Style Sheet

All values within the style sheet can be changed as long as the seleced value is valid. For example, the TEXT-DECORATION property has 5 different values which can be used:

line-through :: underline :: overline :: blink :: none

Please note that the blink value does not work in all browsers including Internet Explorer.

Further Information

• CSS Properties
• CSS Beginner Tutorial
• All CSS Properties Listed Alphabetically

Email This Article :: Printer Friendly Page

• How To Change Hyperlink Color
• HTML Color Chart Generator
• HTML Image Hyperlinks
• WYSIWYG Web Site Design Software

<a href="http://www.goldcoastwebdesigns.com/create-style-sheet.shtml">How To Create Your First External CSS Style Sheet</a>

This webpage uses Javascript to display some content.

Please enable Javascript in your browser and reload this page.

Top of Page : Home : Web Design Services : Old Index