css: cascading style cheatsheet 🤓

background

CSS Properties	Values	Explanation
background-color	<color>	The uniform color of the background. It is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image.
background-image	none	Is a keyword denoting the absence of images.
	<image>	Is an <image> denoting the image to display. There can be several of them, separated by commas, as multiple backgrounds are supported.
background-size	contain	Scales the image as large as possible within its container without cropping or stretching the image. If the container is larger than the image, this will result in image tiling, unless the <background-repeat> property is set to no-repeat.
	cover	Scales the image as large as possible to fill the container, stretching the image if necessary. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.
	auto	Scales the background image in the corresponding direction such that its intrinsic proportions are maintained.
	<length>	Stretches the image in the corresponding dimension to the specified length. Negative values are not allowed.

color

Properties	Values	Explanation
color	<color>	Sets the color of the textual and decorative parts of the element.
color-adjust	economy	The user agent is allowed to make adjustments to the element as it deems appropriate and prudent in order to optimize the output for the device it's being rendered for. For example, when printing, a browser might opt to leave out all background images and to adjust text colors to be sure the contrast is optimized for reading on white paper. This is the default.
	exact	The element's content has been specifically and carefully crafted to use colors, images, and styles in a thoughtful and/or important way, such that being altered by the browser might actually make things worse rather than better. The appearance of the content should not be changed except by the user's request. For example, a page might include a list of information with rows whose background colors alternate between white and a light grey. Removing the background color would decrease the legibility of the content.
opacity	<alpha-value>	A <number> in the range 0.0 to 1.0, inclusive, or a <percentage> in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range.

display

Data Types	Syntax	Explanation
<display-outside>	block	The element generates a block element box, generating line breaks both before and after the element when in the normal flow.
	inline	The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.
<display-inside>	flow	The element lays out its contents using flow layout (block-and-inline layout). If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.
	flow-root	The element generates a block element box that establishes a new block formatting context, defining where the formatting root lies.
	table	These elements behave like HTML table elements. It defines a block-level box.
	flex	The element behaves like a block element and lays out its content according to the flexbox model.
	ruby	The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML ruby elements.

fonts

Properties	Value	Explanation
font-family	<family-name>	The name of a font family. For example, "Times" and "Helvetica" are font families. Font family names containing whitespace should be quoted. For example: "Comic Sans MS".
	<generic-name>	Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent when none of the specified fonts are available. Generic family names are keywords and must not be quoted. A generic font family should be the last item in the list of font family names.
font-size	<length>	A positive <length> value. For most font-relative units (such as em and ex), the font size is relative to the parent element's font size. For font-relative units that are root-based (such as rem), the font size is relative to the size of the font used by the <html> (root) element.
	<percentage>	A positive <percentage> value, relative to the parent element's font size.
font-stretch	normal	Specifies a normal font face.
	<percentage>	A <percentage> value between 50% and 200% (inclusive). Negative values are not allowed for this property.
	ruby	The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML ruby elements.

text

Properties	Value	Explanation
letter-spacing	normal	The normal letter spacing for the current font. Unlike a value of 0, this keyword allows the user agent to alter the space between characters in order to justify text.
	<length>	Specifies extra inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.
line-break	auto	Break text using the default line break rule.
	loose	Break text using the least restrictive line break rule. Typically used for short lines, such as in newspapers.
	normal	Break text using the most common line break rule.
	strict	Break text using the most stringent line break rule.
tab-size	<integer>	A multiple of the advance width of the space character (U+0020) to be used as the width of tabs. Must be nonnegative.
	<length>	The width of tabs. Must be nonnegative.