ID Selector Video: I can't get the code to work

Question

According to the video I'm working on, I'm supposed to get a div with ID primary-content to have a red border, but the code doesn't work. What am I missing?

<!DOCTYPE html> <html> <head> <title>Lake Tahoe</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <span>Journey through the Sierra Nevada Mountains</span> <h1>Lake Tahoe, California</h1> </header> <div id="primary-content"> <p> Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation. </p> <a href="#">Find out more</a> <h2>Check out all the Wildlife</h2> <p> As spawning season approaches the fish acquire a humpback and protuberant jaw. After spawning they die and their carcasses provide a feast for gatherings of <a href="#">mink</a>, <a href="#">bears</a>, and <a href="#">Bald eagles</a>. </p> <a href="#">See the Wildlife</a> </div>

    <div>
  <h3>From Tents to Resorts</h3>
  <p>
    Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
  </p>
  <ul>
    <li><a href="#">Lake Tahoe Resort Hotel</a></li>
    <li><a href="#">South Lake Tahoe Resorts</a></li>
    <li><a href="#">Tahoe Ski Resort Lodging</a></li>
  </ul>         
  <h3>Pack Accordingly</h3>
  <p>
    One of most important things when it comes to traveling through the great outdoors is packing accordingly. Here are a few tips:
  </p>
  <ol>
    <li>Bring layers of clothing</li>
    <li>Pack sunscreen</li>
    <li>Carry extra water just in case</li>
    <li>Pack light</li>
  </ol>
    </div>

    <footer>
        <p>All rights reserved to the state of <a href="#">California</a>.</p>
        <a href="#">Back to top &raquo;</a>
    </footer>

</body> </html>

body { color: #878787; margin: 0; }

header { background-color: orange;

}

h1 { font-size: 90px; color: white;

}

h2 { font-size: 53px;

}

h3 { font-size: 20px; color: #48525c; }

primary-content {

border: 3px solid red; }-

Answer 1 · 2015-09-02T15:05:10Z

September 2, 2015 3:05pm

Well now it works. There must have been a long delay from when I saved my work to when I was able to view it.

Answer 2 · 2015-09-02T19:33:37Z

September 2, 2015 7:33pm

Hi Kim,

Classes in html are targeted using .classname and id's are targeted in CSS using the #idname.

div class="superman".............. In Css --> .superman { } " div id="catwoman".................... In Css --> #catwoman{ } "

The biggest difference is these two is that a element can have multiple classes, while a 'unique' id is only assigned to a single element. eg". div class="superman batman helium balloon" .............. In Css --> .superman { } .batman{ } .helium{ } .balloon{ } " The div will use all rules in each of the CSS rules you have applied to this div.

However, "div id="catwoman"cannot have any other id assigned to it or to any other element on the page with the id name as catwoman. In CSS--> #catwoman{ } .....note the "#' sign

Finally, this works too "div class=" superman batman helium ballon" id="catwoman" "In this case each individual class and the unique id will share their properties with the div that requested them. Not an ideal way to do things, as specificity can make things in this manner a little complicated.

Hope this helps.

Welcome to the Treehouse Community

Looking to learn something new?

Kim Miranda

Kim Miranda

ID Selector Video: I can't get the code to work

primary-content {

2 Answers

Kim Miranda

Kim Miranda

Austin Dsilva

Austin Dsilva