Elements's Styles does not show text-decoration (underline)?-CodePudding

I am newbie with html css and trying to design a very simple website and meet this problem.

I designed some buttons, and there are some underlines, as you can see in this picture.

As my tutorial, I can see in the elements the styles of the pages, in the styles I can know the buttons's status are something like this : text-decoration : underline.

But as you can see in my picture, I do not see the styles, only console an issues. In styles, I search and find html and there are "user agent stylesheet", but there are no text-decoration : underline.

If I do not know the button's status, I can not know how to delete the underline, right ?

Please help me in this case. Thank you very much for your time.

CodePudding user response：

You have to first select the element you want to see the styles, then only the style section shows the style of that element. At the top left of the dev-tools you can see the selecting tool, select that and then click on the element you want to see the style. When the element is selected then the style section shows the styling.

CodePudding user response：

Here is your answer, you haven't provided code snippet so I am writing code from scratch, it may not be same as your code but it will do the job anyhow.

The first one is CSS and second is HTML

Hope it helped you

header{background-color:black;}
div{padding:5px 30px 20px} /* CSS PADDING SHORTHAND top left bottom*/
a {color:white;text-decoration:none;}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <div>
        <a href="home">Home</a>
        <a href="Bane">Bane</a>
        <a href="Tour">Tour</a>
        <a href="Contact">Contact</a>
        <a href="More">More</a>
      </div>
    </header>
  </body>
</html>