I want to change the color of the text from the class logos
, I just can't seem to be able to change the color of these specific items. I have tried to remove the color from the *
, I also tried !important
. The last thing I tried was to move the .logos
CSS to the top and that didn't work either. Any ideas of how I can change the color of the .logos
class?
The .logo
values can be found at the bottom of the stylesheet.
* {
overflow-x: hidden;
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
color: white;
background-color: rgb(rgb(255, 232, 232), green, blue);
}
header {
position: fixed;
width: 100vw;
height: 85px;
background-color: #201f2f;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 14px;
}
header .inner {
width: 1300px;
height: 100%;
display: block;
margin: 0 auto;
}
header .logo {
display: table;
height: 100%;
float: left;
}
header .logo div {
height: 100%;
display: table-cell;
vertical-align: middle;
}
header .logo div h1 {
color: white;
font-size: 14px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
header .logo div p {
color: #83838a;
font-size: 14px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
header nav {
float: right;
height: 100%;
}
header .logo img {
height: 50px;
margin-top: 5px;
/* Optical alignment of the logo */
}
header nav {
float: right;
height: 100%;
}
header nav li {
display: table;
height: 100%;
float: left;
margin-right: 30px;
}
header nav li:last-of-type {
margin-right: 0;
}
header nav span {
display: table-cell;
vertical-align: middle;
}
.logos {
color: rgb(169, 255, 138)
}
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/33bdf0ac68.js" crossorigin="anonymous"></script>
<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="icon" href="images/Logo.png" />
<title>Nicolas Lonoño</title>
</head>
<body>
<header>
<div >
<div >
<div>
<h1>Nicolas Lonoño</h1>
<p>Speaker</p>
</div>
</div>
<nav>
<li>
<span ><a href="">Home</a></span>
</li>
<li>
<span><a href="">Blog</a></span>
</li>
<li>
<span><a href="">Biography</a></span>
</li>
<li>
<span ><a href=""><i ></i></a></span>
</li>
<li>
<span ><a href=""><i ></i></a></span>
</li>
<li>
<span ><a href=""><i ></i></a></span>
</li>
</nav>
</div>
</header>
</body>
</html>
CodePudding user response:
There are two issues here. Firstly is that you're styling the color with the * selector which is changing every single element. You've wrapped an icon in an anchor in a span with a class of 'logos' but rather than inheriting the color, it's already styled with the * selector.
The other thing is that if you've got anchor links then you have to style the pseudo classes as follows:
.logos,
.logos a:where(:link, :visited, :hover, :active) {
color:rgb(169, 255, 138)
}
Or even use the 'inherit' value as follows:
.logos {
color: rgb(169, 255, 138);
}
.logos a:where(:link, :visited, :hover, :active) {
color: inherit;
}
But for icons within the anchor tag, again this won't work because the color has already been set with the * rule.
Set the color in a body selector as follows
body {
color:white;
}
Delete the color rule from the * selector.
Add the anchor pseudo class rules
Then it should work
Edit below:
I'd avoid setting stuff like overflow, margin, padding, list-style and text-decoration in the * tag. The only thing you should be doing is setting box-sizing:border-box. It'll be a total nightmare to debug as your site grows as it'll cause unpredicatable results.