09-09-2011, 04:21 AM
CSS includes the concept of style inheritance. This works because the browser views the different locations
that a style can be defined in (external, internal, or inline) as a hierarchical structure.
Inheritance not only applies to styles kept in separate file locations, but also applies to styles within the
same location, which means that sometimes you also need to think about the order in which you define
your styles.
Example shows a style sheet that contains two Type Selectors, both targeting
the paragraph element, both setting the font-family style property. Obviously both of these cannot be
applied to the same element, so CSS simply chooses the Selector that is closest to the paragraph tags.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
p
{
font-family:Arial;
}
p
{
font-family: Courier New;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<p>Lorum Ipsum</p>
</form>
</body>
</html>
Running this sample, you will see that the font applied is the Courier New font.
Note that you should be careful when combining styles from external style sheets and internal style
sheets. Remember that the browser will ultimately choose the style that is defined closet to the
specific elements. This means that as the browser begins to parse the Web page, internal styles defined before external styles are considered further away from the HTML elements. Thus, the browser will use the styles located in the external style sheet. If you plan on storing style rules in both internal and external style sheets, you should remember to include the external style sheets <link> tags before the internal style sheets <style> block in your Web page.
more at Cegonsoft
that a style can be defined in (external, internal, or inline) as a hierarchical structure.
Inheritance not only applies to styles kept in separate file locations, but also applies to styles within the
same location, which means that sometimes you also need to think about the order in which you define
your styles.
Example shows a style sheet that contains two Type Selectors, both targeting
the paragraph element, both setting the font-family style property. Obviously both of these cannot be
applied to the same element, so CSS simply chooses the Selector that is closest to the paragraph tags.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
p
{
font-family:Arial;
}
p
{
font-family: Courier New;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<p>Lorum Ipsum</p>
</form>
</body>
</html>
Running this sample, you will see that the font applied is the Courier New font.
Note that you should be careful when combining styles from external style sheets and internal style
sheets. Remember that the browser will ultimately choose the style that is defined closet to the
specific elements. This means that as the browser begins to parse the Web page, internal styles defined before external styles are considered further away from the HTML elements. Thus, the browser will use the styles located in the external style sheet. If you plan on storing style rules in both internal and external style sheets, you should remember to include the external style sheets <link> tags before the internal style sheets <style> block in your Web page.
more at Cegonsoft
