What is CSS & How It Works

🎨 CSS Basics Lesson 1 Beginner

CSS (Cascading Style Sheets) is the language that controls the visual presentation of HTML documents — colors, fonts, layouts, spacing, and animations. Without CSS, every webpage would look like a plain text document.

1 Three Ways to Add CSS

CSS can be applied to HTML in three different ways:

Inline — Inside the style attribute of a single element. Highest specificity but hard to maintain.
Internal — Inside a <style> tag in the <head> section.
External — A separate .css file linked with <link rel="stylesheet">. Best practice for real projects.

2 CSS Rule Anatomy

Every CSS rule follows the same pattern: selector → property → value.

CSS — Basic Rule Syntax

/* selector { property: value; } */

h1 {
  color: #2563eb;        /* text color */
  font-size: 2rem;       /* font size  */
  font-weight: 700;      /* bold       */
}

p {
  color: #374151;
  line-height: 1.7;      /* spacing between lines */
  max-width: 65ch;       /* readable line length  */
}

3 Linking an External Stylesheet

HTML — Link CSS File

<head>
  <link rel="stylesheet" href="styles.css">
</head>

4 The Cascade

CSS is cascading — when multiple rules target the same element, the browser uses three factors to decide which wins:

Specificity — More specific selectors beat less specific ones.
Order — Later rules override earlier ones at equal specificity.
Importance — !important overrides everything (use sparingly).

5 Code Challenge

Challenge: Create an index.html file and a linked styles.css. Style an h1 with a custom color and a p with a larger font size. Open it in your browser and confirm the styles apply.