Question in regards to a defining a css class

Discussion in 'HTML' started by BK, Mar 27, 2006.

  1. BK

    BK Guest

    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
    BK, Mar 27, 2006
    #1
    1. Advertising

  2. BK wrote:

    > 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.

    <snip>

    > Thanks,
    > Jeremy


    You are welcome

    Carolyn
    --
    Carolyn Marenger
    Carolyn Marenger, Mar 28, 2006
    #2
    1. Advertising

  3. While the city slept, BK () 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

    --
    Nigel Moss http://www.nigenet.org.uk
    Mail address will bounce. | Take the DOG. out!
    "Your mother ate my dog!", "Not all of him!"
    nice.guy.nige, Mar 28, 2006
    #3
  4. Gazing into my crystal ball I observed "nice.guy.nige"
    <> writing in
    news:44287230$0$16470$:

    >> 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.

    --
    Adrienne Boswell
    Please respond to the group so others can share
    Adrienne Boswell, Mar 28, 2006
    #4
  5. BK

    Usenet Guest

    In article <Xns9793EF47C3DDCarbpenyahoocom@69.28.186.121>, Adrienne Boswell
    wrote:
    > 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
    Usenet, Mar 28, 2006
    #5
  6. BK

    Jeremy Brown Guest

    "nice.guy.nige" <> wrote in message
    news:44287230$0$16470$...
    > While the city slept, BK () 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
    Jeremy Brown, Mar 28, 2006
    #6
  7. While the city slept, Usenet () feverishly typed...

    [...]

    > what NGN was talking about.


    Ooh! I've become a TLA!!! A high honour indeed... :)

    Cheers,
    Nige

    --
    Nigel Moss http://www.nigenet.org.uk
    Mail address will bounce. | Take the DOG. out!
    "Your mother ate my dog!", "Not all of him!"
    nice.guy.nige, Mar 28, 2006
    #7
  8. BK

    dorayme Guest

    In article <Xns9793EF47C3DDCarbpenyahoocom@69.28.186.121>,
    Adrienne Boswell <> wrote:

    > 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.

    --
    dorayme
    dorayme, Mar 28, 2006
    #8
  9. Gazing into my crystal ball I observed dorayme
    <> writing in
    news::

    > In article <Xns9793EF47C3DDCarbpenyahoocom@69.28.186.121>,
    > Adrienne Boswell <> wrote:
    >
    >> 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.
    >


    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>



    --
    Adrienne Boswell
    Please respond to the group so others can share
    http://www.cavalcade-of-coding.info
    Adrienne Boswell, Mar 29, 2006
    #9
  10. BK

    dorayme Guest

    In article <Xns9794A67B3EBA4arbpenyahoocom@69.28.186.121>,
    Adrienne Boswell <> wrote:

    > Gazing into my crystal ball I observed dorayme
    > <> writing in
    > news::
    >
    > > In article <Xns9793EF47C3DDCarbpenyahoocom@69.28.186.121>,
    > > Adrienne Boswell <> wrote:
    > >
    > >> 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.
    > >

    >
    > 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.

    --
    dorayme
    dorayme, Mar 29, 2006
    #10
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jason Shohet

    what is index.dat in regards to cookies?

    Jason Shohet, May 12, 2004, in forum: ASP .Net
    Replies:
    8
    Views:
    586
    Jason Shohet
    May 13, 2004
  2. A.M-SG
    Replies:
    11
    Views:
    656
    Alan Silver
    Jan 15, 2006
  3. Brian J. Sayatovic
    Replies:
    0
    Views:
    285
    Brian J. Sayatovic
    Apr 23, 2004
  4. Troy
    Replies:
    1
    Views:
    341
    William Brogden
    Aug 10, 2004
  5. johny smith
    Replies:
    8
    Views:
    411
    Peter Koch Larsen
    Jul 2, 2004
Loading...

Share This Page