How to use 2 different CSS styles for links in same page

vivsin · 11-13-2007, 09:56 AM

OK the scenerio is, I use external CSS to format text in my webpages.

to style my links i create one class like this

a { tags }

and this get applied to whole page.

The problem:

Now i want to keep default style for links but also want to use different style for the links in header section only,

so how to do this?

Albino · 11-13-2007, 10:27 AM

you can wrap them in tags, so for instance:

<div id="header">
<a href="blah">link</a>
</div>

then have in the css:

#header .a{
link styling
}

that will work, or I think you can do this:

<a href="blah" class="linkclass">link</a>

then in the css

.linkclass{
link style
}

Joe · 11-13-2007, 11:59 AM

Here is a working example which you can just paste into a file and modify to your needs.

HTML Code:

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>Changing links.</title>
	<style>a { text-decoration: underline; color: green; } #header a { text-decoration: none; color: blue; }</style>
</head>

<body>
<div id="header"><a href="http://www.namepros.com">NamePros.com</a></div>
<br />
<br />
<a href="http://www.google.com">Google.com</a>
</body>
</html>

Note, this can be used for anything else as well, including:

Code:

#header a:active, #header a:visited { ... }

or

Code:

#idhere tag { ... }
#header input { background-color: #ff6600; }

vivsin · 11-13-2007, 12:05 PM

SOLVED, thank you everyone.

xrvel · 11-14-2007, 11:09 PM

you can use :

Code:

<style>
a.black { color : #000000; }
a.red { color : #FF0000; }
</style>

<a href="#" class="black"> Black </a>
<a href="#" class="red"> red </a>

11-13-2007, 09:56 AM	#1 (permalink)
vivsin NamePros Regular Join Date: Oct 2005 Posts: 984 1,567.95 NP$ (Donate)	How to use 2 different CSS styles for links in same page OK the scenerio is, I use external CSS to format text in my webpages. to style my links i create one class like this a { tags } and this get applied to whole page. The problem: Now i want to keep default style for links but also want to use different style for the links in header section only, so how to do this? __________________ VIVSIN \| NatGeo for WebMasters Visit : My Web Development Blog :kickass: This is where I started, This is where I will end. NAMEPROS = :kickass:

11-13-2007, 10:27 AM	#2 (permalink)
Albino Munky Designs Join Date: May 2005 Posts: 997 417.00 NP$ (Donate)	you can wrap them in tags, so for instance: <div id="header"> <a href="blah">link</a> </div> then have in the css: #header .a{ link styling } that will work, or I think you can do this: <a href="blah" class="linkclass">link</a> then in the css .linkclass{ link style } __________________ Munky Designs - Web Developers\|\| Erant - Vent Your Rage! \|\| Pow Comics - webcomic hosting + directory

11-13-2007, 11:59 AM	#3 (permalink)
Joe Senior Member Join Date: Oct 2005 Location: Kent ~ U.K. Posts: 3,246 88.85 NP$ (Donate)	Here is a working example which you can just paste into a file and modify to your needs. HTML Code: <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Changing links.</title> <style>a { text-decoration: underline; color: green; } #header a { text-decoration: none; color: blue; }</style> </head> <body> <div id="header"><a href="http://www.namepros.com">NamePros.com</a></div> <br /> <br /> <a href="http://www.google.com">Google.com</a> </body> </html> Note, this can be used for anything else as well, including: Code: #header a:active, #header a:visited { ... } or Code: #idhere tag { ... } #header input { background-color: #ff6600; } __________________ Fused Hosting Simplicity and Superiority. █████████████████████████████████████████████ Affordable web hosting solutions; shared, reseller, shoutcast, WHMSonic, proxy, dedicated and more! My computer is broken; new components have been ordered.

11-13-2007, 12:05 PM	#4 (permalink)
vivsin NamePros Regular Join Date: Oct 2005 Posts: 984 1,567.95 NP$ (Donate)	SOLVED, thank you everyone. __________________ VIVSIN \| NatGeo for WebMasters Visit : My Web Development Blog :kickass: This is where I started, This is where I will end. NAMEPROS = :kickass:

11-14-2007, 11:09 PM	#5 (permalink)
xrvel i love automation Join Date: Nov 2007 Posts: 1,409 987.78 NP$ (Donate)	you can use : Code: <style> a.black { color : #000000; } a.red { color : #FF0000; } </style> <a href="#" class="black"> Black </a> <a href="#" class="red"> red </a>

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)