Web Facts On CSS Inheritance

In this article knowing all about CSS Inheritance is discussed. It includes the analogy of the CSS family tree, its usage and desirable inherited properties.

Some of you might be excited in creating web page design and that in some point, because of impulsive actions you may end up in big trouble especially when you don’t know how to trouble shoot. Knowing how to deal with these issues comes with familiarity and with trial and error. Part of these know-hows is to understand an often overlooked concept: The concept of Inheritance. It might look boring and hard to grasp but this word comes as a fundamental approach in crafting a more desired output which helps maintain a clean cut of flexible style sheets. Let us look into the facts of what CSS inheritance is.

The CSS Family Tree

CSS Inheritance is the mechanism by which styles are applied not only to a specified element but also to its descendant. Before we go into the very details of this concept, let us first look into the general idea of Inheritance by using the analogy of a family tree. You have to remember that all HTML documents are trees which serve as the structure of your family. The parent is the element that is connected directly above an element in a family tree while the child is the element that is directly connected below it. In other words, inheritance is about passing down specific CSS properties from a parent to a child element.

How To Use Inheritance

Remembering that each element in an HTML document is part of a tree, you can be guided that whatever styles applied to a parent element can also be inherited to the element enclosed in it. For example, in this HTML, an H1 tag is enclosing an EM tag:

<h1>This will be a <em>Large</em> Headline</h1>


In this example the parent element would be the H1 tag while EM tag is the child element. Whatever properties the H1 tag obtained will also be passed down to the EM tag.

H1 {font-size:170%;}


Since the property font size of H1 tag is 170%, the Big word will also inherit the same font size as well as the rest of the H1 tag.

Inherited CSS Properties

The easiest way to use Inheritance is to become familiar with CSS properties that can be inherited. Not all properties can be passed down because if every property is to be inherited it would make things harder for web designers. An example of which is border property.

Luckily border property is not inherited so that the child element would not have a red border. Basically, only properties that make our jobs easier are inherited such as:

  • Speak-punctuation
  • List-style-position, image, type, height
  • Font-family, size, style, vairant, wieght
  • Text- indent, transform, align
  • Elevation
  • Color

Helpful Facts About CSS Syntax

In this article, we’ll learn the 3 basic components of CSS syntax, general rules, at-rules and sample statements.

CSS Syntax, at its most basic, is a style rule using a style name followed by curly braces. Between these braces are placed individual declaration for that style rule.

Selector {property: value}

Basically it consists of 2 components: A selector and a declaration, in which the latter consists of 2 more components: property and value. This style rule gives a sensible organization to your sheet because it provides a standard structure of CSS application.

Defining The Style Rule

In creating these components, a very simple formula that has been stated above shall be followed. The selector defines the exact element/s that will affect the rule you create. For example, the selector p selects all the paragraph elements on the page.

p {

Font-family: Arial, Helvetica, sans-serif;

Font-size: medium;

Color: red;


For each selector, you need to have a set of declarations. Declarations govern how the selected elements will be displayed. It mainly consists of property followed by a colon, a space and then the value both, enclosed with curly braces. In this picture there are 3 properties identified: font-family, font-size, and color. In font-family property you can see at least 3 values. This illustrates your reserve value if neither of them works in a certain browser. Together, the selector and declarations make up a Style Rule.


An at-rule begins with an @ character then an identifier. An at-rule can contain a block within curly braces, or text bordered at the last portion by a semicolon. The at-rule’s syntax shall determine whether a text is required or that of a block.


Statements are composed of at-rule or rule sets. The example below depicts two statements; the first beings an at-rule that is terminated by a semicolon at the last part of the first line, the second line shows a rule set that is bordered by a closing curly brace.

@import url(base.css)

H2 {

Color: #412;

Font: Calibri;



General Syntax and Nomenclature

In CSS syntax, whitespace can typically be put in unrestrained between tokens, and line breaks have no semantic value.

In CSS syntax, the interface is case insensitive, however circumstances outside the control of coding such as the type of operating system and markup language may affect this quality.

There’s a huge set of property identifiers that can be utilized in the style rules. They must be precisely known, or else the declaration will be disregarded. Property values are known to exist in variety, depending on the intention of its usage, with its own conditions and limitations. These property values can be expressed as percentages, colors, URLs, keywords, and lengths.