By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,763 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

Combining Styles

P: n/a
Hi All

If I had the following 3 style in a CSS file
<style>
.bordered {border: red thin soldid;}
.warning {background-color: #900;}
.box {padding: 5%; text-align:justify;}
</style>
Then in my html page I can do somthing like this:
<div class="box warning bordered">This is a warning.</div>

is there a way to "combined" the 3 styles into a 4th one eg:
<style>
.mywarning {box; warning; bordered}
</style>

so I can do things like this:
<div class="mywarning">This is a warning.</div>

and also still use the 3 original styles like:
<div class="bordered">a border around me</div>
Thanks for any help/tips

Al.
Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
In article <vc********************************@4ax.com> in
comp.infosystems.www.authoring.stylesheets, Harag
<ha***@softGETRIDOFCAPLETTERShome.net> wrote:
is there a way to "combined" the 3 styles into a 4th one eg:
<style>
.mywarning {box; warning; bordered}
</style>


No. There is no way in plain CSS to make a new class include the
properties of existing classes. Some sort of preprocessor could
probably do the job.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #2

P: n/a
*Harag* <ha***@softGETRIDOFCAPLETTERShome.net>:

.bordered {border: red thin soldid;}
.warning {background-color: #900;}
.box {padding: 5%; text-align:justify;}

is there a way to "combined" the 3 styles into a 4th one


.mywarning, .bordered {border: red thin soldid;}
.mywarning, .warning {background-color: #900;}
.mywarning, .box {padding: 5%; text-align:justify;}

Virtually every CSS tutorial would have told you that in its "Selectors"
chapter.

--
Alcohol didn't cause the high crime rates of the '20s and '30s, Prohibition did.
And drugs do not cause today's alarming crime rates, but drug prohibition does.
(US District Judge James C. Paine, November 1991)
Jul 20 '05 #3

P: n/a
In article <bo**********@ariadne.rz.tu-clausthal.de> in
comp.infosystems.www.authoring.stylesheets, Christoph Paeper
<cr***********@gmx.net> wrote:
.mywarning, .bordered {border: red thin soldid;}


Shouldn't that be "sordid"? :-)

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #4

P: n/a
I'm dont think you quite understand what I was after.

I don't want to redefine "bordered, warning & Box" I just want to use
them in one class.

if I have in one css fiile "FX.css"
..Bordered {border: red thin solid;}
..bgCCC {background-color: #CCC;}
..bg00C {background-color: #00C;}
..bg0C0 {background-color: #0C0;}
..bgC00 {background-color: #C00;}
..Box {padding: 5%; text-align:justify;}

I want to beable to define things like
..Warning {Bordered; bgC00; Box;)
..Note {bg00C; Box}

then in my html i can do:
<div class="Warning">this is a warning</div>

instead of:
<div class="Box Bordered bgC00">this is a warning</div>

if I want to change the background color of warnings throughout the
page then I can just edit the ".Warning {Bordered, bgC00, Box)" and
change it to ".Warning {Bordered, bgCCC, Box)" rather than edit every
DIV on the page where the warning is used.

Hope this is made clearer.

Al.
On Sun, 2 Nov 2003 02:26:41 +0100, Christoph Paeper
<cr***********@gmx.net> wrote:
*Harag* <ha***@softGETRIDOFCAPLETTERShome.net>:

.bordered {border: red thin soldid;}
.warning {background-color: #900;}
.box {padding: 5%; text-align:justify;}

is there a way to "combined" the 3 styles into a 4th one


.mywarning, .bordered {border: red thin soldid;}
.mywarning, .warning {background-color: #900;}
.mywarning, .box {padding: 5%; text-align:justify;}

Virtually every CSS tutorial would have told you that in its "Selectors"
chapter.


Jul 20 '05 #5

P: n/a
In article Harag wrote:
I'm dont think you quite understand what I was after.

I don't want to redefine "bordered, warning & Box" I just want to use
them in one class.

if I have in one css fiile "FX.css"
.Bordered {border: red thin solid;}
.bgCCC {background-color: #CCC;}
.bg00C {background-color: #00C;}
.bg0C0 {background-color: #0C0;}
.bgC00 {background-color: #C00;}
.Box {padding: 5%; text-align:justify;}

I want to beable to define things like
.Warning {Bordered; bgC00; Box;)
.Note {bg00C; Box}
That is not possible using CSS.
then in my html i can do:
<div class="Warning">this is a warning</div>

instead of:
<div class="Box Bordered bgC00">this is a warning</div>

if I want to change the background color of warnings throughout the
page then I can just edit the ".Warning {Bordered, bgC00, Box)" and
change it to ".Warning {Bordered, bgCCC, Box)" rather than edit every
DIV on the page where the warning is used.


You might want to use some server side language.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #6

P: n/a
*Harag* <ha***@softGETRIDOFCAPLETTERShome.net>:

I'm dont think you quite understand what I was after.
Be assured I did.
I don't want to redefine "bordered, warning & Box" I just want to use
them in one class.


Because that is not possible the way you want it, I showed you the way it is
possible with CSS. The result is virtually the same.

--
"Opportunity is missed by most people
because it is dressed in overalls and looks like work."
Thomas Alva Edison
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.