A little curiosity. A whole city.

CSS, under the microscope.

Change one property, predict the result, then check the browser.

Colour and backgrounds

Compare named colours, HEX, RGB/RGBA and HSL/HSLA. Background layers paint front to back.

Named HEX RGBA HSLA

Two backgrounds, padding-box origin, border-box clip.

Box model and margin collapse

Inspect content, padding, border, margin and outline in DevTools. Adjacent vertical block margins can collapse.

Content area

Bottom margin: 30px

Top margin: 20px. Gap is 30px, not 50px.

Typography and text effects

Test alignment, decoration, transformation, spacing, font fallback, wrapping and truncation.

A city worth exploring

A very long neighbourhood name that does not fit

averylongunbrokentravelreference012345678901234567890123456789

Selectors and cascade

Compare descendant, child, adjacent sibling and general sibling selectors. Inspect a deliberately scoped !important.

Which colour wins?

Adjacent sibling

General sibling

City guide

Display, position and overflow

Compare none with hidden, inline-block with block, and absolute positioning relative to a parent.

Absolute badge

Relative parent

Inline block Invisible but occupies space No layout space

Long content
Second line
Third line
Fourth line
Fifth line
Sixth line

Float and clear

Float is useful for wrapping text around an image; use Flexbox or Grid for most page layouts.

Image placeholder; replace with a city photograph

This text wraps around a floated placeholder image. Add more sentences to see how the text moves beside it. A floated object leaves normal block flow. The clearfix below contains the float.

This starts below both floats.

Gradients, borders and shadows

Gradients are generated CSS images; border-image can use a gradient or an image.

Linear

Radial

Conic

A gradient border image

Transforms, transitions and animation

Hover or focus the tile. Transform changes appearance without reflow. Reduced-motion preferences disable motion.

Hover or focus

Tooltip and dropdown

Hover and focus-within reveal the tooltip. Native details provides an accessible click/touch dropdown.

Image shapes, masks and sprites

The same placeholder is cropped, filtered and masked. A sprite shows different areas of one background image.

Hover image

Variables, math and feature queries

Custom properties reuse values; var provides a fallback. Math sets fluid sizes. @supports enables an enhancement.

A flexible information panel.

Morning

Walk

Picnic

Afternoon

Custom font and error inspection

A local font face tries an installed Arial font. Use DevTools to find the intentionally invalid value in this isolated rule.

A locally available font, with a fallback.

This text keeps its inherited colour because the invalid declaration is ignored.

Drag the bottom corner to resize this box.

Three places to write CSS

Inline colour wins over the internal class rule.

This uses the internal class rule.

The rest of this page uses css/lab-css.css.