Exemplo de folha de estilo

Aqui está o código para a estrutura de folha de estilo que usamos no livro para destacar as várias partes de uma página web. Copia-o e cola-o para ires acompanhando o exemplo. Podes alterar as cores, se quiseres – assegura-te apenas de que todas as cores são diferentes, para poderes distinguir as diferentes partes da página.


/* coisas técnicas – definir o dimensionamento das caixas
   como incluindo não apenas o seu conteúdo, mas também o
   seu enchimento e a sua borda */ 

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* estilizar os vários elementos estruturais */

html {
  background-color: Gray; 
}

body {
  background-color: White;
}

header {
  background-color: #F45556;
}

nav {
  background-color: #FFCAB68;
} 

article {
  background-color: #FFD239;
}

section {
  background-color: #88BB75;
} 

aside {
  background-color: #1EADDF;
}

footer {
  background-color: #BA99C0;
}