CSS Basics: Syntax, Linking Styles, and First Properties

← back to the section

CSS answers one question: what does it look like — the thing HTML describes. HTML gives structure — a heading, a paragraph, a button; CSS gives appearance — color, size, placement. This article is the series' launch pad: the syntax, the ways to attach styles, and a minimal property set, so that we can discuss the cascade and layouts in a shared language.

A rule: selector, property, value

All of CSS consists of rules of the same shape:

selector {
  property: value;
  property: value;
}

.card-title {
  color: #1a1a2e;
  font-size: 20px;
}

The selector says which elements to target (here — everything with the card-title class); the declarations inside the braces say what to change. A colon between property and value, a semicolon after every declaration — a forgotten semicolon silently breaks both the current declaration and the next one: the browser doesn't report CSS errors, it simply skips what it doesn't understand. Comments are /* like this */ only (no //).

Three ways to attach — and the right one

<!-- 1. Inline: the style attribute. Fine for experiments, a smell in code -->
<p style="color: red">Text</p>

<!-- 2. A <style> tag in <head>: styles for one page -->
<style> p { color: red; } </style>

<!-- 3. An external file — the standard -->
<link rel="stylesheet" href="styles.css">

The working option is the external file: one set of styles for all pages, cached by the browser, separated from the markup. Inline styles also beat almost everything in the cascade — fixing layouts built on them is painful. React projects attach styles differently (imports, CSS Modules), but under the hood it's the same external styles.

Classes — the everyday tool

You can style by tag (p { }), but that paints every paragraph on the site. The everyday tool is the class: a name you put on an element yourself:

<button class="btn btn-primary">Save</button>

.btn { padding: 8px 16px; border-radius: 6px; }
.btn-primary { background: #2f5b4f; color: white; }

An element can carry several classes — the styles add up: .btn sets the shape of all buttons, .btn-primary — the color of the main one. This move is the foundation of component thinking: the common part in one class, variations in extra ones. Name classes by meaning, not by looks: .error-message, not .red-text — tomorrow errors turn orange and the class becomes a lie.

The minimal property set

Text and color are what gets configured first:

body {
  font-family: Inter, Arial, sans-serif; /* a list with fallbacks: no first font — take the next */
  font-size: 16px;
  line-height: 1.5;    /* line spacing; unitless = multiplier of the font size */
  color: #1a1a2e;      /* text color */
}
h1 { font-weight: 700; }         /* weight: 400 regular, 700 bold */
.muted { color: rgb(100 100 100 / 0.7); } /* with transparency */
.link { text-decoration: none; } /* remove underline */

Colors are written as hex codes (#1a1a2e, short form #fff), the rgb() / hsl() functions (the latter is handy for "a bit lighter/darker"), or keywords. An element's background is background-color, and sizes, spacing, and borders are covered properly by the box model article — no need to run ahead.

DevTools: see what applied

The main tool for learning CSS is built into the browser: right-click → Inspect. The Styles panel shows, for the selected element, all the rules that competed: the applied ones, the crossed-out losers, and where each came from (file and line). You can edit values right there and see the result instantly — it's a sandbox for experiments, and you can't break anything: refreshing the page brings everything back.

The habit of checking in DevTools why an element looks the way it does accelerates learning more than any article — and the crossed-out lines in the Styles panel will make full sense after the next article of the series.

In short

A CSS rule: a selector + "property: value" declarations. The browser skips errors silently — a lost semicolon breaks things quietly.
Attach styles with an external file via <link>; inline styles are for experiments, a smell in code.
The class is the primary selector; an element can have several, and styles add up. Name by meaning, not by looks.
The starter set: font-family with fallbacks, font-size, line-height, color, background-color; colors — hex/rgb/hsl.
DevTools → Styles: which rules applied, which lost, and where they came from. Editing live is the best way to learn.