Introduction to Cascading Style Sheets

Introduction

Authored by Olga Falko, this workbook-style guide introduces practical Cascading Style Sheets (CSS) techniques for learners who already know basic HTML and want to control the visual presentation of web pages. The content balances clear explanations with hands-on exercises, guiding readers from core syntax and external style sheets through typography, layout control, and style organization. Real examples and mini-projects help convert concepts into reusable, maintainable code.

What you will learn

Readers gain a functional understanding of how to separate content from presentation by using external style sheets, how CSS rules select and style elements, and how to manage site-wide appearance with reusable classes and selectors. The guide emphasizes practical typography (font families, sizes, weight, spacing, and shorthand notation), visual backgrounds and color usage, and the box model—margin, border, padding—which is essential for predictable layout and spacing. It also covers hyperlink styling and introduces measurement units (px, em, %, pt) so learners can make responsive, accessible choices.

Key concepts clarified

The workbook explains the cascading nature of CSS and priority rules so learners can troubleshoot conflicting declarations. It highlights when to use shorthand properties versus explicit longhand declarations, and clarifies the difference between block and inline elements to help target styles effectively. Practical guidance on linking external .css files and structuring styles for reuse reduces duplication and simplifies maintenance.

Practical applications and learning approach

Throughout the guide, exercises encourage editing real CSS files and viewing results in a browser to build intuition. Typical applications include styling a personal portfolio, creating consistent multi-page sites using a single stylesheet, refining typographic hierarchy for readability, and using classes to differentiate elements such as product cards or calls-to-action. Emphasis is placed on progressive practice: start with global body and heading styles, then layer component-level classes and layout rules.

Exercises and a recommended project

Hands-on tasks walk learners through creating external style sheets, linking them, applying text and background styles, experimenting with shorthand properties, and manipulating the box model to achieve desired spacing. A capstone project—building a multi-page site with a single shared stylesheet—reinforces linking, consistent typography, and responsive spacing across pages, plus cross-browser testing to ensure robust rendering.

Who will benefit

This guide is well suited to students, hobbyist developers, and beginning front-end practitioners who want a practical path from core CSS syntax to building clean, maintainable styles. Educators can also adapt the exercises for classroom use. Intermediate users will find the property reference and examples useful for quick reminders and migration from inline styles to external stylesheets.

How to use the workbook effectively

Work sequentially: practice each exercise in a simple text editor and test frequently in a browser. Save incremental versions, compare results, and experiment with both shorthand and explicit declarations to see trade-offs. Combine the workbook exercises with a small personal project to accelerate retention and build a portfolio-ready result.

FAQ — quick answers

Why use external style sheets? External CSS keeps HTML clean and enables one stylesheet to control multiple pages, improving consistency and maintainability.

When should I use em vs px? Use relative units like em or % for scalable layouts and accessibility; use px when you need exact control for specific elements.

Can shorthand properties cause issues? Shorthand is concise but can unintentionally reset omitted properties—use carefully and test results across browsers.

Glossary of essential terms

• CSS — Stylesheet language that defines presentation for HTML.
• Selector — Targets which elements a rule applies to.
• Box model — The content, padding, border, and margin that form an element's box.
• Class — Reusable identifier to apply styles to specific elements.
• Shorthand — Combined CSS properties expressed in a single declaration.
• em / px / % — Common measurement units for scalable and fixed sizing.

Next step

If you want practical, exercise-driven CSS instruction that moves quickly from fundamentals to project-based application, this guide provides structured lessons and references to build and maintain attractive, accessible web pages.