CSS Won't Show When Launching In Chrome With Notepad++



I was practicing creating a navigation bar with HTML and CSS with the CSS linked to the HTML document in a separate file. I’ve followed a tutorial online writing all the code that is needed, but when I click Run > Launch in Chrome or any other browser for that matter, I’m only seeing standard HTML text with bullet points. I don’t know how to get the CSS to show. How do I get it to work?


Be sure that (for now) your CSS file is in the same directory as the index.html (HTML) file. That way the link is simple…

<link href="styles.css" rel="stylesheet">


Okay, I changed it the way you showed. But it gave me a huge yellow box with a black border and the text all the way to the left in a three row, one column format.


Please post your HTML and CSS so we can examine it. Thanks.

<head lang="en">
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
			<li><a href="Home">Home</a></li>
			<li><a href="About">About</a></li>
			<li><a href="Contact">Contact</a></li>



nav {

nav > ul > li > a {
	padding:0.5em 0.5em;


That is some selector! As is stands, in your markup their are no nested structures that would warrant such a specific selector.

There is only one UL in the NAV element. There are no OL’s so we can drop that type from the selector. Instead we will just need a descendent selector…

nav li > a

Also, there are no other links in the NAV element so we don’t need direct-child specificity. Furthermore, we don’t even need the LI selector.

nav a

pretty much covers what your selector is applied to.

Can you mount this on a repl.it sandbox so we can play with it?