What Is a CSS Rule: Simple Explanation and Example

A CSS rule is a set of instructions that tells the browser how to style HTML elements. It consists of a selector that picks which elements to style, and a declaration block that defines the styles to apply.

How It Works

Think of a CSS rule like a recipe for decorating a room. The selector is like choosing which room to decorate, for example, the living room or bedroom. The declaration block is the list of decorations and colors you want to use in that room.

In CSS, the selector picks the HTML elements you want to change, such as all paragraphs or a specific heading. The declaration block then lists style properties like color, font size, or background, telling the browser exactly how to display those elements.

This way, CSS rules help you control the look of your webpage by connecting style instructions to the right parts of your content.

Example

This example shows a CSS rule that makes all paragraphs have blue text and a font size of 18 pixels.

css

p {
  color: blue;
  font-size: 18px;
}

Output

All paragraph text appears blue and sized at 18 pixels.

When to Use

Use CSS rules whenever you want to change how your webpage looks. For example, you can style text color, size, spacing, backgrounds, borders, and layout. CSS rules help make your site visually appealing and easier to read.

They are essential when you want to keep your design consistent across many pages or elements. Instead of changing each element one by one, you write CSS rules once and apply them everywhere.

Key Points

• A CSS rule has two parts: a selector and a declaration block.
• The selector chooses which HTML elements to style.
• The declaration block contains style properties and values.
• CSS rules control the visual appearance of webpages.
• They help keep styling consistent and easy to manage.

Key Takeaways

A CSS rule connects style instructions to specific HTML elements using selectors.

The declaration block inside a CSS rule lists the style properties and their values.

CSS rules let you control colors, fonts, spacing, and layout on your webpage.

Using CSS rules keeps your website design consistent and easy to update.