What Is a CSS Declaration? Simple Explanation and Example

A CSS declaration is a single instruction inside a CSS rule that sets a style property and its value, written as property: value;. It tells the browser how to display an element, like setting its color or size.

How It Works

Think of a CSS declaration as a simple command that tells your webpage how to look. It has two parts: a property (what you want to change) and a value (how you want to change it). For example, if you want text to be red, the property is color and the value is red.

Imagine you are giving instructions to a painter. You say, "Paint the wall blue." Here, "paint the wall" is like the property, and "blue" is the value. Together, they form a clear instruction. In CSS, each declaration ends with a semicolon ; to separate it from other instructions.

Example

This example shows a CSS declaration inside a rule that changes the text color and font size of a paragraph.

css

p {
  color: blue;
  font-size: 1.2rem;
}

Output

A paragraph with blue text and slightly larger font size.

When to Use

Use CSS declarations whenever you want to style parts of your webpage. They help you control colors, sizes, spacing, fonts, and many other visual details. For example, you can make buttons look clickable, highlight important text, or arrange content neatly.

Every time you want to change how something looks on your site, you write CSS declarations inside rules that target those elements. This keeps your webpage organized and easy to update.

Key Points

• A CSS declaration sets one style property and its value.
• It is written as property: value; inside curly braces.
• Multiple declarations can be grouped in one CSS rule.
• Declarations tell the browser how to display HTML elements.

Key Takeaways

A CSS declaration is a single style instruction with a property and value.

It always follows the format: property, colon, value, and semicolon.

Declarations are grouped inside CSS rules to style HTML elements.

They control visual aspects like color, size, and spacing on a webpage.