Ad

CSS: Can't Edit Links No Matter What

- 1 answer

CSS is a lovely language indeed. I'm attempting to create my first landing page as a personal project and now i'm stuck trying edit the anchor tags/hyperlinks. The problem here is that no matter what i do, i can't remove the bullet points (list-style), change the font color (color), change the text to inline (display) and then remove the underlines (text-decoration).

HTML:


<!DOCTYPE html>

<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>Landing Page</title>


   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Luxurious+Roman&family=Luxurious+Script&family=Roboto:[email protected]&family=The+Nautigal&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<nav class="navbar">

<label class="logo">Placeholder</label>

<ul id="links"> 

<li><a href="landingpage.html">Link one</a></li>
<li><a href="landingpage.html">Link two</a></li>
<li><a href="landingpage.html">Link three</a></li>

</ul>

</nav>

</header>


   
</body>

</html>

CSS:

body {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


nav {

    background: #1f2937;
    height: 70px;
    width: 100%;
    color: white;
    padding-top: 20px;
    padding-bottom: 10px;
    display: flex;
    
    
}

.logo {
  
    font-size: 2.5rem;
    font-family: Luxurious Roman; 
  
}

nav ul li a  {

    color: white;
    list-style: none ;
    text-decoration: none;
    background-color: royalblue;
    display: inline;
}
Ad

Answer

You are not using the css properties with the html elements they are meant for here is how you should do it:

nav ul li{
  list-style: none;
  display: inline;
}
nav ul li a  {
    color: red;
    text-decoration: none; 
}

list-style property should be applied to <li> elements, color and text-decoration should be applied to <a> elements.

Ad
source: stackoverflow.com
Ad