Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

8 Controlling Links Attributes Through Style Sheets

1  2  3  4  5  6  7  8  9  10

The anchor tag is responsible for links. We can set specific values for the anchor. These values will be for the link, active and visited. We can also have a hover property in styles.

1. To set the color of hyperlink text type in the following element:

A.link {

}

2. Between the brackets you can set the color. Here we set the color to fuschia.

A.link {
color: fuchsia;
}

3. Other attributes are those that are used for any text element.  Try putting a background-color  around it as if it was highlighted.

A.link {
color: fuchsia;
background-color: yellow;
}

4. Set the text to look very different by setting it to small caps.

A.link {
color: fuchsia;
background-color: yellow;
font-variant: small-caps;
}

5. Often as we design we want out links to stand out but not be decorated with underline. add a text-decoration attribute to none.

A.link {
color: fuchsia;
background-color: yellow;
font-variant: small-caps;
text-decoration: none;
}

6. Now set the properties of the visited and the active links using the following tags:

A.visited {
}

A.active {
}

Fill in your color and properties.

 

 

7. There is also a hover property that we can assign to the link for when the cursor is over the link without clicking. Set the hover text to blue.

. A.hover {
color: blue;
text-decoration: underline;
font-variant: small-caps;
}

Publish your CSS and link your html you are working on to it and see how the text changes!

 


"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2024 All Rights Reserved
Privacy and Legal