El CSS (Cascading Style Sheets) es uno de los lenguajes esenciales para el desarrollo y diseño de páginas web. Permite definir el estilo y apariencia de una página, desde los colores y fuentes hasta el diseño general y la disposición de los elementos. Mientras HTML se encarga de la estructura y el contenido, CSS se centra en cómo se presenta este contenido a los usuarios.
Como en Estr@tegia Magazine siempre nos hemos enfocado en "bajar a tierra" temas que pueden resultar complejos para la mayoría de las personas, a continuación, veremos al nivel de quién puede estar iniciándose en el desarrollo o diseño web, qué es CSS, cómo se utiliza y por qué es fundamental en el desarrollo web.
[no_toc]
Tabla de Contenidos
¿Qué es CSS y cuáles son sus selectores?
CSS u Hojas de Estilo en Cascada, es un lenguaje de reglas que se aplica sobre documentos HTML para mejorar su presentación visual. Con estas reglas, se pueden definir estilos de texto, colores, tamaños, márgenes y otros elementos visuales que afectan la experiencia del usuario en un sitio web.
CSS no utiliza "etiquetas" como lo hace HTML, pero sí maneja selectores, como los selectores de etiquetas ('p', 'h1', 'div'), de clases ('.miClase') y de identificadores ('#miID'), que permiten aplicar estilos de diseño a elementos específicos de la página.
Como dijimos, los estilos en CSS se escriben en reglas, donde cada regla consta de un selector y un bloque de declaraciones. Las declaraciones incluyen propiedades y valores, por ejemplo:
p {
color: blue;
font-size: 16px;
}En el ejemplo anterior, al selector de la etiqueta 'p' (de párrafo de texto) se le aplica aplica el color de texto azul y el tamaño de fuente de 16px. Es decir, a todos los elementos '<p>' que aparecen en el código HTML se le aplican estos dos estilos.
¿Cuál es la diferencia entre HTML y CSS?
La fundamental diferencia entre HTML y CSS radica en sus roles. HTML (Hypertext Markup Language) es el lenguaje de marcado que utiliza etiquetas para estructurar el contenido de una página, mientras que CSS es el lenguaje de reglas que define cómo se debe mostrar el contenido.
Por ejemplo, en HTML se puede usar la etiqueta '<p>' para agregar un párrafo de texto dentro de una página web, y CSS le dará el estilo o diseño a ese párrafo (color, tamaño de fuente, alineación, etc.).
HTML y CSS se complementan, ya que HTML produce una estructura básica y funcional, pero sin una presentación visual atractiva. CSS mejora la experiencia del usuario al proporcionar diseño y personalización.
¿Cómo se puede utilizar CSS en una página web?
Existen tres maneras principales de aplicar CSS en una página web: estilos en línea, internos y externos.
# CSS en línea
Un estilo en línea se utiliza dentro del atributo 'style' directamente en el elemento HTML. Aunque es útil en algunos casos para aplicar estilos en forma rápida, no es la mejor práctica en grandes proyectos.
Un ejemplo de estilo en línea en un código HTML es el siguiente:
<h1 style="color: green;">Título en verde</h1>En el ejemplo, a un encabezado HTML 'h1' se le aplica un estilo 'color' que colorea de verde el texto de este encabezado solamente.
# CSS interno
El CSS interno se coloca entre etiquetas '<style>' y '</style>' en la cabecera de un documento HTML ('<head>'). Este enfoque es útil para páginas pequeñas, aunque tampoco se recomienda para sitios de múltiples páginas o grandes proyectos, ya que dificulta la actualización y mantenimiento de los estilos.
Un ejemplo de CSS interno, dentro de la cabecera HTML de una página, es el siguiente:
<style>
body {
background-color: #f0f0f0;
}
</style>En el ejemplo, al elemento HTML 'body' se le aplica un estilo 'background-color' que colorea de gris claro (código de color '#f0f0f0') todo el fondo de la página.
# CSS externo
La última forma, y la más recomendada, para aplicar estilos a una página web es el CSS externo. Consiste en guardar el código CSS en un archivo separado que generalmente tiene extensión '.css', por ejemplo, 'estilos.css'. Este archivo se inserta en el código HTML con la etiqueta '<link>', también dentro del encabezado del documento ('<head>'). De esta forma, se hace sencillo reutilizar y mantener el las Hojas de Estilo en varios documentos HTML.
Un ejemplo de CSS externo enlazado desde un documento HTML es:
<link rel="stylesheet" href="/estilos.css">En este caso, un archivo 'estilos.css' que tiene los estilos que queremos aplicar a este documento HTML, se encuentra en el directorio raíz del sitio web.
En conclusión, en la mayoría de los casos se recomienda usar archivos externos, ya que facilitan la organización, la actualización y el rendimiento del sitio web.
Las versiones de CSS a lo largo del tiempo
A lo largo de los años, CSS ha evolucionado para incluir más funcionalidades y mejoras en el diseño web. Las principales versiones de CSS son:
- CSS1 (1996): Fue la primera especificación de CSS, introduciendo conceptos básicos como estilos de texto, alineación y colores.
- CSS2 (1998): Ampliaba las capacidades de CSS1 con soporte para posicionamiento, control de diseños, y opciones avanzadas de estilos como 'z-index' para controlar el orden de apilamiento de capas.
- CSS2.1 (2011): Una revisión de CSS2 que corrigió errores y eliminó algunas características problemáticas, haciéndolo más compatible con los navegadores.
- CSS3 (2012): Esta versión marcó una gran evolución, dividiendo CSS en módulos que se desarrollan y actualizan por separado. CSS3 introdujo propiedades como sombras, animaciones, gradientes y transiciones, que permitieron diseños mucho más dinámicos y atractivos.
- CSS4 (en desarrollo): Aunque no es una versión "oficial" como las anteriores, CSS4 se refiere a un conjunto de nuevos módulos y características avanzadas que continúan expandiendo las capacidades de CSS, como nuevos selectores y propiedades que permiten mayor control sobre los elementos.
Gracias a estas versiones, CSS sigue adaptándose a las necesidades de diseño y proporcionando herramientas innovadoras para desarrolladores web.
Un ejemplo más completo de CSS interno
A continuación, veamos un ejemplo simple de código CSS interno que puede copiarse y pegarse directamente en el encabezado HTML de una página:
<style>
body {
background-color: lightblue;
}
h2 {
color: navy;
font-size: 14px;
}
p {
color: gray;
font-family: Arial;
}
</style>En este ejemplo, el fondo de toda la página será de color azul claro, las fuentes de todos los encabezados '<h2>' serán de color azul marino y el tamaño de 14 píxeles, y las fuentes de los párrafos '<p>' estarán en gris y serán del tipo 'Arial'.
Ejemplo de CSS externo en un código HTML completo
Como vimos anteriormente, una de las formas de integrar CSS en HTML consiste en enlazar un archivo con las reglas de estilos desde el encabezado del documento HTML. Aquí tenemos un ejemplo, sencillo pero completo, de un documento HTML que integra un archivo de hojas de estilo para dar forma y diseño a la página web:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de CSS</title>
<link rel="stylesheet" href="/estilos.css">
</head>
<body>
<h1>Bienvenidos a CSS</h1>
<p>Este es un ejemplo de cómo se usa CSS con HTML.</p>
</body>
</html>En este ejemplo, el HTML se vincula con el archivo 'estilos.css', que está almacenado en el directorio raíz del sitio web y que contiene los estilos definidos para cada elemento de este documento HTML. Nuevamente, la separación entre HTML y CSS es ideal para un desarrollo limpio y eficiente.
Conclusión
CSS es una herramienta fundamental para cualquier desarrollador web, ya que permite separar el contenido de una página web de su presentación, lo que facilita el mantenimiento y mejora la experiencia del usuario. Con su variedad de tipos y su flexibilidad, este lenguaje ofrece infinitas posibilidades de diseño, asegurando que cada sitio web pueda ser único y funcional al mismo tiempo.
