Class in a class.

Discussion in 'HTML' started by tshad, Apr 29, 2005.

  1. tshad

    tshad Guest

    Is there some way to set up something like a class inside of a class?

    I have various tags and classes that use one color. The problem is that if
    I change that color I need to change it for each one.

    For example:

    Inside of my css class I have the following:

    a:visited {
    color:#4AAABD;
    }
    a:visited.blueClass {
    color:blue;
    }
    a:visited.redClass {
    color:red;
    }
    a:visited.orangeClass {
    color:#FF6600;
    }
    a:link {
    color:#4AAABD;
    }
    a:link.blueClass {
    color:blue;
    }
    a:link.redClass {
    color:red;
    }
    a:link.orangeClass {
    color:#FF6600;
    }
    a:active {
    color:#4AAABD;
    }
    a:active.blueClass {
    color:blue;
    }
    a:active.redClass {
    color:red;
    }
    a:active.orangeClass {
    color:#FF6600;
    }


    However, I want to change the color #4AAABD, to #3EA2BC. The problem is I
    have about 20 places to change it.

    Is it possible to do something like:

    ..backing {
    color: #3EA2BC
    }

    and then use it in my other styles:

    a:active {
    class:backing
    }

    I could then change .backing to another color and have all my other styles
    use it.

    I know that is right. I am just trying to illustrate what I am trying to
    do.

    Thanks,

    Tom
    tshad, Apr 29, 2005
    #1
    1. Advertising

  2. On 29/04/2005 00:17, tshad wrote:

    [snip]

    > I have various tags and classes that use one color. The problem is that if
    > I change that color I need to change it for each one.


    Based on the class names, if you change a colour, you'll have to change
    the name, too. Perhaps this is just illustrative, but if not you should
    always use semantic (meaningful) class names. You should also specify
    colours in pairs; both background and foreground.

    If declarations apply to several rules, combine all of the selectors,
    delimited by commas.

    a:visited,
    a:link,
    a:active {
    color: #4aaabd;
    }

    You can do the same thing with the classes. However,

    a.blueClass {
    color: blue;
    }

    may be sufficient.

    [snip]

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Apr 29, 2005
    #2
    1. Advertising

  3. tshad

    tshad Guest

    "Michael Winter" <> wrote in message
    news:TCece.21629$...
    > On 29/04/2005 00:17, tshad wrote:
    >
    > [snip]
    >
    >> I have various tags and classes that use one color. The problem is that
    >> if I change that color I need to change it for each one.

    >
    > Based on the class names, if you change a colour, you'll have to change
    > the name, too. Perhaps this is just illustrative, but if not you should
    > always use semantic (meaningful) class names. You should also specify
    > colours in pairs; both background and foreground.
    >
    > If declarations apply to several rules, combine all of the selectors,
    > delimited by commas.
    >
    > a:visited,
    > a:link,
    > a:active {
    > color: #4aaabd;
    > }
    >
    > You can do the same thing with the classes. However,
    >
    > a.blueClass {
    > color: blue;
    > }


    Would this work for all the links?

    Would I have to apply this to each link to make it work?

    The other problem is that I was going to use the same color for various
    things, such as <th> headings, some menu backgrounds etc.

    I was hoping I could set up a class/style and then apply it to each of the
    tags or styles in the css file and then just change the class/style in one
    place.

    Tom
    >
    > may be sufficient.
    >
    > [snip]
    >
    > Mike
    >
    > --
    > Michael Winter
    > Replace ".invalid" with ".uk" to reply by e-mail.
    tshad, Apr 29, 2005
    #3
  4. On 29/04/2005 01:31, tshad wrote:

    > "Michael Winter" <> wrote in message
    > news:TCece.21629$...


    [snip]

    >> If declarations apply to several rules, combine all of the selectors,
    >> delimited by commas.
    >>
    >> a:visited,
    >> a:link,
    >> a:active {
    >> color: #4aaabd;
    >> }
    >>
    >> You can do the same thing with the classes. However,
    >>
    >> a.blueClass {
    >> color: blue;
    >> }

    >
    > Would this work for all the links?


    If the class (rather than pseudo-class) containing selectors came later
    in the style sheet (as above), it should. However, IE calculates the
    specificity incorrectly. You'd either have to include the pseudo-classes
    as well,

    a:active.blueClass,
    a:link.blueClass,
    a:visited.blueClass {
    color: blue;
    }

    or mark the declaration as important.

    a.blueClass {
    color: blue !important;
    }

    > Would I have to apply this to each link to make it work?


    The selectors shown in the post (and my previous one) would apply to all
    links in the document.

    > The other problem is that I was going to use the same color for various
    > things, such as <th> headings, some menu backgrounds etc.


    You can extend the selector to include these other elements:

    a:active,
    a:link,
    a:visited,
    th {
    color: #4aaabd;
    }

    > I was hoping I could set up a class/style and then apply it to each of the
    > tags or styles in the css file and then just change the class/style in one
    > place.


    Macros aren't a feature of CSS. Macro-based editing may a feature of
    some software. You could even run a file through a command line
    preprocessor, like PHP.

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Apr 29, 2005
    #4
  5. tshad

    Toby Inkster Guest

    tshad wrote:

    > Is it possible to do something like:
    > .backing {
    > color: #3EA2BC
    > }
    >
    > and then use it in my other styles:
    > a:active {
    > class:backing
    > }


    Does your server support PHP?

    =================== stylesheet.php ===================
    <?
    header("Content-Type: text/css");
    $fg = 'black';
    $bg = 'white';
    $emphasis = '#960';
    $hideme = 'silver';
    $fontsize = isset($_COOKIE['fontsize'])?$_COOKIE['fontsize']:'100';
    ?>
    body {
    color: <?=$fg?>;
    background: <?=$bg?>;
    font-size: <?=$fontsize?>%;
    }
    h1 {
    color: <?=$bg?>;
    background: <?=$emphasis?>;
    }
    h2,h3,dd,strong {
    background: <?=$bg?>;
    color: <?=$emphasis?>;
    }
    small {
    background: <?=$bg?>;
    color: <?=$hideme?>;
    }
    ======================================================

    And then just:

    <link rel="stylesheet" media="screen,projection"
    href="stylesheet.php" type="text/css">

    in your HTML document.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Apr 30, 2005
    #5
    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. cyril
    Replies:
    2
    Views:
    3,817
    cyril
    Aug 25, 2004
  2. Purush
    Replies:
    4
    Views:
    1,584
    Purush Rudrakshala
    Apr 13, 2005
  3. E11
    Replies:
    1
    Views:
    4,683
    Thomas Weidenfeller
    Oct 12, 2005
  4. christopher diggins
    Replies:
    16
    Views:
    722
    Pete Becker
    May 4, 2005
  5. Joseph Turian
    Replies:
    5
    Views:
    563
Loading...

Share This Page