CSS Introduction

What is CSS?

CSS stands for Cascading Style Sheets. While HTML is used to structure a web page (the bones), CSS is used to style that page (the skin, hair, and clothes). It describes how HTML elements are to be displayed on screen, paper, or in other media.

  • Cascading: This means that styles can fall from one style sheet to another. If multiple styles are applied to an element, the “last” one defined or the most specific one usually wins.
  • Style Sheets: These are files (or sections of code) that contain the design rules for your website.

Why Use CSS?

Before CSS, designers had to define fonts and colors inside every single HTML tag. This was a nightmare for large websites. CSS solved this by allowing you to:

  • Separate Content from Design: You can change the entire look of a website by editing just one CSS file.
  • Save Time: You can write a style once and apply it to thousands of pages.
  • Device Compatibility: CSS allows you to create different layouts for mobile phones, tablets, and desktops using the same HTML.
  • Better Performance: Browsers cache CSS files, making websites load faster after the first visit.

A Simple CSS Example

In this example, we use CSS to change the background color of the page and style a heading.

The HTML:

<h1>Hello World!</h1>
<p>This is a paragraph styled with CSS.</p>

The CSS:

body {
  background-color: #f0f2f5; /* Light grey background */
}

h1 {
  color: #04AA6D;            /* Forest green text */
  text-align: center;        /* Centers the text */
  font-family: Arial, sans-serif;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

How CSS Works with HTML

The browser reads your HTML to build the structure and then looks at your CSS to figure out how to paint it. Think of it like a house:

  • HTML is the blueprint (walls, doors, windows).
  • CSS is the interior design (paint color, wallpaper, furniture placement).

Summary of Chapter 1

  • CSS is used to style and layout web pages.
  • It saves a massive amount of work by controlling multiple pages at once.
  • External style sheets are stored in .css files.
Next