Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
cegonsoft india | Learn CSS Inheritance
#1
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
Reply
#2
Great tutorial! Don't see many css tutorials these days and this one is very nice and easy to follow!
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  Free Worker HTML, CSS, Javascript ImFocuzz 2 1,289 04-05-2014, 10:01 PM
Last Post: VHPanda
  Forum CSS code problem. inferno.lion 0 830 06-10-2013, 02:48 AM
Last Post: inferno.lion
  MyBB CSS Postbit Buttons Peter L 1 1,459 07-14-2012, 05:52 PM
Last Post: 'Snorlax
  inline css question andrewjs18 1 1,022 03-24-2012, 10:11 AM
Last Post: Haxalot
  Need a CSS Teacher! ImFocuzz 2 1,098 03-08-2012, 06:01 PM
Last Post: BreShiE

Forum Jump:


Users browsing this thread: 2 Guest(s)