CSS question
- Started
- Last post
- 7 Responses
- PrayStation
I've spent so much time in Flash... some thing in CSS I just don't know that much about... so here's my question.
Can you define a class that inherits from another class ?
for example lets say I want myDiv01, myDiv02, and myDiv03 to all share the same color...
.masterColor {
background: #FF0000;
}.myDiv01 {
width: 100px;
height: 100px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
}.myDiv02 {
width: 100px;
height: 100px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
}.myDiv03 {
width: 100px;
height: 100px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
}can myDiv01, myDiv02, and myDiv03 inherit the background from the masterColor class? this would be great because you can change the color once as opposed to three times.
any help would be amazing... as my CSS is book is so old it has no examples of this.
word.
- 7point340
class="masterColor myDiv03"
multiple classes in the html
- just separate with a space7point34
- I think I like this even better so a div can reference multiple classes. killer.PrayStation
- as many as you like, sparky7point34
- acescence0
or...
.myDiv01, .myDiv02, .myDiv03 {
background: #FF0000;
}.myDiv01 {
/*stuff specific to this*/
}
- Shaney0
.myDiv01, .myDiv02 , .myDiv03 {
background-color: #FF0000;
}.myDiv01 {
width: 100px;
height: 100px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
}
.myDiv02 {
width: 100px;
height: 100px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
}
.myDiv03 {
width: 100px;
height: 100px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
}Above works in that first contains shared elements... just needs all classes listing individually
Hope that's what you were asking...
- PrayStation0
ok... so you can define the class multiple times in a style sheet and it just keeps amending the class... I never thought it would behave that way... but killer... thank you very much for the help.
- seeessess0
myDiv01, 02 and 03 are all the same though (according to your css above)?
* {margin:0; padding:0}
.myDiv {width:100px; height:100px; float:left; background:#FF0000;}
- PrayStation0
seeessess... I just threw that together real quick as an example... 01, 02, and 03 would be different ... i just want to know if they could share a master class.
- welded0
Going one step further, you could use a PHP (or similar) file as your stylesheet and therefor gain the ability to use variables throughout.
<?php
$bg_colour = '#f00';
?>.myDiv {
background-color: <?php echo $bg_colour; ?>
width: 100px;
height: 100px;
margin: 0px;
padding: 0px;
float: left;
}Not terribly beneficial in this example, but it's another way to go. :)