CSS Tutorial
CSS Display
display switches the box: block, inline, none, flex, grid. It is the first layout decision.
What display does
Every visible element is a box. display tells the browser what kind of box it is: a full-width block, a fragment of a line, a hidden box, or a layout container. Change display and the same HTML can stack, sit in a sentence, or disappear.
HTML already picks a default. A div and a heading are block. A span and a link are inline. CSS can override that default. That is the first layout decision on a page like Harbor studio.
Block versus inline
A block box starts on a new line and stretches to the available width. You can setwidth, height, margin, and padding on all four sides.
An inline box stays in the flow of text. It only grows as wide as its content. Width and height do not apply. Vertical margin does not push neighboring lines the way a block does.
Example
<style>
.hours {
display: block;
background: #ccfbf1;
color: teal;
padding: 0.5rem 0.75rem;
margin-bottom: 0.5rem;
}
.tag {
display: inline;
background: #e0f2fe;
color: #0369a1;
padding: 0.15rem 0.4rem;
}
</style>
<p class="hours">Harbor studio — open 8–16.</p>
<p>
Today: <span class="tag">North quay</span>
<span class="tag">Slip 4</span>
<span class="tag">Sky gallery</span>
</p>The hours line is a block, so it takes the full row. The tags stay in the sentence because they are inline.
display: none
display: none removes the box from layout. Nothing takes its space. Screen readers skip it. Use it for a closed notice, a panel that is not in this view, or a print-only block you hide on screen.
Example
<style>
.open {
color: teal;
font-weight: 600;
}
.closed {
display: none;
}
</style>
<p class="open">Harbor studio is open.</p>
<p class="closed">Closed for the tide. Back at 8.</p>
<p>The closed line is in the HTML, but it does not take space.</p>visibility: hidden hides a box but still reserves its space.display: none does not. Pick the one that matches the layout you want.
flex and grid
Two later values turn a box into a layout container. display: flex lines children up on one axis. display: grid places them on rows and columns at once. You do not need those chapters yet, but you will see both names on real pages.
Example
<style>
.berths {
display: flex;
gap: 0.75rem;
}
.berth {
background: #e0f2fe;
color: #0369a1;
padding: 0.75rem 1rem;
border: 2px solid teal;
}
</style>
<div class="berths">
<div class="berth">Slip 4</div>
<div class="berth">Slip 7</div>
<div class="berth">North quay</div>
</div>Without flex, those three divs would stack as blocks. With flex they sit in a row. Full treatment lives in Flexbox and Grid.
Click Try it in CSS under an example to open /css/try. Changedisplay from flex to block and watch the berths stack.
Values at a glance
| Value | What you get |
|---|---|
block | New line, full width, width and height apply |
inline | Stays in the sentence, width and height ignored |
inline-block | In a line, but width and height apply — next chapter nearby |
none | Removed from layout and from assistive trees |
flex | One-axis layout of children |
grid | Rows and columns at once |
Inline-block is the hybrid you will use for a row of tags when you are not ready for flex. For new Harbor studio layouts, start with flex or grid once you know the box type.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Engineering
Block stack versus hidden sold-out
display: block makes a span start a new line and take width. inline keeps it in the sentence. none removes it from layout and from the accessibility tree.
visibility: hidden hides but leaves a hole. none is “this product is gone”. Do not use none for tab panels you still need keyboard users to reach — that is a later pattern.
Example
<style>
.item { display: block; background: #ccfbf1; margin: 0.3rem 0; padding: 0.4rem; }
.sold { display: none; }
</style>
<span class="item">HCl in stock</span>
<span class="sold">Old batch</span>
<span class="item">NaOH in stock</span>Maths
Inline chips for sides
3, 4, 5 as inline chips stay a sentence. Making each a block would look like a poster of one number per line.
Example
<style>
.chip { display: inline; color: #3730a3; }
</style>
<p><span class="chip">3</span> · <span class="chip">4</span> · <span class="chip">5</span></p>