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).


<!DOCTYPE html>

   <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="">
   <link rel="preconnect" href="" crossorigin>
   <link href="[email protected]&family=The+Nautigal&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="styles.css">




<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>







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;


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.