Aug 06

How to Style Links with CSS – Top 5 Link Styling Properties

Wed, 08/06/2014 - 18:32 — julie

We have learned how to create navigation using CSS in the last tutorial. Now in this tutorial we will learn how to style (change color/behavior) of those links present in the navigation bar. Follow the steps provided in this tutorial to style links with CSS.

Steps to style links with CSS

1. First of all, create an html file. You may use any IDE like notepad or notepad ++ or Adobe Dreamweaver to create an html file. In this tutorial, we are using plain notepad that is available on any Windows PC. Open notepad any type following code:

<html>
<head>
<title>CSS tutorial – 10
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
head>
<body>
<ul id=”nav“>
<li>Homeli>
<li>
About Usli>
<li>
Galleryli>
<li>
Contact Usli>
ul>
body>
html>

And then save the file as .html (eg: tut10.html).

Here,
<link rel=”stylesheet” type=”text/css” href=”css/style.css” /> will link the stylesheet that we are going to create.
<ul> tag is used to create list item and <li> lists each item
We have used id because we don’t want all list items in the webpage to change. We only want to change navigation for now.

step-1-create-html-style-links

2. Next, in the same directory (folder), create another folder named css and create new css file named as style.css. To do that, open notepad and save it as style.css

step-2-create-css-style-links

3. Next, open the file style.css and type the following code:

#nav{
list-style: none;
}

#nav li{
margin-right:5px;
width:200px;
text-align:center;
float:left;
background:#000000;
}

#nav a:link{
color: cyan;
}

#nav a:visited{
color: silver;
}

#nav a:hover{
color: red;
background: teal;
text-transform:uppercase;
}

Here,

list-style: none; will remove the default list style i.e bullet-type listing.

margin-right:5px; will set margin on right side with 5 px.
width:200px; is the width of the list item
text-align:center; will center the text in each block.
float:left; will help to float text horizontally. If we don’t use this then text will float vertically.
background:#000000; will set a background color to black on each list item.

#nav a:link is used when you want to change the property of the link that is being displayed. It is the initial state before you moveover or visit the link. We have changed color to cyan here.

#nav a:visited{ is the state that appears after you click the link and it jumps to another page. Then again if you visit the same page from where you click the link then you will see the change in color or other property. In our case after link is clicked it changes to color silver.

#nav a:hover is the state when you move your mouse cursor over the link. In our case we have changed text to red and background to teal when you move over the link.
And text-transform:uppercase; will transform the text to uppercase (capitalize) when you move your mouse over the link.

step-3-type-css-style-links

This completes our tutorial on how to style links with CSS. If you’ve found this CSS tutorial helpful, please leave a comment below!

 

The post How to Style Links with CSS – Top 5 Link Styling Properties appeared first on Web Design Blog | Magazine for Designers.

Copyright 2009. E-mail Me
Auto Spare Parts