CSS Reference

This sheet covers how to select elements and what properties to set on them. The first sections are taught in class. The last section is not taught — Level 4 material.

Selectors (taught in class)

The HTML each selector matches

A selector needs matching HTML in the page. The example below shows one page and 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 — Lesson 5 */
border: 2px solid #38bdf8;
padding: 12px;               /* space INSIDE the border */
margin: 16px;                /* space OUTSIDE the border */
border-radius: 8px;          /* rounded corners */

/* Flexbox — Lesson 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 */

/* Shadows and transitions — Lesson 6 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transition: background 0.3s; /* put this on the element, not the :hover */

:hover (Lesson 6)

.card:hover { background: #334155; }

A whole stylesheet, start to finish

The example below puts everything above together on one page. This is roughly what your Major Project 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 */
}

Read it in this order: the page defaults first, then the layout (display: flex), then the reusable .card rule, and finally what happens on hover.

Not taught in class — Level 4 material

Level 4 tasks expect you to find what you need here and work out how to use it.

:hover is taught in class at the end of Lesson 6. If a Level 4 task before then sends you looking for it, its section is above: .card:hover { ... } applies a rule only while the mouse is over the element.

Centering a box

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

An animation has two parts: you define its steps, then you apply it to an element.

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

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

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

More things to change on hover

Put transition on the element (not the :hover rule) or the change snaps instead of animating smoothly.

More properties

CSS Grid — rows and columns

Grid arranges the boxes directly inside one container. This example makes three equal columns:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Put class="gallery" on the HTML element that wraps the boxes. The grid declarations belong on that container, not on each box.

Media query — change the layout on a narrow screen

A media query applies its rules only while its condition is true. This one turns the three-column gallery into one column when the browser is 600 pixels wide or narrower:

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

Drag the side of the browser window inward to test both layouts.