CSS Foundations
CSS Foundations picks up where HTML Foundations left off. The Summit Trail Outfitters site you built is structurally complete — now you will make it look like a real website. By the final module, STO will have a branded color palette, readable typography, a responsive layout, styled forms, and a consistent visual design across all pages.
What you will learn
Section titled “What you will learn”- How CSS connects to HTML and how the browser applies styles
- Selectors and specificity — targeting elements precisely
- The box model — controlling space inside and around elements
- Positioning — relative, absolute, fixed, and sticky elements
- Color formats, web fonts, and visual styling
- CSS transitions — animating state changes
- Layout with Flexbox and CSS Grid
- Styling forms — inputs, buttons, selects, and validation states
- Responsive design with mobile-first methodology and media queries
- Applying a complete, consistent style system to a multi-page site
- CSS animations —
@keyframes, theanimationproperty, staggered entrances, andprefers-reduced-motion
The Summit Trail Outfitters project
Section titled “The Summit Trail Outfitters project”All lessons in this course style the same site — Summit Trail Outfitters. You can browse the reference source on GitHub or view the live reference site.
Prerequisites
Section titled “Prerequisites”This course assumes you have completed HTML Foundations or have equivalent knowledge. You should be comfortable writing HTML, using semantic elements, and working with a code editor and browser.
Modules
Section titled “Modules”01 — Getting Started with CSS
Section titled “01 — Getting Started with CSS”- What Is CSS and What Does It Do?
- How CSS Connects to HTML
- CSS Syntax: Rules, Declarations, and Properties
- Your First Stylesheet
- How the Browser Applies CSS
02 — Selectors & Specificity
Section titled “02 — Selectors & Specificity”- Type, Class, and ID Selectors
- Grouping and Combining Selectors
- Pseudo-Classes
- Pseudo-Elements
- Understanding Specificity
- The Cascade and Inheritance in Depth
03 — The Box Model
Section titled “03 — The Box Model”- The Box Model Explained
- Width, Height, and the box-sizing Property
- Margin and Padding — Controlling Space Inside and Outside
- Borders — border, border-radius, and Shorthand
- Display Values — block, inline, and inline-block
- Overflow — What Happens When Content Is Too Big
- CSS Positioning — relative, absolute, fixed, and sticky
04 — Color, Typography & Visual Style
Section titled “04 — Color, Typography & Visual Style”- Color in CSS — Named Colors, Hex, RGB, and HSL
- Backgrounds — background-color, background-image, and background Properties
- Typography Basics — font-family, font-size, font-weight, font-style
- Text Styling — line-height, letter-spacing, text-align, text-decoration, text-transform
- Using Web Fonts with Google Fonts
- Visual Depth — box-shadow, text-shadow, and opacity
- CSS Transitions — Animating State Changes
05 — Layout with Flexbox and Grid
Section titled “05 — Layout with Flexbox and Grid”- Normal Flow — How the Browser Lays Out Elements by Default
- Introduction to Flexbox — display: flex and the Flex Container
- Flex Direction and Axes
- Aligning Items — justify-content, align-items, and align-self
- Flex Wrap and the flex Property
- Practical Flexbox Patterns — Navigation Bars, Card Rows, and Centered Content
- Introduction to CSS Grid — Two-Dimensional Layout
06 — Styling Forms
Section titled “06 — Styling Forms”- Form Elements and Browser Defaults
- Styling Input Fields and Textareas
- Styling Buttons and Select Dropdowns
- Form Layout with Flexbox
- Form States — Styling Focus, Hover, Disabled, and Validation
- Building the Complete STO Contact Form
07 — Responsive Design
Section titled “07 — Responsive Design”- Why Responsive Design Matters — The Modern Web is Mobile
- CSS Units — px, em, rem, %, vw, and vh
- The Viewport Meta Tag and What It Does
- Mobile-First CSS — Writing Styles for Small Screens First
- Introduction to Media Queries — Breakpoints and @media Syntax
- Making Flexbox Layouts Responsive — flex-wrap and Stacking Behavior
08 — Styling Summit Trail Outfitters End-to-End
Section titled “08 — Styling Summit Trail Outfitters End-to-End”- Styling the Global Stylesheet — CSS Reset, Base Styles, and CSS Custom Properties
- Styling the Header and Navigation
- Styling the Homepage — Hero, Featured Tours Section, and Call-to-Action
- Styling the Tours Page — Tour Cards, Grid Layout, and Hover Effects
- Styling the Blog and Article Pages — Post Listing, Reading Typography, and Metadata
- Styling the About and Contact Pages — Team Layout, Contact Form, and Footer