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 anonymous123
anonymous123
5,794 Points

how do i write all the css for a web page on one css document?

i am coding my first website and i just got to the second web page of my website. how do i write all the css on one css document and not have it interfere with the styles of other pages of my site?

3 Answers

Linas Mackonis
Linas Mackonis
7,071 Points
Linas Mackonis
Linas Mackonis
7,071 Points

There is another thing called specificity. Imagine you have the same two sections, but populated with more elements: 

<section class='section-for--about'>
<h2>Heading for About Page</h2>
<p>Paragraph</p>
</section>
<section class='section-for--contact'>
<h2>Heading for Contact Page</h2>
<p>Paragraph</p>
</section>

In order to target the p tag in about page section you can write in your CSS 

.section-for--about p

It will target only p tag(s) under this section. CSS specificity works by the matching principle. F.example, if I write:

.myAwesomeClassName nav ul li span

So, it will target only those span elements that also meet the before mentioned conditions i.d are placed in li, which is placed in ul, which is placed in nav etc.

Have some time and play with these concept around!

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

If you have an about page, you could have about.html and it would link to a css file about.css. And you could have a portfolio.html that links to portfolio.css. Then they're totally separate.

anonymous123
anonymous123
5,794 Points

i meant document sorry

Linas Mackonis
Linas Mackonis
7,071 Points
Linas Mackonis
Linas Mackonis
7,071 Points

You can name each element with different classes. Let's say you have two <sections>, one for about page and the other for contact page. You can give them descriptive classes:

<section class='section-for--about'>Content goes here</section>
<section class='section-for--contact'>Content goes here</section>