1. CSS Introduction & Syntax
🐞✕
← Catalog|CSS
+50 XP

1. CSS Introduction & Syntax

🎨 Introduction to CSS & Basic Syntax

CSS (Cascading Style Sheets) is the language used to style and format the presentation of HTML documents. While HTML defines the semantic structure and content (headings, paragraphs, buttons, images), CSS defines the visual aesthetic (colors, typography, spacing, layouts, and animations).

---

🌐 How CSS Works in the Browser

When a browser loads a web page, it parses the HTML into a Document Object Model (DOM) and parses the CSS into a CSS Object Model (CSSOM). The browser combines these two trees into a Render Tree, computes the geometry of every element (Layout), and paints pixels to the screen (Painting).

code
HTML Document  ──> DOM Tree   ──┐
                                ├──> Render Tree ──> Layout ──> Paint
CSS Stylesheet ──> CSSOM Tree ──┘

---

⚙️ Anatomy of a CSS Rule

A CSS rule consists of a selector pointing to the HTML element you want to style, and a declaration block containing one or more property-value declarations enclosed in curly braces:

css
selector {
  property: value;
  property: value;
}
  • •Selector: Identifies which HTML element(s) to target (e.g. body, h1, .card).
  • •Declaration Block: Enclosed in curly braces { ... }.
  • •Property: The visual aspect you wish to change (e.g. background-color, font-family, margin).
  • •Value: The specific setting assigned to the property (e.g. #0f172a, 0).
  • •Semicolon (;): Every declaration must end with a semicolon to separate it from the next declaration.

---

🛠️ Baseline Document Setup (CSS Reset)

By default, web browsers apply their own built-in styles (known as the User Agent Stylesheet). Different browsers often apply inconsistent default margins and font sizes to the <body> element.

Setting a consistent baseline on the <body> element ensures cross-browser fidelity:

css
body {
  font-family: system-ui, -apple-system, sans-serif;
  background-color: #0f172a;
  color: #f8fafc;
  margin: 0;
}
  • •font-family: Applies crisp, high-performance system typography across macOS, iOS, Windows, and Linux.
  • •background-color: Sets a dark navy/slate canvas background.
  • •color: Establishes high-contrast, readable light text.
  • •margin: 0: Strips away default browser edge gaps so your layout reaches the viewport borders.

---

💻 Coding Challenge Task

Initialize the document canvas in the CSS tab:

  1. 1.Select body and declare:
  • •font-family: system-ui, -apple-system, sans-serif;
  • •background-color: #0f172a;
  • •color: #f8fafc;
  • •margin: 0;
  1. 1.Click Run Code to transform the raw HTML into a styled dark-theme interface!
Chapter1/24