How to get rid of underline in header-CodePudding

I'm a newbie at html and css, please could someone help me out. I'm trying to get rid of the underline in the header section and in the see my resume section. I also want to make the writing black in the header section. I've tried using 'text-decoration: none; ' to get rid of it but nothing happened. Please explain it in a simple way I could understand.

Below are the images:

enter image description here

Thank You!

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>""</title>
    <link rel="stylesheet" href="">
    <link rel="shortcut icon" href=""type="image/jpg">
    </div>
</head>

<body>
 <nav >
        <a href=""><img src=""alt=""/></a>
       
 <ul >
            <li><a href="">Home</a></li>
            <li><a href=""> Education</a></li>
            <li><a href=""> Experience</a></li>
            <li><a href="">Projects</a></li>
            <li><a href="">Contact Me</a></li>
         </ul>
    </nav>

<div id="container">
 <img src="" alt=""> 
<div >
        <h1  style="color: rgb(0, 28, 85);"> ""
         <span ><img src="hi wave.png"></span></h1>
       
        <h2  style="color: rgb(0, 28, 85);">""</h2>
<h3>
        <p  style="color: rgb(122, 122, 145);">""
        </p>
</h3>
        <p>
        <a  href="">
            <ion-icon name="logo-instagram" size="large"></ion-icon> </a>
           
         <a  href="">
            <ion-icon name="logo-linkedin" size="large"></ion-icon> </a>

            <a  href="">
                <ion-icon name="logo-github" size="large"></ion-icon>
            </a>
    
            <a  href="mailto:">
            <ion-icon name="mail-outline" size="large"></ion-icon> </a>

    <div id="contact">
        <a href="" style="color:rgb(243, 246, 251);" target="_blank">See My Resume</a>
        </div>
    </P>

        <div >
            <h2 > What I Do?</h2>
            <img src="" alt="what I Do">
            <h1  style="color: rgb(3, 2, 8);"> Full Stack Development</h1>

    <p >
    <a  href=""><ion-icon name="logo-html5"></ion-icon></a>

    <a  href=""><ion-icon name="logo-css3"></ion-icon></a>

    <a  href=""><ion-icon name="logo-nodejs"></ion-icon></a>

    <a  href=""><ion-icon name="logo-python"></ion-icon></a>

    <a  href=""><ion-icon name="logo-javascript"></ion-icon></a>
    
    <a  href=""><ion-icon name="logo-react"></ion-icon></a>
    </p>

    <ul>
        <li >""</li>
        <li > ""</li>  
    </ul>
    <div >
        <h2 > Tech interest</h2>
    </div>
</div>

</div>

</div>

 <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
 <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

</body>
</html>

CSS CODE

body
{
    margin:0%;
    font-family: Hoefler Text;

    background-color: rgb(233, 245, 248);
        color:rgb(7, 9, 10);
}

header{
   margin: 3% 10% 3% 10%;
    padding: 37px 161px;
     align-items: center; 
}

.menu{
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: right;
    
}
.menu li{
    display: inline-block;
    padding: 20px 40px;
    font-size: 20px;
    
    
}
.menu li a:hover {
    color: rgb(82, 198, 235);
    text-decoration: none;

} 

#container{
    margin: 0 20px 15px 100px;
    text-align: right;
    float: right;
}
img{
max-width: 400px;
padding: 10px 10px 10px 10px;
}

.heading{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    column-gap: 1.5rem;
    margin-top: 300px;
    padding: 0px 0px 0px 100px;
}

.heading::before, .heading::after{
content: "";
height: 2px;
background-color: #03090a;
display: flex;
}

.text{
    text-align: justify;
    font-family: Hoefler Text; 
    font-size: 20px;
    padding: 10px 600px 5px 2px;
    float: left;
    position: relative;
    bottom: 700px;
}

.rounded-button{
width: 60px;
height: 60px;
background: rgb(37, 198, 235);
color: rgb(246, 250, 250) ;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0 0 0 0;
border-radius: 50%;
border: none;
text-decoration: none;
transition: background 0.2s;
}
.rounded-button:hover{
    background: rgb(0, 28, 85);
}
#contact{
    margin: 5px;
    background-color: rgb(37, 198, 235);
    display: inline-block;
    padding: 2% 5%;
    font-size: 20px;
    font-weight: 501;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    text-align: left;
    text-decoration: none;
    transition: background 0.2s;
}
#contact:hover{
    background:rgb(0, 28, 85);
}

.new-pic{
    max-width: 500px;
    padding: 20px 50px 20px 10px;   
}
    
    .name{
        text-align: right;
        font-family: Hoefler Text;
        font-size: 37px;
        padding: 10px 10px 100px 300px;
        width: 100%;
        align-items: right; 
        position: relative;
        bottom: 400px;   
    }
    
    
.icon{
    text-align: right;
    font-size: 37px;
    padding: 10px 10px 10px 300px;
    width: 100%;
    align-items: right;
    position: relative;
    bottom: 500px; 
}
.set{
    width: 60px;
    height: 60px;
    background: rgb(37, 198, 235);
    color: rgb(246, 250, 250) ;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: right;
    cursor: pointer;
    padding: 0 0 0 0;
    border-radius: 50%;
    border: none;
    text-decoration: none;
    transition: background 0.2s;
}
.set:hover{
    background: rgb(0, 28, 85);
}

.blue{
color: rgb(122, 122, 145);
font-size: 25px;
font-family: Hoefler Text;
list-style: none;
padding: 10px 10px 10px 440px;
text-align: center;
align-items: center;
width: 100%;
position: relative;
bottom: 510px; 
}
.blue:not(:last-child){
    margin-bottom: 10px;
}
.blue:before{
    content:  "\1F535";
}


#containerone{
    margin: 0 20px 15px 20px;
    text-align: left;
    float: left;
}
    .title{
        text-align: justify;
        font-family: Hoefler Text; 
        font-size: 20px;
        padding: 10px 20px 20px 700px;
        align-items: right;
        position: relative;
        bottom: 500px;
    }
    .studies{
        font-size: 50px;
        position: none;
        bottom: 300px;
        text-align: center;
    
    }
    img{
        max-width: 500px;
        padding: 10px 10px 10px 10px

    }
    .wex{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: center;
        column-gap: 1.5rem;
        margin-top: 10px;
        padding: 0px 0px 0px 100px;
    }
    
    .wex::before, .wex::after{
    content: "";
    height: 2px;
    background-color: #03090a;
    display: flex;
    }

CodePudding user response：

The link tag (anchor tag) can be in 4 different states called pseudo-classes:

a:link: the regular state of the link when it is not active, visited, or hovered on
a:visited: when the link has been clicked by the user, that is, visited
a:hover: when the user is hovering on the link
a:active: when the user is clicking on the link

css to remove underline for each state

a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}

now your link is black and underline only on mouse hover with color change:

.menu li a {
    text-decoration: none;
    color: black;
}
.menu li a:hover {
    color: rgb(82, 198, 235);
    text-decoration: underline;
}

CodePudding user response：

try this

a{text-decoration:none;}