En esta segunda clase, nos sumergiremos en el corazón de CSS: su sintaxis.
Entender la sintaxis básica de CSS es fundamental para cualquier desarrollador web. A través de ella, podemos controlar cómo se presentan los elementos HTML en la página web.
Profundizaremos en las reglas, selectores, propiedades, valores y cómo todo esto se combina para crear páginas web estéticamente agradables y funcionales.
¿Qué son las Reglas CSS?
Una regla CSS es un conjunto de instrucciones que aplicamos a elementos específicos o grupos de elementos en una página HTML. Cada regla consta de dos partes principales: un selector y un bloque de declaración.
Selector
El selector es la parte de la regla que determina a qué elementos del documento HTML se aplicarán las declaraciones de estilo.
Puede referirse a un tipo de etiqueta HTML, como p para párrafos, o puede ser más específico, como una clase o un ID.
Bloque de Declaración
Este bloque está encerrado entre llaves { } y contiene una o más declaraciones separadas por punto y coma.
Cada declaración incluye una propiedad de CSS y un valor separados por dos puntos.
Ejemplo de una Regla CSS
p {
color: red;
font-size: 14px;
}En este ejemplo, p es el selector, y las declaraciones son color: red; y font-size: 14px;. Esto significa que todos los párrafos (<p>) en el documento HTML tendrán texto de color rojo y un tamaño de fuente de 14 píxeles.
Tipos de Selectores en CSS
Los selectores son esenciales en CSS, ya que nos permiten apuntar a diferentes elementos en una página HTML. Existen varios tipos de selectores:
Selectores de Tipo
Seleccionan todos los elementos de un tipo específico.
Ejemplo: div, h1, p.
Selectores de Clase
Utilizan un punto . seguido de un nombre de clase y seleccionan todos los elementos que tienen esa clase.
Ejemplo: .mi-clase.
Selectores de ID
Utilizan un símbolo de almohadilla # seguido de un ID y seleccionan el elemento con ese ID específico.
Ejemplo: #mi-id.
Selectores de Atributo
Seleccionan elementos basados en un atributo y su valor.
Ejemplo: [type=”text”].
Selectores Pseudo-clases y Pseudo-elementos
Seleccionan elementos en un estado específico o partes específicas de un elemento.
Ejemplo: :hover, ::after.
Propiedades y Valores en CSS
Cada declaración dentro de un bloque de declaración consta de una propiedad y un valor. La propiedad es un tipo de característica de estilo que queremos modificar (como font-size, color, margin), y el valor es la configuración que asignamos a esa propiedad.
Ejemplo de Propiedad y Valor
body {
background-color: lightblue;
}Aquí, background-color es la propiedad, y lightblue es el valor asignado a esa propiedad.
Combinando Selectores y Declaraciones
Podemos combinar selectores y declaraciones para crear reglas más complejas y específicas. Esto nos permite aplicar estilos precisos a elementos específicos en nuestra página web.
Ejemplo de Combinación de Selectores
#encabezado .titulo {
font-weight: bold;
color: navy;
}Este código aplicará los estilos font-weight: bold; y color: navy; a cualquier elemento con la clase .titulo dentro del elemento con el ID #encabezado.
Herencia y Cascada en CSS
La herencia y la cascada son dos conceptos fundamentales en CSS:
Herencia
Algunas propiedades de CSS se heredan de un elemento padre a un elemento hijo. Esto significa que si aplicamos un estilo al elemento padre, los elementos hijos también heredarán ese estilo, a menos que se les asigne un estilo diferente.
Cascada
Cuando hay múltiples reglas que afectan a un mismo elemento, la “cascada” determina qué estilos se aplican. Los factores que afectan esto incluyen la especificidad del selector y el orden de las reglas en el código CSS.
Ejemplo de Herencia y Cascada
body {
font-family: Arial, sans-serif;
}
p {
font-size: 16px;
}
.articulo p {
font-size: 18px;
}Aquí, todos los párrafos (<p>) heredarán la fuente Arial del cuerpo, pero tendrán tamaños de fuente diferentes según si están dentro de un elemento con la clase .articulo o no.
Práctica
Entender la sintaxis básica de CSS y cómo aplicarla es esencial para cualquier desarrollador web.
Les animo a practicar creando sus propias reglas CSS, experimentando con diferentes selectores y propiedades.
En la próxima clase, profundizaremos en propiedades y técnicas avanzadas de CSS para llevar sus habilidades de diseño web al siguiente nivel.