Stephanie Rees
Stephanie Rees

Reputation: 21

HTML won't link to CSS

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

Answers (2)

Ilia Gilmijarow
Ilia Gilmijarow

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

leepowers
leepowers

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

Related Questions