Enough CSS to be proud of your page

A rule targeting body styles the whole page at once, because most text properties inherit downward - set the font on the body and every paragraph, list, and heading follows. Watch one rule change everything:

<style>
  body {
    font-family: Georgia, serif;
    color: darkslategray;
  }
</style>

<h1>Hello, CSS</h1>
<p>One ruleset and the whole page changes clothes.
The HTML underneath did not change at all.</p>

Where can CSS live? Three homes, one verdict each:

• Inline - a style attribute on one element. Avoid: unfindable, unreusable, overrides everything.
• A <style> element in the head - fine for learning and one-page experiments. Today's playgrounds live here.
• A linked .css file - <link rel="stylesheet" href="styles.css"> in the head. The grown-up way: one file styles every page of a site. Demo 2 moves you there.

The simplest selector is an element name: p grabs every paragraph, h2 every second-level heading. One rule, every match - the same power a good regex has over a text file.

<style>
  h2 { color: darkred; }
  p  { line-height: 1.6; }
</style>

<h2>Every h2 obeys</h2>
<p>One rule styles <strong>every</strong> matching
element on the page, present and future.</p>
<h2>This one too</h2>
<p>No copy-paste styling, ever.</p>

The cascade, one paragraph, no math: when two rules disagree, the more specific selector wins (a class beats a bare element name), and among equals, the later one wins. That is genuinely enough for this course - if you ever find yourself fighting a style, write a slightly more specific selector or move your rule later, and read the full cascade story on MDN when curiosity strikes.

• color and background-color take named colors (darkslategray) or hex codes (#2B1D14) - hex is what design tools hand you. Soft dark on soft light beats pure black on pure white for long reading.
• font-family takes a comma-separated wish list; the browser uses the first font it has. The system font stack below means "whatever this device uses natively" - free polish, zero downloads.
• line-height: 1.6 - the single cheapest readability upgrade in CSS. Default is cramped; 1.6 lets text breathe.
• max-width + margin auto - cap the line length and center the column. Full-window text lines are unreadable; this one-two is why every article site has a centered column.

<style>
  body {
    font-family: -apple-system, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
    color: #2B1D14;
    background-color: #FDF6F0;
    line-height: 1.6;
    max-width: 34em;
    margin: 0 auto;
  }
  h1 { color: #A6300F; }
</style>

<h1>A readable column</h1>
<p>Capped width, centered, breathing room between
lines, a font the device already loves. This is
most of what "professionally styled" means.</p>

Don't memorize the diagram - poke it. The playground below has both spacing dials on real boxes; the fastest way to own the box model is to turn one dial at a time and watch what moves.

<style>
  p {
    padding: 16px;
    margin: 24px;
    border: 3px solid darkred;
    border-radius: 12px;
    background-color: papayawhip;
  }
</style>

<p>Box one - my padding is space inside my border.</p>
<p>Box two - the gap between us is our margins.</p>

• Background color fills the padding but not the margin - which is how you can always tell them apart on screen.
• border-radius rounds the corners; it is why the modern web looks friendly.

Element selectors grab every p, but you rarely want EVERY p to be a card. A class attribute names your own family of elements, and a selector starting with a dot grabs exactly that family: .card in CSS matches class="card" in HTML. Define once, reuse everywhere - this is the pattern behind every design system you have ever used.

<style>
  .card {
    border: 1px solid darksalmon;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
  }
</style>

<div class="card">
  <h3>Sales dashboard</h3>
  <p>A weekend build with real numbers.</p>
</div>
<div class="card">
  <h3>This course site</h3>
  <p>Yes, these cards are the same trick.</p>
</div>
<div>
  <h3>No class yet</h3>
  <p>Not in the family, no card styling.</p>
</div>

Full CSS layout is Session 6-and-beyond territory, but one flexbox move is too useful to wait: display: flex on a container lays its children out in a row, gap spaces them evenly, and justify-content: space-between pushes the first and last child to opposite ends. That is the classic site header - name left, nav right - in three properties.

<style>
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 3px solid darkred;
  }
  nav { display: flex; gap: 16px; }
</style>

<header>
  <strong>Phoebe Fu</strong>
  <nav>
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

• id vs class: ids are unique anchors (Session 2's #about) and CSS can target them with #about - but ids win specificity fights so hard they cause them. House rule: ids for anchors, classes for styling.
• Descendant selectors: nav a (with a space) means "links INSIDE a nav" - style the menu links without touching links in your paragraphs. Read right to left: a, inside nav.
• Specificity fights: if a style refuses to apply, something more specific is winning. Resist the urge to pile on !important - inspect the element (Demo 3), find the winning rule, and write yours smarter. Every CSS veteran learned this the loud way.
• One treat: a:hover { color: darkred; } styles links only while the mouse is over them. Your first taste of interactive CSS - one line, try it on your nav tonight.