Introduction to CSS

Difficulty: Beginner

CSS stands for Cascading Style Sheets. It is the language used to control the visual presentation of HTML documents - colors, fonts, spacing, layout, animations, and more. Without CSS, web pages would be plain text with default browser styling (black text on a white background with Times New Roman font). CSS is what transforms raw HTML structure into visually appealing, user-friendly interfaces.

There are three ways to apply CSS to an HTML document. Inline styles use the style attribute directly on an element: <p style="color: red;">. Internal (embedded) stylesheets use a <style> element inside the <head> section of the HTML document. External stylesheets are separate .css files linked via <link rel="stylesheet" href="styles.css"> in the <head>. External stylesheets are the recommended approach for production websites because they separate content (HTML) from presentation (CSS), can be cached by browsers for faster loading, and can be shared across multiple pages.

CSS works by selecting HTML elements and applying property-value pairs to them. A CSS rule consists of a selector (which elements to target) and a declaration block (what styles to apply). The declaration block is enclosed in curly braces {} and contains one or more declarations. Each declaration has a property name, a colon, a value, and a semicolon: color: blue;. Multiple declarations are separated by semicolons. The selector can target elements by tag name, class, ID, attributes, and many other criteria.

When the browser encounters a CSS stylesheet, it parses the rules and matches selectors to elements in the DOM. This matching process happens in a specific order determined by the cascade - CSS rules can come from multiple sources (browser defaults, user stylesheets, author stylesheets) and may conflict. The cascade resolves conflicts using specificity (how specific the selector is), source order (later rules override earlier ones), and importance (!important declarations). Understanding the cascade is key to predicting which styles will be applied.

CSS has evolved significantly since its introduction in 1996. CSS1 covered basic text and color properties. CSS2 added positioning, z-index, and media types. CSS3 brought transforms, transitions, animations, flexbox, grid, custom properties (variables), and much more. Today, CSS is a living standard with new features continuously being added. Modern CSS is incredibly powerful - many things that used to require JavaScript (like hover effects, scroll animations, and responsive layouts) can now be done with CSS alone.

Code examples

Three Ways to Apply CSS

<!-- Method 1: Inline styles (avoid for production) -->
<p style="color: blue; font-size: 18px;">Inline styled text</p>

<!-- Method 2: Internal stylesheet -->
<head>
  <style>
    .highlight {
      background-color: yellow;
      padding: 4px 8px;
    }
  </style>
</head>

<!-- Method 3: External stylesheet (recommended) -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

Inline styles have the highest specificity but are hard to maintain. Internal stylesheets work for single pages. External stylesheets are the standard - they separate concerns, enable caching, and can be reused across pages.

Anatomy of a CSS Rule

/* selector { property: value; } */

/* Element selector */
p {
  color: #333333;
  font-size: 16px;
  line-height: 1.6;
}

/* Class selector */
.card {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

/* ID selector */
#main-header {
  background-color: #1a1a2e;
  color: white;
  padding: 16px 24px;
}

/* Multiple declarations in one rule */
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

A CSS rule has a selector and a declaration block. The selector targets elements, and the declaration block contains property-value pairs separated by semicolons. CSS properties use kebab-case (hyphenated lowercase).

CSS Comments and Organization

/* This is a CSS comment */

/* ================================
   RESET & BASE STYLES
   ================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* ================================
   TYPOGRAPHY
   ================================ */
h1, h2, h3 {
  margin-bottom: 12px;
  font-weight: 700;
}

/* ================================
   LAYOUT
   ================================ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

CSS comments use /* */. Organize your stylesheets into logical sections with comment headers. This makes large stylesheets navigable and maintainable.

Key points

Always use external stylesheets for production websites. They enable browser caching, can be shared across pages, and keep your HTML clean.
CSS properties are case-insensitive, but convention is to use lowercase. Values can be case-sensitive depending on the property (e.g., font-family names).
The order of declarations within a rule does not matter, but the order of rules in the stylesheet does - later rules can override earlier ones (assuming equal specificity).

Concepts covered

CSS, Inline Styles, Internal Stylesheet, External Stylesheet, Separation of Concerns