FAQ: Learn CSS Selectors Visual Rules - CSS Setup Selectors - ID Name

This community-built FAQ covers the “ID Name” exercise in Codecademy’s CSS lessons.

FAQs on the CSS exercise ID Name

Join the Discussion. We Want to Hear From You!

Have a new question or can answer someone else’s? Reply (reply) to an existing thread!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources about CSS in general? Go here!

Want to take the conversation in a totally different direction? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account, billing, Pro, or Pro Intensive? Reach out to our support team!

None of the above? Find out where to ask other questions here!

Other FAQs

The following are links to additional questions that our community has asked about this exercise:

  • This list will contain other frequently asked questions that aren’t quite as popular as the ones above.
  • Currently there have not been enough questions asked and answered about this exercise to populate this FAQ section.
  • This FAQ is built and maintained by you, the Codecademy community – help yourself and other learners like you by contributing!

Not seeing your question? It may still have been asked before – try searching for it by clicking the spyglass icon (search) in the top-right of this page. Still can’t find it? Ask it below by hitting the reply button below this post (reply).

A post was split to a new topic: Conflicting css property resolve order

I have question, what is the need of “id” specifically when the same can be done using class elements ?

2 Likes

ids are unique, so you when having ids you know you are dealing with a single element on the page. This can be very useful when your page grows and the number of elements increases

furthermore, ids have a higher priority when it comes to resolving conflicting css properties

2 Likes

So you mean I can use ids only on one element on the web page… is it just to look unique ? I tried using another id too it worked… we create those id’s right, we ourselves have to give the priority according to the need right ?

yes, unfortunately browsers do support multiple ids, which is a shame. So now its your job as developer to ensure unique ids

no, css uses a point system to resolve conflicting css properties. ids will have more points then class and element selector

Thanks stetim94 for clarifying the doubt.

In part 8 of this exercise, in the style.css file I wrote a CSS selector for class attributes, and then in part 9 underneath that I wrote a selector for an ID attribute. When I added the corresponding ID value to an h1 element in the index.html, having not deleted the class value written from the part 8, I noticed that the CSS for the ID became displayed in the browser.

Does this mean that CSS selectors for IDs overwrite those for class even when the ID selectors are written lower down in the hierarchy of the cascade on the style.css file?

that is part of it, the other part is that css uses a point system to resolve conflicting properties (the higher the specificity, the more points). Which looks like this:

element: 1 point, so for example p is 1 point
class: 10 points, so .class_example is 10 points
id: 100 points, so #id_example is 100 points
using the style attribute: 1000 points

so .class_example p would be 11 points

given ids have a higher specificity, the ID will always overrule the class selector in case of conflicting properties (so even if you place the ID before the class selector)

if the points are equal, the latest property gets applied

this even applies when you have multiple stylesheet:

<style>
p { color: red }
</style>
<style>
p { color: blue }
</style>

the paragraph will be blue, even if those stylesheet where external (so with <link rel="stylesheet" href="#">)

2 Likes

That’s a great explanation. Thank you.

what’s the difference between the id and the class

ids should be unique (unfortunately not enforced by the browser), so we as programmers should enforce unique id’s. Furthermore, ids have higher specificity, which is important when you have conflicting css properties for an element

Does the ID attribute overrides Class attribute in CSS. For example if the class selector for an element has color red,and ID selector for the same element has color green.

I haven’t tried myself, but I do know that id would override class because a class is made to target multiple element whereas an id is only made to target that one specific element

id has a higher specificity, so the color would be green.

i can’t understand what’s the difference between ( id ) and (class)

have you read the topic so far? within the topic you can find explanations about the differences:

a class is made to target multiple element whereas an id is only made to target that one specific element (credit to sgr524)

the uniqueness of ids also comes in handy when working with forms for example (to associate input field with a label)

image

This is how my text ended up looking. I am far from an expert, but I would not call this cursive. Did I do something wrong? I checked all my code, but I can’t see anything.

My code in CSS:
#article-title {font-family: cursive;
text-transform: capitalize;}

And in index:
h1 id=“article-title” class=“title uppercase”>Top Vacation Spots</h1

(with the brackets obviously. I had to remove them because otherwise it wouldn’t show the code)

2 Likes

My text didn’t end up in cursive, either:

title%20error%20css

I also triple checked all my code and it looks correct to me:

index:

h1 id=“article-title” class=“title uppercase”>Top Vacation Spots</h1

css:

#article-title {
font-family: cursive;
text-transform: capitalize;
}

Any assistance would be greatly appreciated!!

2 Likes