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 Abhishek Neogi
.a{fill-rule:evenodd;}techdegree
Abhishek Neogi
Front End Web Development Techdegree Student 995 Points

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!

Ashish Mehra
Ashish Mehra
3,407 Points

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">

Alexander Davison
Alexander Davison
65,469 Points

Darn it posted the same idea :laughing:

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

3 Answers

Alexander Davison
Alexander Davison
65,469 Points

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:

Abhishek Neogi
.a{fill-rule:evenodd;}techdegree
Abhishek Neogi
Front End Web Development Techdegree Student 995 Points

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

Alexander Davison
Alexander Davison
65,469 Points
Alexander Davison
Alexander Davison
65,469 Points

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:

tate
tate
13,435 Points
tate
tate
13,435 Points

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.
Alexander Davison
Alexander Davison
65,469 Points

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