CSS Reference

How to point styles at things, and what to set when you get there. Bottom half is the Explorer Zone — Level 4 territory.

Selectors (taught in class)

Selector	Targets	Example
`body`	The whole page	`body { background: #0f172a; }`
`h1`, `p`, `section`…	Every element of that type	`h1 { color: hotpink; }`
`.card`	Everything with `class="card"`	`.card { border: 2px solid; }`
`#menu`	The ONE element with `id="menu"`	`#menu { background: black; }`

Which HTML does each selector hit?

A selector is useless on its own — it needs something to aim at. Same page, four selectors:

<!-- index.html -->
<body>
  <nav id="menu">
    <a href="#top">Top</a>
  </nav>
  <h1>Hot Sauce Hall of Fame</h1>
  <div class="card">Ghost pepper</div>
  <div class="card">Habanero</div>
</body>

/* style.css */
body   { background: #0f172a; color: #e2e8f0; }  /* the whole page      */
h1     { color: hotpink; }                        /* the one h1          */
.card  { border: 2px solid #38bdf8; padding: 12px; }  /* BOTH cards      */
#menu  { background: black; }                     /* only the nav        */

Note .card styles two elements from one rule — that is the whole point of a class. #menu styles exactly one, because an id is unique.

Properties (taught in class)

/* Colors & text */
background: #1e293b;         /* or background-color */
color: #e2e8f0;
font-family: system-ui, sans-serif;
font-size: 1.2rem;
text-align: center;

/* The box model — Day 5 */
border: 2px solid #38bdf8;
padding: 12px;               /* space INSIDE the border */
margin: 16px;                /* space OUTSIDE the border */
border-radius: 8px;          /* rounded corners */

/* Flexbox — Day 6 (goes on the CONTAINER) */
display: flex;
justify-content: center;     /* or space-between, space-around, flex-start */
gap: 16px;
flex-wrap: wrap;             /* let the row wrap to new lines */

/* Feel — Day 7 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transition: background 0.3s; /* put this on the element, not the :hover */

`:hover` (Day 7)

.card:hover { background: #334155; }

A whole stylesheet, start to finish

Everything above, working together on one page. This is roughly what your Major 1 stylesheet should look like:

<!-- index.html -->
<body>
  <nav>
    <a href="#one">One</a>
    <a href="#two">Two</a>
  </nav>
  <main>
    <div class="card">Ghost pepper</div>
    <div class="card">Habanero</div>
    <div class="card">Carolina Reaper</div>
  </main>
</body>

/* style.css */
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #0f172a;
  color: #e2e8f0;
}

nav {
  display: flex;            /* puts the links in a ROW      */
  justify-content: center;
  gap: 16px;
  padding: 16px;
}

main {
  display: flex;            /* puts the cards in a ROW too  */
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px;
}

.card {
  border: 2px solid #38bdf8;
  border-radius: 8px;
  padding: 12px;            /* space INSIDE the border      */
  background: #1e293b;
  transition: background 0.3s;   /* on the element, NOT the :hover */
}

.card:hover {
  background: #334155;      /* what changes when the mouse arrives */
}

Order to read it in: page defaults → layout (display: flex) → the reusable .card → what happens on hover.

🔭 Explorer Zone

The centering trick

A box with a width will center itself if you let the side margins figure themselves out:

.card { width: 300px; margin: 0 auto; }

Descendant selector — style things INSIDE things

nav a { color: orange; }        /* only links that live inside the nav */
.dark-mode #status { color: red; }  /* #status, but only in dark mode */

@keyframes — animation without JavaScript

Two parts: define the movie, then cast an element in it.

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.badge { animation: float 2s ease-in-out infinite; }

Things worth animating: transform: translateY(...) (move), transform: rotate(10deg) (tilt), transform: scale(1.1) (grow), opacity (fade).

More `:hover` victims

transform: scale(1.05) on hover makes cards puff up. letter-spacing on hover makes titles breathe. Combine with transition or it snaps instead of glides.

Deep cuts (show-off tier)

cursor: pointer; makes the mouse hand appear. text-shadow: 2px 2px 0 black; gives arcade-title vibes. linear-gradient(to right, purple, orange) as a background needs no image. border-style: dashed exists and so does dotted.