Home     Hosting     Design     Store     Contact

 How To Create Your First External CSS Style Sheet

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

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

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;
}

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.

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.

 

Home     Hosting     Design     Store     Contact

Copyright © 2012 Web Street. All Rights Reserved.