Skip to content
Miraat·dweb developer journey, reflected

CSS Fundamentals

How to give shape, color and typography to HTML elements, with clear, predictable rules.

Foundation 30 minutes Prerequisites: HTML Fundamentals

What CSS is

CSS (Cascading Style Sheets) describes how HTML elements look. It works through selectors that target one or more elements, and declarations that change a property.

Example

h1 { font-size: 28px; color: #0F6E56; }
.card { padding: 16px; border-radius: 8px; background: #fff; }
.card a:hover { text-decoration: underline; }

Key concepts

  • Cascade: multiple rules can hit the same element; the most specific or last-declared wins.
  • Box model: content, padding, border, margin.
  • Specificity: id > class > tag.
  • Pseudo-classes: :hover, :focus, :nth-child().

The most common mistake is assuming !important will fix things — it is usually a symptom of a specificity problem you should understand.

Recommended resources