CSS Syntax

Every CSS rule follows the same simple pattern. Once you get this, you understand the foundation of all CSS.

Here is the anatomy of a CSS rule:

selector {
  property: value;
}

That is it. Three parts. Let me break them down.

The Selector

The selector tells the browser which element to style. It can be an HTML tag name like p or h1, a class like .my-class, an ID like #my-id, or many other things. You point, CSS styles.

The Declaration Block

Inside the curly braces { } is where you put your declarations. Each declaration is a property followed by a colon, then a value, then a semicolon.

The property is what you want to change — like color, font-size, or background-color. The value is how you want to change it — like red, 20px, or #f0f0f0.

h1 {
  color: blue;
  font-size: 32px;
  text-align: center;
  background-color: yellow;
}

This rule says: find every h1 on the page and make the text blue, 32 pixels tall, centered, with a yellow background.

Important Rules to Remember

• Each declaration ends with a semicolon ;
• The last declaration can skip the semicolon, but always including it is a good habit
• Spaces and line breaks do not matter — you could put everything on one line, but formatting it neatly makes it readable
• CSS ignores anything it does not understand, so a typo will not break your page — the property just will not apply