How To Understand and Create CSS Rules

Introduction

In this tutorial, you will learn how to understand and create CSS rules (also known as rulesets) for styling and controlling the layout of HTML content. The tutorial will begin with an example CSS rule that makes <h1> HTML elements blue to study how CSS rules work in action before explaining each of the components of a CSS rule.

Prerequisites

To follow this tutorial, make sure you have set up the necessary files and folders as instructed in the previous tutorial How To Set Up You CSS and HTML Practice Project.

Exploring an Example CSS Rule

Below is an example of a CSS rule. Write the following rule into you styles.css file:

h1 {
  color: blue;
} 

Save your styles.css file. Note that you have indented color: blue two spaces to the right. This indentation is a recommended best practice for writing CSS style rules as it makes the code more easily read by developers.

The rule you have just added instructs the browser to give any HTML text content tagged with the HTML element <h1> a blue color. (For a refresher on how HTML elements work, please visit our tutorial How To Use and Understand HTML elements).

Next, add a piece of HTML content that is tagged with the <h1> element to the index.html file (right below the <link rel="stylesheet" href="css/styles.css"> line at the top of the document) :

<h1>A Sample Title</h1>

Save the file and load the HTML file in your browser to check your results. (For instructions on viewing an HTML file in your browser, please visit our tutorial step How To View An Offline HTML File In Your Browser).

In your browser, you should receive the following results:

![Webpage results] (https://assets.digitalocean.com/articles/how-to-build-a-website-with-css/a-simple-title.png)

If you don’t have the same results, make sure you have saved both your index.html file and your styles.css file and that there are no errors in your code.

How To Understand the Components of a CSS Rule

Let’s now examine the example CSS rule to understand each of its different components. In general, a CSS rule is composed of a selector, a declaration block, properties, and values. The diagram below illustrates how each of these parts are represented in a rule:

Let’s now study each of these parts and how they relate to the example CSS rule.

• The selector indicates which type of content is to be styled by the CSS rule. The selector is placed at the beginning of the CSS rule and outside of the opening curly bracket. In the CSS example, the selector is the <h1> HTML element, which is a tag selector. We’ll learn about other types of selectors later on in the tutorial series.
• The declaration block is the part of the CSS rule that declares a style rule for the selector. The declaration block is placed inside of the curly brackets. In the CSS example, the declaration block is color:blue;.
• The property refers to the property of the HTML content that the CSS rule will modify, such as font-size or color. In the CSS example, the property is color. Note that a colon is appended after the property.
• The value refers to the specific value assigned to the property, such as 16px or blue. In the example CSS rule, the value is blue. Note that a semicolon is appended after the value.

Once you declare a rule for a selector, every piece of content in your HTML document marked with that selector will be displayed according to the rule. Exceptions will occur, however, if a conflicting CSS rule is given precedence.

Conclusion

In this tutorial you examined all the components that are needed to write a complete CSS rule, including the selector, declaration block, properties, and values.

In the next tutorial, you will add multiple properties to a CSS rule and create different CSS rules for a single HTML document.