11

How can I make text NOT blue colored when I make entire div as a link?

So in the following snippet:

<a href="/link"><div><h2>LINK</h2></div></a>

I want to make the entire div be linked to another page, but also don't want to get the string LINK as blue colored as is the case with usual linking object.

When I wrote the following CSS:

a {text-decoration: none; background-color: none; }

it didn't change at all.

[Update]

Thanks for many answers. The reason I want to put div inside a is that I want to make the block linkable object (click on the block and go to another page). I first put a inside div, but it didn't work, and that's why I put it outside div. (and I use HTML5 and CSS3).

Majid
  • 13,853
  • 15
  • 77
  • 113
Blaszard
  • 30,954
  • 51
  • 153
  • 233

9 Answers9

17

In HTML 5, easily use this:

<a href="/yourLinkAddress">
    <div class="link">
         <h2>Link Text</h2>
    </div>
</a>

CSS:

.link
{
   color:aqua;
   text-decoration: none; 
   background-color: none;
}
Majid
  • 13,853
  • 15
  • 77
  • 113
4

You are allowed to use divs/block-elements inside links in html5 specs, so that's not nessesarily bad.

Background means what's behind the text, that is behind this code below is gray. Color is what you are after..

a {
    text-decoration: none; 
    color: black; 
}

Edit: Sources:

Goto: http://validator.w3.org/check and validate this:

<!doctype html>
<html>
<head>
<title>...</title>
</head>
<body>
    <a href="#stuff">
        <div>
            <h1>hi</h1>
        </div>
    </a>
</body>
</html>
Community
  • 1
  • 1
OZZIE
  • 6,609
  • 7
  • 55
  • 59
2

Try

<a href="/link"><div class="link"><h2>LINK</h2></div></a>

then apply class:

.link{
  background-color:none;
  color:blue;
 }

If you are not permitted to use inside tags then try using table instead of . It should work in the same way.

Nelson Menezes
  • 57
  • 2
  • 7
2

Simply target h2

a div h2 {
    color: #fff; /*Or whatever you want*/
}
markvicencio
  • 146
  • 1
  • 7
1

css:

.link
{
  text-decoration: underline;
color: #0000EE;
font-size: 16px;
}

html:

<strong>Hello!</strong> you have already registered , you can login
<a href="http://www.example.com/"><span class="link">here</span></a>

reference:

default HTML/CSS link color and this

Wikipedia Link Color lists different link color and their meanings.

Hope this helps.

Community
  • 1
  • 1
Shaiju T
  • 6,201
  • 20
  • 104
  • 196
0
a{text-decoration: none; background-color: none;color:gray; }

//for color-give your desired color..

Sasidharan
  • 3,676
  • 3
  • 19
  • 37
0

text-decoration: none; doesn't effect with accepted answer!

This is your code 

<a href="/link"><div><h2>LINK</h2></div></a>

Correct is;

<div class='editLink'> 
     <a href="/link">
       <h2>LINK</h2> 
    </a>
</div>

CSS

.editLink a {
  color: #FFFFFF;
  text-decoration: none;
}
ErcanE
  • 1,571
  • 3
  • 19
  • 28
-1

You are not allowed to use div in a (in html5 allowed):

HTML before 5:

<h2><a href="/link" class="link">LINK </a></h2>

HTML5:

<a href="/link" class="link"><h2>LINK</h2></a>

CSS:

.link
 {
  color:red;
 }
Community
  • 1
  • 1
Majid
  • 13,853
  • 15
  • 77
  • 113
-2

You cannot use div within a (you can in html5),You can use this instead:

<a href="/link" style="color:green;">LINK</a>
Community
  • 1
  • 1
Majid
  • 13,853
  • 15
  • 77
  • 113