CSS support

CSS support

htmlbag uses csshtml to match stylesheet rules against the DOM. CSS applies through three sources, in order of increasing specificity:

  1. <style> blocks in <head>.
  2. <link rel="stylesheet" href="…"> external files.
  3. Inline style="…" attributes.

Recognised properties

Box model

width, height, margin, margin-{top,right,bottom,left}, padding, padding-{top,right,bottom,left}, border, border-{top,right,bottom,left}, border-width, border-style, border-color, border-radius, box-sizing.

Typography

font-family, font-size, font-weight, font-style, text-align, text-indent, text-decoration, line-height, color, letter-spacing, word-spacing, text-transform, white-space.

Backgrounds

background-color, background-image, background.

Page-level layout

@page rules support size (named like A4 or explicit <width> <height>) and margin / margin-{top,right,bottom,left}.

Insert positioning

float: top | before | bottom | after — see inserts. The standard CSS float: left | right (side floats with text wrap) is not supported.

Display

display: none hides an element entirely.

Selector support

csshtml uses cascadia for selector parsing, so all CSS3 selectors that cascadia accepts are supported: type, class, id, attribute, descendant, child, sibling, pseudo-class. CSS-counters (counter-increment, counter-reset, content: counter(…)) are available for things like figure numbering.

What’s resolved when

CSS is fully resolved before htmlbag walks the DOM — by the time CSSBuilder.OutputPages runs, every element carries its computed properties in HTMLItem.Styles (a map[string]string). This means selector matches and class-driven rules are picked up; you do not need to inline styles to make them visible to htmlbag’s detection.