All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

HTML Change Link Color Inline

Last Updated : Mar 11, 2024

HTML Change Link Color Inline

In this tutorial we will show you the solution of HTML change link color inline, sometimes, in html on internet or say on other website from browser. We see that a text is showed there in different form from other text and when we click on that, we are redirected to another page or another webpage gets opened.

In our html tutorials, we already cover the topic of how to create a link in html.

Now, today we will show you how you are able to change its color, now let us understand how we can do that.

Step By Step Guide On HTML Change Link Color Inline :-

As, we say that we already discussed the topic of how to create links in html.

And in that we create anchor tag in html and give the page name in href attribute which we want to show or open on user’s click. Also, we already discussed article of attribute of anchor tag.

If you want to learn about the topics name then you can go through the html tutorials in our webpage.

Here, below we show you a code in html in which we change color of text. The code here is as:

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document</title>
        </head>
          <body>
    <!-- example of inline color links in different tags -->
            <!-- color red is used here in paragraph -->
            <p>
                this is a paragraph, and here we are going to create a link
                <a href="https://www.talkerscode.com" style="color: red;">
                    Click on this link
                </a>
                to open homepage
            </p>
            <!-- rgb value is used here to give color to link in div -->
            <div>
                here we create another div to create link
                <a href="https://www.talkerscode.com" style="color: rgb(187, 21, 146);">
                    LINK IN DIV
                </a>
            </div>
            <!-- here we use # color values to color link -->
            <h2>
                heading tag used here and
                <a href="https://www.talkerscode.com" style="color: #000;">
                    Link is linked
                </a>
                in color text. and color used is black
            </h2>
          </body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
  6. Here in body, we create three different tags and create anchor tags inside them. This is done to make links inline and at main part is when we give them color.
  7. This is done by using style attribute in anchor tag and in style we use color attribute to give color. And after that value is given.
  8. The values are may be different means the value may be used by directly color name, rgb values, and may be hex code. You can give value in any format to apply color.
  9. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

At last, here we can say that with the help of this article we are able to change link colors that are created inline in html. I hope this tutorial on HTML change link color inline helps you.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