Reputation: 21
This is what I have at the start - there is more, but that all is fine:
<!DOCTYPE html>
<html>
<head>
<title>My Life Story</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header>
<section id="navi">
<nav>
<ul>
<li><a href="index.html">Introduction</a></li>
<li><a href="Wales.html">Wales</a></li>
<li><a href="inverness.html">Inverness</a></li>
<li><a href="edinburghone.html">Edinburgh Part One</a></li>
<li><a href="edinburghtwo.html">Edinburgh Part Two</a></li>
<li><a href="bristol.html">Bristol</a></li>
</ul>
</nav>
</section>
</header>
</body>
</html>
My style.css:
.header {
padding: 60px;
text-align: center;
background: #f2acec;
color: white;
font-size: 40px;
}
index.ul {
list-style-type: none;
margin: 0;
padding: 0;
}
CSS file in the same folder as the .html - but when I load it up, nothing happens - why? I've looked everywhere and it doesn't seem like I'm doing anything wrong. What am I missing?
Upvotes: 0
Views: 49
Reputation: 1020
Your CSS seletors do not currently select any of the tags in the HTML that you showed.
e.g. .header
- a dot and a name in css means you want to select elements that have this in their class attribute. You should have header
to select a header tag.
Upvotes: 2
Reputation: 38318
Linkage is fine. None of your CSS selectors correspond with the HTML. The following should work:
header {
padding: 60px;
text-align: center;
background: #f2acec;
color: white;
font-size: 40px;
}
header ul {
list-style-type: none;
margin: 0;
padding: 0;
}
https://codepen.io/leepowers2/pen/VwLxZLX
Upvotes: 3