Quick Question

Quick panicky CSS question. How do I get the same CSS code to do different things on different pages.
I have a copyright notice that I want positioned differently on different pages on the same website. I have the .csstag on the same css page for all the different pages.
I think I need to make it #thecss tag like this for it to do different thing… but this is where I get confused.

Okay, I need help.

You can put a different class on the body element of each page. So, for example, on the About page you could do this:

<body class=“about”>

Then, in your CSS, instead of something like this:

.notice {position: abc}

you could have this:

.about .notice {position: xyz}

.contact .notice {position: ijk}

.home .notice {position: efg}

I think I get it. Thanks makes sense. So, if I have a .copyright div on the portfolio page and the contact us page, I can do .copyright_portfolio and .copyright_contact us. Is that what you’re talking about?
Thanks for your help.

You could do that, but it’s not quite what I meant.

Let’s say you have a div on both pages with a class of .copyright. Even though you want those two divs to be slightly diffenrent on each page, presumably they have some characteristics in common. So you really just want one rule in your CSS for that. E.g.

.copyright {
  [I]styles shared by all copyright boxes[/I]

But say that you want a different background color for the copyright box on the About page. What you can do is put a class of “about” on your body tag on that page:

<body class=“about”>

and then in your style sheet just specify a different background color for the copyright box on that page, by having a rule like this:

.about .copyright {
  background: red;

So you haven’t repeated all of the common copyright styles, but just targeted the special styles for the .about page.

Does that makes sense?