🧱 Section 01. Shared Site Foundation

📝 Summary of What You Will Do in This Section

In this section, you will build the shared stylesheet for the whole project. You are creating one CSS file named css/styles.css that every lesson page will use. This file sets up the site colors, spacing, typography, reusable layout classes, and demo-area styling so your animation lessons look consistent from page to page.

By the end of this section, your project will have a strong CSS foundation. This section is intentionally CSS-only, with no JavaScript required yet. In the next section, you will create index.html and connect it to this stylesheet.

✅ Checklist of What You Need to Do

  • Create a css folder in your project root if it does not exist yet.
  • Create a file named styles.css inside the css folder.
  • Type the full CSS from this lesson into css/styles.css.
  • Save the file and double-check that class names and punctuation match exactly.
  • Leave HTML and JavaScript for later sections.

🧠 Core Concepts

CSS can be thought of as the visual rulebook for your website. Instead of styling each page from scratch, you are building shared rules once and reusing them everywhere. This is an important professional habit because it makes websites easier to maintain and update. If you want to change a color later, you can change it in one place instead of fixing many separate files.

You will also use CSS variables in the :root selector. A variable is a named value, like --accent for a main brand color. Naming values makes your code easier to read and helps you avoid random, inconsistent colors. When you see var(--accent), it means “use the value stored in that variable name.”

Another important idea in this section is reusable classes. Classes like .wrapper, .site-header, .demo, and .button are not tied to only one page. They are built to be used again and again. This allows your future HTML pages to focus on content while this shared CSS handles layout and visual consistency.

You will also include a reduced-motion media query. A media query applies CSS only under certain conditions. In this case, if a user has reduced motion preferences turned on in their system settings, your site will lower transition motion. This is a basic accessibility practice that helps more users comfortably view your content. Keeping this section free of JavaScript helps you focus fully on CSS foundations first.

💻 Code You Will Write in This Section

CSS (css/styles.css)

Create css/styles.css, then type the code below exactly as shown.

This entire file is added now in Section 01. In Section 02, you will create index.html and link this stylesheet using a <link rel="stylesheet" href="css/styles.css" /> tag.

Code image: s01-CSS

🔍 Key Concepts

As you type this file, notice how the top :root block sets reusable design tokens such as --ink, --paper, and --accent. These names are used throughout the file with var(...), so your styles stay organized and consistent. This pattern is much cleaner than hard-coding many color values in many different places.

The reset and base rules near the top make default browser behavior more predictable. For example, * { box-sizing: border-box; } changes how width and padding are calculated, which helps layout sizing behave the way most designers expect. The html, body rule also sets global font, color, and background values so every page starts from the same base.

The .wrapper class controls readable page width and horizontal centering. Without a wrapper, text can stretch too wide and become difficult to read. The section blocks for header, content, demo tools, code snippets, and pager create a reusable structure that future lesson pages can plug into immediately.

The .ball and .box classes are starter shapes for animation demos. You are not animating them yet, but you are preparing the visual pieces now so animation lessons can focus on motion concepts instead of basic styling setup. Finally, the reduced-motion media query introduces accessibility support early, which is a strong habit for every future project.