Inheritance in CSS

programming web dev
1

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.

2

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; }
3 

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

I see. Thanks. Will try tat out. Btw, I’ve learnt about another method from this site: Can a CSS class inherit properties from another CSS class? - HTML / CSS. Thought you might be interested.

5

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. :slight_smile: