Inheritance in CSS

[silverType]

Hi guys,
I've defined a class for my textboxes in CSS called .textbox and gave it the following properties:

.textbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCCCCC;
margin: 15px 0 0 10px;
padding: 2px;
font-size: 9px;
height: 22px;
width:207px;
}

Now, let's say if I want to create another textbox of a different width and height, say height:30px, width:110px. How should I define its class such that it still inherits the other properties from textbox? Thanks in advance.

[Ankou]

Depending on how you set up and planned your site, you could do:


.textbox, .othertextbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCCCCC;
margin: 15px 0 0 10px;
padding: 2px;
font-size: 9px;
}

.textbox { height: 22px; width:207px; }
.othertextbox{ height: 50px; width: 300px; }

[silverType]

Depending on how you set up and planned your site, you could do:


.textbox, .othertextbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCCCCC;
margin: 15px 0 0 10px;
padding: 2px;
font-size: 9px;
}

.textbox { height: 22px; width:207px; }
.othertextbox{ height: 50px; width: 300px; }

I see. Thanks. Will try tat out. Btw, I've learnt about another method from this site: http://www.thescripts.com/forum/thread459731.html. Thought you might be interested.

[Ankou]

Yeah I use that one as well, it doesn't matter which method you do really. The method you linked to I typically only use when working with simple CSS rulesets.

Otherwise I've found that when I'm working with a class that has a lot of rules in it that it's easier to mess up. Not to mention usually a lot of rules for a class means it's a heavily styled element -- which would typically mean down the road I plan to change it if I do a site redesign. Which could lead to needing to edit some HTML code. Which kind of defeats one of my main reasons for lovin' CSS so much. :)