Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,070 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,696 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.

i meant document sorry

Linas Mackonis
Linas Mackonis
7,070 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>