Fuentes y clases

Te lo muestro: una fuente más bonita

La fuente por defecto del navegador es aburrida. Cambiémosla con una regla para toda la página:

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

font-family es una lista de deseos: «Usa Verdana. ¿No la tienes? Entonces Arial. ¿Tampoco? Entonces cualquier fuente sans-serif (sans-serif).»

Fuentes que casi todo ordenador tiene: Verdana, Georgia (tiene patitas, buena para textos largos), Trebuchet MS, Courier New (parece una máquina de escribir). Prueba varias – cambiar la fuente hace maravillas en un sitio web.

Te lo muestro: las clases

Hasta ahora puedes estilizar todos los párrafos a la vez. Pero ¿y si un párrafo necesita verse diferente – como un aviso importante? Para eso sirven las clases:

En HTML, dale a una etiqueta un nombre de clase:

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

Y en CSS, apúntala con un punto:

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

• background-color – el color de fondo de solo ese elemento
• border – un marco: grosor, estilo, color
• padding – espacio entre el texto y el borde (para que el texto no quede pegado al borde)
• border-radius – esquinas redondeadas

Puedes poner una clase en tantos elementos como quieras – todos se vestirán igual. Es como un uniforme escolar, pero para etiquetas.

Ahora tú 💪

1. Define una fuente para todo tu sitio web usando font-family en body.
2. Inventa al menos una clase que encaje con tu proyecto y úsala en dos sitios.

<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;
}

<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;
}

<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;
}

<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;
}

Lo que te llevas de esta lección

• font-family en body cambia la fuente de todo el sitio web.
• Una clase es una etiqueta con nombre: en HTML class="nombre", en CSS .nombre { ... }.
• padding, border y border-radius convierten un párrafo simple en una bonita insignia de color.

© 2026 Ing. Martin Polak / AlgoRhino · Condiciones de uso del contenido