CSS Concept

In this tutorial we will learn about important concepts of CSS.

Overriding style rule

We can override style rule defined for a selector by attaching class.

In the following example we have defined style rule which sets the color to red for the p element. And then we are overriding it by added class blue to change the color to blue.

/* set color of all p to red */
p {
	color : red;
}

/* if class blue added to p then override its color to blue */
p.blue {
	color : blue;
}

So, all paragraph will have color red and any paragraph having class blue will be in blue color.

Cascading

CSS stands for Cascading Style Sheet. The word cascade has an importance meaning. It tells us how the style rules will be applied. That is, there is a hierarchy in place for the different styling methods. First the inline style is applied then any style in the head tag is applied and then style rule from external files is considered.

External stylesheet file
    |
    V
Embedded style rule
    |
    V
Inline style rule

Cascade - Overriding style rules

If a style rule comes at the very last, it gets the highest preference.

Consider the following example were we have defined three style rules for the selector p.

/**
 * first style rule for p
 */
p {
	font-size : 18px;
	color : red;
}

/**
 * second style rule for p
 */
p {
	font-size : 20px;
	font-weight : 300;
	color : blue;
}

/**
 * third style rule for p
 */
p {
	color : green;
}

The color rule for p is defined in all the three but only the last rule i.e., color : green will be applied to all p. This is because it comes at the very end so, it overrides the other color rule for all p.

Font size rule is defined in 1st and 2nd so the 2nd is taken into consideration i.e., font-size : 20px; will be used for all p.

Font weight is defined only in 2nd rule so it is applied to all p.

So, the above 3 rules can be combined into one and we can write the following style rule for p.

p {
	font-size : 20px;
	font-weight : 300;
	color : green;
}

Grouping common style

If we have common style for different selectors then we can group them together using comma and writing the style only once.

In the following example we have a sample style rule for three different selectors.

h1 {
	color : red;
}

p#team-a {
	color : red;
}

span.group1 {
	color : red;
}

We can group the above rules in the following manner.

h1, p#team-a, span.group1 {
	color : red;
}

Style Inheritance

Child elements inherits style rule from the parent element.

In the following example we have defined a rule for the div having class red-container. So all the child element inherits the style of the parent element.

.red-container {
	color : red;
}

<div class="red-container">
  <h1>Hello World</h1>
  <p>This is a paragraph.</p>
</div>

Because of the above rule all the child elements of the div element will have color red.

Inheriting the body style

If we want to define a set of style rule that we want all the other elements in a page to inherit, we set the body style rule.

In the following example we have defined style rule for the body tag which is then inherited by all the child elements.

body {
	background-color : #fff;
	color : #000;
	padding : 0;
	margin : 0;
}

Contextual selector - Applying style rule to child element

If we want to apply a style rule to an element only when it is a descendent (i.e., child) of a given element we write the parent element selector followed by the child and then the rule.

In the following example the color of a span element we will be set to blue if it is a child of a paragraph p element.

p span {
	color : blue;
}

In the following example we have a header element h1 and its color will be set to red only if it is a child of an element having class container.

.container h1 {
	color : red;
}