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

vivsin · 11-13-2007, 10: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, 11: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, 12:59 PM

Here is a working example which you can just paste into a file and modify to your needs.
????: NamePros.com http://www.namepros.com/programming/395398-how-use-2-different-css-styles.html

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, 01:05 PM

SOLVED, thank you everyone.

xrvel · 11-15-2007, 12:09 AM

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, 10:56 AM	THREAD STARTER #1 (permalink)
vivsin Senior Member Join Date: Oct 2005 Posts: 1,093	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? __________________ VIVROCKS "ROCK your LIFE" Visit : My Design Inspiration & Free Stuff Blog This is where I started, This is where I will end. NAMEPROS = kIcKaSs

11-13-2007, 11:27 AM	#2 (permalink)
Albino Munky Designs Join Date: May 2005 Posts: 996	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 } __________________ Toddish.co.uk - Portfolio/Blog Powcomics.com - Webcomic Hosting/Directory Erant.co.uk - vent your rage!

11-13-2007, 12:59 PM	#3 (permalink)
Joe Senior Member Join Date: Oct 2005 Location: Kent ~ U.K. Posts: 3,209	Here is a working example which you can just paste into a file and modify to your needs. ????: NamePros.com http://www.namepros.com/programming/395398-how-use-2-different-css-styles.html 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; } __________________ Myself and "JackHeskett" are no longer associated with FusedHosting.net. Please pipe all PMs to admin [at] fusedhosting.net.

11-13-2007, 01:05 PM	THREAD STARTER #4 (permalink)
vivsin Senior Member Join Date: Oct 2005 Posts: 1,093	SOLVED, thank you everyone. __________________ VIVROCKS "ROCK your LIFE" Visit : My Design Inspiration & Free Stuff Blog This is where I started, This is where I will end. NAMEPROS = kIcKaSs

11-15-2007, 12:09 AM	#5 (permalink)
xrvel i love automation Join Date: Nov 2007 Location: xrvel.com Posts: 1,620 Follow @xrvel	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)