A:link Around Div - Styling Inside Div

I have a div that I want to be clickable, so I've wrapped an 'a' tag around it, as it is valid HTML 5 and made the div a block level element. Now, the problem I'm having is styling

Solution 1:

All you need here is:

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

Sometimes you'll want to get more specific and then you can be like:

a h2 { color:red; }

Solution 2:

Basically what is happening to you is that all elements under <a> tag are inheriting css properties of a hyperlink (underline, blue color, etc)

To counter this create an id or class on your tag and remove/override the default anchor properties.

For example to remove the underline you do: text-decoration: none;

After that override Link-related pseudo-classes: :link, :visited, :hover and :active.

Solution 3:

The best way is a matter of opinion. To me the best way would be to use the most succinct CSS as possible. Use only the specificity that you need. For example don't use a div h2 when a h2 is all that's needed. Also FYI you can do something like a.block { display:block; } and then you won't need the div in the markup.