# Global CSS
**Warning!** Global css imports will **reset global elements**.
* [all](#all)
* [page](#page)
* [typography](#typography)
* [image](#image)
* [form](#form)

## all
Imports  [normalize](normalize.md) and all other global css.

```css
@import 'itp-css/global/all.css';
```

```javascript
import 'itp-css/global/all.css';
```

## page
Markup for page level elements.

```css
@import 'itp-css/global/page.css';
```

```javascript
import 'itp-css/global/page.css';
```
Will reset the styles of the following global elements:
```css
html, body, ::selection
```
Needs the following css custom properties to be defined:
```css
--htmlFontWeight
--htmlFontSize
--htmlLineHeight
--htmlFontFamily
--htmlBackgroundColor
--bodyColor
--bodySelectionBackgroundColor
--bodySelectionColor
--bodySelectionTextShadow
```

## typography
Markup for typographic elements.

```css
@import 'itp-css/global/typography.css';
```

```javascript
import 'itp-css/global/typography.css';
```
Will reset the styles of the following global elements:
```css
h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, table, address, blockquote, small, hr, a, a:visited, a:hover, a:focus, a:active
```
Needs the following css custom properties to be defined:
```css
--baseFontSize
--baseIndent
--baseLineHeight
--baseMarginBottom

--h1FontFamily
--h1FontSize
--h1FontWeight
--h1LineHeight
--h1MarginBottom

--h2FontFamily
--h2FontSize
--h2FontWeight
--h2LineHeight
--h2MarginBottom

--h3FontFamily
--h3FontSize
--h3FontWeight
--h3LineHeight
--h3MarginBottom

--h4FontFamily
--h4FontSize
--h4FontWeight
--h4LineHeight
--h4MarginBottom

--h5FontFamily
--h5FontSize
--h5FontWeight
--h5LineHeight
--h5MarginBottom

--h6FontFamily
--h6FontSize
--h6FontWeight
--h6LineHeight
--h6MarginBottom

--blockquoteFontSize
--blockquoteFontStyle
--blockquoteLineHeight
--blockquoteMarginBottom

--smallFontSize
--smallLineHeight
--smallMarginBottom

--horizontalRuleBorderColor
--horizontalRuleBorderStyle
--horizontalRuleBorderWidth
--horizontalRuleMarginBottom

--linkColor
--linkColorFocus
--linkColorHover
--linkColorVisited
--linkDecoration
--linkDecorationHover
--linkFontWeight
--linkOutline
--linkOutline-focus
--linkTransition
```

## image
Markup for image elements.

```css
@import 'itp-css/global/image.css';
```

```javascript
import 'itp-css/global/image.css';
```
Will reset the styles of the following global elements:
```css
img
```

## form
Markup for form elements.

```css
@import 'itp-css/global/form.css';
```

```javascript
import 'itp-css/global/form.css';
```
Will reset the styles of the following global elements:
```css
fieldset, legend, label, textarea, [placeholder], button, input[type='button'], input[type='submit']
```
Needs the following css custom properties to be defined:
```css
--fieldsetBorder
--fieldsetMarginBottom
--labelFontSize
--labelLineHeight
--labelMarginBottom
--legendFontSize
--legendLineHeight
--legendMarginBottom
--placeholderColor
--placeholderFontFamily
--placeholderFontStyle
```

---
[Back to overview](../README.md)