Introduction to CSS — Syntax & Selectors

What CSS Does

HTML is structure; CSS is presentation. Every visual property of every site — colour, spacing, layout, motion — is CSS. A rule looks like this:

selector {
  property: value;
  property: value;
}

h1 {
  color: #6366F1;
  font-size: 2rem;
}

Three Ways to Add CSS

<!-- 1. External stylesheet — the right way -->
<link rel="stylesheet" href="styles.css">

<!-- 2. A style block — fine for small demos -->
<style> h1 { color: red; } </style>

<!-- 3. Inline — avoid; impossible to maintain -->
<h1 style="color: red">Hi</h1>

The Core Selectors

p          { }   /* every <p> — element selector */
.card      { }   /* class="card" — your main tool */
#header    { }   /* id="header" — one per page */
*          { }   /* everything */

Build your styling on classes. Elements are too broad, IDs too rigid. A well-named class describes the thing, not its look: .price-tag, not .red-text.

Combining Selectors

.card h2        { }   /* descendant — any h2 inside .card */
.card > h2      { }   /* child — only direct children */
h2 + p          { }   /* adjacent sibling — p right after h2 */
h2 ~ p          { }   /* general sibling — all following p's */
.card.featured  { }   /* both classes on the SAME element */
h1, h2, h3      { }   /* group — same rules for all three */

Attribute Selectors

input[type="email"]   { }
a[target="_blank"]    { }
a[href^="https"]      { }   /* starts with */
img[src$=".svg"]      { }   /* ends with */

Comments & Organisation

/* ── Buttons ─────────────────────── */
.btn { ... }

Group related rules under comment headers from day one — stylesheets grow fast, and future-you will be grateful.