View source for CSS: Text

{{CSS}}

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:

<pre>selector{
     color: colorname;
}</pre>

where <i>colorname</i> represents the desired color of text. This either be <i>transparent</i>, 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:

<pre>selector{
     font-family: font1, font2,...;
}</pre>

where <i>font1, font2,...</i> 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 (<i>serif, sans-serif, monospaced, fantasy, cursive</i> must not be quoted.

== Text size ==

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

<pre>selector{
     font-size: size;
</pre>

where <i>size</i> represents the desired size. We can specify a size by using:

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

== Text thickness ==

We can even change the thickness of displayed text:

<pre>selector{
     font-weight: weight;
</pre>

where <i>weight</i> 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 (<i>lighter, bolder, inherit</i>), the first two of which use the next available weight and the last of which directly inherits from the parent element, the named keywords <i>normal, bold</i>, or the numeric values (the positive multiples of 100 up to 900, inclusive). If no font-weight is specified, <i>normal</i> is default.


[[Category: CSS]]