Need Help - Trying to remove underline and color from a text link

HTML-CSS
1

Ive googled and everything to try and remove them, but it hasnt worked. So my last resort is you guys. The code i’ve used for the text link will be in bold.

Here is the code and a picture will be at the bottom:

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The Boon Exchange</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
  </head>

  <body>

    <div id="topBar">
      <!-- <a href="http://facebook.com"><img src="facebook_logo.png" alt="Facebook Icon"></a> -->
    **  <p><a href="http://theboonexchange.com.au/login"><span style="word-spacing: 28px;">Login </span></a><a href="http://theboonexchange.com.au/register">Create a FREE Account</a></p>
    </div>**

    <div id="header">
      <img src="boon_exchange_logo.png" alt="The Boon Exchange">
      <p><span style="word-spacing: 25px;">HOME SUBSCRIBE FAQS</span></p>
    </div>


    <div class="search-box">
      <input class="search-txt" name="" placeholder="Search The Exchange...">
      <a class="search-btn" href="#">
        <i class="fas fa-search"></i>
      </a>
    </div>

    <div id="categoriesDisplay"></div>
    <div id="aboutDisplay"></div>

  </body>
</html>

CSS

html, body {
  width: 100%;
  height: 100%;
  min-height: 3200px;
  margin: 0px auto;
  padding: 0;
  background-color: #02021A;



}
/* Top Bar Starts */
#topBar {
  width: 100%;
  height: 0.8%;
  background-color: #252525;
  position: relative;
  padding-top: 1.5%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;



}


**#topBar p {
text-align: right;
position: relative;
top: -20px;
left: -4.5%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 14.5px
}**

#topBar img {
width: 3%;
position: relative;
top: -17px;
}

#topBar p {
text-decoration: none;
}

/* Top Bar Finishes */

/* Header Starts */
#header {
  position: relative;
  top: 0.01%;
  width: 100%;
  height: 3.6%;
  background-color: #000000;

}

#header img {
  width: 20%;
  position: relative;
  top: 25px;
  left: 5%;
}
/* Header Finishes */

/* Menu Starts */
#header p {
float: right;
position: relative;
left: -5%;
top: 30%;
font-size: 15px;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #C0C0C0;
}

#header p:hover {
color: #e84118;
}
/* Menu Ends */

/* Search Bar Starts */
.search-box {
position: relative;
left: 4.5%;
top: 0.15%;
width: 90.5%;
background: #2f3640;
height: 20px;
padding: 10px;

}

.search-btn {
color: #e84118;
float: right;
width: 20px;
height: 20px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 97%;
text-decoration: none;
}

.search-txt {
font-family: arial;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: #386DBE;
font-size: 16px;
transition: 0.4s;
line-height: 20px;
width: 1313px;
}

.search-box:hover {
border-bottom-color: #e84118;
border-bottom-width: 0.001;
border-bottom-style: solid;
border-radius: 0.01%;
}

Screenshot%20(31)_LI
Screenshot%20(31)_LI1366×768 63.5 KB

2

You are looking for text-decoration: none;

3

I’ve already tried several times. I have created ID’s and Classes and done it that way, but still no luck

4

You probably haven’t targeted the right element. Based on your html code above you need to target :

#topbar>p>a{
  text-decoration: none;
}
5

Thank you so much :grinning: :hearts:

1 Like