CSS Links
With CSS, you can change the appearance of links in various ways.
Text Link
Text Link
Link Button
Link Button
Styling Links
Links can be styled with any CSS property (e.g. color, font-family,
background, etc.).
The four links states are as follows:
a:link - a normal, unvisited linka:visited - a link the user has visiteda:hover - a link when the user hover over ita:active - a link the moment it is clicked
When you're choosing how links should look in different situations, there are specific rules to follow regarding the order of styles:
- a:hover MUST come after a:link and a:visited
- a:active MUST come after a:hover
Text Decoration
The text-decoration property is mainly used to get rid of the lines under links.
Background Color
You can use the background-color property to assign a color for the background of links.
Link Buttons
This example shows a more advanced way to use CSS properties to make links look like boxes or buttons.
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: hotpink;
}
</style>
</head>
<body>
<h2>Style a link with a color</h2>
<p>
<b>
<a href="https://propertutorials.com/code-space/_css_css-links+1" target="_blank">This is a link</a>
</b>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<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>
<h2>Styling a link depending on state</h2>
<p>
<b>
<a href="https://propertutorials.com/code-space/_css_css-links+2" target="_blank">This is a link</a>
</b>
</p>
<p>
<b>Note:</b> make sure that the CSS definition for a:hover appears after the definitions for a:link and a:visited.
</p>
<p>
<b>Note:</b> To make sure it works properly, the CSS definition for "a:active" must follow "a:hover."
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Styling a link with text-decoration property</h2>
<p>
<b>
<a href="https://propertutorials.com/code-space/_css_css-links+3" target="_blank">This is a link</a>
</b>
</p>
<p>
<b>Note:</b>In CSS, for a:hover to work properly, it should be placed after a:link and a:visited in the CSS definition.
</p>
<p>
<b>Note:</b> In CSS, to make sure a link is active, the style for "a:active" should be defined after "a:hover" for it to work properly.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
</style>
</head>
<body>
<h2>Styling a link with text-decoration property</h2>
<p>
<b>
<a href="https://propertutorials.com/code-space/_css_css-links+4" target="_blank">This is a link</a>
</b>
</p>
<p>
<b>Note:</b>In CSS, for a:hover to work properly, it should be placed after a:link and a:visited in the CSS definition.
</p>
<p>
<b>Note:</b> In CSS, to make sure a link is active, the style for "a:active" should be defined after "a:hover" for it to work properly.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<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>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="https://propertutorials.com/code-space/_css_css-links+5" target="_blank">This is a link</a>
</body>
</html>
HTML
CSS
Javascript
Jquery
PHP
MySQL