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

Community Off Topic
1

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?

2

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">
1 Like
3

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.

4

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

1 Like
5 
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>Website</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<nav>
		<ul>
			<li><a href="Home">Home</a></li>
			<li><a href="About">About</a></li>
			<li><a href="Contact">Contact</a></li>
		</ul>
	</nav>
</body>
</html>

CSS:

body{
	margin:0;
	padding:0;
	font-size:15px;
}

nav {
	background-color:#333;
	margin:0;
	overflow:hidden;
}

nav > ul > li > a {
	color:#aaa;
	background-color:#FF0;
	display:block;
	line-height:2em;
	padding:0.5em 0.5em;
	text-decoration:none;
}
7

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?

1 Like