One place for hosting & domains


      How To Understand and Create CSS Rules

      Part of the Series:
      How To Build a Website With CSS

      This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

      Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.


      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.


      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=""> 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

      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:

      Diagram of a CSS 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.


      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.

      Source link