Question in regards to a defining a css class

B

BK

I am trying to get my webpage fully dependant on the CSS for layout. I
have several pages on my site. Here is the layout:

1. The site uses the same heading/paragraph structure and physical
layout styles;
2. Each group of similar pages (e.g. picture galleries) has the same
icons in a different color pallate.
3. The backgrounds are all laid out with an inline style in the head of
each page like this:

<style type="text/css">
<!--
body { background-image: url("backgrounds/greengrey.jpg")}
-->
</style>

My question is this, is it permissable to define a class in the css for
the individual page groupings.

My idea would be this (in the css):

body {font-family:"lucida sans unicode","arial","helvetica",sans-serif;
font-style:normal;
font-weight:normal;
font-size:small;
background-attachment: fixed }

body.red { background-image: url("backgrounds/redrey.jpg")}
body.orange { background-image: url("backgrounds/redrey.jpg")}
body.yellow { background-image: url("backgrounds/redrey.jpg")}
body.green { background-image: url("backgrounds/redrey.jpg")}
body.blue { background-image: url("backgrounds/redrey.jpg")}

etc...

Thanks,
Jeremy
 
C

Carolyn Marenger

BK said:
I am trying to get my webpage fully dependant on the CSS for layout. I
have several pages on my site. Here is the layout:

1. The site uses the same heading/paragraph structure and physical
layout styles;
2. Each group of similar pages (e.g. picture galleries) has the same
icons in a different color pallate.
3. The backgrounds are all laid out with an inline style in the head of
each page like this:

<style type="text/css">
<!--
body { background-image: url("backgrounds/greengrey.jpg")}
-->
</style>

My question is this, is it permissable to define a class in the css for
the individual page groupings.

Absolutely. However you might want to take it a step further, and set up a
base.css file with all the common and default setting you want to use, as
well as a red.css, orange.css, yellow.css, and so forth.

Then in your pages, you load the base.css first followed by the relevant
colour.css file for the page.

I think that would be easier to maintain in the long run - unless there are
only a couple of things that change in each category.

Thanks,
Jeremy

You are welcome

Carolyn
 
N

nice.guy.nige

While the city slept, BK ([email protected]) feverishly typed...
I am trying to get my webpage fully dependant on the CSS for layout. I
have several pages on my site. Here is the layout: [...]
3. The backgrounds are all laid out with an inline style in the head
of each page like this:

<style type="text/css">
<!--
body { background-image: url("backgrounds/greengrey.jpg")}
-->
</style>

Get rid of this... keep it in your css file.
My question is this, is it permissable to define a class in the css
for the individual page groupings.
[...]
body.red { background-image: url("backgrounds/redrey.jpg")}
[...]

Yes. You can define a background for each section of your site as such. In
the HTML for each such page, use <body class="red"> (etc)

I would, however, not recommend using terms such as "red", "green", "blue"
to define your pages. What happens when you decide that the contact page
should be yellow instead of orange? And the Links page should be blue
instead of yellow??? You are entering a "World Of Pain[tm]" by defining your
css code by presentation. Instead, define them by section as follows;

body.links {
background-image: url("backgrounds/bluegrey.jpg");
}

body.contact {
background-image: url("backgrounds/yellowgrey.jpg");
}

Hope that helps,
Nige
 
A

Adrienne Boswell

My question is this, is it permissable to define a class in the css
for the individual page groupings.
[...]
body.red { background-image: url("backgrounds/redrey.jpg")}
[...]

Yes. You can define a background for each section of your site as such.
In the HTML for each such page, use <body class="red"> (etc)

I would, however, not recommend using terms such as "red", "green",
"blue" to define your pages. What happens when you decide that the
contact page should be yellow instead of orange? And the Links page
should be blue instead of yellow??? You are entering a "World Of
Pain[tm]" by defining your css code by presentation. Instead, define
them by section as follows;

body.links {
background-image: url("backgrounds/bluegrey.jpg");
}

body.contact {
background-image: url("backgrounds/yellowgrey.jpg");
}

