Tipos de letra e classes · Programa com Martin

Escolhe um tipo de letra adequado para o teu site e aprende sobre classes – o truque mais útil de todo o CSS.

Vou mostrar-te: um tipo de letra mais bonito

O tipo de letra predefinido do browser é aborrecido. Vamos trocá-lo com uma regra para toda a página:

body {
  font-family: Verdana, Arial, sans-serif;
}

font-family é uma lista de desejos: «Usa Verdana. Não tens? Então Arial. Também não? Então qualquer tipo sem serifa (sans-serif).»

Tipos de letra que quase todos os computadores têm: Verdana, Georgia (tem pezinhos, bom para texto mais longo), Trebuchet MS, Courier New (parece uma máquina de escrever). Experimenta alguns – mudar o tipo de letra faz maravilhas num site.

Vou mostrar-te: classes

Até agora podes estilizar todos os parágrafos de uma vez. Mas e se um parágrafo precisar de parecer diferente – como um aviso importante? É para isso que servem as classes:

No HTML, dá a uma etiqueta um nome de classe:

<p class="notice">No school tomorrow!</p>

E no CSS, aponta para ela com um ponto:

.notice {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

background-color – a cor de fundo só desse elemento
border – uma moldura: espessura, estilo, cor
padding – espaço entre o texto e a moldura (para o texto não ficar colado à borda)
border-radius – cantos arredondados

Podes pôr uma classe em quantos elementos quiseres – todos se vestem da mesma forma. É como um fato da escola, mas para etiquetas.

Agora és tu 💪

Define um tipo de letra para todo o teu site com font-family em body.
Inventa pelo menos uma classe que combine com o teu projeto e usa-a em dois sítios.

🏫 Site da escola – solução (classe «news»)

<p class="news">📢 No school on Friday – teacher training day!</p>
<p class="news">📢 Paper drive starts Monday.</p>

body {
  font-family: Verdana, Arial, sans-serif;
}

.news {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

🙋 Site pessoal – solução (classe «favorite»)

<p class="favorite">⭐ Favorite game: Minecraft</p>
<p class="favorite">⭐ Favorite food: pancakes</p>

body {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

.favorite {
  background-color: #ffedd5;
  border: 2px solid #ea580c;
  padding: 10px;
  border-radius: 8px;
}

🌍 Diário de viagens – solução (classe «tip»)

<p class="tip">🎒 Trip tip: head up the mountain early, before it gets hot.</p>
<p class="tip">🎒 Tip: bring water shoes to the beach!</p>

body {
  font-family: Georgia, "Times New Roman", serif;
}

.tip {
  background-color: #dcfce7;
  border: 2px solid #16a34a;
  padding: 10px;
  border-radius: 8px;
}

⚽ Site de clube – solução (classe «win»)

<li class="win">Eagles – Hawks 3 : 1</li>
<li>Falcons – Eagles 2 : 2</li>
<li class="win">Eagles – Wildcats 4 : 0</li>

body {
  font-family: Verdana, Arial, sans-serif;
}

.win {
  background-color: #dcfce7;
  font-weight: bold;
}

As vitórias ficam logo destacadas a verde – como numa classificação a sério!

✅

Verifica tu: O teu site tem um novo tipo de letra e pelo menos um elemento com a sua própria classe que parece diferente do resto.

O que ficas a saber desta lição

font-family em body muda o tipo de letra de todo o site.
Uma classe é uma etiqueta com nome: em HTML class="nome", em CSS .nome { ... }.
padding, border e border-radius transformam um parágrafo simples num distintivo colorido bonito.