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