CODEWITHSUNDEEP
csshtmlhyperlinkstylesheet
Gianluca Ghettini
Gianluca Ghettini

Reputation: 11628

override link style inside an html div

I have a div in which I'd like to override my global link style. I have two link styles, one global, one specific. Here the code:

A:link {text-decoration: none; color: #FF0000;}
A:visited {text-decoration: none; color: #FF0000;}
A:hover {text-decoration: none; color: #FF0000;}
A:active {text-decoration: none; color: #FF0000;}

#macrosectiontext
{
    position:relative;
    font:Arial, sans-serif;
    text-align:center;
    font-size:50px;
    font-style: bold;
    margin-top:245px;
    opacity: 0.6;
    background-color:transparent;
}

#macrosectiontext A:link {text-decoration: none; color: #000000;}
#macrosectiontext A:visited {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:hover {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:active {text-decoration: none; color: #FFFFFF;}

and I use the div like this:

<div id="macrosectiontext"><a href="www.google.it">bla bla bla</a></div>

however it seems that it doesn't work. The div still inherits the global link style.

Upvotes: 19

Views: 65984

Answers (2)

Mark
Mark

Reputation: 6855

CSS work on inheritance, so you should only override the properties you want to change.

Try always to write HTML & CSS lowercase, still your HTML and CSS are correct

a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none; 
  color: #f00;
}

#macrosectiontext {
  position: relative;
  font:Arial, sans-serif;
  text-align: center;
  font-size: 50px;
  font-style: bold;
  margin-top: 245px;
  opacity: 0.6;
  background-color: transparent;
}

#macrosectiontext a:link {
  color: #000;
}
#macrosectiontext a:visited,
#macrosectiontext a:hover,
#macrosectiontext a:active {
  color: #fff;
}

I made a fiddle for you to show your code is working (changed the hover color, just for demo)

Upvotes: 15

JFelton
JFelton

Reputation: 497

  1. In The css I would not use the id "#macrosectiontext a:link..." for the link code I would use a class ".macrosectiontext"

  2. use a lower case "a" instead of a Cap "A" in the link style

  3. If you using the style only a few times you can use a span tag around the link and then call to your style from the span tag in stead of the div.

Upvotes: 10

Related Questions