Appendix: CSS Property Reference

This section documents general HTML5 and CSS concepts — it is not tied to any specific framework or library. This content was generated with the assistance of AI. Verify it against current MDN documentation and browser-support tables (caniuse.com) before relying on it in production, since HTML/CSS features and browser support continue to evolve.

This appendix is a quick-reference table of everyday CSS properties, grouped by purpose. Cross-check anything here against MDN’s CSS reference before relying on it in production. It is scoped to the everyday properties not already covered in depth by other pages in this section: layout (display: flex/grid internals, positioning) is covered in Layout: Float, Flexbox & Grid, the box model (margin, padding, width/height, box-sizing, borders as layout boxes) is covered in The Box Model, selectors and the cascade are covered in Selectors & Specificity, custom properties and media queries are covered in CSS Custom Properties and Media Queries, and transitions/animations are covered in CSS Transitions and CSS Animations, Keyframes & Performance. What remains here is typography, color and background, border/visual-effect properties, display-value/overflow/visibility behavior, list styling, and cursor. For the authoritative specifications, see the W3C CSS specifications.

Typography

font-family

MDN reference: font-family

font-family sets a prioritized, comma-separated list of font names for an element’s text. The browser uses the first listed font it has available, falling back to the next in line — the last entry should generally be a generic family (serif, sans-serif, monospace, and similar) so there is always a fallback even if none of the named fonts are installed.

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

font-size

MDN reference: font-size

font-size sets the size of an element’s text, accepting absolute units (px), relative units (em, rem), or viewport-relative units (vw).

h1 {
  font-size: 2rem;
}

p {
  font-size: 16px;
}

font-weight

MDN reference: font-weight

font-weight sets the boldness of text, either as a keyword (normal, bold) or a numeric value from 100 (thinnest) to 900 (boldest) — numeric values give finer control when a font family ships multiple weights.

strong {
  font-weight: bold;
}

.subheading {
  font-weight: 600;
}

line-height

MDN reference: line-height

line-height sets the height of a line box, which controls the vertical spacing between lines of text. A unitless value (such as 1.5) is generally preferred over a fixed length, since it scales proportionally with the element’s own font-size rather than staying fixed.

p {
  line-height: 1.5;
}

text-align

MDN reference: text-align

text-align sets the horizontal alignment of inline content (text and inline elements) within its containing block.

.centered-heading {
  text-align: center;
}

blockquote {
  text-align: justify;
}

text-decoration

MDN reference: text-decoration

text-decoration adds or removes decorative lines on text, most commonly used to remove the default underline from links or add an underline/strikethrough elsewhere.

a {
  text-decoration: none;
}

.discounted-price {
  text-decoration: line-through;
}

text-transform

MDN reference: text-transform

text-transform changes the capitalization of text at render time without altering the underlying markup.

.section-label {
  text-transform: uppercase;
}

letter-spacing

MDN reference: letter-spacing

letter-spacing adds (or, with a negative value, removes) extra horizontal space between characters.

.tracking-wide {
  letter-spacing: 0.05em;
}

Color and background

background-color

MDN reference: background-color

background-color sets the solid background color painted behind an element’s content and padding (and its border area, unless background-clip says otherwise).

.card {
  background-color: #f5f5f5;
}

background-image

MDN reference: background-image

background-image sets one or more images (or gradients) to paint behind an element’s content, layered on top of any background-color and layered with each other in the order listed, first on top.

.hero {
  background-image: url("hero-banner.jpg");
}

.gradient-card {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}

background-position

MDN reference: background-position

background-position sets where a background-image is placed within its background positioning area, accepting keywords (center, top left) or length/percentage offsets.

.hero {
  background-image: url("hero-banner.jpg");
  background-position: center top;
}

background-size

MDN reference: background-size

background-size sets the rendered size of a background-image, either as explicit lengths/percentages or the keywords cover (scale to fully cover the element, cropping if needed) and contain (scale to fit entirely within the element).

