CSS Syntax and Selectors

Analogy categoryAnalogies

Introduction

CSS (Cascading Style Sheets) describes how HTML elements should be displayed. Every CSS file is made up of rules, and every rule pairs a selector with one or more declarations. Understanding syntax and selectors is the foundation for everything else you will do in CSS.

🏏

Cricket analogy: CSS is like the ground rules that dictate how the pitch, boundary ropes, and scoreboard are displayed to spectators, while HTML is the actual match being played — CSS never changes the game, only its presentation.

Syntax

css

selector {
  property: value;
  property: value;
}

/* Example */
p {
  color: navy;
  font-size: 16px;
}

Explanation

A CSS rule starts with a selector, which chooses which element(s) the styles apply to. The declaration block, wrapped in curly braces, contains one or more declarations separated by semicolons. Each declaration is a property-value pair, and the colon separates the property name from its value. CSS selectors range from simple type selectors to complex combinators that target elements based on their attributes, state, or position in the document tree.

🏏

Cricket analogy: A CSS rule's selector is like naming which player the instruction applies to (e.g. 'the opening batsman'), and the declaration block in curly braces is like the specific coaching notes — property and value separated like 'stance: wider'.

Example

css

/* Type selector */
h1 { color: darkred; }

/* Class selector */
.card { padding: 16px; }

/* ID selector */
#main-nav { background: #222; }

/* Attribute selector */
input[type="email"] { border-color: blue; }

/* Descendant combinator */
article p { line-height: 1.6; }

/* Child combinator */
ul > li { list-style: none; }

/* Grouping selectors */
h1, h2, h3 { font-family: sans-serif; }

Output

Each selector above targets a different subset of elements: all h1 tags turn dark red, elements with class 'card' get padding, the element with id 'main-nav' gets a dark background, email inputs get a blue border, paragraphs inside articles get taller line spacing, direct list-item children of a ul lose their bullet, and h1/h2/h3 all share the same font family.

🏏

Cricket analogy: Just as different fielding instructions target different player groups — slip fielders get one set of directions, the wicketkeeper another — each selector here targets a distinct subset: h1 tags, .card elements, #main-nav, and email inputs each get their own rule.

Key Takeaways

A CSS rule = selector + declaration block; declarations are property: value pairs ending in semicolons.
Type, class, ID, attribute, and universal selectors target elements in different ways.
Combinators (space, >, +, ~) let you select elements based on their relationship to other elements.
Grouping selectors with commas applies the same declarations to multiple selectors at once.