CSS Walk 4 Links
Let´s work with the following html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS course</title>
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
</head>
<body>
<a href="https://jalbertomr.blogspot.com">Link to Page A</a>
<a href="https://jalbertomr.blogspot.com">Link to Page A</a>
<a href="https://jalbertomr.blogspot.com">Link to Page A</a>
<a href="https://jalbertomr.blogspot.com">Link to Page A</a>
<a href="https://jalbertomr.blogspot.xyz/notapage/xyz">Link to Page B</a>
</body>
</html>
browser output
Once we access to one link, the color of the anchor link change from blue to darkpink
let's change the styles.css file
a {
color: darkolivegreen;
font-size: 20px;
text-decoration: none;
}
browser output, size, color and underline changes
Let´s adjust the margins top, left, bottom, right
a {
font-size: 25px;
text-decoration: none;
margin: 10px 20px 10px 0px;
}
If we do click and sustain it, the color of the link change to red, this is a click state.
So there are states for the links
- visited.
- not visited.
- onClick (link)
- over (mouse over)
- active (once clicked)
Pseudoclases
To change the anchor link we use pseudoclasses. a:link for the unvisited links, a:hover for the mouse over.
a {
font-size: 25px;
text-decoration: none;
margin: 10px 20px 10px 0px;
}
a:link {
color: darkorange;
}
a:hover {
text-decoration: underline;
background: royalblue;
color: skyblue;
}
browser output:
Let´s adjust the padding and the left, right margin for the anchor link to the box to make it more bigger.
a {
font-size: 20px;
text-decoration: none;
padding: 10px 20px;
margin: 10px 0px 10px 0px;
}
a:link {
color: darkorange;
}
a:hover {
text-decoration: underline;
background: royalblue;
color: skyblue;
}
browser output:
let's add the pseudoclases to active and visited
a {
font-size: 20px;
text-decoration: none;
padding: 10px 20px;
margin: 10px 0px 10px 0px;
}
a:link {
color: darkorange;
}
a:hover {
text-decoration: underline;
background: royalblue;
color: skyblue;
}
a:visited {
color: darkslategray;
}
a:active {
background: rgb(255, 102, 0);
}
browser output:
Let's modify the css file to make the anchor look like a button
a {
font-size: 20px;
text-decoration: none;
background: rgb(65, 134, 225);
color: white;
padding: 10px 20px;
margin: 10px 0px 10px 0px;
box-shadow: 0px 5px 0px rgba(1, 1, 94, 0.521);
}
a:hover {
background: rgb(80, 149, 240);
box-shadow: 0px 3px 0px rgba(1, 1, 94, 0.521);
}
a:active {
background: rgb(90, 159, 250);
color: lightgrey;
box-shadow: 0px 0px 0px rgba(1, 1, 94, 0.521);
}
browser output:
a {
font-size: 20px;
text-decoration: none;
background: rgb(65, 134, 225);
color: white;
padding: 10px 20px;
margin: 10px 5px 10px 0px;
box-shadow: 5px 5px 3px rgba(1, 1, 94, 0.521);
}
a:hover {
background: rgb(80, 149, 240);
box-shadow: 3px 3px 3px rgba(1, 1, 94, 0.521);
}
a:active {
background: rgb(90, 159, 250);
color: lightgrey;
box-shadow: 0px 0px 0px rgba(1, 1, 94, 0.521);
}
browser output:
eot
No hay comentarios:
Publicar un comentario