# Opstart HTML & CSS
###### tags: `MG` `GF2`

:::info
:beginner: wrapper, Google Fonts, CSS fattigmands reset og font-size udregning
:::

## Wrapper

Bruges når layout forslaget er begrænset til en bredde

Det er en `<div class="wrapper">` som får defineret en bredde i css.

.wrapper{
    width: 1080px;
}

## Google Fonts

Først skal der findes de rigtige fonte på [Google Fonts](https://fonts.google.com)

Så skal der i toppen af css dokumentet indsættes:
Husk at slette `<style>` tagget :rolling_on_the_floor_laughing:

Dernæst skal "reglen" kopieres ind så fonten/skrifttypen kan bruges på websitet:


Hvilket fører os videre til

## "Fattigmandsreset"

*{
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

Når man benytter * reglen så vil alle elementer der loades på siden starte med disse egenskaber. Så det er bl.a. derfor man skriver px til font størrelsen. Så man senere kan gange op når man skal bruge de relative enheder. Såsom rem, em og % for den sags skyld.

En hurtig relation er at rem vil være det samme som x-højde i trykte produktioner.

## Øvelse - Font Størrelse

Du får givet følgende tal på dine H1, H2, H3 og p tags.
- h1 == 90px
- h2 == 65px
- h3 == 50px
- p == 16px

Hvad bliver størrelserne i rem for h1, h2 og h3?