In the example given in this exercise, why would we want to use the `.brand` selector rather than the `p` selector to target our paragraph?

Question

In the example given in this exercise, why would we want to use the .brand selector rather than the p selector to target our paragraph?

Answer

The code snippet used in this exercise is purely for demonstrative purpose. However, you can imagine a project where we had multiple <p> elements. Say we only wanted to target a fraction of those elements for styling. We could apply a class attribute specifically to the <p> tags containing the text we wanted to style. In this case, we target the <p> elements we want to style while ignoring those <p> elements we do not want to style.

More generally, this example illustrates how we can use classes to more narrowly target groups of elements.

55 Likes

Do variables on computers work like this?, we could have a class and appy changes not only to the class but also to other elements that are out of that class, such as parts and sections of a program or an app?
I’m sorry if this is a too confused question

What do you mean by computer variables?

1 Like

Thanks for the insight!

Someone please explain to me why this style for

not active when I add a CSS selector:
In HTML file

Top Vacation Spots

In file style.CSS, I code that: h1 { color: maroon; } .title { color: teal; font-size: 40 px; } why the text "Top Vacation Spots" isn't maroon in colour and it changes to color teal ??? Maybe there is an order between tag

and class attribute when we style it in CSS?

4 Likes

the use of the “.title” selector overwrites the “h1” selector.

4 Likes

CSS reads code like we read books, left to right, top to bottom. Lets say you read this sentence

Rodger’s hair is blue.

Then you read this one

Actually, it’s green.

Roger’s hair is now green rather than blue, even though blue came first. I hope this makes sense, I’m not anything close to an expert on CSS or any code for that matter, but thats one way of understanding it.

21 Likes

Your example make me feel more easier to understand my problem. Thank you so much :heart_eyes::heart_eyes::heart_eyes:

Vào 10:41, CN, 24 Th2, 2019 Monsterunderthebed via Codecademy Forums [email protected] đã viết:

1 Like

While you are correct on how CSS reads it’s content, this is not the reason for the behavior @changpham is experiencing. If you define the .title (class) selector above the h1 (element) selector, your page will still render the .title definition rather than the h1 definition. This is because in CSS, class selectors have a higher precedence than element selectors, so your class will always override your element no matter where it’s defined in the stylesheet. However, if you had multiple .title selector definitions, your page would render the final definition of it as you had stated.

CSS selector hierarchy: #ID > .Class > Element

27 Likes

Sorry for the silly question, but what’s #ID for? Inline element or?? Thanks in advance!

1 Like

Hello @simcam ,

ID is an HTML attribute used to uniquely identify an element. Let’s say you want to add a style for 1 particular button, but do not want to make this change to other your buttons. You would NOT target a class because that would make the change to every element using that class. You also wouldn’t target the button element because that would implement this change for all button. Instead, you target the button by it’s ID because it’s unique and will only make a change to that one button. Hope this makes sense!

Sincerely,
Andrew

12 Likes

Is it that the “class” attribute in css analogous to “id” attribute in html?

One instead of all. :sunglasses:

I believe it’s because in the html file, h1 indicates class=“title”

Are u studying programming language like java? Those classes are different.

Somewhat yes, classes in this case help identify the tags for the style.css just like how an id is used to identify an attribute in html. Hope this helped!

Is there an especial reason why we’re using class rather id in this example? what’s the difference between them? Thanks

The id attribute is used to add a unique identifier to an HTML element. It can then be used to style a specific element in CSS by using the id selector: #id . It can also be used to add functionality to a specific element using JavaScript. One thing to keep in mind is that the id attribute must be unique meaning only one element in an HTML document can have a particular id

The class attribute is also used to add an identifier to an HTML element. However, it doesn’t have to be unique. Multiple elements in the same HTML document can have the same class attribute. This is useful when wanting to style a bunch of elements in the same way

2 Likes

h1 can potentially refer to all h1 tags, .title will only refer to all tags with class attribute “title”, h1 or not.

1 Like

Thanks for that! That is why I look at the forums just incase someone asked this question.