8.10. Introduction to CSS: selectors, properties and values: Understanding cascade and inheritance in CSS

The introduction to CSS is a crucial point in developing front-end skills. CSS, which stands for Cascading Style Sheets, is the language used to describe the presentation of a document written in HTML or XML. It is through CSS that you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and arranged, which images or background colors are used, layout designs, among other things.

Selectors, Properties and Values

To start, let's talk about selectors, properties and values ​​in CSS. Selectors are used to select the HTML elements you want to style. For example, if you want to style all paragraphs (<p>) in your HTML document, you would use the paragraph selector (<p>).

Once you select the elements you want to style, you can declare the properties you want to change for those elements. Properties are simply the characteristics of HTML elements that you want to change. For example, text color, font size, height, width, etc.

The values ​​are what you want to change the property to. For example, if you wanted to change the text color of all your paragraphs to red, 'red' would be the value you give to the 'color' property.

So an example of a CSS declaration would be:

<p style="color: red;">This is a paragraph.</p>

In this example, '<p>' is the selector, 'color' is the property and 'red' is the value.

Understanding Cascade and Inheritance in CSS

An essential part of CSS is understanding cascading and inheritance. The 'cascading' in CSS refers to the priority order of style rules that determine which style rule will be applied if more than one rule is applicable to a given element.

For example, if you have the following CSS code:

<p style="color: red;">This is a paragraph.</p>
<p style="color: blue;">This is another paragraph.</p>

The first paragraph will be red and the second will be blue, because the 'color' rule for the first paragraph is 'red' and the 'color' rule for the second paragraph is 'blue'. This is the waterfall in action.

'Inheritance' in CSS refers to the fact that styles are inherited from parent elements to child elements. For example, if you have the following CSS code:

<div style="color: red;">
  <p>This is a paragraph.</p>
</div>

The paragraph will be red, because it is inheriting the 'color' rule from the parent element '<div>'. This is inheritance in action.

Understanding cascading and inheritance is crucial to working effectively with CSS, as it allows you to create efficient styling rules and avoid the need to style each element individually.

In summary, introducing CSS and understanding selectors, properties, and values, as well as cascading and inheritance, are key to becoming an effective front-end developer. With a solid understanding of these concepts, you can create visually appealing and efficient websites.

Next page of the Free Ebook:

54Introduction to CSS: Selectors, Properties, and Values: How to Use the Element Inspector to Debug CSS

4 minutes