Web Design Tips and Information
Front Page 
 
 Feature Articles
 
 Web Design
 
 Free Wordpress Themes
 
 Free Stuff
 
 About
 
 Site Map
 Search

Web Design  About  Site Map 
 Home : Web Design

How To Create Your First External CSS Style Sheet

Email this article
 Printer friendly page
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
  •  Related Articles
     HTML Code For Linking To This Page
    <a href="http://www.goldcoastwebdesigns.com/create-style-sheet.shtml">How To Create Your First External CSS Style Sheet</a>
     Webmaster Headline Feed

    This webpage uses Javascript to display some content.

    Please enable Javascript in your browser and reload this page.

      Home | Web Design
    Top of Page  Front Page
    Web Design
    Latest Headlines
    How To Create Your First External CSS Style Sheet
    How To Change Hyperlink Color
    How To Create a HTML Download Link
    HTML Code For Scrolling Marquee
    Hyperlink and Status Bar
    HTML Image Hyperlinks
    Simple Image HTML Tags
    Hyperlink Button Code
    HTML Hyperlink Code
    Common HTML Tags