CSS properties: Text · Font · Background
Examples below show common properties you will use often. Each example is annotated by the class name used.
Text properties
color: Sets the text color. (class
This paragraph uses the
.txt-color)This paragraph uses the
color property to make text blue.
text-align: Align text horizontally. (class
This block is centered using
.txt-align-center)This block is centered using
text-align:center.
text-decoration: Underline, overline, strike-through or dotted/ wavy styles.
Here we used a dotted underline and changed its color/ thickness.
Here we used a dotted underline and changed its color/ thickness.
text-transform: change case. (class
THIS TEXT IS UPPERCASE USING
.txt-transform)THIS TEXT IS UPPERCASE USING
text-transform: uppercase.
line-height: The space between lines. (class
This paragraph uses a larger line-height to improve readability for blocks of text.
.txt-lineheight)This paragraph uses a larger line-height to improve readability for blocks of text.
letter-spacing: Space between letters. (class
THIS TEXT HAS MORE GAP BETWEEN CHARACTERS.
.txt-letter)THIS TEXT HAS MORE GAP BETWEEN CHARACTERS.
word-spacing: Space between words. (class
Words are spaced further apart here.
.txt-word)Words are spaced further apart here.
text-shadow: Adds shadow to text for depth. (class
Subtle shadow improves contrast on pale backgrounds.
.txt-shadow)Subtle shadow improves contrast on pale backgrounds.
Font properties
font-family: Choose font stack. (class
This sample uses a serif stack (Georgia, Times).
.font-family-slab)This sample uses a serif stack (Georgia, Times).
monospace fonts: Useful for code and aligned text. (class
Monospace text keeps fixed character widths.
.font-family-mono)Monospace text keeps fixed character widths.
font-size: Control text size. (class
Larger font for headings or important calls-to-action.
.font-size-xxl)Larger font for headings or important calls-to-action.
font-style & font-weight: Italic vs bold. (classes
Use
.font-style-italic, .font-weight-700)Use
font-style for emphasis and font-weight for visual weight.
font-variant: Small-caps (typographic effect). (class
Small-caps present a formal typographic style.
.font-variant-smallcaps)Small-caps present a formal typographic style.
Background properties
background-color: Solid background. (class
Use to create contrast behind text (accessibility tip: ensure sufficient contrast).
.bg-solid)Use to create contrast behind text (accessibility tip: ensure sufficient contrast).
background (gradient): Smooth color transitions. (class
Great for soft visual accents.
.bg-gradient)Great for soft visual accents.
background-image + repeat + position + size: Patterned backgrounds using SVG data-URL. (class
Data-URL avoids external images and is useful in single-file demos.
.bg-pattern)Data-URL avoids external images and is useful in single-file demos.
background-size: cover / background-attachment: fixed
Use
Use
cover to ensure large background covers container; fixed creates parallax-like effect.