How CSS Changes Everything: Designing the Look and Feel of the Web
From Plain to Polished: Transforming HTML with CSS
Mini-Lesson: CSS Basics & Design Concepts
Cascading Style Sheets (CSS) are a set of rules that tell the browser how to style the HTML you’ve already written.
Think of HTML as the content and CSS as the colors, layout, and spacing that make the site feel polished.
- Cascading means that styles can be inherited and overridden based on specificity and order.
- Selectors are the HTML elements you want to style (e.g. <h1>, <nav>, .class-name, #id-name).
- Properties are the aspects of the element you want to change (e.g. color, font-size, margin).
- Values are the specific settings for those properties (e.g. red, 16px, 20px).
- Inline CSS is written directly in the HTML element using the style attribute (e.g. <h1 style="color: red;">).
- Internal CSS is written in a <style> block within the <head> of the HTML document.
- External CSS is written in a separate .css file that is linked to the HTML document (e.g. <link rel="stylesheet" href="styles.css">).
Textbook Connection: Chapter 12 — Intro to HTML & Website Development & Chapter 8 — Word Processors