Prev Page Next Page
Top

CSS Links

➢With CSS, links can be styled in many different ways.


Styling Links

➢Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
➢The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

EXAMPLE:

a:link { background-color: yellow;}
a:visited { background-color: cyan;}
a:hover {background-color: lightgreen;}
a:active {background-color: hotpink;}

Run


Text Decoration

➢The text-decoration property is mostly used to remove underlines from links.

EXAMPLE:

a:link { text-decoration: none;}
a:visited { text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}

Run


Background Color

➢The background-color property can be used to specify a background color for links.

EXAMPLE:

a:link {
     background-color: yellow;
}
a:visited {
     background-color: cyan;
}
a:hover {
     background-color: lightgreen;
}
a:active {
     background-color: hotpink;
}

Run


Link Buttons

EXAMPLE:

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: lightgreen;}

Run


Prev Page Next Page





FEEDBACK