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 CSS Foundations Selectors Type, Class, and ID Selectors

Vladimir Miletic
Vladimir Miletic
6,201 Points
Posted by Vladimir Miletic
Vladimir Miletic
6,201 Points

need help to answer this question. Add an ID attribute with the value main to the div element

not sure what I have to write

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Selectors</title>
    <link rel="stylesheet" href="cc1-main-styles.css" type="text/css" media="screen">
    <link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
    <h1><em>Hello</em> World!</h1>
    <div>
  <div class="main">

        <p>
            <em>Lorem ipsum dolor</em> sit amet, consectetur adipiscing elit. Nunc pulvinar consequat tortor, nec venenatis erat elementum scelerisque. Curabitur sit amet risus nisi. Aenean aliquet euismod augue at viverra. Ut varius arcu in lorem iaculis ullamcorper. Integer eu rutrum quam.
        </p>
    </div>
</body>
</html>
style.css 
/* Complete the challenge by writing CSS below */
body {
    background-color: lightblue;

}
h1 {
  color: darkblue;
}
em {
  color: red;
}
.main-div{}

2 Answers

Daniel Johnson
Daniel Johnson
104,132 Points
Daniel Johnson
Daniel Johnson
104,132 Points

It's an ID attribute, and not a class, so it would look like this...

<div id="main">

Your CSS it should be using a hashtag (#) instead of a dot (.) and no -div, so it would look like this...

#main {
  /* CSS properties would go here */
}

However, for this challenge the main ID is not actually needed in the CSS.

Just so you're clear on the difference between an ID and a class.

ID's are unique and should only appear once on the page for a single element while a class can be reused on multiple elements. They provide an optimized way of finding an element on the page because they only appear once.

ID's can also be used as part of a URL. For example, if you click this link http://teamtreehouse.com/library/css-foundations#selectors the browser will automatically scroll to the correct place on the page for you. This is because there is one element on that page with an ID of selectors.

For this challenge your code should end up looking like this...

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Selectors</title>
    <link rel="stylesheet" href="cc1-main-styles.css" type="text/css" media="screen">
    <link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
    <h1><em>Hello</em> World!</h1>
    <div id="main">
        <p class="intro">
            <em>Lorem ipsum dolor</em> sit amet, consectetur adipiscing elit. Nunc pulvinar consequat tortor, nec venenatis erat elementum scelerisque. Curabitur sit amet risus nisi. Aenean aliquet euismod augue at viverra. Ut varius arcu in lorem iaculis ullamcorper. Integer eu rutrum quam.
        </p>
    </div>
</body>
</html>
style.css 
body {
  background-color: lightblue;
}
h1 {
  color: darkblue;
}
p em {
  color: red;
}
.intro {
  font-weight: bold;
}
Yaroslav Kleshchev
Yaroslav Kleshchev
8,744 Points
Yaroslav Kleshchev
Yaroslav Kleshchev
8,744 Points

It need to be <div id="main">. To target it in the css use use #main{}. Css does not allow multiple elements with the same id name. However, there can be multiple elements with the same class name.