CSS Tutorial: Formatting Hyperlinks with Cascading Style Sheets (CSS)
Links are pieces of text that are hyperlinked to other
web pages. They are 'clickable' meaning that a user can put their mouse cursor
over the link, click, and go to the designated web page. There are four states
that a link may be in on an HTML web page: the link, a visited
link, an active link, and a hovered link.
The link, of course, is just the link as it appears when no action has been
taken, and the cursor isn't over the link. The default color for links is
blue, and they are usually underlined. However, with CSS, you can change
this. A visited link is one that the user has visited, and it is usually
no longer blue to the user - but it is still clickable.
An active link is a link that has just been clicked. The link turns a different
color between the time that the user clicks the mouse button down and then
let's goes of the mouse button, meaning that they have activated the link.
A hovered link refers to the time that the user has their mouse cursor over
a link, but has not clicked.
To manipulate these links, we use the following in our CSS:
a:link {color: #008000;
text-decoration: none}
a:visited {color: #cccccc; text-decoration: none}
a:active {color: #ff0000; text-decoration: underlined}
a:hover {color: #3300ff; text decoration: underlined} |
When we put the above code within our HTML web page CSS,
all of the links on the web page will be green. When the user puts their
mouse cursor over the link, it will turn blue, and be underlined. When they
click the link, it will temporarily turn red and be underlined, and when
they return to this page, the link that they clicked will be gray.
The upper portion of the web page code now looks like this:
<html>
<head>
<title>Your Page Title</title>
<style type= "text/css" title="styleid"
media="all">
<!--
body { background-color: 000000; color: ffffff;
margin: 100px;
font-family: Arial, Georgia, "Times New Roman", Verdana, Sans-Serif;
font-size: 12px;
Line-height: 160%
}
H1 { color: ff0000; font-family: Arial, "Times New Roman"; }
ul {list-style-image: url (images/bullet.gif)}
a:link {color: #008000; text-decoration: none}
a:visited {color: #cccccc; text-decoration: none}
a:active {color: #ff0000; text-decoration: underlined}
a:hover {color: #3300ff; text decoration: underlined}
-->
</style>
</head>
<body>
</body>
</html> |
HTML allows us to format and manipulate text to make
our web pages more attractive and appealing; however, Cascading Style Sheets
enable us to make them even more attractive and appealing. This is one of
the biggest benefits of CSS, other than the fact that using CSS saves loads
of time when creating or changing web pages.
In the next section, you'll learn how to display tables with Cascading Style
Sheets.
 |
 |
Previous |
Next |
 An Introduction to Cascading Style
Sheets
Creating a Basic HTML Page
Embedding Cascading Style Sheets
Using Cascading
Style Sheets (CSS) to Specify Web Page Formatting
Manipulating Bulleted
and Numbered Lists with Cascading Style Sheets (CSS)
Formatting Hyperlinks
with Cascading Style Sheets (CSS)
Creating Tables within a
Web Page with Cascading Style Sheets (CSS)
Cascading Style
Sheets (CSS) Classes and ID's
Cascading Style Sheet
Codes Chart - Property Index
Web Development Tutorials
Cascading Style
Sheets Tutorial: An Introduction to Cascading Style Sheets
JavaScript
Tutorial: An Introduction to JavaScript
Web
Development: A step by step guide to developing a successful Internet
business
HTML
Codes Chart: Copy and paste HTML codes for your web page
HTML Tips:
Copy and paste special effect HTML codes for your web page
Web Design
Tips: Tips, tricks, and special effect codes for your web page
JavaScript
Code Snippets: Copy and paste special effect JavaScript codes for your
web page
216
Web Safe Color Chart: Hexadecimal and RGB Color Codes for your web page
ASCII Character
Codes Chart: American Standard Code for Information
Interchange character codes chart
|
| eTips Member Login |
 |
|
Enter your email address and password to enter the private membership
area:
Lost Password?
|
Daily News For
Webmasters
|
