How to not make text colored within a href link but the text is also within div?


Tags: html,css,html5,css3,colors

Problem :

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).



Solution :

In HTML 5, easily use this:

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

CSS:

.link
{
   color:aqua;
   text-decoration: none; 
   background-color: none;
}

    CSS Howto..

    How to design a web page with multiple color panes without tables [duplicate]

    Css - how to add an image outside a text box (on the left side but touching the box)

    How to share images between subdomains?

    How can i make a fixed box inside a div with scroll?

    How to replace css using jquery after user agent detection

    How to exclude particular class name in CSS selector?

    How to remove a specific (bottom) border from p:row in p:panelGrid?

    How to make a linear-gradient to fulfill two-coloured body in CSS

    How can I avoid div overflowing my container without using overflow:hidden?

    How to use a custom toggle switch in jquery mobile

    How to animate two divs in html / css to make a semi-circle transition?

    How to interchange table cells using Pure CSS

    How to prevent an element to get pushed down by window resize?

    How to fix parent hover issues with CSS?

    How to change the color of Bootstrap links

    How to fade gradient, image or texture as background?

    How to menu on one line and always in center?

    How to override GWT obfuscated style for DataGrid header

    How to make a HTML/CSS/JS iOS style slide transition? [closed]

    css how to align a graphic on page

    How to disable a YUI MenuBarItem from markup

    How do I make my CSS link up to files in different directories

    How to display element on screen but not at the top of the screen in html/css?

    How can I split code-blocks into a list?

    How to fix an image to the bottom right with resizing window?

    yui-css grid: how to get a 1/4 - 2/4 - 1/4 grid set up?

    How to adjust progress bar with Jquery?

    How to achieve a “mini” select style using Bootstrap (or straight CSS)?

    How to find the proper offsets for CSS sprites?

    Primefaces: how to change the default icon on the button of the calendar field?