Only part of CSS stylesheet appearing in browser

Quick question:

Only part of my css stylesheet code is being loaded by the browser. This issue does not appear to be with either the link or code used. Note that this difficulty exists across the browsers.

  1. Link:

  2. Stylesheet: (all save the last 3 header style rules are being diplayed by the browsers)

header .header-brand {

font-size: 30px;
color: #111;
font-weight:900;
display: block;
margin: 0 auto;
text-align: center;
padding: 20px 0px;

}

header nav ul{

display: block;
margin: 0 auto;

}

header nav ul li {
display: inline-block;
float: left;
list-style: none;
padding: 16px;
}

header nav ul li a {

color: #111;
font-weight:900;
font-size: 16px;

}

header .header-products{
display:none;
}

Hi @younism98
Welcome to the forum!

I don’t understand what you mean with ‘link’ and with ‘stylesheet’.
Do you mean that in case 1 you linked the stylesheet in the head of the HTML file like this:
<link href="style.css" rel="stylesheet">
and in case 2 you put your styles directly to the HTML using the <style></style> tag in your head?

PS: You can format code more readable when you mark the code and click the </> button in the editor.

Hey @mirja_t,

I have indeed linked the css via the head section using the code you have referred to.

Thanks.

Hmm, both versions I have referred to take place in the head tag. So I still don’t understand:
Doing this:
<style> {your styles here} </style> works,
doing this:
<link href="style.css" rel="stylesheet">
doesn’t?

I have been using the second method you have outlined whereby the html can be linked to an external css stylesheet

And doing that only some of your styles are applied? Could you then format that code and add comments to the ones that don’t work?

yes exactly @mirja_t , the code seems to stop having any effect after a certain point. However, no errors seem to be picked up by either the text editor (visual studio code) or the chrome developer section.

Ok, I guess then you have to provide the html, too.
And format your code, please.

This is the HTML code i've been using: 

<!DOCTYPE html> 
<html>

<head> 
<link href="stylesheet1.css" rel="stylesheet" type="text/css" >
<title> Test site </title> 
</head>

<body>

<header> 
<a href="index.html" class="header-brand"> test site</a>
</header> 

<nav> 
<ul>

<li><a href="signup.html"> Sign up</a></li> 
<li><a href="findout.html">find out more</a> </li> 
<li><a href="contact.html"> Contact us </a> </li>
<li><a href="work.html">Work with us </a></li>
</ul>

<a href="products.html" class="header-products"> test products </a> 
</nav>

</body>
</html>`Preformatted text`

There is no such selector in your html. The <header> tag was closed above the <nav> tag. Affects all subsequent styles.

ahh yes, I can see how that would have affected the format. It now works fine, many thanks for pointing that out @mirja_t!

3 Likes