Glossary
A reference of HTML and CSS terms used throughout the guide
Dania Rifki
A reference of key terms used throughout this guide, organized alphabetically. Each entry notes whether it relates to HTML, CSS, or both, and which chapter introduces it.
A
align-items CSS · Chapter 16
: A CSS property that aligns flex or grid items along the cross axis (e.g., stretch, center, baseline).
Alpha (Transparency) CSS · Chapter 13
: A fourth value in color functions (e.g., oklch(30% 0.19 268 / 0.5)) that controls opacity from 0 (fully transparent) to 1 (fully opaque).
Alt Text HTML · Chapter 6
: Descriptive text in the alt attribute of an image that describes what the image shows, for people who can't see it.
aria-label HTML · Chapter 8
: An accessibility attribute that provides a screen-readable name or description when visual context alone isn't enough.
Article HTML · Chapter 5 : A self-contained piece of content that could stand alone, be shared, be reposted, or be displayed in a feed independently.
Aside HTML · Chapter 5 : Content related to the main content but that could be considered separate, like sidebars, pull quotes, or supplementary information.
Async Decoding HTML · Chapter 6
: The decoding="async" attribute that tells the browser to decode an image in the background without blocking page rendering.
Attribute HTML · Chapter 3
: Extra information inside an opening tag that provides details about an element, written as name="value" (e.g., href="page.html").
Attribute Selector CSS · Chapter 10
: A CSS selector targeting elements based on their attributes (e.g., [data-theme="dark"]).
auto-fit CSS · Chapter 17
: A CSS Grid keyword that creates as many tracks as will fit in the container, used with repeat().
B
BEM (Block Element Modifier) CSS · Chapter 18
: A CSS naming convention where __ signals elements belonging to a block and -- signals modifiers.
Block Layer CSS · Chapter 18
: In CUBE CSS, the layer for component-specific styles (.card, .button) that stay small because global and composition styles do the heavy lifting.
Block-level Element HTML/CSS · Chapter 5
: An element that stretches to fill available width and starts on a new line (e.g., <p>, <h1>, <div>).
Blockquote HTML · Chapter 4
: An element for extended quotations from another source, optionally with a cite attribute pointing to the source.
Body HTML · Chapter 3 : The section of an HTML document containing all visible content that visitors actually see.
Border CSS · Chapter 11 : The layer of the box model that sits between padding and margin.
Box Model CSS · Chapter 11 : The concept that every HTML element is a box with four layers: content, padding, border, and margin (from inside out).
box-sizing: border-box CSS · Chapter 11
: A CSS property that makes width and height include padding and border, making sizing much more intuitive.
Breakpoint CSS · Chapter 9
: A viewport width at which a design changes its layout (e.g., 768px). Modern CSS aims to use these sparingly.
Button HTML · Chapter 7
: An element that triggers an action on the current page, not navigation. Marked with the <button> tag.
C
Cascade CSS · Chapter 10 : The set of rules CSS uses to decide which styles win when multiple rules target the same element.
ch Unit CSS · Chapter 14
: A unit of measurement based on the width of the "0" character in the current font, useful for controlling line length.
Character References HTML · Chapter 4
: Special codes used to represent reserved HTML characters (< for <, > for >, & for &) or symbols that may not be available on all keyboards (©, ®, ™).
Chroma CSS · Chapter 13 : In OKLCH, the color intensity (0 = gray, higher = more vivid). Similar to saturation but perceptually uniform.
clamp() Function CSS · Chapter 15
: A CSS function taking three values (minimum, preferred, maximum) that scales fluidly between the min and max.
Class HTML/CSS · Chapter 8
: An HTML attribute (e.g., class="wrapper card") that's the primary hook for CSS styling. An element can have multiple classes.
Class Selector CSS · Chapter 10
: A CSS selector targeting elements with a specific class, using a dot (e.g., .wrapper, .card).
Cluster Layout CSS · Chapter 16 : A reusable flex pattern for groups of items that wrap naturally, like tags, social links, or navigation.
Color Palette CSS · Chapter 13 : A curated set of colors used consistently across a design.
Combinator CSS · Chapter 10
: A symbol in CSS that describes relationships between elements (e.g., > for direct children, a space for descendants).
Composition Layer CSS · Chapter 18
: In CUBE CSS, layout primitives (.flow, .wrapper, .grid) that don't care about the content they contain.
Container Queries CSS · Chapter 17 : A CSS feature allowing components to respond to their container's size rather than the viewport's size.
Content CSS · Chapter 11 : The innermost part of the box model where an element's actual content (text, images) lives.
CSS (Cascading Style Sheets) CSS · Chapter 9 : The language that controls how HTML looks: color, typography, spacing, layout, animation.
CSS Grid CSS · Chapter 17 : A two-dimensional layout system that handles rows and columns simultaneously. More powerful than Flexbox for page-level layouts.
CSS Nesting CSS · Chapter 10 : A modern CSS feature allowing related styles to be written in a grouped, hierarchical way within a parent selector.
CSS Reset CSS · Chapter 10 : A set of CSS rules that removes or normalizes browser default styles to start from a consistent baseline.
CSS Rule CSS · Chapter 10 : A complete CSS statement consisting of a selector and a declaration block containing properties and values.
CUBE CSS CSS · Chapter 18 : A CSS methodology (Composition, Utility, Block, Exception) that organizes styles into layers for maintainability.
Custom Property CSS · Chapter 12
: A CSS variable defined with -- and accessed with var() (e.g., --color-primary, --space-m).
D
Data Attribute HTML/CSS · Chapter 8
: A custom HTML attribute beginning with data- (e.g., data-theme="dark") that attaches custom information to elements.
Description List HTML · Chapter 4
: A list for key–value pairs or term–definition relationships, using <dl>, <dt>, and <dd> elements.
Design Token CSS · Chapter 12 : A named value (color, size, font) defined as a custom property, forming the vocabulary of a design system.
Details / Summary HTML · Chapter 7
: A pair of elements that create an expandable/collapsible section with no JavaScript. <summary> is the always-visible label.
Developer Tools (Dev Tools) HTML/CSS · Chapter 2 : Built-in browser tools that let you inspect HTML, view CSS, debug code, and experiment with changes without modifying your actual files.
DOCTYPE HTML · Chapter 3
: The declaration at the very beginning of an HTML file (<!DOCTYPE html>) telling browsers this is a modern HTML document.
E
Easing CSS · Chapter 19 : The acceleration curve of an animation: ease, ease-in, ease-out, ease-in-out, or linear.
Element HTML · Chapter 3
: A fundamental building block of HTML, consisting of an opening tag, content, and a closing tag (e.g., <h1>Title</h1>).
Element Selector CSS · Chapter 10
: A CSS selector targeting HTML elements directly by tag name (e.g., p, h1, img).
Emphasis HTML · Chapter 4
: The <em> element that stresses a word or phrase, changing its meaning. Browsers render it in italics by default, but its purpose is conveying stress emphasis, not visual styling.
Exception Layer CSS · Chapter 18
: In CUBE CSS, state variations applied with data-* attributes that represent deviations from defaults.
F
Fallback Value CSS · Chapter 12
: A second argument to var() that applies if the custom property isn't defined.
Figcaption HTML · Chapter 6
: A caption inside a <figure> element that describes or provides context for the figure's content.
Figure HTML · Chapter 6 : An element wrapping self-contained content (image, diagram, code snippet) that's referenced from the main text.
flex-basis CSS · Chapter 16
: The ideal starting size of a flex item before any growing or shrinking happens.
flex-direction CSS · Chapter 16
: A CSS property that determines the main axis of a flex container (row = horizontal, column = vertical).
flex-grow CSS · Chapter 16
: A value determining how much a flex item expands relative to its siblings when there's extra space.
flex-shrink CSS · Chapter 16
: A value determining how much a flex item contracts relative to its siblings when space is tight.
flex-wrap CSS · Chapter 16
: A CSS property that allows flex items to wrap to a new line when they run out of space.
Flexbox CSS · Chapter 16
: A CSS layout system (display: flex) for distributing items along a single axis with control over alignment and wrapping.
Flow Utility CSS · Chapter 11
: The .flow class pattern using an adjacent sibling selector to add consistent vertical spacing without margin collapse issues.
Fluid Design CSS · Chapter 9 : An approach that embraces the web's fluid nature, establishing relationships and proportions instead of designing for fixed screen sizes.
Fluid Gallery Pattern CSS · Chapter 17
: A Grid pattern using repeat(auto-fit, minmax(...)) that creates a responsive gallery with no breakpoints needed.
Fluid Scaling CSS · Chapter 15 : Sizing that smoothly scales between a minimum and maximum as the viewport changes, without breakpoint jumps.
font-display: swap CSS · Chapter 14
: A CSS property that shows text in a fallback font immediately, then swaps in the custom font once loaded.
@font-face CSS · Chapter 14
: A CSS rule that loads a custom font file and defines how it should be used.
font-family CSS · Chapter 14
: A CSS property that sets the typeface, typically with fallbacks (e.g., font-family: "Georgia", serif).
font-size CSS · Chapter 14
: A CSS property that controls the size of text, often measured in rem units.
Footer HTML · Chapter 5 : A landmark element typically containing copyright notices, secondary links, or contact details.
fr (Fraction Unit) CSS · Chapter 17
: A CSS unit used in Grid that represents a fraction of available space (e.g., 1fr 1fr = two equal columns).
G
Gap CSS · Chapter 16 : A CSS property that sets spacing between flex or grid items, replacing older margin-based hacks.
Generic Container HTML · Chapter 5
: Elements like <div> and <span> with no semantic meaning, used purely for structure or styling hooks.
Grid Container CSS · Chapter 17
: An element with display: grid whose direct children become grid items.
Grid Item CSS · Chapter 17 : A direct child of a grid container that participates in grid layout.
Grid Template Areas CSS · Chapter 17
: A CSS Grid feature using named areas for semantic, readable page layouts (e.g., "header header" "sidebar main").
grid-area CSS · Chapter 17
: A CSS property that assigns an element to a named grid area.
grid-template-columns CSS · Chapter 17
: A CSS property that defines the column structure of a grid (e.g., 1fr 1fr 1fr for three equal columns).
H
:has() CSS · Chapter 10
: A modern CSS selector (the "parent selector") that lets you style an element based on what it contains.
Head HTML · Chapter 3 : The invisible section of an HTML document containing metadata like charset, viewport settings, the page title, and stylesheet links.
Header HTML · Chapter 5 : A landmark element typically containing the site title or logo and primary navigation.
Heading Hierarchy HTML · Chapter 4
: The six levels of headings (<h1> through <h6>) that create an outline of a page, with <h1> being the most important.
HSL (Hue, Saturation, Lightness) CSS · Chapter 13 : A color model where hue is position on the color wheel (0–360°), saturation is vividness (0–100%), and lightness is brightness (0–100%).
HTML (HyperText Markup Language) HTML · Chapter 1 : The language that gives web pages structure and meaning. It describes what content is (heading, paragraph, image) rather than how it looks.
Hue CSS · Chapter 13 : The position on the color wheel (red ≈ 0°, green ≈ 120°, blue ≈ 240°), the aspect that makes a color feel "blue" or "red."
I
ID HTML/CSS · Chapter 8
: An HTML attribute providing a unique identifier for an element. No two elements on the same page should share an id.
!important CSS · Chapter 10
: A CSS flag that overrides normal specificity. Best avoided except for critical overrides like prefers-reduced-motion rules.
Inheritance CSS · Chapter 10
: The mechanism by which certain CSS properties automatically pass from parent elements to their children (e.g., color, font-family).
Inline Element HTML/CSS · Chapter 5
: An element that sits within a line of text without breaking it, taking up only as much width as its content (e.g., <a>, <strong>, <span>).
Interactive Element HTML · Chapter 7
: HTML elements designed for user interaction: links, buttons, form controls, and <details>/<summary> pairs.
:is() and :where() CSS · Chapter 10
: Modern CSS pseudo-classes that group selectors concisely. :where() has zero specificity, making it ideal for defaults.
J
justify-content CSS · Chapter 16
: A CSS property that aligns flex or grid items along the main axis (e.g., center, space-between, space-evenly).
K
@keyframes CSS · Chapter 19
: A CSS rule that defines the steps of an animation using from/to or percentage markers.
Keyframe Animation CSS · Chapter 19
: A CSS animation defined with @keyframes that sequences multiple steps beyond a simple A-to-B transition.
L
@layer (CSS Layer) CSS · Chapter 10
: An explicit ordering mechanism in CSS that ensures styles in later-declared layers always beat styles in earlier layers.
lang Attribute HTML · Chapter 3
: The attribute on the <html> element declaring the page's language (e.g., lang="en" for English).
Landmark HTML · Chapter 5
: A major region of a page (<header>, <main>, <nav>, <footer>) that screen readers and assistive technologies can jump to directly.
Lazy Loading HTML · Chapter 6
: The loading="lazy" attribute that tells the browser to defer loading an image until the user scrolls near it.
Lightness CSS · Chapter 13 : How bright a color is. In HSL, 0% is black, 50% is the pure color, and 100% is white. In OKLCH, lightness is perceptually uniform, ranging from 0 (black) to 1 (white).
line-height CSS · Chapter 14
: The vertical spacing between lines of text, typically expressed as a unitless multiplier (e.g., 1.6 means 1.6× the font size).
Link HTML · Chapter 7
: An element that navigates to another URL, marked with the <a> tag and href attribute.
Lobotomized Owl (* + *) CSS · Chapter 11
: An adjacent sibling selector pattern that targets every element immediately preceded by a sibling element. It is the underlying selector for the .flow utility.
Logical Properties CSS · Chapter 11
: CSS properties that adapt to writing direction using block and inline axes instead of top, right, bottom, left. In horizontal languages like English, block is vertical and inline is horizontal.
M
Main HTML · Chapter 5 : The landmark element wrapping the primary content of a page. There should be only one per page.
Margin CSS · Chapter 11 : Space outside the border that pushes other elements away and creates separation between boxes.
Margin Collapse CSS · Chapter 11 : A behavior where adjacent block-direction margins merge into one instead of adding together.
Markup HTML · Chapter 1 : The process of adding HTML tags and structure to content to give it meaning.
max() Function CSS · Chapter 15
: A CSS function that returns the largest of its arguments (e.g., max(1rem, 3vw)).
Measure CSS · Chapter 14 : The number of characters per line. The ideal reading measure is roughly 60–80 characters wide.
Metadata HTML · Chapter 3
: Information about a page that doesn't appear on the page itself, stored in the <head> element.
min() Function CSS · Chapter 15
: A CSS function that returns the smallest of its arguments (e.g., min(100%, 60rem)).
minmax() Function CSS · Chapter 17
: A CSS Grid function that sets a minimum and maximum size for a grid track.
N
Navigation (<nav>) HTML · Chapter 5
: A landmark element for major navigation blocks. Can have aria-label to distinguish multiple navigation areas on the same page.
Nesting HTML · Chapter 3 : Placing one HTML element inside another to create a hierarchical structure. Indentation shows these relationships visually.
Normal Flow CSS · Chapter 11 : The browser's default layout algorithm where block elements stack vertically and inline elements sit side by side.
O
OKLCH (Lightness, Chroma, Hue) CSS · Chapter 13 : A modern, perceptually uniform color model where lightness and chroma behave consistently across all hues.
Ordered List HTML · Chapter 4
: A list where the sequence matters, using the <ol> element. Items appear numbered.
P
Padding CSS · Chapter 11 : Space inside the border but outside the content, creating breathing room within a box.
Perceptually Uniform CSS · Chapter 13 : A color model where colors at the same lightness value actually appear equally bright to the human eye. OKLCH is perceptually uniform; HSL is not.
Picture Element HTML · Chapter 6
: An HTML element (<picture>) that lets you serve different image files depending on context (format support, viewport size).
place-items CSS · Chapter 17
: A CSS shorthand for both align-items and justify-items in Grid.
prefers-reduced-motion CSS · Chapter 19
: A media query that detects a user's system preference for reduced motion, used to disable or soften animations for accessibility.
Property CSS · Chapter 10
: The CSS characteristic being styled (e.g., color, font-size, padding).
Pseudo-class CSS · Chapter 10
: A CSS selector targeting elements based on state or position (e.g., :hover, :focus-visible, :first-child).
Pseudo-element CSS · Chapter 10
: Virtual elements that CSS can style before or after actual elements (e.g., ::before, ::after).
R
rem (Root Em) CSS · Chapter 14
: A unit of measurement equal to the root font size (usually 16px), allowing sizes to scale if users change their browser's default font size.
repeat() Function CSS · Chapter 17
: A CSS Grid function that repeats a track pattern (e.g., repeat(3, 1fr) = three equal columns).
Responsive Design CSS · Chapter 9 : Designing websites that work well on any screen size or device, from phones to large monitors.
Responsive Images HTML · Chapter 6
: Images that adapt to different screen sizes and contexts, often using <picture> or the srcset attribute.
rotate() CSS · Chapter 19
: A CSS transform function that spins an element by a given angle.
S
Saturation CSS · Chapter 13 : In HSL, how vivid a color is: 0% is gray, 100% is fully vivid.
scale() CSS · Chapter 19
: A CSS transform function that enlarges or shrinks an element.
Scale Ratio CSS · Chapter 15 : A multiplier between steps in a type or space scale (e.g., 1.2 = minor third, 1.333 = perfect fourth).
Scoping CSS · Chapter 12
: Redefining custom properties in a smaller context (like within [data-theme="dark"]) where they override the root values.
Section HTML · Chapter 5 : A thematic grouping of related content, usually with its own heading. Only exposed as a landmark when it has an accessible name.
Selector CSS · Chapter 10 : The part of a CSS rule that targets which HTML elements to style.
Semantic HTML HTML · Chapter 1 : Choosing HTML elements based on what the content means rather than what you want it to look like. Helps with accessibility, search engines, and code maintenance.
Source Order CSS · Chapter 10 : When two CSS rules have equal specificity and layer, the one written later in the stylesheet wins.
Space Scale CSS · Chapter 15 : A harmonious set of related spacing values that scale fluidly with the viewport.
Specificity CSS · Chapter 10 : The ranking system CSS uses to determine which rule wins when multiple rules target the same element.
Strong Importance HTML · Chapter 4
: The <strong> element that marks text as having strong importance. Browsers render it in bold by default, but its purpose is conveying importance, not visual styling.
Syntax Highlighting HTML/CSS · Chapter 2 : Different parts of code appearing in different colors in a text editor, making code easier to read and mistakes easier to spot.
T
Tag HTML · Chapter 3
: The markers that define HTML elements, written with angle brackets (e.g., <html>, </html>).
text-wrap: balance CSS · Chapter 14
: A CSS property that makes each line of a heading roughly equal length, avoiding awkward single-word last lines.
text-wrap: pretty CSS · Chapter 14
: A CSS property that improves paragraph wrapping by ensuring at least two words on the final line.
Theming CSS · Chapter 12 : Using scoped custom properties to create different visual treatments of the same component, like light and dark modes.
<time> Element HTML · Chapter 4
: An inline element that marks up a date, time, or duration in a machine-readable way using the datetime attribute.
Transform CSS · Chapter 19 : A CSS property that moves, scales, rotates, or skews elements without affecting document flow.
Transition CSS · Chapter 19 : A CSS property that smoothly animates the change between two states of a property over a specified duration.
translateX() / translateY() CSS · Chapter 19
: CSS transform functions that move an element horizontally or vertically.
Type Scale CSS · Chapter 15 : A harmonious set of related font sizes, typically using a consistent ratio between steps.
Typeface CSS · Chapter 14 : A complete set of characters in a particular design (e.g., Garamond, Helvetica, Georgia).
U
Unordered List HTML · Chapter 4
: A list where order doesn't matter, using the <ul> element. Items appear as bullet points.
UTF-8 Encoding HTML · Chapter 2 : A character encoding standard that ensures special characters, accented letters, emoji, and symbols display correctly across browsers and systems.
Utility Layer CSS · Chapter 18
: In CUBE CSS, single-purpose reusable classes (.text-center, .visually-hidden) that override block styles.
Utopia CSS · Chapter 15 : A tool suite (utopia.fyi) that generates fluid type and space scales as custom properties based on your design parameters.
V
Value CSS · Chapter 10
: The setting applied to a CSS property (e.g., darkslateblue, 2rem, 1.5).
Viewport HTML/CSS · Chapter 3 : The visible area of the browser window, the rectangular space where content is displayed.
Viewport Width (vw) CSS · Chapter 15
: A CSS unit equal to 1% of the browser window's width. Used in fluid scaling calculations.
Visually Hidden HTML/CSS · Chapter 18 : A utility class that hides content visually but keeps it accessible to screen readers.