I think in this instance, using a color name is probably just the ticket.
A site I am developing uses liturgical colors: white, red, violet, rose,
and green. I have a main stylesheet that has the non-color properties,
size, font, position, etc., and then the color stylesheets depending on the
day's liturgical color. If the liturical color of the day is violet, then
the violet stylesheet is applied that uses various shades of purple.
 
U

Usenet

Adrienne Boswell said:
I think in this instance, using a color name is probably just the ticket.
A site I am developing uses liturgical colors:

Though, to be fair, your site is using these colours for their (symbolic)
*content*, it's not just a presentation issue, which is what NGN was talking
about.

Regards
Mark
 
J

Jeremy Brown

nice.guy.nige said:
While the city slept, BK ([email protected]) feverishly typed...

Actually I was feverently typing whilst slacking off from slinging Whoppers
at work (the "BK" in "BK"). Thanks for the help guys. I tried using the body
class for one of the new pages on my site yesterday and it did not properly
configure the background. Have I got this right?

Thanks again,
Jeremy

Here is the css:
http://jerem43.home.att.net/saab.css

Here is a sniplet of the code I had:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<!--Page note- Page theme white-->

<title>
Jeremy's Saab Site- The Guestbook.
</title>

<!--Begin Style and Script Configuration-->

<link rel="stylesheet" type="text/css" media="screen" href="saab.css" />
<meta http-equiv="content-script-type" content="text/javascript" />

<!--End Style and Script Configuration-->

<base href="http://jerem43.home.att.net" />
<meta name="Jeremy Brown" content="Jeremy's Saab Page- The Guestbook"/>

</head>

<body class="pgwhite">
Content followed
 
D

dorayme

Adrienne Boswell said:
A site I am developing uses liturgical colors: white, red, violet, rose,
and green. I have a main stylesheet that has the non-color properties,
size, font, position, etc., and then the color stylesheets depending on the
day's liturgical color. If the liturical color of the day is violet, then
the violet stylesheet is applied that uses various shades of purple.

This sounds very sensible, you won't mind if I utilise this idea?
It is a neat way to present drafts for website customers to show
them alternative colour schemes.
 
A

Adrienne Boswell

Gazing into my crystal ball I observed dorayme
This sounds very sensible, you won't mind if I utilise this idea?
It is a neat way to present drafts for website customers to show
them alternative colour schemes.

I would be honored. Here's what I do (ASP example)

<link rel="stylesheet" href="style.css" type="text/css" title="Main
Stylesheet">
<% dim sheet
if session("sheet") = "" then
if request.querystring("color") <> "" then
sheet = request.querystring("color")
session("sheet") = sheet
else
sheet = "green" 'default color
end if
else
sheet = session("sheet")
end if
%>
<link rel="stylesheet" href="<%=sheet%>.css" type="text/css" title="<%
=sheet%>">

Then further on the page somewhere in an include
<ul>
<li><a href="<%=request.servervariables("script_name")%>?color=red">Red</a>
</li>
 
D

dorayme

Adrienne Boswell said:
Gazing into my crystal ball I observed dorayme


I would be honored. Here's what I do (ASP example)

<link rel="stylesheet" href="style.css" type="text/css" title="Main
Stylesheet">
<% dim sheet
if session("sheet") = "" then
if request.querystring("color") <> "" then
sheet = request.querystring("color")
session("sheet") = sheet
else
sheet = "green" 'default color
end if
else
sheet = session("sheet")
end if
%>
<link rel="stylesheet" href="<%=sheet%>.css" type="text/css" title="<%
=sheet%>">

Then further on the page somewhere in an include
<ul>
<li><a href="<%=request.servervariables("script_name")%>?color=red">Red</a>
</li>

Well, impressive, I will keep this in mind. I use far lower tech
and humbler approach for everything (because of my faults,
recently on full display at alt.html, I need to be especially
humble before God...)

With the client next to me I have a whole lot of stylesheet links
and turn them on and off with simple <!-- and --> or move them up
and down in the head list. They can be enormously impressed by
this geeky flourish of diving into what is for them
incomprehensible source and making a spectacular change to the
website.

When providing links to drafts I just send a few links to the
different versions. http://www.blueVersion.html and
http://www.crimsonVersion.html etc.

When I next have such a client, and if he or she agrees to throw
me a few shekels, I will pay you with another tale for your
pastor.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top