CSS Links - CSS tutorial - ee.sharif.edu

0 downloads 296 Views 40KB Size Report
Aug 8, 2005 - same page. In the above examples we addressed the HTML selector - A:link etc - and thus redefined the over
CSS Links - CSS tutorial

1 of 5

http://www.echoecho.com/csslinks.htm

Link To Us | Bookmark EchoEcho.Com

What's New? | Site Map

Home > Tutorials > CSS > Attributes

Forums D-Zine Articles

Search

Go!

Tutorials Online Tools Free Resources References Quiz Hosting

CSS TUTORIAL :

- Printable Version - Send Page To Friend

CSS Links

CSS ATTRIBUTES

CSS has several options for redefining the style of links.

CSS TEXT CSS COLORS CSS LINKS

LINK PROPERTIES

CSS LISTS CSS LAYERS CSS CURSORS

Property

Values

NS

IE

A:link A:visited A:active A:hover

The link from the above example would look like this: LOOK HERE

Another example would be to create links that are both underlined and overlined.

Example: Underline/Overline

The link from the above example would look like this: LOOK HERE

A third example would be to create links that change in size when hovered.

Example: Size changing links

The link from the above example would look like this: LOOK HERE

A final example would be to create links that have a permanent background color, obviously standing out from the rest.

Example: Background colored links

The link from the above example would look like this: LOOK HERE TO SEE

MULTIPLE LINKSTYLES ON SAME PAGE The final topic deals with how to add multiple link styles that can be used on the same page.

In the above examples we addressed the HTML selector - A:link etc - and thus redefined the overall link style. How do we define a link style that is only active in a certain area of the page? The answer is: context dependent selectors. Rather than addressing the A:link selector we will address it while being dependant on a certain outer class that surrounds the area where we'd like our link style to be effective. For example: 8/8/2005 3:52 PM

CSS Links - CSS tutorial

4 of 5

http://www.echoecho.com/csslinks.htm

ONE TYPE OF LINKS
YAHOO
GOOGLE


ANOTHER TYPE OF LINKS
YAHOO
GOOGLE


Note how we use the to define the context. This is smart for two reasons: 1) The obvious, that it allows us to use different link styles on the same page, rather than being limited to using a single overall link style. 2) We can define entire areas where a certain link style works for all links within that area. Thus, we don't have to add a style definition to each and every link in that area.

>

Got unanswered questions related to this page?

DEVELOPER TIP!

Visit the Talk Back Page and post your questions!

HOST WITH ECHOECHO - GET 1 GB SERVER SPACE AND 30GB TRAFFIC PHP, PERL, MYSQL, SSI, PASSWORD PROTECTED DIRS, SITE STATS PRICE IS ONLY $7.50/MONTH

>>READ MORE

FACT: None of the leading search engines will crawl pages based on framesets. TIP: Offer visitors a non-framed option. If for nothing else: to make sure your pages get listed with the search engines!

8/8/2005 3:52 PM

CSS Links - CSS tutorial

5 of 5

http://www.echoecho.com/csslinks.htm

"Better Than Books - As Easy As It Gets!" On EchoEcho: User Forums | D-Zine Articles | Tutorials | Online Tools | Free Resources | References | Quiz | Hosting Contact us | Advertise info | Terms of use | Privacy policy

About EchoEcho

Copyright © 1999-2002 NetKontoret All rights reserved.

8/8/2005 3:52 PM