Chapter 1: Introduction to CSS

If HTML is the skeleton of a website, CSS (Cascading Style Sheets) is its skin, clothes, and makeup. CSS allows you to control the presentation of your HTML elements—colors, fonts, spacing, layout, and responsiveness. Without CSS, the web would be a collection of unstyled, monotonous documents.

Why CSS is Essential

CSS separates the content (HTML) from the presentation (CSS). This separation is the golden rule of modern web development. It allows you to change the entire design of your website by editing a single CSS file, rather than modifying every single HTML page individually.

How CSS Works: Selectors and Declarations

CSS works by "selecting" HTML elements and applying "declarations" to them. A declaration consists of a property and a value.

h1 {
    color: blue;
    font-size: 24px;
}

Ways to Include CSS

There are three ways to apply styles to your HTML:

  1. External (Recommended): Link a separate .css file in your HTML <head>. This keeps your code organized.
  2. Internal: Use a <style> tag inside the HTML <head>.
  3. Inline: Add a style attribute directly to an HTML tag. This is generally discouraged because it is hard to maintain.

The "Cascade" in CSS

The "C" in CSS stands for "Cascading." If you apply two conflicting styles to the same element, CSS uses a specific set of rules (the cascade) to decide which one "wins." Understanding these rules—specifically specificity—is what separates beginners from pros.

Try It Yourself

  1. Create a file named style.css.
  2. In your HTML, link it using: <link rel="stylesheet" href="style.css">.
  3. In your style.css, change the background color of your body and the font color of your h1 tags.

The Three Ways to Add CSS

CSS can be applied in three ways: inline (directly on an element via the style attribute), internal (inside a <style> tag in the document head), and external (in a separate .css file linked with <link>). External stylesheets are the best practice for real projects because they keep your styling separate from your HTML structure and can be reused across multiple pages.

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

How Selectors Work

A selector tells the browser which HTML elements a rule applies to. You can target elements by tag name, class, or id, and CSS applies styles based on specificity rules when multiple selectors match the same element.

p { color: gray; }          /* every paragraph */
.highlight { color: red; }   /* elements with class="highlight" */
#main-title { font-size: 2rem; } /* the element with id="main-title" */

Common Beginner Mistakes

New CSS learners often forget that class selectors need a dot (.classname) while id selectors need a hash (#idname) — mixing these up is one of the most frequent bugs. Another common mistake is forgetting semicolons between declarations, which can cause an entire rule to silently fail. Using your browser's DevTools (right-click → Inspect) is the fastest way to see exactly which styles are being applied and why.