CODE WITH NM / CSS LAB
← Back to CODE WITH NM

See the CSS. Understand the result.

One topic, visible examples, and the exact CSS to try. Open styles.css alongside this page. Resize the browser and hover or Tab through the controls.

Font weight

Numeric weights run from 100 to 900. The font must include those weights for each step to look different. Arial commonly provides regular and bold, so some examples will look the same.

100–900

font-weight: 100 … 900
100Learn CSS
200Learn CSS
300Learn CSS
400Learn CSS
500Learn CSS
600Learn CSS
700Learn CSS
800Learn CSS
900Learn CSS

Named weights

font-weight: normal / bold

Normal = 400

Bold = 700

Font size — px, rem, em, %

The root font size is 16px. Each parent below has font-size:20px. Compare the references: rem uses the root; em and percentage font sizes use the parent.

px: fixed CSS pixels

font-size:16px

16px text

rem: root relative

font-size:1.5rem → 24px

1.5rem text

em: parent font size

font-size:1.5em → 30px

1.5em text

%: parent font size

font-size:150% → 30px

150% text

Pixel comparison

font-size:12px / 20px / 32px

12px text

20px text

32px text

More sizing units and functions

Percentages depend on the property. These widths refer to the containing block. Viewport units refer to the browser viewport. A CSS pixel is not necessarily one physical screen pixel.

Widths: px, %, rem

width:120px / 60% / 10rem
120px
60% of parent
10rem = 160px

Viewport width and height

width:20vw; height:12vh
Resize the window

Demo includes a minimum height and maximum width.

Fluid size with limits

font-size:clamp(18px,3vw,36px)

Flexible text

Character-based width

max-width:28ch

This paragraph wraps within a width based on the font’s zero character, rather than an exact character count.

Other viewport units

1vmin / 1vmax / 1dvh

vmin: 1% of the smaller viewport dimension.

vmax: 1% of the larger dimension.

dvh: 1% of the dynamic viewport height.

Display modes

These common display modes change layout behavior. They do not change the meaning of the HTML tag.

Block

display:block
First blockSecond block

Inline

display:inline
Text inline one inline two continues.

Inline-block

display:inline-block; width:100px; height:55px
OneTwo

Flex

display:flex
1
2
3

Grid

display:grid; grid-template-columns:repeat(2,1fr)
1
2
3
4

None versus hidden

display:none / visibility:hidden
A B

The hidden item below still occupies space:

HIDDEN
Next visible item

Inline-flex / inline-grid

display:inline-flex / inline-grid
Text AB text.
Text AB text.

Flexbox — direction, wrapping, growth

Set display:flex on the parent. Its direct children become flex items.

Row: default

flex-direction:row
1
2
3

Column

flex-direction:column
1
2
3

Wrap

flex-wrap:wrap; items: flex-basis:100px
1
2
3
4
5

No wrap

flex-wrap:nowrap
1
2
3
4
5

Growth ratio

flex-grow:1 / 1 / 2; flex-basis:0
1
2
3

The third item receives twice the share of distributable space. Padding also contributes to visible width.

Justify-content

Distribute flex items along the main axis. These examples use a row, so the main axis runs horizontally.

flex-start

justify-content:flex-start
1
2
3

center

justify-content:center
1
2
3

flex-end

justify-content:flex-end
1
2
3

space-between

justify-content:space-between
1
2
3

space-around

justify-content:space-around
1
2
3

space-evenly

justify-content:space-evenly
1
2
3

Align-items and gap

Align-items controls the cross axis. In this row, it is vertical. Stretch affects items whose cross size is automatic.

flex-start

align-items:flex-start
1
2
3

center

align-items:center
1
2
3

flex-end

align-items:flex-end
1
2
3

stretch

align-items:stretch
1
2
3

baseline

align-items:baseline
1
2
3

Gap

gap:20px
1
2
3

Grid columns — the fr unit

fr shares remaining space in grid tracks after fixed sizes and gaps are accounted for. Content minimum sizes can affect track sizing.

Equal columns

grid-template-columns:repeat(3,1fr)
1
2
3
4
5
6

Weighted columns

grid-template-columns:1fr 2fr 1fr
1
2
3

Fixed + flexible

grid-template-columns:70px 1fr
1
2
3
4

Automatically fitted columns

repeat(auto-fit,minmax(100px,1fr))
1
2
3
4
5

Resize the page. The demo caps the minimum at the available width on very small screens.

Grid rows, spanning, and areas

Columns control horizontal tracks. Rows control vertical tracks. Numbered grid lines let an item span tracks.

Explicit row heights

grid-template-rows:45px 85px
1
2
3
4

Span two columns

first item: grid-column:1 / 3
1
2
3
4
5

