Passo 3

Instruções

Agora você começará a embelezar a página com um pouco de estilização CSS. Comece criando o seletor body. Defina o body para ter uma propriedade height com valor 100vh e uma propriedade background-color com valor #f0f0f0. A height de 100vh faz com que o body ocupe toda a altura da janela do navegador, enquanto a cor de fundo cinza claro fornece uma base sutil para a página. Por fim, defina a propriedade text-align com o valor center. Isso centralizará todo o conteúdo inline contido na página a menos que um elemento filho o substitua com seu próprio alinhamento.

O que fazer:

Testes:

Você deve usar o seletor de tipo `body`.
Você deve adicionar a propriedade `height` dentro do seletor de tipo `body`.
Você deve ter uma propriedade `height` com o valor `100vh`.
Você deve adicionar a propriedade `background-color` dentro do seletor do tipo `body`.
Você deve ter uma propriedade `background-color` com um valor de `#f0f0f0`.
Você deve adicionar a propriedade `text-align` dentro do seletor do tipo `body`.
Você deve ter uma propriedade `text-align` com o valor `center`.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Game Settings Panel</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
      <h1>Game Settings</h1>
      <label> <input type="checkbox" />Sound Effects</label>
      <label> <input type="checkbox" />Background Music</label>
      <label> <input type="checkbox" />Hard Mode</label>
      <label> <input type="checkbox" />Haptic feedback</label>
    </div>
  </body>
</html>

Preview