How deeply does Tiny CSS Projects cover rem?

Defines rem, contrasts it with em, and calculates sizes from a 16px default; stops short of browser internals.

Rem

The CSS rem unit expresses a length relative to the font size of the document's root element.

A rem is a CSS length relative to the font size of the root element, usually `<html>`. Unlike an em, which uses the parent element’s font size as its base, a rem uses the root’s size. If no root font size is set, most browsers default to 16px. section 4.1.1

Size a newspaper headline

Set `h1 { font-size: 4rem; }` to make the headline four times the root font size. With a 16px root size, it renders at 64px. section 4.1.1

Listing 6.11 Styling the name

h1 {                            #1
  font-size: 2rem;              #1
  margin: 36px 0 0;             #1
  color: var(--primary);        #1
}                               #1
 
.title {                        #2
  font-size: 1.25rem;           #2
  font-weight: bold;            #2
  color: var(--secondary);      #2
}                               #2

The profile card uses `2rem` for the name and `1.25rem` for the job title. At a 16px root size, the name is 32px. Relative font sizes help text scale with user settings or device needs. section 6.7.1

Rems also work beyond headings. A form input set to `font-size: 1rem` matches the application’s text size; the input needs explicit font styling because it does not inherit those styles by default. The same rule uses `.25rem` for padding but `1px` for its border. section 10.3.1

How Tiny CSS Projects covers it

liveBook manning.com

Read Tiny CSS Projects on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

Build a Website with ChatGPTThe rem unit is a CSS relative length unit measured against the root element's font size.
liveBook manning.com

CSS in Depth, Second EditionThe CSS rem unit is a relative length unit whose value is based on the computed font size of the root element.
liveBook manning.com

Web Design Playground, Second EditionThe CSS relative length unit whose value is based on the computed font size of the document's root element.
liveBook manning.com

Math for Web DesignThe rem unit is a CSS relative length unit equal to the computed font size of the root element.
liveBook manning.com

Web Design PlaygroundA CSS font-relative length unit equal to the font size of the root element.

Compare how 6 books explain rem →

Related concepts

relative valuekind of · A relative value expresses a quantity in relation to a contextual reference quantity rather than as an absolute value.
font-size propertyuses · The CSS font-size property specifies the nominal size of an element’s rendered text.
emcontrasts with · The em is a CSS relative length unit whose computed value is based on the applicable font size.
root elementuses · A root element is the topmost element in a document or element tree, from which all other elements descend.
absolute unitcontrasts with · An absolute CSS length unit has a fixed reference magnitude or defined relationship to physical or CSS reference lengths rather than depending on surrounding layout.
pixelalternative to · A pixel is either a discrete sample carrying visual information at a position in a digital image or a reference unit used to express rendered dimensions.

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.