CSS question - can I make CSS Cascade sideways?

Discussion in 'HTML' started by Bill_W_Stephens@yahoo.com, Mar 18, 2006.

  1. Guest

    Is there a way to simplify similar CSS class definitions. Here
    td.data_Dark and td.data_Light share common atributes that are
    different from td. See below.

    Is there a way to say td.data_Light is like td.data_Dark, except for
    background-color.

    Also is there a way to define a color code as a variable (eg:
    myBannerColor = "C8D7E3"), so when the client wants to change the
    colour scheme, I only have to make one CSS change instead of dozens.

    td {
    background-color:red;
    border-bottom:5px solid blue;
    padding-left:1px;
    }


    td.data_Dark{
    background-color:C8D7E3;
    border-bottom:1px solid white;
    padding-left:4px;
    }


    td.data_Light{
    background-color: DBE8F9;
    border-bottom:1px solid white;
    padding-left:4px;
    }
     
    , Mar 18, 2006
    #1
    1. Advertising

  2. Steve Pugh Guest

    wrote:

    >Is there a way to simplify similar CSS class definitions. Here
    >td.data_Dark and td.data_Light share common atributes that are
    >different from td. See below.
    >
    >Is there a way to say td.data_Light is like td.data_Dark, except for
    >background-color.


    No, but see below.

    >Also is there a way to define a color code as a variable (eg:
    >myBannerColor = "C8D7E3"), so when the client wants to change the
    >colour scheme, I only have to make one CSS change instead of dozens.


    Not directly in CSS. But if your CSS file is created by a preprocessor
    or even created on the fly with PHP or whatever then you can use that
    to set variables which are transformed into static values in the
    output CSS.

    >td {
    >background-color:red;
    >border-bottom:5px solid blue;
    >padding-left:1px;
    >}
    >
    >
    >td.data_Dark{
    >background-color:C8D7E3;
    >border-bottom:1px solid white;
    >padding-left:4px;
    >}
    >
    >
    >td.data_Light{
    >background-color: DBE8F9;
    >border-bottom:1px solid white;
    >padding-left:4px;
    >}


    td.data_Dark, td.data_Light {
    border-bottom:1px solid white;
    padding-left:4px;
    }

    td.data_Dark{ background-color:C8D7E3; }

    td.data_Light{ background-color: DBE8F9; }

    Or I'd probably do something like this (assuming that you have
    alternating row colours and not some random patchwork of colours):

    table.data td {
    border-bottom:1px solid white;
    padding-left:4px;
    background-color:C8D7E3;
    }

    table.data tr.altrow td {
    background-color: DBE8F9;
    }

    That way I'm only adding a handful of classes rather than one to every
    cell.

    BTW, consider using class names that decsribe what the elements are,
    not what they look like. It stops things becoming confusing if you
    later decide to swap the dark and light cells around...

    Steve
    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Mar 18, 2006
    #2
    1. Advertising

  3. wrote:

    > Is there a way to simplify similar CSS class definitions. Here
    > td.data_Dark and td.data_Light share common atributes that are
    > different from td. See below.
    >
    > Is there a way to say td.data_Light is like td.data_Dark, except for
    > background-color.
    >
    > Also is there a way to define a color code as a variable (eg:
    > myBannerColor = "C8D7E3"), so when the client wants to change the
    > colour scheme, I only have to make one CSS change instead of dozens.


    http://dorward.me.uk/www/css/inheritance/

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Mar 18, 2006
    #3
  4. wrote:

    > Is there a way to simplify similar CSS class definitions. Here
    > td.data_Dark and td.data_Light share common atributes that are
    > different from td. See below.
    >
    > Is there a way to say td.data_Light is like td.data_Dark, except for
    > background-color.
    >
    > Also is there a way to define a color code as a variable (eg:
    > myBannerColor = "C8D7E3"), so when the client wants to change the
    > colour scheme, I only have to make one CSS change instead of dozens.
    >
    > td {
    > background-color:red;
    > border-bottom:5px solid blue;
    > padding-left:1px;
    > }
    >
    >
    > td.data_Dark{
    > background-color:C8D7E3;
    > border-bottom:1px solid white;
    > padding-left:4px;
    > }
    >
    >
    > td.data_Light{
    > background-color: DBE8F9;
    > border-bottom:1px solid white;
    > padding-left:4px;
    > }
    >


    td.data_Dark,
    td.data_Light {
    padding-left: 4px;
    border-bottom: 1px solid white;
    }

    td.data_Light {
    /* should also spec color */
    background-color: DBE8F9;
    }

    td.data_Dark {
    /* should also spec color */
    background-color: :C8D7E3;
    }

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 18, 2006
    #4
  5. wrote:

    > td.data_Dark{
    > background-color:C8D7E3;


    background-color: #C8D7E3;

    > td.data_Light{
    > background-color: DBE8F9;


    background-color: #DBE8F9;

    --
    -bts
    -Warning: I brake for lawn deer
     
    Beauregard T. Shagnasty, Mar 18, 2006
    #5
  6. Guest

    Very helpful. thanks everybody!
     
    , Mar 18, 2006
    #6
  7. Jonathan N. Little wrote:

    > wrote:


    > td.data_Dark,
    > td.data_Light {
    > padding-left: 4px;
    > border-bottom: 1px solid white;
    > }
    >
    > td.data_Light {
    > /* should also spec color */
    > background-color: DBE8F9;
    > }
    >
    > td.data_Dark {
    > /* should also spec color */
    > background-color: :C8D7E3;
    > }
    >


    What I get for copy n pasting! Correction:
    td.data_Dark,
    td.data_Light {
    padding-left: 4px;
    border-bottom: 1px solid white;
    }

    td.data_Light {
    /* should also spec color */
    background-color: #DBE8F9;
    }

    td.data_Dark {
    /* should also spec color */
    background-color: #C8D7E3;
    }



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 18, 2006
    #7
    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. ABHIJIT B

    DatagGrid Cascade Style Sheet CSS

    ABHIJIT B, Feb 6, 2008, in forum: ASP .Net
    Replies:
    2
    Views:
    2,337
    ABHIJIT B
    Feb 6, 2008
  2. dorayme

    Re: Have css not cascade?

    dorayme, Nov 14, 2008, in forum: HTML
    Replies:
    0
    Views:
    402
    dorayme
    Nov 14, 2008
  3. Adrienne Boswell

    Re: Have css not cascade?

    Adrienne Boswell, Nov 14, 2008, in forum: HTML
    Replies:
    0
    Views:
    398
    Adrienne Boswell
    Nov 14, 2008
  4. Sudoer

    VHDL ... Sideways?

    Sudoer, Jul 22, 2010, in forum: VHDL
    Replies:
    17
    Views:
    1,330
  5. john woo
    Replies:
    3
    Views:
    149
    Mick White
    Jul 1, 2005
Loading...

Share This Page