Span two rows

first item: grid-row:1 / 3
1
2
3

Named layout areas

grid-template-areas: "header header" "sidebar content" "footer footer"
Header
Side
Content
Footer

Gradient colors

Gradients are background images generated by CSS. Change the direction, shape, position, and color stops.

Linear: left to right

linear-gradient(to right,#5edcff,#8c7dff)

Linear: angle and 3 colors

linear-gradient(135deg,#ffb764,#fa6095,#8c7dff)

Hard color stop

linear-gradient(to right,#5edcff 0% 50%,#8c7dff 50% 100%)

Radial: center outward

radial-gradient(circle,#5edcff,#11243c)

Radial: moved origin

radial-gradient(circle at top left,#ffb764,#8c7dff,#11243c)

Bonus: conic

conic-gradient(#5edcff,#8c7dff,#ffb764,#5edcff)

Border styles

Border shorthand combines width, style, and color. Different sides can also be styled separately.

solid

border:3px solid #5edcff
solid

dashed

border:3px dashed #5edcff
dashed

dotted

border:3px dotted #5edcff
dotted

double

border:6px double #5edcff
double

One side

border-left:5px solid #b59aff
Left accent

Border radius

Radius rounds corners. 50% produces a circle when width and height are equal.

Small

border-radius:8px
Small

Large

border-radius:28px
Large

Pill

border-radius:999px
Pill

Circle

100px × 100px; border-radius:50%
Circle

Alternating corners

border-radius:30px 0 30px 0
Alternating corners

Box shadow

Syntax: horizontal offset, vertical offset, blur, optional spread, then color. Inset draws inside the box. Shadows do not reserve layout space.

Soft

box-shadow:0 10px 24px #0007
Soft

Hard offset

box-shadow:8px 8px 0 #b59aff
Hard offset

Glow

box-shadow:0 0 22px #5edcff88
Glow

Inner shadow

box-shadow:inset 0 0 18px #000b
Inner shadow

One element — content, padding, border, margin

The illustration labels each layer. The outer colors visualize otherwise invisible spacing; inspect the real element in DevTools to see actual computed sizes.

Layer diagram

content → padding → border → margin
Margin: outside the border
Padding: inside the border
CONTENT
Text or image
Outside spacePaddingBorderContent

Actual element

margin:24px; padding:24px; border:8px solid #b59aff
This is one real element. Its surrounding dark area shows the margin.

Padding versus margin

Padding grows the space inside the background and border. Margin separates the element from its surrounding content.

No padding

padding:0
Text touches the edge

24px padding

padding:24px
Space inside

No margin

margin:0
No outside space

24px margin

margin:24px
Space outside

Box sizing

Both boxes declare width:180px, padding:20px, and border:5px on each side. Margin is outside either measurement.

Content-box

total width = 180 + 40 + 10 = 230px
230px outer width

Border-box

total width = 180px
180px outer width

Text transform, decoration, and alignment

Text-transform changes presentation without changing the source text.

uppercase

text-transform:uppercase

Learn CSS With Nilesh

lowercase

text-transform:lowercase

Learn CSS With Nilesh

capitalize

text-transform:capitalize

Learn CSS With Nilesh

Italic

font-style:italic

Learn CSS

Underline / line-through

text-decoration:underline / line-through

Underline

Line through

Letter spacing

letter-spacing:4px

LEARN CSS

left

text-align:left

Aligned text

center

text-align:center

Aligned text

right

text-align:right

Aligned text

Line height

Unitless line-height multiplies the element’s font size. Compare the spacing between lines.

Compact

line-height:1.1

CSS controls presentation.
Spacing affects readability.
Choose a comfortable height.

Roomy

line-height:2

CSS controls presentation.
Spacing affects readability.
Choose a comfortable height.

Transition and transform

Hover the buttons to compare instant and smooth changes. Tab to see keyboard focus. CSS creates these effects without JavaScript.

Instant change

no transition

Smooth change

transition:background-color .3s ease, transform .3s ease, box-shadow .3s ease

translate

transform:translateX(20px)
translate

rotate

transform:rotate(12deg)
rotate

scale

transform:scale(1.15)
scale

Cursor types

Move the pointer over each sample. The cursor communicates a hint; it does not implement dragging, clicking, or a disabled state.

auto

cursor:auto
auto: hover here

default

cursor:default
default: hover here

pointer

cursor:pointer
pointer: hover here

text

cursor:text
text: hover here

move

cursor:move
move: hover here

help

cursor:help
help: hover here

not-allowed

cursor:not-allowed
not-allowed: hover here

crosshair

cursor:crosshair
crosshair: hover here

grab

cursor:grab
grab: hover here