Style Sheet Woes

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I am working on a website that is using a Cascading Style Sheet. I've
created the primary webpages and .css page. The format is the same
throughout the entire website EXCEPT the color of the headings and

I need to make each site have a different color of those items. How do
I make the changes to each page, but keep the same .CSS?

Any feedback would be GREATLY appreciated!

Re: Style Sheet Woes

Wintersrush wrote:
Quoted text here. Click to load it
   I am a little unclear if you want each *site* to be different, or each
*page*. Or both?
   Create one CSS file that contains all of the common styles. Then for
each site have a separate file with that site's unique styles. The <head>
would have two @import's (or <link rel=...>), one for each file.
   For each page the idea Els suggested is good.
   How many pages does the site have? It must not be very many. If there
are a lot, and you are using a server-side scripting language (like php,
asp), you could randomly select a color as each page is generated.

jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: Style Sheet Woes

Wintersrush wrote:

Quoted text here. Click to load it

By giving each page a different id or class.
Let's say you have a blue and a red page.
Page one's HTML:
<body class="one">
Page two's HTML:
<body class="two">

CSS for both pages: h1, a{
body.two h1,
body.two a{

Obviously these styles aren't complete, but you get the idea.

Els            /
Sonhos vem. Sonhos vo. O resto imperfeito.
                             - Renato Russo -
Now playing: Thunder - Love Walked In

Re: Style Sheet Woes

Els wrote:
Quoted text here. Click to load it
   [details snipped]
Quoted text here. Click to load it

This is too complicated and ignores the cascading of style sheets.  

Put what is common to all pages in the .css file.  Then, in the
HEAD section of each page, first put the link to that .css file and
then have a local style sheet.  It should look like this:
<LINK REL=STYLESHEET TYPE="text/css" HREF="genl_style.css" >
<style TYPE="text/css">
  [local style declarations go here]

If anything in the local declarations conflict with the contents of
genl_style.css, the local declarations will prevail.  Thus, you get
a cascade.  For a summary of the cascade concept, see my
<URL: .  

Note:  Today, the comment brackets <!-- and --> are often omitted
because the newer browsers all recognize style sheets.  I still use
them so that my pages can still be viewed with older browsers.  


David E. Ross

I use Mozilla as my Web browser because I want a browser that
complies with Web standards.  See <URL:>.

Re: Style Sheet Woes

Quoted text here. Click to load it

The following example isn't the only way to do it but it's how I do it.

Common styles go in one stylesheet, custom styles in another. Link to the
default stylesheet first and then to the stylesheet for the current site.

eg: if default.css contains h1 /* red */
and page1.css only contains h1 /* green */
then, using the code snippet below, <h1> would appear as green text.

<link rel="stylesheet" type="text/css" href="Styles/default.css">
<link rel="stylesheet" type="text/css" href="Styles/page1.css">

If you linked to page1.css first then <h1> would appear as red text.

Site Timeline