How To Understand And Create CSS Rules - DigitalOcean

Home » What Is A Ruleset In Css » How To Understand And Create CSS Rules - DigitalOcean

Maybe your like

  • Blog
  • Docs
  • Get Support
  • Contact Sales
  • Tutorials
  • Questions
  • Product Docs
  • Cloud Chats
  • Search Community

Report this

What is the reason for this report?This undefined is spamThis undefined is offensiveThis undefined is off-topicThis undefined is otherSubmit

Table of contents

  1. Prerequisites
  2. Exploring an Example CSS Rule
  3. How To Understand the Components of a CSS Rule
  4. Conclusion
  1. Tutorial Series
  2. How To Build a Website With CSS
TutorialHow To Understand and Create CSS RulesPublished on October 13, 2020Spin UpCSSErin Glass

By Erin Glass

Senior Manager, DevEd

How To Understand and Create CSS RulesTable of contentsPopular topics

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 our products

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.

Spin UpCSSVisit series page

Browse Series: 20 tutorials

  • 1/20 - A Brief Introduction To CSS
  • 2/20 - How To Set Up Your CSS and HTML Practice Project With a Code Editor
  • 3/20 - How To Understand and Create CSS Rules
Expand to view all

About the author

Erin GlassErin GlassAuthorSenior Manager, DevEdSee author profile

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

See author profileCategory:TutorialTags:Spin UpCSS

Still looking for an answer?

Ask a questionSearch for more helpWas this helpful?YesNoComments(0)Follow-up questions(0)

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!

Sign in/up to commentCreative CommonsThis work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.

Deploy on DigitalOcean

Click below to sign up for DigitalOcean's virtual machines, Databases, and AIML products.Sign up

Popular Topics

  1. AI/ML
  2. Ubuntu
  3. Linux Basics
  4. JavaScript
  5. Python
  6. MySQL
  7. Docker
  8. Kubernetes
  9. All tutorials
  10. Talk to an expert

Featured tutorials

  1. SOLID Design Principles Explained: Building Better Software Architecture
  2. How To Remove Docker Images, Containers, and Volumes
  3. How to Create a MySQL User and Grant Privileges (Step-by-Step)
  • All tutorials
  • All topic tags
Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Become a contributor for community

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

Sign Up

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Learn more

Resources for startups and SMBs

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Learn more

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

SubmitSubmit

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

View all products

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

Get started

*This promotional offer applies to new accounts only.

© 2025 DigitalOcean, LLC.Sitemap.

Tag » What Is A Ruleset In Css