CSS Inheritance

An important property of style sheets is "inheritance". To understand this property, let us use an analogy of boxes or containers. Non-empty XHTML elements have start tags and stop tags. These tags give the elements a scope. Other elements can exist within the scope of an element. The first element in a web page is the html element. Its start and stop tags are <html> and </html>. All other XHTML elements are between these two tags. That is, <html> and </html> are like a large box or container that holds the web page. The next element is <head>, and that tag is followed by </head>. These statements form another "container" that may contain several XHTML elements. Next are the <body> and </body> tags, and they form a "container"; this "container" contains the portion of the web page that is visible to visitors. Inside the body "container" are header and paragraph and block quote elements. Because the elements are arranged in this way, all of the XHTML statements are in a hierarchal relationship. The html element is called the root element because it isn't side any element. The elements that are inside the root element are called children elements. The root element can also be thought of as a parent of the children elements. If a child element has elements inside of it, it can be thought of as a parent to those children. Thus, any non-empty element, except the root element, has a parent element and may have children elements. The element is a child of its parent and is a parent to any children that it has.

Each of these XHTML elements has properties that have traditionally been defined by the HTML/XHTML language. These properties can also be defined by CSS statements, as explained in subsequent pages of this site. Because of this hierarchical relationship between elements, the inheritance principle comes into play and states that all properties of a parent element are also properties of a child element, and those properties don't have to be redefined in the child. Of course, if the child wants different values for a property, it can redefine the property, and the new definition will take precedence over the inherited definition. For example, consider the body element. If the properties of headers, paragraphs, background colors, fonts, etc. are defined in the body, the children will automatically have those properties.

[ Home ] [ Up ] [ Intro to CSS ] [ Type Selectors ] [ Inheritance ] [ Learning XHTML ]