Links are very common on web pages, but many web designers don’t realize the power they have with CSS to effectively manipulate and manage their links. You can define links with visited, suspended and active statuses. You can also work with borders and backgrounds to give your links more pizzaz or make them look like buttons or even images.
Most web designers start by defining a style in the a tag :
a { color: red; }
This will style all aspects of the link (floating, visited, and active). To style each part separately, you must use binding pseudo-classes.
Link Pseudo-Classes
There are four basic types of binding pseudo-classes that you can define:
- :link – this is the default style for the link
- :visited – after clicking a link
- :hover – how a mouse is positioned over a link (pre-click)
- :active – right when the link is clicked
To define a link pseudo-class, use it with the a tag in your CSS selector. So, to change the visited color of all your links to gray, type:
a:visited { color: gray; }
If you style a one-link pseudo-class, it’s a good idea to style them all. This way you won’t be surprised by strange results. So if you just want to change the visited color to gray, while all other pseudo-properties of your links remain black, you write:
a:link, a:hover, a:active { color: black; }a:visited { color: gray; }
Change link colors
The most popular way to change the style of links is to change the color when the mouse hovers over them:
a { color: #00f; }a:hover { color: #0f0; }
But don’t forget that you can influence the appearance of the link when you click it with the :active: property:
a { color: #00f; }a:active { color: #f00; }
Or what the link looks like after you’ve visited it with the :visited: property.
a { color: #00f; }a:visited { color: #f0f; }
To put it all together:
a { color: #00f; }a:visited { color: #f0f; }a:hover { color: #0f0; }a:active { color: #f00; }
Put backgrounds on links to add icons or bullets
By playing around with the background a bit, you can create a link that has an icon associated with it. Choose an icon that is small, around 15px by 15px, unless your text is larger. Place the background to one side of the link and set the repeat option to No Repeat. Next, fill in the link so that the text inside the link moves far enough to the left or right to see the icon.
a {padding: 0 2px 1px 15px;background: #fff url(ball.gif) left center no-repeat;color: #c00;}
Once you’ve got your icon, you can set a different image to your floating, active, and visited icons to make the link change:
a {padding: 0 2px 1px 15px;background: #fff url(ball.gif) left center no-repeat;color: #c00;}a:hover {background: #fff url(ball2.gif) left center no-repeat ;}a:active {background: #fff url(ball3.gif) left center no-repeat;}
Make your links look like buttons
Buttons are very popular, but until CSS came along, you had to create buttons using images, which makes your pages take longer to load. Fortunately, there is a border style that can help you create a button effect easily with CSS.
a { border: 4px at start; padding: 2px;text-decoration: none;}a:active {border: 4px inset;}
Note that when colors are put into start and insert styles, browsers are not as likely to render them as you might expect. So, here’s a fancier button with colored borders:
a {border-style: solid;border-width: 1px 4px 4px 4px 1px;text-decoration: none;padding: 4px;border-color: #69f #00f #00f #69f;}
And you can also affect the hover styles and active styles of a button binding, just use those pseudo-classes:
a:link {border-style: solid;border-width : 1px 4px 4px 4px 1px;text-decoration : none;padding : 4px;border-color : #69f #00f #00f #69f;}a:hover { color of border: #ccc; }
