Hasta ahora, hemos aprendido a estructurar páginas con HTML, pero una página hecha solo con HTML se ve bastante simple. Para hacerla más atractiva, necesitamos CSS (Cascading Style Sheets, o Hojas de Estilo en Cascada).
Cómo aplicar estilos con CSS
Cada vez que queremos cambiar la apariencia de un elemento HTML, usamos una regla CSS. La estructura básica de una regla CSS es esta:
selector {
propiedad: valor;
}
Veamos qué significa cada parte:
- Selector: Indica a qué elementos HTML se aplicará el estilo.
- Propiedad: Especifica la característica que queremos cambiar (como el color o el tamaño del texto).
- Valor: Define el estilo específico que queremos aplicar.
Veamos un ejemplo:
p {
color: red;
font-size: 20px;
}
Aquí estamos diciendo:
- Que todos los
<p>(párrafos) de la página tendrán:- Un color de texto rojo.
- Un tamaño de fuente de 20 píxeles.
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Cómo conectar CSS con HTML
Hay dos maneras principales de agregar estilos a una página:
Lo mejor es escribir el CSS en un archivo separado.
- Crea un archivo llamado
estilos.css. - En tu archivo HTML, conecta el CSS usando la etiqueta
<link>dentro de<head>:html <head> <link rel="stylesheet" href="estilos.css"> </head> - Dentro de
estilos.css, escribimos nuestras reglas de estilo:
p {
color: blue;
font-size: 18px;
}
Esto hará que todos los párrafos tengan texto azul y una fuente de tamaño 18 píxeles.
style dentro del HTML (menos recomendado)
También podemos escribir CSS dentro de la etiqueta <style> en el mismo archivo HTML, aunque no es lo ideal:
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
Este método funciona, pero no es recomendable en proyectos grandes porque mezcla HTML y CSS, lo que hace que el código sea más difícil de organizar.
Propiedades Básicas en CSS
Vamos a ver algunas propiedades esenciales:
Puedes cambiar el color del texto usando la propiedad color.
p {
color: green; /* Cambia el color del texto a verde */
color: #ff0000; /* Cambia el color del texto a rojo en código hexadecimal */
}
greenes un color por nombre.#ff0000es un código hexadecimal que también representa el color rojo.
Para cambiar el tamaño de la letra, usamos la propiedad font-size.
p {
font-size: 24px; /* Ajusta el tamaño de la letra */
}
La propiedad text-align te permite alinear el texto de varias formas.
p {
text-align: left; /* Alineado a la izquierda */
text-align: center; /* Centrado */
text-align: right; /* Alineado a la derecha */
text-align: justify; /* Justificado */
}
La propiedad font-weight te permite definir el grosor del texto. Puedes usar palabras clave como normal o bold, o valores numéricos que van desde 100 (muy delgado) hasta 900 (muy grueso).
p {
font-weight: normal; /* Peso normal */
font-weight: bold; /* Negrita */
font-weight: 100; /* Muy delgado */
font-weight: 900; /* Muy grueso */
}
Resumen
- CSS sirve para mejorar la apariencia de una página web.
- Se escribe con la estructura
selector { propiedad: valor; }. - Se recomienda usar archivos
.cssexternos. - Algunas propiedades básicas incluyen
color,font-size,text-align,font-weight, con múltiples opciones.
