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

vivsin · Nov 13, 2007

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 · Nov 13, 2007

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 · Nov 13, 2007

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

HTML:

<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 · Nov 13, 2007

SOLVED, thank you everyone.

xrvel · Nov 15, 2007

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>

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

Established Member

Munky DesignsEstablished Member

VIP Member

Established Member

i love automationVIP Member

banklicensing.com

aivitro.com

NusantaraCoin.com

ALO.VC

InstantlyInsurance.com

YCoin.org

Stazur.com

DentalTruths.com

qgd.xyz

unstack.net

Similar threads

We're social

banklicensing.com

aivitro.com

NusantaraCoin.com

ALO.VC

InstantlyInsurance.com

YCoin.org

Stazur.com

DentalTruths.com

qgd.xyz

unstack.net

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling