HyperlinkCode.com

How to create 500 totally unique, human-quality articles in just 45 seconds ..

External Stylesheet for Multi Page Websites

Using an external stylesheet is useful when you want to make style changes to websites with more than one page. It saves time because only the stylesheet needs to be edited to make changes on pages at once.

Link Document To Stylesheet

HTML Code

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

Place the link element into the head of your HTML document in order to link to the stylesheet (style.css). The above syntax assumes that style.css is in the same directory as your HTML documents. You can specify a different path to style.css by changing the href value.

General Stylesheet for Hyperlinks

Instructions

Create new: If you don't already have a stylesheet connected to your web pages, create a new plain text file, paste the CSS code below into it and Save As style.css. If you can't Save As, simply save it as a normal text file (style.txt) and rename it manually from style.txt to style.css.

Add to existing: If you already have a website stylesheet, additional rules can simply be added to it. Make sure however to back-up your stylesheet before making any changes just in case something goes wrong. To make a back up, simply make a copy of the stylesheet and use the copy to experiment with.

CSS Code

a:link {
color: #0000FF;
text-decoration: underline;
}

a:visited {
color: #800080;
text-decoration: underline;
}

a:hover {
color: #DD0000;
text-decoration: none;
}

Variable CSS Properties

color: #0000FF, #800080, #DD0000 = Variable color of hyperlink.
text-decoration: none = No underline. underline = Underlined hyperlink.

Output

http://www.hyperlinkcode.com/color/external-stylesheet.php

Free web design videos! Learn the easy way to responsive (mobile friendly) web design.

Stylesheet for Styling Dashed Underline Hyperlinks

CSS Code

a {
text-decoration: none;
}
a:link {
color: #0000FF;
border-bottom: 1px solid #0000FF;
}
a:visited {
color: #0000FF;
border-bottom: 1px solid #999999;
}
a:hover {
color: #EE0000;
border-bottom: 2px dashed #999999;
}

Variable CSS Properties

border-bottom: 1px = Width of underline. dashed = Style of underline. #0000FF, #999999 = Color of underline.

Output

http://www.hyperlinkcode.com/color/external-stylesheet.php#dashed-underline

Experiment with different values for a:link, a:visited, and a:hover to acheive different effects.

Stylesheet for Styling Dotted Underline Hyperlinks

CSS Code

a {
text-decoration: none;
}
a:link {
color: #0000FF;
border-bottom: 2px dotted #0000FF;
}
a:visited {
color: #333333;
border-bottom: 2px dotted #999999;
}
a:hover {
color: #000000;
border-bottom: 2px dotted #EE0000;
}

Variable CSS Properties

border-bottom: 2px = Width of underline. dotted = Style of underline. #EE0000, #0000FF, #999999 = Color of underline.

Output

http://www.hyperlinkcode.com/color/external-stylesheet.php#dotted-underline

More CSS For Your Stylesheet

Learn to style your entire website by adding different CSS properties into your stylesheet.

Related Articles

© Copyright 2007 - 2017 HyperlinkCode.com.
Site Admin: Ed Zivkovic. Privacy | Terms