.hero {
  background-image: url("hero-banner.jpg");
  background-size: cover;
}

background-repeat

MDN reference: background-repeat

background-repeat controls whether and how a background-image tiles when it is smaller than its background area.

.tile-pattern {
  background-image: url("pattern.png");
  background-repeat: repeat;
}

.icon-background {
  background-image: url("watermark.png");
  background-repeat: no-repeat;
}

opacity

MDN reference: opacity

opacity sets the transparency of an entire element — including its content, background, and border — as a value from 0 (fully transparent) to 1 (fully opaque). Unlike a transparent color value, opacity affects every descendant as a group and cannot make one part of the element more transparent than another.

.disabled-button {
  opacity: 0.5;
}

Borders and visual effects

border-radius

MDN reference: border-radius

border-radius rounds an element’s corners, accepting one value (all four corners) or up to four values (top-left, top-right, bottom-right, bottom-left).

.card {
  border-radius: 8px;
}

.pill-button {
  border-radius: 999px;
}

box-shadow

MDN reference: box-shadow

box-shadow adds one or more drop shadows around an element’s border box, specified as horizontal offset, vertical offset, optional blur radius, optional spread radius, and color.

.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

outline

MDN reference: outline

outline draws a line around an element, outside its border, that does not participate in the box model (it does not affect layout or take up space). It is most commonly seen on the default browser focus indicator, and should be overridden rather than removed outright for accessibility reasons.

.custom-focus:focus-visible {
  outline: 2px solid dodgerblue;
  outline-offset: 2px;
}

filter

MDN reference: filter

filter applies graphical effects — blur, brightness, contrast, grayscale, and more — to an element before it is composited onto the page.

.thumbnail:hover {
  filter: brightness(1.1);
}

.decorative-icon {
  filter: grayscale(100%);
}

Display and overflow

display (values overview)

MDN reference: display

display sets an element’s fundamental rendering behavior. This appendix only summarizes the common values; flex and grid layout mechanics are covered in detail in Layout: Float, Flexbox & Grid.

block — the element generates a block-level box: it starts on its own line and stretches to fill the available width by default (div, p, section are block by default).
inline — the element flows within surrounding text, does not start on a new line, and ignores explicit width/height (span, a, strong are inline by default).
inline-block — flows inline like inline, but accepts width, height, and vertical margin/padding like block.
flex / inline-flex — establishes a flex formatting context for the element’s children; see Layout: Float, Flexbox & Grid.
grid / inline-grid — establishes a grid formatting context for the element’s children; see Layout: Float, Flexbox & Grid.
none — removes the element from rendering entirely, as if it were not in the document (it takes up no space and is not reachable by screen readers).

.badge {
  display: inline-block;
  padding: 2px 8px;
}

.visually-removed {
  display: none;
}

visibility

MDN reference: visibility

visibility hides an element while still reserving its layout space, unlike display: none, which removes the space entirely.

.placeholder-until-loaded {
  visibility: hidden;
}

overflow

MDN reference: overflow

overflow controls how content that does not fit an element’s box is handled — clipped, scrollable, or left to spill out. overflow-x and overflow-y set the behavior per axis independently.

.scroll-panel {
  overflow: auto;
  max-height: 300px;
}

.clip-container {
  overflow: hidden;
}

Lists

list-style

MDN reference: list-style

list-style is a shorthand controlling how <li> markers are rendered: the marker type (list-style-type, e.g. disc, decimal, none), an optional custom marker image (list-style-image), and marker position (list-style-position, inside or outside).

.plain-list {
  list-style: none;
}

.custom-bullets {
  list-style: square inside;
}

Miscellaneous

cursor

MDN reference: cursor

cursor sets which mouse cursor is shown when the pointer is over an element, communicating whether it is clickable, disabled, resizable, and so on.

.clickable-card {
  cursor: pointer;
}

.disabled-button {
  cursor: not-allowed;
}