Sintaxis básica (selectores, propiedades, valores)

Cascading Style Sheets (CSS) es un lenguaje de hojas de estilo fundamental en el desarrollo web moderno. Su propósito principal es describir la presentación y el estilo visual de documentos escritos en lenguajes de marcado como HTML o XML (incluyendo dialectos como SVG y MathML). CSS permite separar de manera efectiva el contenido estructural de un documento (definido por HTML) de su apariencia visual (definida por CSS), lo cual incluye aspectos como la disposición (layout), los colores y las fuentes. Esta separación reduce la complejidad, minimiza la repetición en el código HTML y facilita el mantenimiento y la actualización del diseño de un sitio web.

CSS describe cómo los elementos deben ser renderizados en diferentes medios, ya sea en pantalla, en papel, en sistemas de síntesis de voz u otros dispositivos. Es una tecnología central de la World Wide Web, junto con HTML y JavaScript, y está estandarizada por el World Wide Web Consortium (W3C) para asegurar la compatibilidad entre navegadores. El término "Cascading" (en cascada) se refiere al algoritmo específico que determina cómo se combinan y priorizan las diferentes reglas de estilo cuando múltiples reglas podrían aplicarse a un mismo elemento.

La sintaxis básica de CSS se basa en reglas. Cada regla asocia un conjunto de estilos (declaraciones de propiedad y valor) con un conjunto específico de elementos HTML (identificados por selectores). Comprender esta sintaxis fundamental —selectores, propiedades y valores— es el primer paso esencial para utilizar CSS eficazmente y controlar la presentación visual de las páginas web.

La Regla CSS: Anatomía y Sintaxis

El componente fundamental del lenguaje CSS es la regla CSS (a menudo denominada rule-set o simplemente "regla"). Una hoja de estilo CSS consiste en una lista de estas reglas. Cada regla CSS está diseñada para aplicar un conjunto específico de estilos a uno o más elementos dentro de un documento HTML. La estructura de una regla CSS se compone de dos partes principales: el selector y el bloque de declaración.

Selector

Es la primera parte de la regla CSS y su función es identificar a qué elemento o elementos HTML se aplicarán los estilos definidos en el bloque de declaración. El selector actúa como un patrón que el navegador utiliza para encontrar los elementos correspondientes en el árbol del documento. Los elementos seleccionados se denominan el "sujeto del selector".

Bloque de Declaración

Esta parte de la regla está delimitada por llaves {} y contiene una o más declaraciones de estilo. Cada declaración especifica cómo debe estilizarse una característica particular de los elementos seleccionados.

Declaración

Es la unidad básica de estilo dentro del bloque de declaración. Consiste en un par propiedad-valor, que define una característica específica del estilo a aplicar. Por ejemplo, color: red; es una declaración.

Propiedad

Es el nombre de la característica CSS que se desea modificar. Las propiedades definen aspectos visuales como el color del texto, el tamaño de la fuente, el margen, el fondo, etc. CSS ofrece una vasta gama de propiedades para controlar casi todos los aspectos de la presentación.

Valor

Es el ajuste específico que se asigna a la propiedad. Define cómo se aplicará el estilo. Por ejemplo, si la propiedad es color, el valor podría ser red, #FF0000 o rgb(255, 0, 0). Cada propiedad CSS tiene un conjunto definido de valores válidos que puede aceptar.

La sintaxis que une estos componentes sigue unas convenciones estrictas:

• El selector precede al bloque de declaración.
• El bloque de declaración está siempre encerrado entre llaves {}.
• Dentro del bloque, cada declaración consiste en una propiedad seguida de dos puntos (:) y luego su valor.
• Las declaraciones múltiples dentro de un mismo bloque deben separarse entre sí por un punto y coma (;). El punto y coma final de la última declaración es técnicamente opcional, pero se recomienda encarecidamente incluirlo para evitar errores al añadir más declaraciones posteriormente.

Un ejemplo completo de una regla CSS simple que aplica estilos a todos los elementos de párrafo (la etiqueta p) sería:

En este ejemplo, p es el selector. El bloque entre llaves contiene tres declaraciones. Cada declaración tiene una propiedad (color, font-size, line-height), seguida de dos puntos : y su valor (navy, 16px, 1.5), y cada declaración termina con un punto y coma ;.

