CSS properties reference

Every CSS property htmlbag reads, with the values it accepts. The list is generated from the code, so it is complete for the htmlbag version the site documents. Both bagme and glu render through htmlbag and support the same set. How stylesheets reach the renderer, and the reasoning behind page rules, counters and running elements, is on the CSS support page.

Lengths take pt, mm, cm, in, px, pc, em, rem, ex and ch. Percentages are relative to the font size or the containing block as in CSS. Colors are CSS colors (#rgb, #rrggbb, rgb(), named colors) or a name defined with @-bag-color.

Text

Property	Values	Example
font-family	Font family name or a comma separated list. A list falls back per glyph, the first family that has the glyph renders it	font-family: "Minion Pro", serif;
font-size	Length, em, %, the keywords xx-small to xxx-large, smaller and larger	font-size: 12pt;
font-weight	normal, bold, bolder, lighter, the names thin to black, or a number from 100 to 900	font-weight: 600;
font-style	normal, italic. oblique is not recognized	font-style: italic;
font	Shorthand: optional font-style and font-weight, then the size with an optional /line-height, then the family. Style, weight and line height reset to normal when omitted, as in CSS. Size and family are required	font: italic bold 10pt/12pt serif;
font-feature-settings	Comma separated OpenType feature tags, each optionally followed by on, off or a number. normal removes all features	font-feature-settings: "smcp", "onum";
font-variation-settings	Comma separated pairs of an axis tag and a number, for variable fonts	font-variation-settings: "wght" 650;
color	Color value or a defined color name	color: #333;
text-align	left, right, center, justify, start, end	text-align: justify;
text-indent	Length, indents the first line	text-indent: 1em;
text-decoration	Shorthand for line, style and color	text-decoration: underline dotted red;
text-decoration-line	none, underline, overline, line-through	text-decoration-line: underline;
text-decoration-style	solid, double, dotted, dashed, wavy	text-decoration-style: wavy;
text-decoration-color	Color value	text-decoration-color: red;
line-height	normal, a number (factor of the font size) or a length	line-height: 1.4;
letter-spacing	normal or a length	letter-spacing: 0.05em;
white-space	normal, nowrap, pre, pre-wrap, pre-line	white-space: pre;
hyphens	auto, manual, none. manual and none both switch the language patterns off, soft hyphens (U+00AD) stay break opportunities	hyphens: none;
hanging-punctuation	none, allow-end	hanging-punctuation: allow-end;
vertical-align	baseline, sub, super, top, text-top, middle, bottom, text-bottom, a length or a percentage of the line height	vertical-align: super;
direction	ltr, rtl	direction: rtl;
unicode-bidi	normal, embed, isolate, bidi-override, isolate-override, plaintext	unicode-bidi: isolate;
tab-size	Number of spaces or a length	tab-size: 4;
initial-letter	Number of lines for a drop cap, or normal, see Dropcaps	initial-letter: 3;
user-select	Any value. Accepted and ignored, there is no selection in PDF	user-select: none;

Box model

Property	Values	Example
margin	One to four lengths, shorthand for the four sides	margin: 10pt;
margin-top, margin-right, margin-bottom, margin-left	Length	margin-top: 12pt;
padding	One to four lengths, shorthand for the four sides	padding: 5pt 10pt;
padding-top, padding-right, padding-bottom, padding-left	Length	padding-left: 10pt;
padding-inline-start	Length. Maps to padding-left for ltr and to padding-right for rtl	padding-inline-start: 2em;
width	Length or percentage, on blocks, images and table cells	width: 100%;
height	Length, on blocks and images	height: 4cm;
max-width	Length or percentage, on images	max-width: 100%;
background-color	Color value, painted on block elements, inline elements and table cells	background-color: #ffffcc;
background	Shorthand, only the color is read	background: #ffffcc;
display	block, inline, none. Other values are ignored, the table parts follow from the HTML tags	display: none;

Borders

Property	Values	Example
border	Width, style and color in any order, all four sides	border: 1pt solid black;
border-top, border-right, border-bottom, border-left	Width, style and color for one side	border-top: 2pt solid red;
border-width	One to four lengths or thin, medium, thick	border-width: 1pt 0;
border-style	One to four border styles	border-style: solid none;
border-color	One to four colors	border-color: red black;
border-top-width, border-right-width, border-bottom-width, border-left-width	Length	border-left-width: 3pt;
border-top-style, border-right-style, border-bottom-style, border-left-style	none, solid. Every other CSS border style is drawn as solid	border-left-style: solid;
border-top-color, border-right-color, border-bottom-color, border-left-color	Color value	border-left-color: red;
border-radius	One length, the same for all four corners. Several values, one per corner, are not supported	border-radius: 3pt;
border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius	Length	border-top-left-radius: 3pt;
border-collapse	separate (the default, as in CSS), collapse; on tables	border-collapse: collapse;
border-spacing	One or two lengths, on tables in the separated model; the default is 2pt	border-spacing: 4pt 2pt;

Layout

Property	Values	Example
float	left, right, none; top (or before) and bottom (or after) lift the element out of the flow to the top or bottom of the page, see Inserts	float: right;
clear	left, right, both, none	clear: both;
position	static, relative, absolute, running(name) for running elements that repeat in page margin boxes. fixed and sticky are not supported	position: absolute;
top, right, bottom, left	Length or auto, with position	top: 1cm;
z-index	Integer or auto, with position	z-index: 1;
page-break-before, break-before	auto, always, avoid; break-before also takes page, left, right, recto, verso. The page side variants break the page but do not pick a side	page-break-before: always;
page-break-after, break-after	Same values as page-break-before	page-break-after: avoid;
page-break-inside, break-inside	auto, avoid	page-break-inside: avoid;

Lists and generated content

Property	Values	Example
list-style-type	disc, circle, square, none, decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-latin, upper-latin, lower-roman, upper-roman, lower-greek	list-style-type: lower-roman;
list-style	Shorthand for list-style-type and list-style-position	list-style: square;
list-style-position	inside, outside. Accepted for compatibility, markers are always placed outside	list-style-position: outside;
counter-reset	Counter name with an optional start value, repeated for several counters	counter-reset: section;
counter-increment	Counter name with an optional step, repeated for several counters	counter-increment: section;
content	On ::before, ::after, ::marker and in page margin boxes: strings, attr(), counter(), counters(), target-counter(), target-counters(), target-text(), element(), leader(). The counter functions take a counter style as their last argument, see Cross-references for the target functions	content: counter(section, upper-roman) ". ";

Custom properties

Property	Values	Example
-bag-font-expansion	Percentage of allowed glyph stretching, 0% turns it off	-bag-font-expansion: 0%;
-bag-italic-correction	auto, none	-bag-italic-correction: none;
-bag-leading-model	half (CSS line boxes, the default), trailing (TeX style)	-bag-leading-model: trailing;
-bag-linebreak-tolerance	Number, the TeX tolerance for line breaking	-bag-linebreak-tolerance: 500;
-bag-linebreak-hyphen-penalty	Number, the TeX hyphen penalty	-bag-linebreak-hyphen-penalty: 200;
-bag-bookmark	none, or a level number optionally followed by open or closed, see PDF bookmarks. Adds the element to the PDF outline	-bag-bookmark: 2 closed;

Selectors

The CSS3 selector grammar is supported, see selector support.

@-rules

@page

Sets the page geometry. The pseudo-classes :first, :left and :right cascade over the plain @page rule, see per-page rules.

Property	Values	Example
size	A paper name (a0 to a8, b0 to b8, jis-b4, jis-b5, letter, legal, ledger) with optional portrait or landscape, or width and height as two lengths	size: a4 landscape;
margin	One to four lengths, the page margins	margin: 2cm 1.5cm;
margin-top, margin-right, margin-bottom, margin-left	Length, one page margin	margin-left: 3cm;
border, border-top, border-right, border-bottom, border-left, border-width, border-style, border-color, border-radius	As on elements, drawn around the page content area on every page	border-left: 4pt solid navy;
padding, padding-top, padding-right, padding-bottom, padding-left	Length, space between the page border and the content	padding: 5mm;
background-color	Color value, fills the sheet. Painted on the first page only	background-color: #fafafa;
background-image	url() of an image or PDF file, scaled to the full sheet on every page that uses this @page rule	background-image: url("letterhead.pdf");
-bag-background-page	Page number of a multi page PDF used as background-image, the default is 1	-bag-background-page: 2;

The margin boxes @top-left-corner, @top-left, @top-center, @top-right, @top-right-corner, @left-top, @left-middle, @left-bottom, @right-top, @right-middle, @right-bottom, @bottom-left-corner, @bottom-left, @bottom-center, @bottom-right and @bottom-right-corner are nested in the @page rule. They take content, width, height and the text and border properties above, see page margin boxes.

@font-face

Defines a font face. The descriptors are:

Property	Values	Example
font-family	The name the font is used by	font-family: "Minion Pro";
font-style	normal, italic	font-style: italic;
font-weight	A weight name or number, or two of them for the range a variable font covers	font-weight: 300 700;
src	Comma separated list of url() or local() sources, each optionally followed by format() and tech()	src: url("minion.otf");
font-feature-settings	OpenType features switched on for this face, as on elements	font-feature-settings: "onum";
font-variation-settings	Axis values of a variable font, as on elements	font-variation-settings: "wght" 450;
size-adjust	Percentage that scales the glyphs of this face	size-adjust: 95%;

@-bag-color

Defines a named color, see named colors. The color name follows the at-rule, the descriptors are:

Property	Values	Example
model	cmyk, rgb, RGB, gray, GRAY, spotcolor. Upper case RGB and GRAY take components from 0 to 255, lower case from 0 to 100	model: cmyk;
value	A CSS color such as #ff0000 or rgb(255, 0, 0), used instead of a model with components	value: #c00;
colorname	Name of the separation for a spot color	colorname: PANTONE 300 C;
c, m, y, k, r, g, b	Number, one component of the chosen model	c: 100;