# CSS Text Styles

## Font family

```css
h1 {
  font-family: Roboto;
}
```

The **font-family** property can have sans-serif, serif, cursive, monospace (typewriter-like characters, all with the same width) or the name of a specific font family (e.g. Roboto, "Open Sans", "Happy Monkey", Nunito, Poppins) as values.

## Font size

```css
h1 {
  font-size: 2rem;
}
```

The value of **font-size** property can be provided in the following units: px (pixel), em (related to the nearest parent element with a custom font size) or rem (root em, related to the font size of root - html - element, equals to 16px if not provided).

The best practice is to provide root font size in px and other custom font sizes in rem. See the [global styles of this website](https://codeberg.org/FosseryWeb-Min/pages/src/branch/main/-css/style.css) (line 16).

## Font color

```css
h1 {
  color: grey;
}
```

The **color** (not font-color!) property can be provided with the English name (black, grey, green, yellow etc.), RGB/RGBA code (e.g. rgb(0, 255, 0) or rgba(0, 255, 0, 0.7)), HEX code (e.g. #00ff00 or #00ff0011) or HSL/HSLA code (e.g. hsl(120, 255, 255) or hsla(120, 255, 255, 0.7)) of a color.

## Font weight

```css
h1 {
  font-weight: bold;
}
```

The **font-weight** property can be provided with bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 values.

> **Note**: font families from external sources (e.g. [Brick](https://brick.im/fonts/)) have to be imported in multiple different font weights, otherwise the font-weight property will have no effect. E.g. if you want to use a font family with 300 and 600 weight you have to import both versions.

## Italic fonts

```css
h1 {
  font-style: italic;
}
```

Or:

```css
h1 {
  font-style: oblique 69deg;
}
```

The **font-style** property can have the values normal (default), italic and oblique + number of degrees between -90 and 90 (if the number is positive text will be slanted to right, if negative it will be slanted to left).

## Underline, overline, line-through

```css
h1 {
  text-decoration: underline double;
}
```

The **text-decoration** property can have one or two values. The first one can be none (default), underline, overline or line-through. The second one (line type, optional) can be solid (default), double, dotted, dashed or wavy.

## Uppercase/lowercase transformations

```css
h1 {
  text-transform: uppercase;
}
```

The **text-transform** property can have the values lowercase, uppercase and capitalize.

## Line height

```css
h1 {
  line-height: 1.5;
}
```

The value of **line-height** can be an integer or decimal number. Default value is 1.