I85PREP
⌘ K
LPI Web Dev Essentials study materials
LPI Web Dev Essentials study resources

LPI Web Dev Essentials: CSS Content Styling

LPI Web Dev Essentials · Work through your exam, one topic at a time.

All guide sections

CSS Content Styling

CSS Content Styling examines the cascade, the box model, selectors, and layout. The exam favors questions where you predict which rule wins or how large an element actually renders.

Cascade and specificity

  • Specificity is counted as (IDs, classes/attributes/pseudo-classes, elements/pseudo-elements); the higher score wins.
  • Equal specificity means the later rule wins. Inline styles beat selectors; !important beats both.
  • Inheritance passes text properties such as color and font-family, but not layout properties such as margin or border.

Box model and units

  • With content-box, the declared width covers content only; padding and border add to the rendered size.
  • box-sizing: border-box includes padding and border in the width.
  • em is relative to the element's font size, rem to the root font size; percentages depend on context, and vh/vw on the viewport.

Layout

  • Common display values are block, inline, inline-block, flex, grid, and none.
  • position may be static, relative, absolute, fixed, or sticky; absolute positions against the nearest positioned ancestor.
  • Flexbox arranges items in one dimension, grid in two; media queries adapt layout to viewport width.

Worked example

.card { width: 200px; padding: 10px; border: 2px solid; } under the default content-box renders 224px wide: 200 + 2×10 + 2×2. Adding box-sizing: border-box keeps the total at 200px and shrinks the content to 176px. Now compare #nav .item a:hover (1 ID, 2 classes, 1 element = 1-2-1) with .menu a (0-1-1): the ID selector wins regardless of source order.

Traps

Do not assume width includes padding, forget margin collapse between adjacent blocks, or use position: absolute without a positioned parent. Expecting z-index to work on static elements, confusing :hover with ::before, and reaching for !important are other frequent errors.