CSS Syntax: Selectors, Properties, and Values

Anatomy of a CSS Rule

A CSS rule has two parts: a selector that targets one or more HTML elements, and a declaration block wrapped in curly braces. Each declaration is a property: value pair terminated by a semicolon.

/* selector       property   value */
h1              { color:     #1a1a2e; }

/* Multiple declarations in one block */
p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

Property names are kebab-case (font-size, background-color). Values depend on the property — they can be keywords, lengths, colors, URLs, or functions like rgb() or calc().