Lección 1: Introducción a CSS
¿Qué es CSS?
CSS significa "Cascading Style Sheets" (Hojas de Estilo en Cascada). Es un lenguaje de diseño utilizado para describir la presentación de un documento escrito en HTML o XML. CSS define cómo los elementos HTML deben ser renderizados en pantalla, papel u otros medios.
Historia de CSS
- CSS1: Publicado en 1996, introdujo las primeras propiedades básicas.
- CSS2: Publicado en 1998, agregó soporte para media types y más propiedades.
- CSS3: Dividido en módulos y publicado gradualmente desde 2011, introdujo muchas nuevas funcionalidades como flexbox, grid, animaciones, y más.
Sintaxis básica de CSS
La sintaxis básica de CSS consiste en un selector y un bloque de declaración:
selector {
propiedad: valor;
}
- Selector: Indica el elemento HTML que se va a estilizar.
- Propiedad: Define qué aspecto del elemento se va a cambiar.
- Valor: Especifica cómo se va a cambiar esa propiedad.
Veámoslo con un ejemplo concreto:
Regla
Una regla CSS es el conjunto de selector(es), llave de apertura, declaración(es), y llave de cierre.
Selector
El selector determina a qué elementos se aplicará la regla. En el ejemplo anterior, se aplica a todos los elementos p (párrafos). Los selectores pueden ser de muchos tipos, no solo elementos.
Es posible aplicar la misma regla a múltiples selectores al mismo tiempo, separándolos con comas:
p, h1 {
color: blue;
}
Bloque de declaraciones
Todo lo que está dentro de las llaves {} después de un selector se llama bloque de declaraciones. Este bloque contiene una o más declaraciones que especifican los estilos a aplicar al selector.
Declaraciones
Cada línea dentro del bloque de declaraciones que termina con un punto y coma ; es una declaración. Cada declaración consiste en una propiedad y un valor.
Componentes de una declaración
- Propiedad: Es el aspecto del elemento que se desea estilizar (por ejemplo, color, font-size, margin).
- Valor: Especifica cómo se debe estilizar esa propiedad (por ejemplo, red, 16px, 10px).
Nota: Aunque las propiedades y valores no distinguen entre mayúsculas y minúsculas, se recomienda escribirlos en minúsculas por convención.
Ejemplo con múltiples declaraciones:
p {
color: blue;
width: 620px;
}
Cómo vincular CSS a HTML
Hay tres formas principales de incluir CSS en un documento HTML:
1. CSS Interno (usando la etiqueta <style>)
<head>
<style>
p {
color: blue;
}
</style>
</head>
2. CSS en línea (usando el atributo style)
<p style="color: blue;">Este es un párrafo azul.</p>
3. CSS Externo (vinculando un archivo .css)
<head>
<link rel="stylesheet" href="estilos.css">
</head>
Esta última opción es generalmente la más recomendada para mantener una clara separación entre el contenido (HTML) y el diseño (CSS).
Ejercicio práctico
Ahora, es tu turno de practicar. Crea un archivo HTML simple y aplica estilos usando las tres formas de incluir CSS que hemos aprendido. Estiliza diferentes elementos como encabezados, párrafos y un div.
Para el caso del archivo externo: No es necesario que el archivo externo no exista, solo que pongas un vínculo valido de acuerdo a lo que aprendiste arriba.
Debes aplicar estilo al menos a un elemento usando CSS interno o CSS en línea. El resto de los estilos lo puedes aplicar usando el otro metodo.
Al ser solamente para practicar los timpos de inserción de estilos, puedes usar la misma declaración para todos.