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

What if I want to ignore certain CSS rules in other HTML webpages and let some rules work on those pages?

Hi everyone :) I've been working on my first project, my first personal profile page and I've been running into some issues.

Basically I created 2 pages. Index.html (The default) Style.css (Stylesheet which also contains responsive media queries for other screen sizes) Contact.html

Now, I changed the p {} properties in the stylesheet And since both index.html and Contact.html have the <link> tags for being connected to the stylesheets, all the styling for the <p> elements get affected in both the pages

Problem is for the index.html page I've set the <p> to text-align:center But for the contact.html, I'd like to set the <p> to text-align: left;

However the stylesheet is common to both index and contact pages. Is there a way to make p work for only the index page for the text-align property only and ignore the text-align: center and override with text-align: left for the contact.html?

One way I figured out is to use classes on the <p> tag and float them to the left. Since classes are like parent container elements right. So not sure if text-align would work on classes since they would contain everything besides only text.

Sorry this took a while to explain :) Any thoughts/help me pls? Thanks!

There are many ways to do that

create parent div for both pages and target <p> according to that

//contact.html

<div id="contact">
    //contact markup
</div>

//index.html

<div id="index">
    //index markup
</div>

With classes in <p class="mod-change"> element

Inline styling <p style="text-align:center">

Darn it posted the same idea :laughing:

I didn't see your post before I answered. I promise. :grin:

3 Answers

Hello folks,

I just found another way!

You can also add CSS directly to an HTML file and I'm pretty sure those styles will only apply to that file :)

So maybe your code will look like this:

index.html
<!DOCTYPE html>
<html>
  <head>
    <!-- Your head stuff goes here. Remember to also include the styles.css file!! -->
    <style>
      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <!-- Your body goes here -->
  </body>
</html>
contact.html
<!DOCTYPE html>
<html>
  <head>
    <!-- Your head stuff goes here. Remember to also include the styles.css file!! -->
    <style>
      p {
        text-align: left;
      }
    </style>
  </head>
  <body>
    <!-- Your body goes here -->
  </body>
</html>

Hope this helps :grin:

Wow, it's amazing how the simplest tag can be the ultimate solution. :D

tl;dr

I think you might be able to make divs with an ID around all of the contents in each <body> and use a selector like this to only select that:

#index-div p {
  text-align: center;
} 

#content-div p {
  text-align: left;
}

Sorry if it doesn't work, I barely use CSS so I'm not 100% sure if it'll work :smile:

I sure hope it does! :grin:

Happy coding! :tada:

:dizzy: ~Alex :dizzy:

There isn't a way that you can apply seperate rules for one element like that. What you could do instead is either:

  1. Create a class for the p elements on the page that you want the styling to apply to and use that class in the css.
  2. Delete the styling from the main css file and create a new ones for the index page and contact page. That way you can have seperate styling on each, while still keeping the main styles in the original css file.

Your way works, but I think it's easier to make a div and put everything in the body in the div :)