multiple body styles in css

hi there; here is my body style in my css:

body, li, ol, td, pre {      
      font-family:"Verdana", "Arial", "Helvetica", "sans-serif";
      font-size:11px;
      color: #444;
      text-decoration:none;
      text-align: justify;
      }

my question is, i would like this style to apply to every page except one.

rather than code the styles inline (or in the head section), is there a way to specify in the css page that on foo.aspx i want a different body style?

thanks.
LVL 1
vbnewbie01Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

BogoJokerCommented:
Hi vbnewbie01,

Link it:
<link rel="stylesheet" type="text/css" href="theName.css">

Joe P
0
BogoJokerCommented:
No you can't really specifiy a different body section, you could link another style sheet just on that page which would alter/change/enhance the current style from that base css file.

Joe P
0
BogoJokerCommented:
Well actually if your tricky with your code, you could have that one stylesheet hold styles for different bodies with different calss names or id names.

body.index { ... }
body.contact { ... }
You would just need to have <body class="index"> on the page you want the index properties.

Same goes for:
#index { ... }
#contact { ... }
But that works for any element with an id.  <body id="index"> and <p id="index">

There are many ways to do this. =)
Which would be easiest for you?
Remember when linking to anything in html it is a relative path to the file, so just saying href="theName.css" that is expecting the file to be in the same folder, you can in fact put the folder anywhere, you just have to set the path to it correctly.  Formatting a CSS file is exactly like <style type="text/css"> ... </style> without the style tags.  So an example css file for you would be this, call the file base.css and link to href="base.css"

body, li, ol, td, pre
{    
     font-family:"Verdana", "Arial", "Helvetica", "sans-serif";
     font-size:11px;
     color: #444;
     text-decoration:none;
     text-align: justify;
}

Thats it, just the css code.  Seperate HTML from CSS to make the code cleaner, not spread out.

A final point I would like to add is that internal style in your html takes presedence over the linked external style sheet.  So say you did not want the color: #444 just for one page you could override that right in the <body> tag and the rest will still apply.
<body style="color: #867">  Something like that, the internal css, the color 867 will overpower the 444.
Joe P
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

vbnewbie01Author Commented:
hi joe, thanks for the responses ... i'm okay with connecting to the .css file ... you actually anwered my question with the body.index { ... } ...

however, when i add a new body element to my css file and call it from my page (i.e. <body class="index">) the original body element over-rides it.  if i erase the original it works fine ... indicating that it is being read ... again, it's just being overwritten.

here are my 2 css elements:

body.index{      
      font-family:"Verdana", "Arial", "Helvetica", "sans-serif";
      font-size:20px;
      color: #ffffff;
      text-decoration:none;
      }

body, li, ol, td, pre {      
      font-family:"Verdana", "Arial", "Helvetica", "sans-serif";
      font-size:11px;
      color: #444;
      text-decoration:none;
      text-align: justify;
      }

suggestions?  thanks again.
0
BogoJokerCommented:
Reorder them in the css file.  Try:
body, li, ol, td, pre {    
     font-family:"Verdana", "Arial", "Helvetica", "sans-serif";
     font-size:11px;
     color: #444;
     text-decoration:none;
     text-align: justify;
     }
body.index{    
     font-family:"Verdana", "Arial", "Helvetica", "sans-serif";
     font-size:20px;
     color: #ffffff;
     text-decoration:none;
     }
0
vbnewbie01Author Commented:
nope.  didn't work.  again, the first one over-rides the body.index.  thanks anyway, B.J.
0
klykkenCommented:
That's because you probably have your content insise a td, in which it takes presedence for being more detailed.
Add this and it should work:
body, li, ol, td, pre {    
     font-family:"Verdana", "Arial", "Helvetica", "sans-serif";
     font-size:11px;
     color: #444;
     text-decoration:none;
     text-align: justify;
     }
body.index, body.index li, body.index ol, body.index td, body.index pre{    
     font-family:"Verdana", "Arial", "Helvetica", "sans-serif";
     font-size:20px;
     color: #ffffff;
     text-decoration:none;
     }
0
vbnewbie01Author Commented:
hi, klykken; thanks for the suggestion ... hate to say, but it didn't work either.  
0
klykkenCommented:
vbnewbie,
what exactly does not work?

This code works in btoh IE and FF:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>[Site Title]</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
<!--
.editors td {
      border-color: #ccc;
      border-style: solid;
      border-top-width: 0px;
      border-left-width: 0px;
      border-bottom-width: 0px;
      border-right-width: 1px;
}
.last {background-color: #eee;}
-->
</style>
</head>
<body>
<table class="editors" cellSpacing="0" cellPadding="0">
  <colgroup>
            <col>
            <col>
            <col class="last">
      </colgroup>
      <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
</table>
</body>
</html>

-klykken
0
klykkenCommented:
Ignore my post above... wrong question lol.

Can you paste your HTML and CSS so we can see the structure we're trying to style? It should be really easy.

-klykken
0
BogoJokerCommented:
Exactly what klykken said before should work, the body.index, body.index li, body.index ol ....
0
vbnewbie01Author Commented:
my aplogoies ... yes, what klykken posted worked.

not sure why it didn't initially, but just i revisited it and we're good to go.

thanks all.
0
vbnewbie01Author Commented:
oh, i see why ... i had flipped back to id="index" from class="index" and forgot to change back.  anyway, thanks again.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.