Is there a way to inherit a class in CSS without copying each item in the the parent class and putting a :inherit after it?In most cases "contained" elements inherit the properties of their container. An example of your concern would be nice.As you can see, .shoutbox is basically the same as .container except for a few differences. I'm wondering if there is a way to inherit .shoutbox from .container and make a few changes to .shoutbox without all the extra typing.
Thanx
.container {
font-family : Arial, Helvetica, sans-serif;
font-style : normal;
line-height : normal;
font-weight : normal;
font-variant : normal;
text-transform : none;
text-decoration : none;
width : 700px;
margin-left : auto;
margin-right : auto;
text-align : center;
}
.shoutbox {
font-family : inherit;
font-style : inherit;
line-height : inherit;
font-weight : inherit;
font-variant : inherit;
text-transform : inherit;
text-decoration : inherit;
width : 150px;
float : left;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"" />
<style type="text/css">
.container { background-color: #ffe;
font-family : Arial, Helvetica, sans-serif;
font-style : normal;
line-height : normal;
font-weight : normal;
font-variant : normal;
text-transform : none;
text-decoration : none;
width : 700px;
margin-left : auto;
margin-right : auto;
text-align : center;
}
.shoutbox { background-color: #eff;
/*
font-family : inherit;
font-style : inherit;
line-height : inherit;
font-weight : inherit;
font-variant : inherit;
text-transform : inherit;
text-decoration : inherit;
*/
width : 150px;
float : left;
}
</style>
<script language="Javascript" type="text/javascript">
</script>
</head>
<body>
<p>Plain text</p>
<div class="container">
<p>Containerized text</p>
<div class="shoutbox">
<p>Shoutboxerized text</p>
</div>
</div>
</body>
</html>Thanks, but that really didn't answer my question. I'm basically wondering if there's a way to significantly reduce the amount of text being used in the CSS file because the classes are so similar.
Or, do I not need to state :inherit for each variable in the child classes? Are they inheritted automatically?Yes - classes are inherited by default, but not adding the "inherit" attribute does not adhere to W3C code standards (if that matters to you). Coding to CSS W3C standards usually requires extra code - which makes the CSS file size greater.
FYI > it seems you have a lot of class attributes specified which you may not need. Such as:
font-style : normal;
line-height : normal;
font-weight : normal;
Lastly, if your primary concern is to eliminate code bloat and redundent tags, and you don't care about W3C, try experimenting with multiple classes. For example:
<!-- this is your html -->
<div class="container outside">
<div class="container inside">
</div>
</div>
<!-- this is your CSS -->
.container {
background-color: #ffe;
}
.outside {
width : 700px;
text-align : center;
}
.inside {
width : 150px;
text-align : left;
}
Laterz...Separating the classnames with commas allows you to apply the same rules to multiple classes, tags, pseudo-classes, ids, etc. In the example below, .container and .shoutbox get the same rules. Then .shoutbox appears again to add styles to .shoutbox that do not get applied to .container.
You can also shorten your font definitions by using the font: attribute where:
font: <font-style> <font-variant> <font-weight> <font-size>/<line-height> <font-family>;
Full CSS is below.
.container, .shoutbox {
font: normal normal normal 100%/100% Arial Helvetica, sans-serif;
text-transform : none;
text-decoration : none;
width : 700px;
margin-left : auto;
margin-right : auto;
text-align : center;
}
.shoutbox {
width : 150px;
float : left;
}
Make sense?
Another way
Take your original CSS. You can apply more than one class to an HTML tag as follows:
<p class="container shoutbox"></p>
To apply multiple classes, separate the class name with a space inside the class="" attribute. I saw this in another post and I don't know what kind of browser support this method has. My first method will work in most browsers.Originally posted by MCP
Thanks, but that really didn't answer my question. I'm basically wondering if there's a way to significantly reduce the amount of text being used in the CSS file because the classes are so similar.
Or, do I not need to state :inherit for each variable in the child classes? Are they inheritted automatically? I guess you didn't recognize the fact I commented out all your inherits and it still worked the same.
Thanx
.container {
font-family : Arial, Helvetica, sans-serif;
font-style : normal;
line-height : normal;
font-weight : normal;
font-variant : normal;
text-transform : none;
text-decoration : none;
width : 700px;
margin-left : auto;
margin-right : auto;
text-align : center;
}
.shoutbox {
font-family : inherit;
font-style : inherit;
line-height : inherit;
font-weight : inherit;
font-variant : inherit;
text-transform : inherit;
text-decoration : inherit;
width : 150px;
float : left;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"" />
<style type="text/css">
.container { background-color: #ffe;
font-family : Arial, Helvetica, sans-serif;
font-style : normal;
line-height : normal;
font-weight : normal;
font-variant : normal;
text-transform : none;
text-decoration : none;
width : 700px;
margin-left : auto;
margin-right : auto;
text-align : center;
}
.shoutbox { background-color: #eff;
/*
font-family : inherit;
font-style : inherit;
line-height : inherit;
font-weight : inherit;
font-variant : inherit;
text-transform : inherit;
text-decoration : inherit;
*/
width : 150px;
float : left;
}
</style>
<script language="Javascript" type="text/javascript">
</script>
</head>
<body>
<p>Plain text</p>
<div class="container">
<p>Containerized text</p>
<div class="shoutbox">
<p>Shoutboxerized text</p>
</div>
</div>
</body>
</html>Thanks, but that really didn't answer my question. I'm basically wondering if there's a way to significantly reduce the amount of text being used in the CSS file because the classes are so similar.
Or, do I not need to state :inherit for each variable in the child classes? Are they inheritted automatically?Yes - classes are inherited by default, but not adding the "inherit" attribute does not adhere to W3C code standards (if that matters to you). Coding to CSS W3C standards usually requires extra code - which makes the CSS file size greater.
FYI > it seems you have a lot of class attributes specified which you may not need. Such as:
font-style : normal;
line-height : normal;
font-weight : normal;
Lastly, if your primary concern is to eliminate code bloat and redundent tags, and you don't care about W3C, try experimenting with multiple classes. For example:
<!-- this is your html -->
<div class="container outside">
<div class="container inside">
</div>
</div>
<!-- this is your CSS -->
.container {
background-color: #ffe;
}
.outside {
width : 700px;
text-align : center;
}
.inside {
width : 150px;
text-align : left;
}
Laterz...Separating the classnames with commas allows you to apply the same rules to multiple classes, tags, pseudo-classes, ids, etc. In the example below, .container and .shoutbox get the same rules. Then .shoutbox appears again to add styles to .shoutbox that do not get applied to .container.
You can also shorten your font definitions by using the font: attribute where:
font: <font-style> <font-variant> <font-weight> <font-size>/<line-height> <font-family>;
Full CSS is below.
.container, .shoutbox {
font: normal normal normal 100%/100% Arial Helvetica, sans-serif;
text-transform : none;
text-decoration : none;
width : 700px;
margin-left : auto;
margin-right : auto;
text-align : center;
}
.shoutbox {
width : 150px;
float : left;
}
Make sense?
Another way
Take your original CSS. You can apply more than one class to an HTML tag as follows:
<p class="container shoutbox"></p>
To apply multiple classes, separate the class name with a space inside the class="" attribute. I saw this in another post and I don't know what kind of browser support this method has. My first method will work in most browsers.Originally posted by MCP
Thanks, but that really didn't answer my question. I'm basically wondering if there's a way to significantly reduce the amount of text being used in the CSS file because the classes are so similar.
Or, do I not need to state :inherit for each variable in the child classes? Are they inheritted automatically? I guess you didn't recognize the fact I commented out all your inherits and it still worked the same.