?
Solved

multiple body styles in css

Posted on 2006-04-25
13
Medium Priority
?
1,020 Views
Last Modified: 2012-08-13
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.
0
Comment
Question by:vbnewbie01
  • 5
  • 5
  • 3
13 Comments
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16541116
Hi vbnewbie01,

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

Joe P
0
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16541119
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
 
LVL 17

Accepted Solution

by:
BogoJoker earned 200 total points
ID: 16541144
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 1

Author Comment

by:vbnewbie01
ID: 16541382
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
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16543483
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
 
LVL 1

Author Comment

by:vbnewbie01
ID: 16545884
nope.  didn't work.  again, the first one over-rides the body.index.  thanks anyway, B.J.
0
 
LVL 8

Assisted Solution

by:klykken
klykken earned 200 total points
ID: 16552961
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
 
LVL 1

Author Comment

by:vbnewbie01
ID: 16554677
hi, klykken; thanks for the suggestion ... hate to say, but it didn't work either.  
0
 
LVL 8

Expert Comment

by:klykken
ID: 16554703
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
 
LVL 8

Expert Comment

by:klykken
ID: 16554723
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
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16557874
Exactly what klykken said before should work, the body.index, body.index li, body.index ol ....
0
 
LVL 1

Author Comment

by:vbnewbie01
ID: 16563211
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
 
LVL 1

Author Comment

by:vbnewbie01
ID: 16563259
oh, i see why ... i had flipped back to id="index" from class="index" and forgot to change back.  anyway, thanks again.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month9 days, 8 hours left to enroll

612 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question