Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Links

10 mintues

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

CSS Links

CSS Links can be styled in various ways.

Styling Links

Links can have their appearance modified using any CSS property, such as color, font-family, background, and more.

Example

a {
color: hotpink;
}

Furthermore, links can exhibit distinct styles based on their current state. The four link states are as follows:

a:link – Represents a normal, unvisited link.
a:visited – Denotes a link that the user has previously visited.
a:hover – Refers to a link when the user hovers over it.
a:active – Indicates a link at the moment it is clicked.

Example

/* 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;
}

When defining styles for multiple link states, certain order rules must be followed:

a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

Text Decoration

The text-decoration property is commonly utilized to eliminate underlines from links.

Example

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}

Background Color

The background-color property enables the specification of 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;
}

Link Buttons

This example showcases a more intricate demonstration where we amalgamate various CSS properties to present links as boxes or 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: red;
}

More Examples

Example

This example illustrates how to incorporate additional styles to hyperlinks.

a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}

a.two:link {color: #ff0000;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}

a.three:link {color: #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}

a.four:link {color: #ff0000;}
a.four:visited {color: #0000ff;}
a.four:hover {font-family: monospace;}

a.five:link {color: #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; text-decoration: none;}
a.five:hover {text-decoration: underline;}

Example

Another example of how to create link boxes/buttons:

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

Example

This example showcases various types of cursors, which can be beneficial for links.

auto 
crosshair 
default 
e-resize 
help 
move 
n-resize 
ne-resize 
nw-resize 
pointer 
progress 
s-resize 
se-resize 
sw-resize 
text 
w-resize 
wait