A live, in-browser companion to css_basics_reference.html. Each property gets its
own small, real example instead of just a table row, with the exact CSS shown right under the
result. Every property name links to its MDN documentation page.
Sections 1–4 (box model, typography, colors, display) match the 9/11 lesson. Sections 5–7 (positioning, flexbox, visual polish) are here for later classes — not meant to be shown all in one sitting.
This paragraph wraps instead of stretching across the whole page, no matter how much text it holds.
max-width: 260px;
padding: 0;
padding: 20px;
Padding is the gap between the content and the border — inside the box.
margin: 0;
margin-top: 24px;
Margin is the gap outside the border, pushing other elements away.
box-sizing: content-box; width: 150px; padding: 20px; border: 4px;
box-sizing: border-box; width: 150px; padding: 20px; border: 4px;
Both boxes are declared width: 150px. With content-box, the padding
and border are added on top, so the box actually renders wider than 150px. With
border-box, the padding and border are included inside the 150px — the box stays
exactly the width you asked for. This is why most CSS resets set border-box globally.
border: 3px solid #0284c7;
border-radius: 16px;
border-radius: 50%;
A radius of 50% on an equal width/height box makes a perfect circle.
overflow: hidden;
overflow: auto;
This line uses a serif font stack.
font-family: 'Times New Roman', serif;
This line uses a monospace font stack.
font-family: ui-monospace, Menlo, monospace;
The lines of this wrapped paragraph sit tight against each other, which is harder to read.
line-height: 1;
The lines of this wrapped paragraph have much more breathing room.
line-height: 2;
left-aligned text
text-align: left;
center-aligned text
text-align: center;
right-aligned text
text-align: right;
underlined text
text-decoration: underline;
struck-through text
text-decoration: line-through;
spaced out text
letter-spacing: 3px;
This text is colored.
color: #0284c7;
This text sits on a colored background.
background-color: #fde68a;
background-image: url('www.png');
By default, a background image repeats (tiles) to fill the whole box — that's what background-repeat, background-size, and background-position below are for.
background-size: cover;
background-size: contain;
cover (left) fills the box, cropping the edges. contain (right) fits the whole image inside, leaving empty space.
background-repeat: repeat;
background-repeat: no-repeat;
background-position: bottom right;
opacity: 1;
opacity: 0.5;
opacity: 0.1;
display: block;
display: inline;
Inline elements sit side by side on the same line, only as wide as their content.
display: inline-block; width: 100px; height: 50px;
Like inline, these sit side by side — but unlike plain inline, width and height are respected.
Right after the code caption below there's a paragraph with display: none — it's
in the HTML, but entirely removed from the page, taking up no space at all. Open dev tools and
search the Elements panel for the text "you won't see me" to find it.
display: none;
visibility: hidden;
Compare to display: none above: visibility: hidden makes the element invisible but still leaves its space in the layout — notice the gap between "before" and "after".
position: relative; top: 20px; left: 30px;
position: absolute (inside a relative parent)
/* on the dashed box */ position: relative;
/* on the yellow box */ position: absolute; top: 10px; right: 10px;
An absolutely positioned element is placed relative to its nearest ancestor that has position: relative (or absolute/fixed) — here, the dashed "stage" box.
/* blue box */ z-index: 1; /* red box */ z-index: 2;
The red box has the higher z-index, so it renders on top of the blue one, even though the blue box comes second in the HTML.
justify-content: space-between;
Pushes items apart along the main (horizontal) axis.
align-items: center;
Centers items along the cross (vertical) axis, even though they're different heights.
/* left & right */ flex-grow: 1; /* middle */ flex-grow: 2;
The middle box has flex-grow: 2, so it claims twice as much of the leftover space as its siblings.
/* container */ align-items: flex-start; /* middle box */ align-self: center; /* last box */ align-self: flex-end;
The container aligns everything to the top, but the middle and last box override that individually with align-self.
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
text-shadow example
text-shadow: 0 2px 3px rgba(0,0,0,0.4);
cursor: pointer;
cursor: not-allowed;
cursor: grab;
outline: 3px solid #3b82f6;
Unlike border, outline is drawn outside the box and doesn't affect layout — it doesn't push other elements away.