inherited styles

[jb]

If there is a style that looks like this:
..border_color {border-color: #000000;}

Can another style be created which inherits border_color in its entirety?

something like...
..top_border {border-top: 1px solid; border_color: inherit}

I know color: can be inherited, but can a whole style?

 

[Toby Inkster]

Can another style be created which inherits border_color in its entirety?

Nope -- not the way you mean. CSS inheritance works differently from
object-oriented inheritance.

If you want to reuse colours and other styles over several different
classes, you might want to look into using a server-side scripting
language to serve your CSS.

e.g.

<?php
header("Content-Type: text/css");
$headingHighlight = '#ccffcc';
$normalForeground = '#006600';
?>
H1 {
border-left: 0.67em solid <?=$headingHighlight?>;
border-bottom: 2px solid <?=$headingHighlight?>;
padding: 0.25em;
}
H2 {
background: <?=$headingHighlight?>;
color: <?=$normalForeground?>;
padding: 0.25em;
}

and so on.

 

[jb]

Nope -- not the way you mean. CSS inheritance works differently from
object-oriented inheritance.

If you want to reuse colours and other styles over several different
classes, you might want to look into using a server-side scripting
language to serve your CSS.

e.g.

<?php
header("Content-Type: text/css");
$headingHighlight = '#ccffcc';
$normalForeground = '#006600';
?>
H1 {
border-left: 0.67em solid <?=$headingHighlight?>;
border-bottom: 2px solid <?=$headingHighlight?>;
padding: 0.25em;
}
H2 {
background: <?=$headingHighlight?>;
color: <?=$normalForeground?>;
padding: 0.25em;
}

and so on.

It seems like a glaring omission.

 

[Jukka K. Korpela]

It seems like a glaring omission.

That's mainly because you haven't studied CSS. Try reading a good
tutorial, or even a book.

 

[Toby Inkster]

That's mainly because you haven't studied CSS.

I dunno. I think a way of defining a few constants, particularly for
colours could be handy, as sometimes certain values need to be reused, in
ways that CSS inheritance can't deal with. Something like...

@define "mainbg" "white";
@define "pale" "#efe";
@define "medium" "#9c9";
@define "dark" "#393";
@define "mainfg" "black";

BODY {
color: def("mainfg");
background: def("mainbg");
}
H1 {
color: def("dark");
background: def("mainbg");
}
H2 {
color: def("mainfg");
background: def("pale");
}
..sidepanel {
color: def("mainfg");
background: def("pale");
float: left;
width: 25%;
border: medium double def("medium");
}
..specialbox {
color: def("mainbg");
background: def("medium");
border: medium double def("dark");
}

It would make it really easy to change a site's colour scheme without
changing the rest of the styles.

 

[Adrienne Boswell]

Gazing into my crystal ball I observed Toby Inkster <usenet200603
@tobyinkster.co.uk> writing in

I dunno. I think a way of defining a few constants, particularly for
colours could be handy, as sometimes certain values need to be reused, in
ways that CSS inheritance can't deal with.

I absolutely agree with you. I'm working on a site for my church, and the
colors are following the liturgical seasons. There are five colors: white,
red, pink, purple and green, so that would be a great feature.