Tutorial

How To Understand and Create CSS Rules

Published on October 12, 2020
Default avatar

By Erin Glass

Senior Manager, DevEd

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:

styles.css
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) :

index.html
<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:

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.

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


Tutorial 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.

About the authors
Default avatar

Senior Manager, DevEd

Open source advocate and lover of education, culture, and community.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel