Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website Customizing Colors and Fonts Use Classes in CSS

Posted by Dhruv Gomber
Dhruv Gomber
Courses Plus Student 628 Points

I don't really get what the div id does and where it goes.

Why doesn't the logo in <a href="index.html" id="logo"> go into the div id? Does the div id go anywhere in the html code? What does the <a href="index.html" below the header do?

2 Answers

Noah Liddle
Noah Liddle
1,187 Points

A div id is an identifier for an object. It's for use in CSS so you can apply rules to everything within that div.

For example, if you want the background colour for all content with the div "blueback" to be blue, then you'd write:

<div id="blueback">
<h1>Hello World</h1>
<p>How are you doing today?</p>
</div>

And then in css you'd write:

#blueback {
     background-colour: blue;
}

As for the 'a href' code, that is code for a link. Everything between <a href="index.html"> and </a> will send you to index.html when clicked.

Hope that helped!

Kate Hoferkamp
Kate Hoferkamp
5,205 Points
Kate Hoferkamp
Kate Hoferkamp
5,205 Points

Id's are represented as '#' not '.' but otherwise I completely agree! Id's can be used to target a specific tag in html.

For example, if you have 5 items in your navigation, you may use an Id to target which one is the active page, and change the color of just that item and not the rest.

Like so:

<ul>
     <li>Home</li>
     <li>Page Two</li>
     <li>Page Three</li>
     <li id="active">Page Four</li>
     <li>Page Five</li>
</ul>

Then in the css you could change the look of just the one item. Using an Id is the easiest way to target the 4th item in this list of five.

Noah Liddle
Noah Liddle
1,187 Points

Fixed. Thanks for spotting that.

Dhruv Gomber
PLUS
Dhruv Gomber
Courses Plus Student 628 Points
Dhruv Gomber
Dhruv Gomber
Courses Plus Student 628 Points

Thanks!!!