Html & CSS for Links
Html for Links
<a href="http://linktopage.com">Click Here</a>
<a href="linktopage.com">Click Here</a>
<a href="http://linktopage.com" target="_blank">Click Here</a>
<a href="http://webpageurl.html" target="_blank"><img src="picture.jpg" alt="picture of train"></a>
<a href="http://webpageurl.html"><img src="picture.jpg" alt="picture of train"></a>
-
alt="picture of train" is required to be there. It will display the words "picture of train" if the picture does not display.
- To add inline styling for the width and height of the picture that is being used for a link. Although, you might want to use the External style sheet. Use picture editing software to make the picture the size you want. Below is examples of both inline styling and using external style sheet.
<a href="http://webpageurl.html"><img src="picture.jpg" alt="picture of train" style="width:100px;height:100px;"> </a>
- Instead:
<a href="http://webpageurl.html"><img src="picture.jpg" alt="picture of train" class="pic333"></a>
-
On the CSS sheet:
.pic333 {
width:100px;
height:100px;
}
CSS for Links
There are 4 link states. They must be in this order: Link, Visited, hover and active. .navbar a:link refers to all the a tags inside the navbar element.
If you were going to style all the links on your page the same, you would write: a:link instead of .navbar a:link.
Link is the state of the link before it is clicked or hovered over.
Visited is after the page has been clicked and visited.
Hover is while the mouse is hovering over the link.
Active is while the mouse button is pressed down clicking the link.
.navbar a:link {
color:white;
text-decoration:none;
font-weight:bold;
outline: none;
font-size-size:16px;
}
.navbar a:visited {
color:white;
text-decoration:none;
font-weight:bold;
outline: none;
font-size-size:16px;
}
.navbar a:hover {
color:lightblue;
text-decoration:none;
font-weight:bold;
outline: none;
background-color:black;
font-size-size:16px;
}
.navbar a:active {
color:red;
text-decoration:none;
font-weight:bold;
outline: none;
background-color:white;
font-size-size:16px;
}