CSS Hyperlinks Tutorial
←... External Style Sheets Tutorial
Page Two...
In the last lesson, we made a second page called "pagetwo.html", essentially turning our web page into a website.
As it stands, we have no way to get to our new page because we haven't provided a link to it.
Creating a Hyperlink...
Creating a hyperlink to another page on our website (or any other site/page) is as simple as adding <a></a> tags. Add the following HTML to your code...
<head>
<title>ChangRox.com</title>
<link rel="stylesheet" type="text/css" href="changroxstyle.css" />
</head>
<body>
<p class="crrt">Hello World!</p>
<p>Welcome to <span class="dingleberries">ChangRox.com!</span></p>
<p>The site for extolling the virtues of Chang.</p>
<p><a href="pagetwo.html">Click here to go to Page Two!</a></p>
</body>
</html>
Save/refresh to see the newly created link to Page Two.
The "a" part tells the browser that we're inserting a link. The "href" part tells it where to go. Everthing between the <a></a> tags becomes the link.
I know, the link is pretty ordinary looking. That's because using only HTML, there aren't a whole lot of things you can do to change the appearance of a hyperlink.
CSS to the Rescue...
Unlike HTML, CSS gives us all sorts of control over hyperlinks. Let's suppose we want our links to be bold and brown, without an underline, until we hover over them when they'll turn green, and be underlined. Add this to your external style sheet...
font-family: Arial;
}
.crrt {
color: red;
}
.dingleberries {
color: red;
font-weight: bold;
font-style: italic;
}
a:link {
font-weight: bold;
color: brown;
text-decoration: none;
}
a:visited {
font-weight: bold;
color: brown;
text-decoration: none;
}
a:hover {
font-weight: bold;
color: green;
text-decoration: underline;
}
a:active {
font-weight: bold;
color: green;
text-decoration: underline;
}
(Re)save your style sheet, then refresh the browser window to see the result. When you mouseover the bold, brown link, it turns green and is underlined.
Breaking it Down...
Again, notice how the selector "a" in a:link refers to the <a> tag.
a:link, represents a hyperlink as it looks if the page HAS NOT BEEN VISITED before.
a:visited, determines what the link looks like if the site visitor HAS VISITED THE PAGE BEFORE.
a:hover, determines what the link looks like when mousing over it.
a:active, determines what the link looks like WHEN CLICKED.
If you wanted to allow the visitor to know if he/she had been to a page before you could change a:visited {color: brown;} to a:visited {color: blue;}. If the visitor had been to the page before it would be blue. A new visitor would see the link as brown. Similarly, if you wanted the link to change to red as the visitor is clicking it, change a:active {color: green;} to a:active {color: red;}.
Keep in mind that they MUST BE LISTED IN THAT ORDER or they will cause unpredictable results.
Seems like an awful lot of writing, I know. There are shorter ways to do it (called "CSS shorthand"), but that's a little too much to get into for right now. Remember though, that using an external style sheet, you only have to write it once for the entire site! Click your link to go to Page Two to see what I mean.
Uh-oh! What happened to your style rules? Ha-ha, just testing. Open your "pagetwo.html" file with Notepad and add this part to the header section...
<head>
<title>ChangRox.com-(page two)</title>
<link rel="stylesheet" type="text/css" href="changroxstyle.css" />
</head>
<body>
<!-- This is the beginning of the body of my page. -->
<p>Here are some heading tag examples...</p>
<h1>Large Heading on Page Two</h1>
<h2>Medium Heading on Page Two</h2>
<h3>Small Heading on Page Two</h3>
</body>
</html>
Save/refresh. That's better. I know that was kind of a cruel trick. I just wanted make sure that you remember to do that for every page where you want your style rules to apply. Starting to get the picture? Click the link to learn even more.
© 2008 - 2011 fapmaster.com