By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,965 Members | 1,757 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,965 IT Pros & Developers. It's quick & easy.

Style Sheet Woes

P: n/a
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
hyperlinks.

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!

Jul 24 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Els
Wintersrush wrote:
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
hyperlinks.

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!


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:
body.one h1,
body.one a{
color:blue;
}
body.two h1,
body.two a{
color:red;
}

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

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Thunder - Love Walked In
Jul 24 '05 #2

P: n/a
Wintersrush wrote:
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
hyperlinks.

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?

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)
Jul 24 '05 #3

P: n/a
Els wrote:

Wintersrush wrote:
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
hyperlinks.

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!
By giving each page a different id or class.

[details snipped] Obviously these styles aren't complete, but you get the idea.


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]
-->
</style>

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:http://www.rossde.com/internet/Webdevelopers.html#css>.

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
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.
Jul 24 '05 #4

P: n/a
"Wintersrush" <je*****@comcast.net> wrote in message
news:11**********************@g44g2000cwa.googlegr oups.com...
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
hyperlinks.

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?


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{color:#FF0000} /* red */
and page1.css only contains h1{color:#00FF00} /* 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.
Jul 24 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.