Hi Richard,
Your are correct. You can take advantage of the "cascading" part of CSS to
eliminate some of the redundancy here. I've reformatted your code (and
alphabetized the declarations) for better readability:
<style type="text/css">
body {
font-size:8pt;
font-family:Arial;
}
/* I renamed this "treeItems" since it
will cascade down to all children */
.treeItems {
border-bottom:solid 1px #999999;
cursor:pointer;
display:block;
margin:0px;
/* I combined padding into one statement top, right, bottom, left */
padding:1px 1px 1px 5px;
white-space:nowrap;
}
.treeItems .hi {
background-color:#0099cc;
}
.treeItems .set {
background-color:#d8ebf5;
}
</style>
For example, to apply these styles to an unordered list:
<!-- children of treeItems will inherit treeItems' styles -->
<ul class="treeItems">
<!-- li.hi will have a different background
but will have same border, cursor, etc.
defined in treeItems -->
<li class="hi">Item</li>
<li class="set">Item</li>
</ul>
The important thing to remember is that for styles to inherit this way, they
must have a parent > child relationship in the Document Object
Model<http://www.w3.org/DOM/>
.
On Fri, Aug 19, 2011 at 12:17 PM, RichardOnRails <
[email protected]> wrote:
> <style type="text/css">
> body {font-size:8pt; font-family:Arial;}
> .treeItem {display:block; margin:0px; padding:1px;
> padding-left:5px;
> white-space:nowrap; border-bottom:solid 1px #999999; cursor:pointer;}
> .treeItem_hi {display:block; margin:0px; padding:1px;
> padding-left:
> 5px; white-space:nowrap; border-bottom:solid 1px #999999;
> cursor:pointer; background-color:#0099cc;}
> .treeItem_set {display:block; margin:0px; padding:1px; padding-left:
> 5px; white-space:nowrap; border-bottom:solid 1px #999999;
> cursor:pointer; background-color:#d8ebf5;}
> </style>
>
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
