Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Units: rem (root em)

Relative to the font-size of the html element.

<html>
<head>
  <meta name="viewport"
     content="width=device-width, initial-scale=1, user-scalable=yes">
  <title>Text units - px</title>
  <link href="page_rem.css" rel='stylesheet' />
</head>
<body>
<h1>My Title</h1>
<p>This is the paragraph of our page.</p>
<div class="separator">
</div>

</body>
</html>


html {
   font-size: 10px;
}

.separator {
    width: 100%;
    height: 10rem;
    background-color: blue;
}

h1 {
   font-size: 3rem;
}

p {
   font-size: 2rem;
   /*border: 1rem solid red;*/
}

@media screen and (min-width: 800px) {
    html {
        font-size: 15px;
    }
    h1 {
        text-align: center;
    }
    p {
        text-align: center;
   }
}