CODEWITHSUNDEEP
htmlhyperlink
gpuguy
gpuguy

Reputation: 4585

HTML: How to correctly style a list of hyper links

I am new to HTML and so here is very basic question, for which unfortunately I could not find a hint any where . So I am putting it here. Basically, I have to use the tags href, and style both. How do I do it? For example, consider the following:

I have a list like this:

 <ul>
    <li style="color:blue;font-size:20px;text-align:justify">that is inclusive, innovative, and relevant</li>    
</ul>

Now I want to have a hyperlink on the text :

that is inclusive, innovative, and relevant

For example, clicking the above text should go to google.com

How do I do this?

Upvotes: 2

Views: 102

Answers (2)

Kanembel
Kanembel

Reputation: 494

You need to use the anchor tag <a> and set the href property to your url. The display text can go inside the element.

<a href="https://www.google.com">Visit Google</a>

A list with two links:

<ul>
    <li style="color:blue;font-size:20px;text-align:justify">
        <a href="https://www.example.com">
            that is inclusive, innovative, and relevant
        </a>
    </li>    

    <li style="color:blue;font-size:20px;text-align:justify">
        <a href="https://www.w3.org/MarkUp/1995-archive/Elements/A.html">
            Anchor tag spec
        </a>
    </li> 
</ul>

Styles can be applied to the link or the list item. The browser does some default styling to anchor tags to make them blue and underlined, and purple after being visited. Often times this default styling is removed or overridden.

Upvotes: 2

Shoaib Arif
Shoaib Arif

Reputation: 807

Here you go let me know the style is preperly applied or not.

 <ul>
    <li style="color:blue;font-size:20px;text-align:justify"><a href="#">that is inclusive, innovative, and relevant</a></li>    
</ul>

Upvotes: 2

Related Questions