Selectores CSS: Apuntando a los Elementos Correctos

Como se mencionó, el selector es la parte crucial de una regla CSS que determina a qué elementos del documento HTML se aplicarán los estilos. Elegir el selector adecuado es fundamental para aplicar estilos de manera precisa y eficiente. CSS proporciona una amplia variedad de selectores, desde los más generales hasta los muy específicos.

Selectores Básicos

Estos son los tipos de selectores más fundamentales y comúnmente utilizados:

Selector de Tipo (o Elemento)

Selecciona todos los elementos HTML que coinciden con el nombre de la etiqueta especificada. Es la forma más simple de seleccionar elementos.

Sintaxis: nombreDelElemento {... }

Ejemplo: h1 { color: blue; } selecciona todos los elementos h1.

Selector de Clase

Selecciona todos los elementos que tienen un atributo class con el valor especificado. Las clases son reutilizables; un mismo elemento puede tener múltiples clases y una misma clase puede aplicarse a múltiples elementos.

Sintaxis: .nombreDeLaClase {... } (el punto . indica que es un selector de clase).

Ejemplo: .importante { font-weight: bold; } selecciona todos los elementos con class="importante". También es posible combinar un selector de tipo con una clase para mayor especificidad, como li.special { color: orange; }, que selecciona solo los elementos li que además tienen la clase special.

Selector de ID

Selecciona un único elemento que tiene un atributo id con el valor especificado. El valor del atributo id debe ser único dentro de todo el documento HTML.

Sintaxis: #nombreDelID {... } (la almohadilla # indica que es un selector de ID).

Ejemplo: #encabezado-principal { background-color: #eee; } selecciona el elemento único con id="encabezado-principal".

Selector Universal

Selecciona todos los elementos del documento HTML. A menudo se utiliza para aplicar estilos base o reinicios (resets) a todos los elementos, aunque el uso de reinicios extensivos puede tener inconvenientes.

Sintaxis: * {... }

Ejemplo: * { margin: 0; padding: 0; box-sizing: border-box; } aplica estas reglas a cada elemento de la página.

Selectores de Atributo

Estos selectores permiten seleccionar elementos basándose en la presencia o el valor de sus atributos HTML. Proporcionan una forma muy flexible de apuntar a elementos sin necesidad de clases o IDs específicos.

Presencia de Atributo: [atributo]

Selecciona elementos que tienen el atributo especificado, sin importar su valor. Ejemplo: a[title] { cursor: help; } selecciona todos los enlaces a que tienen un atributo title.

Valor Exacto de Atributo: [atributo="valor"]

Selecciona elementos donde el atributo tiene exactamente el valor especificado. Ejemplo: input[type="submit"] { background-color: green; color: white; } selecciona botones de envío.

Valor de Atributo que Comienza Con: [atributo^="valor"]

Selecciona elementos cuyo valor de atributo comienza con la cadena especificada. Ejemplo: a[href^="https://"] { background-image: url('secure.png'); } selecciona enlaces seguros (HTTPS).

Valor de Atributo que Termina Con: [atributo$="valor"]

Selecciona elementos cuyo valor de atributo termina con la cadena especificada. Ejemplo: img[src$=".jpg"] { border: 1px solid #ccc; } selecciona imágenes JPG.

Valor de Atributo que Contiene: [atributo*="valor"]

Selecciona elementos cuyo valor de atributo contiene la subcadena especificada. Ejemplo: a[href*="ejemplo"] { color: orange; } selecciona enlaces cuyo href contiene la palabra "ejemplo".

Agrupación de Selectores

Para aplicar el mismo conjunto de reglas a diferentes selectores sin repetir el bloque de declaración, se pueden agrupar los selectores separándolos con comas (,).

Sintaxis: selector1, selector2, selectorN {... }

Ejemplo: h1, h2, h3 { font-family: 'Georgia', serif; color: #333; } aplica estos estilos a todos los encabezados h1, h2 y h3.

Es importante notar que si alguno de los selectores en una lista agrupada no es válido según la sintaxis CSS, el navegador ignorará toda la regla completa, y no se aplicará ningún estilo, ni siquiera a los selectores válidos de la lista.

Comparativa de Selectores Básicos

La siguiente tabla resume las características clave de los selectores básicos más importantes: