CSS: Can't edit links no matter what-CodePudding

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:wght@100&family=The Nautigal&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<nav >

<label >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;
}

CodePudding user response：

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.

CodePudding user response：

I have created the HTML and CSS document in order to test your files, and basically the problem here is your css instructions, I can help you with it, first of all, if you would like to modify your list removing the bullet points, you must first use correctly the css selectors:

current one:

nav ul li a  {

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

but the selector is selecting the a tag, so if you would like to remove the bullet points of your list you could use something like this:

nav ul {
    
  list-style-type: none;
}

I'll drop these links here that may help you as they helped me when I was learning:

https://web.dev/learn/css/

https://www.w3schools.com/css/

CodePudding user response：

we know that flex, make the element's children in a column,
so the elements will be one right the other
and not under the other...

so you make the nav flex, but the nav
have directly children's only 1. <label> and 2. <ul>

what we need to have the

elements like a child, so I put flex also in <ul>

    nav,
    ul {
      display: flex;
    }

and added list-style-type to none (in the <ul>), so there isn't anymore the bullet before the list

nav ul {
    list-style-type: none;
    gap: 10px;
}

added also a gap, that like margin (is works because there is flex in the <ul>

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

.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;
}

nav,
ul {
  display: flex;
}

nav ul {
  list-style-type: none;
  gap: 10px;
}

<!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">
  <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:wght@100&family=The Nautigal&display=swap" rel="stylesheet">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <!-- navbar -->
    <nav >
      <!-- logo -->
      <label >Placeholder</label>
      <!-- links -->
      <ul id="links">
        <!-- 1 -->
        <li>
          <a href="landingpage.html">Link one</a>
        </li>
        <!-- 2 -->
        <li>
          <a href="landingpage.html">Link two</a>
        </li>
        <!-- 3 -->
        <li>
          <a href="landingpage.html">Link three</a>
        </li>
      </ul>
    </nav>
  </header>
</body>

</html>