From GoldCoastWebDesigns.com

Web Design
How To Create Your First External CSS Style Sheet
From: Ed Zivkovic
Jan 21, 2007, 21:53

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


    • © Copyright 2010 by GoldCoastWebDesigns.com