External Style Sheet not affecting HTML

user_15246523 0
Viewed 56

Basically just what the title says. I have an external style sheet linked in my HTML, and it looks like the footer element is possibly picking up the change, but none of the other info is. I'm very new to this, so just trying to figure out where I went wrong.

Here's the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee House and Live Music</title>
<meta charset="utf-8">
<link href= "javajam.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h1>JavaJam Coffee House</h1>
<nav>
    <a href="index.html">Home</a> &nbsp;
    <a href="menu.html">Menu</a> &nbsp;
    <a href="music.html">Music</a> &nbsp;
    <a href="jobs.html">Jobs</a>
</nav>
<main>
  <h2>Relax at JavaJam</h2>
  <ul>
    <li>Specialty Coffee and Tea</li>
    <li>Bagels, Muffins, Gluten-free Pastries</li>
    <li>Organic Salads</li>
    <li>Music and Poetry Readings</li>
    <li>Open Mic Night</li>
  </ul>
  <div>
    12010 Garrett Bay Road <br>
    Ellison Bay, WI 54210 <br>
    888-555-5555 <br> <br>
  </div>
</main>
  <footer>
      Copyright &copy; 2018 JavaJam Coffee House <br>
      <a href = "mailto: email@email.com">email@email.com</a>
  </footer>
</body>
</html>

Here's the external style sheet:

body {background-color: #FCEBB6;
      color: #221811;
      font-family: verdana;}
      
header {background-color: #D2B48C;
        text-align: center;}
        
h1 {line-height: 200%;}

nav {text-align: center;
    font-weight: bold;}
    
footer{background-color: #D2B48C;
      font-size: .60em;
      font-style: italic;
      text-align: center;}

css html
2 Answers

I copied the contents of the HTML and stylesheet respectively, placed them in their own files (index.html and javajam.css), and opened index.html in Chrome and I saw the styles applied. Are the HTML and CSS files siblings of each other? As in, in the same folder? If not you'll want to include the path to the CSS file relative to the HTML file.

user_87227540

OPTION

I recommend you change the tag-selector in your stylesheet to , because there's no tag in your html.

body {background-color: #FCEBB6;
      color: #221811;
      font-family: verdana;}
      
h1 {background-color: #D2B48C;
        text-align: center;}
        
h1 {line-height: 200%;}

nav {text-align: center;
    font-weight: bold;}
    
footer{background-color: #D2B48C;
      font-size: .60em;
      font-style: italic;
      text-align: center;}

And then you could do some rearranging of the code

 h1 {background-color: #D2B48C;
     text-align: center;
     line-height: 200%;}

OPTION 2

simply enclose the 'h1' tag in your html in an 'header'

<header><h1>JavaJam Coffee House</h1></header>
user_145082320
Related