Why can't I style anchor elements?-CodePudding

This is all my code (the code seems very messy because I just started learning about 2/3 weeks ago). I cant seem to style the anchor elements. I even tried putting a class on them and it also doesn't works. I'm kinda new to this thing.

@import url('https://fonts.googleapis.com/css2?family=Bebas Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bree Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #bbb;
}

.ex-house {
  padding: 0;
  display: block;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}

.house-dh {
  position: absolute;
  top: -20%;
  left: 2%;
  padding: 0px;
  margin: 0px;
  color: rgb(255, 255, 255);
  font-family: 'Bree serif';
  font-size: 125px;
  text-align: center;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}

.about-gnco1 {
  position: absolute;
  color: rgb(255, 255, 255);
  font-family: 'Inter';
  font-size: 35px;
  text-align: left;
  margin: 0px;
  padding: 0px;
  left: 2%;
  top: 20%;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}

/* this is my code for the style element i think i did it right but when i run it. the a href element dosent change */
.front-button {
  font-family: 'Bebas Neue';
  font-size: 20px;
  color: white;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}

.front-button a {
  margin: 0 20px;
}

<body>
  <div class="front">
    <img class="ex-house" src="https://via.placeholder.com/80" alt="dreamhouse">
    <div class="house-dh">
      <p>grandnew.co</p>
    </div>
    <div class="about-gnco">
      <p class="about-gnco1">Is here to help you<br> build your own<br> Dream House.</p>
    </div>
  </div>
  </div>
  
  <div class="front-button">
    <a href="#">CUSTOMIZE</a>
    <a href="#">DESIGNS</a>
    <a href="#">PLANS</a>
    <a href="#">ABOUT US</a>
  </div>
</body>

CodePudding user response：

if you mean underline of link for that you can use the method text-decoration for examplea{text-decoration:none} this code will remove any decorations of a tag so if you wanna use this function for all a tags you will write a{text-decoration:none} so if you wanna set decoration of specific tag you can give a class on the tag before you can change something example

HTML

<a href="https://stackoverflow.com">go to stackoverflow</a>
<a class="a-tag" href="https://stackoverflow.com">go to stackoverflow</a>

CSS

 a{ //for all <a> tags
   text-decoration:none
}

.a-tag{ // only for tag who have the a-tag class
 text-decoration:none
color:black;
}

CodePudding user response：

This works for me. The style of the text in the '.front-button a', not in '.front-button'

.front-button a {
    margin: 0 20px;

    font-family: 'Bebas Neue';
    font-size: 20px;
    color: red;
    text-shadow: 2px 2px 3px rgba(241, 238, 53, 0.5);
}

link style