CSS Links
With CSS, links can be styled in many different ways.
CSS Styling Links
Links can be styled with any CSS property, such as color, font-family, and background.
Example
The link color is set to hotpink.
Prompt
An HTML page that styles a link with a basic CSS property.
In an internal
<style> block, set a { color: hotpink; }. Add a link in the body.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a {
color: hotpink;
}
</style>
</head>
<body>
<p>Style a link with the color property:</p>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>
Styling Links Depending on State
Links can also be styled differently depending on their state. The four link states are:
a:link— a normal, unvisited link.a:visited— a link the user has visited.a:hover— a link when the user moves the mouse over it.a:active— a link the moment it is clicked.
When setting styles for several states, order matters: a:hover must come after a:link and a:visited, and a:active must come after a:hover.
Example
Each link state is given a different color, in the required order.
Prompt
An HTML page that styles a link differently for each of its four states.
In an internal
<style> block, set a:link to red, a:visited to green, a:hover to hotpink, and a:active to blue. Keep them in that order. Add a link in the body.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>
CSS Links - Text Decoration
The text-decoration property is mostly used to remove the underline from links.
Example
The underline is removed for normal and visited links, and added on hover and active.
Prompt
An HTML page that uses text-decoration to control link underlines per state.
In an internal
<style> block, remove the underline for a:link and a:visited (text-decoration: none) and add it for a:hover and a:active (text-decoration: underline). Add a link in the body.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>
CSS Links - Background Color
The background-color property can set a background color for links.
Example
Each link state gets a different background color.
Prompt
An HTML page that gives links a background color per state.
In an internal
<style> block, set a:link background to yellow, a:visited to cyan, a:hover to lightgreen, and a:active to hotpink. Add a link in the body.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>
More Examples
You can combine these properties to make links look like buttons.
Filled button link
A link styled as a solid red button that darkens on hover.
Prompt
An HTML page that styles a link to look like a filled button.
In an internal
<style> block, give a:link and a:visited a red background, white text, padding, centered text, no underline, and inline-block display. On a:hover and a:active, darken the background to red. Add a link in the body.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>
Bordered button link
A link styled as a bordered button that fills with green on hover.
Prompt
An HTML page that styles a link to look like a bordered button that fills on hover.
In an internal
<style> block, give a:link and a:visited a white background, black text, a green border, padding, centered text, no underline, and inline-block display. On a:hover and a:active, set a green background and white text. Add a link in the body.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: green;
color: white;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>