Fundamentos Esenciales de CSS: Sintaxis, Selectores y Métodos de Implementación Web

Introducción a CSS: Definición y Propósito

CSS significa Cascading Style Sheets (Hojas de Estilo en Cascada). Este lenguaje describe cómo se mostrarán los elementos HTML en la pantalla. CSS ahorra una cantidad significativa de trabajo, ya que permite controlar el diseño de varias páginas web a la vez. Todas las hojas de estilo externas se almacenan en archivos con la extensión .css.

El lenguaje CSS se utiliza para definir los estilos de tus páginas web, incluyendo el diseño, la disposición y las variaciones en la imagen para los diferentes dispositivos y tamaños de pantalla.

Originalmente, la intención del lenguaje HTML no era contener etiquetas para dar formato a una página web, sino describir el contenido. Por esta razón, el World Wide Web Consortium (W3C) decidió crear el lenguaje CSS.

Métodos de Inserción de Hojas de Estilo

Hay tres maneras principales de insertar una hoja de estilo en un documento web:

• Hojas de Estilo Externas: Permiten cambiar el aspecto de un sitio web completo modificando un solo archivo. Una hoja de estilo externa se puede escribir desde cualquier editor de texto, debe ser guardada con la extensión .css y no puede contener ninguna etiqueta HTML.
• Estilo Interno: Se puede usar en una sola página con un estilo único. Los estilos internos se definen dentro del elemento <style>, ubicado dentro de la propia página HTML.
• Estilo en Línea (Inline): Se utiliza aplicándolo al estilo de un solo elemento. Para ello, se debe añadir el atributo style al elemento en cuestión, pudiendo contener cualquier propiedad CSS.

Sintaxis y Selectores CSS

El selector hace referencia al elemento HTML al que se le quiere aplicar el estilo. El bloque de declaración contiene una o más declaraciones separadas por punto y coma (;). Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos (:). Una declaración CSS siempre termina con un punto y coma, y los bloques de declaraciones están rodeados por llaves ({}).

Tipos de Selectores CSS

Los selectores CSS se utilizan para “encontrar” (o seleccionar) elementos HTML en función del nombre del elemento, del ID, de la clase, del atributo, etc.

• Selector de Elementos: Elige elementos basándose en el nombre de los mismos (ej: p, h1).
• Selector de ID: Utiliza el atributo id de un elemento HTML para seleccionar un elemento específico. Este ID debe ser único dentro de una página. Para utilizarlo, se debe emplear el símbolo de la almohadilla (#) delante del atributo ID (ej: #encabezado).
• Selector de Clase: Elige los elementos con un atributo de clase específico. Para ello, se debe escribir un punto (.) delante del nombre de la clase (ej: .destacado).

Comentarios en CSS

Los comentarios se utilizan para explicar el código, de manera que si en un futuro se necesita editar, sea más sencillo entenderlo. Para que estos sean ignorados por los navegadores, deben ir entre los símbolos: al inicio /* y al final */.