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

Posted by Code Pack
Code Pack
1,978 Points

Styling of different pages with css.

Hi,

Just confused that, how browser can identify if I add two different styles of the same attribute in stylesheet (one for home and one for about)

Example : h3 { margin: 0 30px } - for home page header h3 { margin: 0} - for about page header

Thanks in advance..

2 Answers

Chris Dziewa
Chris Dziewa
17,781 Points

In these cases, it will work best if you describe an element to the browser using a class or id. If we had the following:

Home page header:

<header class="home"> 
   <h3>Hey I'm the Home page header I will be red</h3>
</header>

and About Page header:

<header class="about"> 
   <h3>Hey I'm the Home page header I will be green</h3>
</header>

I can apply different styles to each by using the classes in the css:

.home h3 {
    color: red;
}


.about h3 {
    color: green;
}

By making things more specific, we not only guide the browser but also make our markup more readable.

Code Pack
Code Pack
1,978 Points

Thanks Chris, That was really helpful.

Chris Dziewa
Chris Dziewa
17,781 Points

Anytime! One more thing, the more descriptive you make your classes/ids the easier it will be for you, and for any team you may be working with to come back to later. In production, I would probably make these classes something like this: class="about-header" That way you can tell right in the css what the selector is styling.

Amitai Zand
Amitai Zand
12,513 Points
Amitai Zand
Amitai Zand
12,513 Points

You can assign an ID tag in the h3 HTML element on each page (e.g. <h3 id="yourIDname1"> and <h3 id="yourIDname2"> ), and then select the tags in your CSS to apply the specific h3 styling on each page (e.g. #yourIDname1 { margin: 0 30px; } on the home page and #yourIDname2 { margin: 0; } on the about page.

Hope this helps answer your question!

Code Pack
Code Pack
1,978 Points

Thanks mate, That was really helpful.