CSS Syntax, Learn the Basic Structure of CSS Rules

CSS Syntax

CSS syntax is the foundation of styling web pages. It tells the browser how to style specific HTML elements.
By learning CSS syntax, you will be able to write clean, structured, and maintainable styles for any web project.

What is CSS Syntax ?

CSS syntax is made up of rules that tell browsers how to display elements. A rule consists of:

Selector - Identifies which HTML elements you want to style.

Declaration Block – Contains one or more property-value pairs enclosed in curly braces { }.

Syntax: Basic Structure of CSS

selector {
  property1: value1;
  property2: value2;
}

Key Point

Selector: Refers to the HTML element you want to style. Examples include p, h1, div, body, etc.

Declaration Block: Contains one or more declarations, separated by semicolons ;.

Property: Defines the style aspect (like color, font-size, border, etc.).

Value: Specifies the setting for the given property (like red, 12px, solid).

Each declaration ends with a semicolon ( ; ), and the entire block is wrapped in curly braces { }.

Example:

h1 {
  color: yellow;
  font-size: 10px;
}

Explanation:

Part	Description
h1	Selector - targets all <h1> elements on the page
color	Property - defines what you want to change ( in this case, text color )
yellow	Value - the new value for the property
font-size	Another property to define font size
10px	Value of the font-size property

CSS Rule:

p {
  color: red;
  font-size: 16px;
}

This rule will:

Change the text color of all

elements to red Set their font size to 16 pixels

Tips

Always end each declaration with a semicolon (;)
Use consistent spacing and indentation for readability
Keep selectors specific and meaningful