Introduction to CSS

CSS (Cascading Style Sheets) controls how HTML content looks — colours, fonts, spacing, and layout — separating visual presentation from the structure that HTML provides.

Why Separate Style From Structure?

Before CSS matured, developers mixed styling directly into HTML, making pages hard to maintain and inconsistent across a site. CSS lets you define how things look in one place and apply those rules across an entire website, so changing a brand colour means editing one file instead of hundreds of pages.

Three Ways to Apply CSS

CSS can be linked externally (recommended for real projects), embedded in a page's head, or applied inline on a single element. External stylesheets are almost always the right choice because they're cached by the browser and reused across every page.

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

Basic Selector Syntax

A CSS rule pairs a selector (what to style) with a declaration block (how to style it), made up of property: value pairs.

p {
    color: #333333;
    font-size: 16px;
    line-height: 1.5;
}

Common Mistakes

• Forgetting the semicolon at the end of a CSS declaration, which can break the entire rule that follows it.
• Linking a stylesheet with the wrong relative path, so no styles apply and nothing appears to work.
• Overusing inline styles, which are hard to maintain and override the cascade in confusing ways.
• Forgetting curly braces around a rule's declarations.