CODEWITHSUNDEEP
htmlhyperlinktagshref
Madventures
Madventures

Reputation: 119

How to do styling on HTML tags contained within the <a> hyperlink tag

I am trying to make a group of HTML tags (p, div, image) point to the same URL (e.g. www.worldwide_news.com). I also want to be able to style the text inside the P in a way I want. I have tried wrapping them all inside an '' tag, but then the text inside the P elements for example, all appear with i) Underline.. and ii) Blue in color, like they do in an 'a' tag. Also I want the whole of inside the P to be clickable (setting P to a width of 400px), not only the text bit. I don't wanna use JAVASCRIPT or any other JQUERY or any script, I want a simple HTML solution. Would anyone please be able to help?

So far I have the following which works on clicking to the URL, but unable to style the text:

<a href="https://www.worldwide_news.com">
    <div style="border:1px;border-style: solid;"
        <p>Here is a link to my other blog</p>
           <img src="image.jpg">
        <p>Once you get there do leave a comment!</p>
    </div>
</a>

I also tried to no avail:

    <div style="border:1px;border-style: solid;" href="https://www.worldwide_news.com">
        <p href="https://www.worldwide_news.com">>Here is a link to my other blog</p>
           <img src="image.jpg" href="https://www.worldwide_news.com">
        <p href="https://www.worldwide_news.com">>Once you get there do leave a comment!</p>
    </div>

All help much appreciated! Thank you. I would send a few beers over to you but..

Upvotes: 2

Views: 1082

Answers (3)

Consti P
Consti P

Reputation: 455

Using div inside an a-tag is not strictly supported, you might want to use span (or nothing).

Aside from that, the only problem you have is that the default a styles apply to all children. If you style that with CSS (remove underline, reset colour e.g. color: inherit) you should get what you want. Lastly you need to set display: block to make it expand around the whole block.

a.link {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.link p:first-child {
  font-style: italic;
}
<a class="link" href="https://example.com">
  <p>Link text one</p>
  <p>Link text two</p>
</a>

Upvotes: 2

David Moore
David Moore

Reputation: 110

Well, in the first example, it looks like you didn't close the div tag. Try:

<a href="https://www.worldwide_news.com">
    <div style="border:1px; border-style:solid;">
        <p>Here is a link to my other blog</p>
           <img src="image.jpg">
        <p>Once you get there do leave a comment!</p>
    </div>
</a>

As for your second, I made it work, technically, but that was just by wrapping it in <a></a> tags. I don't think 'p href's are a thing.

Upvotes: 2

BananaMonkey2412
BananaMonkey2412

Reputation: 181

Why don't you use CSS?

HTML

<a href="https://www.worldwide_news.com">
    <div style="border:1px;border-style: solid;"
        <p class="separate-link-blue">Here is a link to my other blog</p>
           <img src="image.jpg">
        <p class="separate-link-red">Once you get there do leave a comment!</p>
    </div>
</a>

CSS

.separate-link-blue {
  color: blue;
}

.separate-link-red {
  color: red;
}

Upvotes: 0

Related Questions