How To Understand and Create CSS Rules

How To Understand and Create CSS Rules

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.

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;
}

Copy

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>

Copy

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.

css

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

Learn to use variables in CSS (CSS Tricks)

whats the variable in CSS, how to declare use them. Whats the benefit of variables in CSS. Lets learn all this. #Variables #CSS #HTML #CssVariables #ITArticles

CSS Flex Box: A Flexible Way To Layout

Every element of HTML is a rectangular box. Every Box has a defined height and width. This way you can increase or decrease its size.