CSS file and page templates

Give the element you want to style a different class in your XHTML then you can style it differently in the style.css
The problem is not giving different CSS to different pages, You just need to specify the CSS to the correct HTML element or tag. If you’re too specific with the basic styles in your files you’ll have trouble overriding them with other rules in specific instances.

See this article

“Give the element you want to style a different class in your XHTML then you can style it differently in the style.css”

i think i understand what youre driving at but lack the skills how to achieve it.

this is the section in the css file which controls the vertical lines (element?).

#page {
background:#fff url(images/pagebg.gif) top left repeat-y;
width:940px;
padding: 0px 20px;
margin:0 auto;
border:1px solid #eee;
border-top:0;
}

adding another to reference to my new page template which ive called page2.php doesnt seem to work. See my attempt below. I dont really know what the #page means.

#page2 {
background:#fff url(images/none.gif) top left repeat-y;
width:940px;
padding: 0px 20px;
margin:0 auto;
border:1px solid #eee;
border-top:0;
}

not exactly sure what you are not sure of. so here is a question…

in the CSS the ( # ) tag = an ID name, rather than say a CLASS which would be a ” .” (period)

that means on your page2.php in the xhtml …

<div id=” “> if you use #

<div class=” “> if you use .

Exactly, just to clarify what ronchicago is saying I’d like to make you aware of the following: An ID element in XHTML has to be unique on the page. in other words, you can’t have id="page" twice on the same page. But you can have as many instances of the same class on one page. So having class="page" on the same page 10 times is no problem. This does however mean that in CSS using the ID as a selector is more specific than a class selector. This means that when you have a conflicting rule between #page and .page the #page style will be the overruling one based on specificity. Naturally both can be used for the same element so…
(XHTML)

<div id="page" class="noline">

(CSS)

#page.noline { border: none; }

is possible

NB. The #page has no relation to the coincidence that the template file is named page.php

I have only one page on my website that uses different CSS, why would I want to load that page’s entire CSS in someone’s computer every time they refresh any other page on my website?

@ msafi – Then create a separate CSS file for that page. In any case seeing that we live in the age of broadband Internet connections, a 10 Kb CSS file isn’t really going to slow things down. Even if have a “slow” 1024kbps DSL connections it’s only going to take but a second to load. You’ve got to remember that the images set as background in the CSS aren’t pre-loaded with the CSS file. They are only called on when the XHTML class or ID actually calls on that style. The thing that can make it slow to render is when you haven’t taken the time to validate the XHTML and CSS. Errors in either one can confuse a browser and in some cases even make it hang for a couple of minutes.

thanks for the replies but im so far behind understanding you i cant work out what you mean.

heres my xhtml file below. but ive no idea how to amend it to actually remove the line that the css file is putting in. im sure you dont actually mean me to copy in:<div id=”page” class=”noline”>

but then what do you mean??

<?php
/*
Template Name: Wide body
*/
?>

<?php get_header(); ?>

<div style=”width:0px; margin:1px; padding:1px; float:left; width:100%; font-size:100%;”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id=”subhead”>
<h1><?php the_title(); ?></h1>
</div>
<div class=”post” id=”post-<?php the_ID(); ?>”>
<div class=”entry”>
<?php the_content(); ?>
</div>
<div style=”clear:both;”>
</div>
</div>
<?php endwhile; endif; ?>
</div>
</div>
<?php get_footer(); ?>

This line:

<div style="width:0px; margin:1px; padding:1px; float:left; width:100%; font-size:100%;">

is styled with inline CSS which you shouldn’t use because it overrides the styles in your external style sheet (style.css).

Okay back to basics. Your theme is made up in two parts; the content, which is defined by the PHP files, and the presentation which defined by the CSS file(s). In the PHP files there are XHTML tags, class attributes and ID attributes. The tags, class, and ID can be targeted with CSS. When I want to target the <p> tag to make the text red with CSS, I add p { color: red; } to my CSS file. When I have two paragraphs on a page and I want one to be green and another to be blue I can give the <p> tag a class.

<p class="color1">first paragraph

<p class="color2">second paragraph

I can target these classes with CSS like this:

.color1 { color: green; }

.color2 { color: blue; }

the <p> that has no class added will stay red like you defined before.

In the same way you can add or change a class or an ID to your page2. By changing the class or ID that gives the table the lines, it no longer applies those lines anymore.
If the lines are styled by the tag selector you can add a class and specify that it should have no lines ( .noline { border: none; } )

If this is still all a little unclear, there is an excellent tutorial on XHTML and on CSS on the HTML Dog website. They explain things in the easiest way and they’re free. If you take the time to read through the beginner tutorial this will all make sense.

Here’s an easy way to style the pages separately.

You are going to give each page it’s own <body> id by replacing the body tag in the ‘header.php’ file of whatever template you are using.

Currently, the body tag of your header most likely looks like this:

<body<?php if ( is_home() ) { ?> id=”home”<?php } ?>>

You are going to replace the old one with something that looks like this:

<body <?php if (is_home()) { ?> id=”home”<?php } elseif (is_page(‘about’)) { ?> id=”about” <?php } elseif (is_page(‘contact’)) { ?> id=”contact” <?php } ?> >

Just replace ‘about’ and ‘contact’ with the titles of your own pages.

Now you can specify the different attributes of your various elements depending upon the id of the body.

Example

#home .nav {border-top:#ffffff;}
#about .nav {border-top:#000000;}

Hope this helps!