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

HTML How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Pauline Hilborn
Pauline Hilborn
3,879 Points

Why do we use a period in CSS, as in ".social-icon" as opposed to "#social icon" when selecting the HTML "class" in CSS?

When do we use "#" as opposed to "." in CSS when selecting elements from our HTML?

3 Answers

Kevin Korte
Kevin Korte
28,149 Points

Classes are always selected starting with a period, IDs are always selected starting with a hash or pound sign. That is the syntax set by the W3C that we are to follow.

Pauline Hilborn
Pauline Hilborn
3,879 Points

Thank you. OK, so it's just a syntax thing.

Kevin Korte
Kevin Korte
28,149 Points

As far as selecting an element with an ID or CLASS attribute, yes, it's just a syntax thing. Without getting into too much detail today for you, there are fundamental differences between classes and ids when selecting an element, and some logic as to why you might use a class over an id, or vice versa. A class and an id hold different specificity weights in a CSS document, ids should only be used once in a document, and an element can not have more than one id. So a class is much more versatile since it isn't bound by being unique to a document, and an element can have multiple classes, while having a lower, specificity weight, thus making it generally easier to work with.

Stick with it, and you'll learn more about what I just mentioned in future lessons.

Pauline Hilborn
Pauline Hilborn
3,879 Points

OK. Thank you so much for taking the time to explain this. It's very helpful. Yes, I just need to stick with this. I'm just following through step-by-step at the moment. I definitely don't have the whole big picture yet!

Kevin Korte
Kevin Korte
28,149 Points

No you don't, it takes time and experience to get the whole big picture. That's why I wanted to give you a fly-by to show you there is reasoning behind it, but it's not something you should concern yourself with too much today. I've been at this 3 years and still uncover new things I didn't know. You'll eventually get there, and will see the whole picture, the logic of what to use, when, and why, one day. Happy coding and you're welcome!

Mani Saini
Mani Saini
3,101 Points

Hi team, can someone please explain why we can not use ID for social-icon? I was trying to run my code using ID : <footer id = "social-icons"> And then in CSS

social-icon a {

}

MarQwann Brown
MarQwann Brown
6,598 Points

in order to target an ID in CSS you have to use the '#' symbol. In your example to target links with the 'social-icon' ID it would be

#social-icon a{

}

Keep in mind that you can only use an ID once per page, so it may be better for you to create a class.