Why cant I add any CSS properties to my webpage?

Question

I am trying to add background color to my page, and padding the paragraphs, and divisions. But its not working. I would appreciate it if you could go through the code and explain whats wrong. Any tips on how I should do it, or what I can learn from or follow will be appreciated too. Thanks!

<!DOCTYPE html>
<html>

<head>
  <title>Jake's Coffee Shop</title>
  <meta charset="utf-8">
  <style>
    <! CSS For Menu > p {
      background-color: black;
    }
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 50px;
      background-color: #f1f1f1;
    }
    #UnorderedList li {
      display: inline-block;
    }
    li a {
      display: block;
      color: #000;
      padding: 8px 16px;
      text-decoration: none;
    }
    li a:hover {
      background-color: #555;
      color: navajowhite;
    }
  </style>
</head>

<body>
  <h1>Jake's Coffee Shop</h1>
  <div id="MenuBar">
    <ul id="UnorderedList">
      <li> <a href="https://www.google.com"> Home </a> 
      </li>
      <li> <a href="https://www.yahoo.com"> Menu </a> 
      </li>
      <li> <a href="https://www.music.com.bd"> Music </a> 
      </li>
      <li> <a href="https://www.google.com"> Jobs </a> 
      </li>
    </ul>
  </div>
  <div id="content">
    <p>
      <div>Come In And Experience...</div>
      <br>
      <div>
        <img src="images.jpeg" alt="Heartmelting Coffee Picture">
      </div>
      <br>
      <ul id="ItemMenu">
        <li>Specialty Coffee And Tea</li>
        <li>Freshly Made Sandwiches</li>
        <li>Bagels, Muffins, And Organic Snacks</li>
        <li>Music And Poetry Readings</li>
        <li>Open Mic Nights</li>
        <li>...</li>
      </ul>
  </div>
  </p>
  <footer>
    <address>23 Pine Road <br>Nottingham, NGI 5YU <br>0115 9324567 <br></address>
    <p>Copyright &copy; 2011 Jake's Coffee House</p>
    <p><a href="mailto:ratul_shams@yahoo.com"> yahoo@ratul_shams.com </a>
    </p>
  </footer>
</body>

</html>

One basic tip would be to properly format and indent your code! With that, bugs are much easier to find! — andreas, Aug 06 '16 at 12:49

score 2 · Answer 1 · edited May 23 '17 at 12:15

Here is a properly formatted and indended code. Your html comment was wrong notated and you nested a <div> inside a <p>, thats not allowed (see this question). Plus: Don't use <br> tags to create vertical space - use the margin property on divs to achieve that.

p {
  background-color: black;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 50px;
  background-color: #f1f1f1;
}
#UnorderedList li {
  display: inline-block;
}
li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #555;
  color: navajowhite;
}

<h1>Jake's Coffee Shop</h1>
<div id="MenuBar">
  <ul id="UnorderedList">
    <li>
      <a href="https://www.google.com"> Home </a> 
    </li>
    <li>
      <a href="https://www.yahoo.com"> Menu </a> 
    </li>
    <li>
      <a href="https://www.music.com.bd"> Music </a> 
    </li>
    <li>
      <a href="https://www.google.com"> Jobs </a> 
    </li>
  </ul>
</div>

<div id="content">
  <div>Come In And Experience...</div>
  <div>
    <img src="images.jpeg" alt="Heartmelting Coffee Picture">
  </div>
  <ul id="ItemMenu">
    <li>Specialty Coffee And Tea</li>
    <li>Freshly Made Sandwiches</li>
    <li>Bagels, Muffins, And Organic Snacks</li>
    <li>Music And Poetry Readings</li>
    <li>Open Mic Nights</li>
    <li>...</li>
  </ul>
</div>

<footer>
  <address>
    23 Pine Road <br>
    Nottingham, NGI 5YU <br>
    0115 9324567 <br>
  </address>
  <p>Copyright &copy; 2011 Jake's Coffee House</p>
  <p>
    <a href="mailto:ratul_shams@yahoo.com"> yahoo@ratul_shams.com </a>
  </p>
</footer>

Why cant I add any CSS properties to my webpage?

1 Answers1