CSS: Text

CSS

Basics - Backgrounds - Text - Box Model - Selectors and Combinators - Pseudo-class and Pseudo-element - Gradients - Animations and Transitions - CSS in AoPS - List of Elements

We can use CSS to modify the appearance of text.

Color

Inside of a CSS selector, we can change the color of text selected by the selector:

selector{
     color: colorname;
}

where colorname represents the desired color of text. This either be transparent, a predefined HTML color name, or specified using hexadecimal, rgb/rgba notation, or hsl/hsla notation.

Font

Inside of a CSS selector, we can also change the font that text is displayed in:

selector{
     font-family: font1, font2,...;
}

where font1, font2,... are font families. (It is acceptable, but not usually desired, to use only one font family.) At render time, the browser renders the text in the first available font. Named fonts must have their names quoted; the five "generic" fonts (serif, sans-serif, monospaced, fantasy, cursive must not be quoted.

Text size

We can additionally change the size that the text is displayed:

selector{
     font-size: size;

where size represents the desired size. We can specify a size by using:

• Absolute pixel sizes (e.g. 20px);
• Absolute keywords (one of xx-small, x-small, small, medium, large, x-large, xx-large - the medium size is default);
• Relative keywords (either smaller or larger), which depend on the font size of the parent HTML element;
• Relative percentages (e.g. 120% or 1.2em, which are equivalent), which are factors of the size of the parent HTML element;
• "Root relative" percentages (e.g. 1.2rem), which are factors of the font size of the entire HTML element.

Text thickness

We can even change the thickness of displayed text:

selector{
     font-weight: weight;

where weight represents the desired weight of the displayed text. This can either be a numeric value (if nonexistent within the text's font, the closest value is used instead) or an HTML keyword. Of the latter, there are the two relative keywords (lighter, bolder, inherit), the first two of which use the next available weight and the last of which directly inherits from the parent element, the named keywords normal, bold, or the numeric values (the positive multiples of 100 up to 900, inclusive). If no font-weight is specified, normal is default.