Tutorial CSS: Introducción a CSS

Historia y evolución de CSS

CSS (Cascading Style Sheets) fue propuesto inicialmente por Håkon Wium Lie el 10 de octubre de 1994 durante su tiempo en CERN, en el que también se crearon tecnologías clave como la World Wide Web. CSS surgió como una solución a la creciente complejidad de las presentaciones web que el HTML no podía manejar adecuadamente. HTML estaba originalmente diseñado como un lenguaje de marcado simple sin capacidad para controlar el diseño y la presentación visual.

La propuesta inicial de CSS, conocida como CSS1, fue adoptada por el World Wide Web Consortium (W3C) y publicada como una recomendación oficial en diciembre de 1996. CSS1 contenía una serie básica de propiedades para el control de la tipografía, la orientación del texto, los márgenes, el espaciado, el color y otros aspectos visuales de los documentos HTML. Este estándar permitió a los desarrolladores separar el contenido del estilo, mejorando la mantenibilidad y la reutilización del código.

CSS2 fue publicado como una recomendación oficial en mayo de 1998. Este estándar amplió significativamente las capacidades de CSS1 al incluir nuevas características tales como:

• Posicionamiento absoluto y relativo de elementos.
• Z-index para el control de la superposición de elementos en capas.
• Soporte para media types como "screen", "print", y "aural".
• Módulos de estilos para tablas y hojas de estilo específicas para diferentes medios.

CSS3, aún en desarrollo, comenzó a evolucionar en módulos independientes, lo cual permitió que se trabajara y se implementaran partes del estándar de manera más ágil. Cada módulo aborda diferentes aspectos del diseño web, como fondos, bordes, textos y animaciones. Algunos módulos importantes de CSS3 son:

• Selectores: Mejora y expansión de selectores avanzados.
• Módulo de caja flexible (flexbox): Control intuitivo de disposición de elementos en contenedores flexibles.
• Grid layout: Disposición bidimensional de elementos en cuadrículas.
• Transformaciones, transiciones y animaciones: Manipulación visual de elementos y animaciones complejas.
• Consultas de medios (Media queries): Adaptación de estilos a diferentes tamaños y resoluciones de pantalla.

Uno de los desarrollos más recientes y destacados en CSS es la propuesta y adopción de las custom properties (Variables CSS), que permiten definir valores reutilizables en una hoja de estilos, facilitando la gestión de estilos. Del mismo modo, el uso creciente de preprocesadores CSS como Sass y Less refleja un esfuerzo de la comunidad para extender y mejorar la sintaxis y funcionalidad de CSS.

Con el tiempo, CSS ha ido incorporando una mayor compatibilidad con navegadores y mejores herramientas de desarrollo, consolidándose como una tecnología clave en el desarrollo frontend moderno.

Conceptos clave de CSS

El modelo de caja es fundamental en CSS. Cada elemento HTML es una caja rectangular que está compuesta por cuatro áreas desde el interior hacia el exterior: el contenido, el relleno (padding), el borde (border) y el margen (margin). Este modelo define cómo se calcula el tamaño y el espacio de los elementos.

Selectores

Las reglas CSS se aplican a los elementos HTML a través de selectores. Existen varios tipos de selectores:

• Selector de tipo: Selecciona todos los elementos de un tipo específico, por ejemplo, p selecciona todos los elementos <p>.
• Selector de clase: Selecciona todos los elementos con una clase específica, usando un punto (.) antes del nombre de la clase, por ejemplo, .miClase.
• Selector de ID: Selecciona un único elemento con un ID específico, usando una almohadilla (#) antes del nombre del ID, por ejemplo, #miID.
• Selectores avanzados: Incluyen selectores de atributos, pseudo-clases y pseudo-elementos. Algunos ejemplos son [type="text"], :hover y ::before.

Especificidad

La especificidad determina qué reglas se aplican cuando varios selectores coinciden con el mismo elemento. Se calcula sumando valores en función de los distintos tipos de selectores:

• Selectores de ID: 100 puntos.
• Selectores de clase, pseudo-clases y atributos: 10 puntos.
• Selectores de tipo y pseudo-elementos: 1 punto.

Cascada y herencia

Las reglas CSS se aplican según un orden de prioridad conocido como la cascada. Las reglas que se encuentran más cerca del elemento objetivo en el orden del documento tienen mayor prioridad. Las propiedades CSS también pueden ser heredadas de los elementos padres, aunque esto depende de la propiedad específica.

Unidades de medida

Las unidades absolutas como px, cm, y in tienen valores fijos. Las unidades relativas como em, rem, % y vw/vh son relativas a otros valores, como el tamaño de la fuente del elemento padre o las dimensiones de la ventana del navegador.

Modelo de caja y tamaño de contenido

El valor de la propiedad box-sizing afecta cómo se calculan los tamaños de las cajas. Los valores comunes son content-box (por defecto) y border-box, el cual incluye padding y bordes en el cálculo del ancho y alto del elemento.

/* Ejemplo de uso del box-sizing */
.elemento {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 10px solid #333;
}

Posicionamiento

CSS permite distintos esquemas de disposición de elementos a través de las propiedades position, display, float, y más.

• position: static es el valor por defecto. No permite el posicionamiento.
• position: relative permite desplazar un elemento respecto a su posición normal.
• position: absolute permite posicionar un elemento respecto a su contenedor posicionado.
• position: fixed fija el elemento respecto a la ventana del navegador.

Flexbox y Grid

CSS3 introduce el modelo flexible box (Flexbox) y grid layout, que facilitan significativamente la disposición de elementos.

Flexbox se usa para diseños unidimensionales, horizontales o verticales:

.container {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

Grid layout se usa para diseños bidimensionales:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales */
    grid-gap: 10px; /* Espacio entre elementos */
}

Media queries

Las consultas de medios (@media) permiten aplicar estilos CSS condicionales basados en características del dispositivo, como el ancho de la pantalla. Esto es esencial para el diseño responsivo.

@media (max-width: 600px) {
    .container {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }
}

Variables CSS

Las variables CSS (--nombre-variable) permiten definir valores reutilizables, mejorando la gestión de estilos:

:root {
    --color-principal: #3498db;
}
.elemento {
    color: var(--color-principal);
}

Estos conceptos son fundamentales para entender y utilizar CSS de manera efectiva, permitiendo crear diseños web mantenibles.

Instalación y configuración

Para empezar a utilizar CSS en tus proyectos web, no necesitas una instalación específica del lenguaje en sí, ya que CSS es interpretado por los navegadores. Sin embargo, debes asegurarte de tener ciertas herramientas y configuraciones en tu entorno de desarrollo para trabajar de manera eficiente con CSS.

Editor de código:

Utiliza un editor de código moderno como Visual Studio Code, Atom, Sublime Text o WebStorm. Estos editores suelen ofrecer resaltado de sintaxis, autocompletado y otras características que facilitan el trabajo con CSS.

Estructura del proyecto:

Organiza tu proyecto con una estructura de carpetas clara. Generalmente, los archivos CSS se colocan en una carpeta llamada css o styles dentro de la estructura del proyecto.

my-project/
├── index.html
├── css/
│   └── styles.css
└── js/
    └── app.js

Archivo CSS:

Crea un archivo CSS (por ejemplo, styles.css) en la carpeta correspondiente y empieza a escribir tus reglas CSS allí. Este archivo contendrá todas las reglas de estilo que se aplicarán a tu documento HTML.

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

h1 {
    color: #ff6347;
}

Enlazar el archivo CSS al HTML:

Utiliza la etiqueta <link> en el archivo HTML para enlazar el archivo CSS. Esta etiqueta debe colocarse dentro del <head> del documento HTML.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css">
    <title>Mi Proyecto CSS</title>
</head>
<body>
    <h1>Hola, mundo!</h1>
</body>
</html>

Preprocesadores CSS (opcional):

Considera el uso de preprocesadores CSS como Sass o Less para mejorar tu flujo de trabajo. Estos preprocesadores permiten utilizar variables, anidamiento, mixins y otras características avanzadas que no están disponibles en CSS puro.

• Instalación de Sass: Si decides usar Sass, instálalo globalmente mediante npm (Node Package Manager):

npm install -g sass

• Uso de Sass: Después de instalar Sass, puedes compilar archivos .scss a CSS standard:

sass --watch scss/styles.scss:css/styles.css

Herramientas de build y automatización:

Utiliza herramientas como webpack, Gulp o Grunt para automatizar la compilación de tu CSS, incluyendo minificación y autoprefijos. Estas herramientas pueden mejorar significativamente tu flujo de trabajo:

• Configuración básica con Gulp:

npm install gulp gulp-sass gulp-autoprefixer gulp-clean-css --save-dev

Crea un archivo gulpfile.js en la raíz de tu proyecto:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');

gulp.task('styles', function() {
    return gulp.src('scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            overrideBrowserslist: ['last 2 versions'],
            cascade: false
        }))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest('css/'));
});

gulp.task('default', gulp.series('styles', function() {
    gulp.watch('scss/**/*.scss', gulp.series('styles'));
}));

Control de versiones:

Asegúrate de usar un sistema de control de versiones como Git. Esto es esencial para mantener un historial de cambios y colaborar con otros desarrolladores.

En resumen, aunque CSS no requiere una instalación específica, configurar un entorno apropiado y utilizar herramientas modernas como editores de código, preprocesadores y sistemas de automatización de tareas te permitirá trabajar de manera más eficiente y efectiva con CSS.

Paso a paso para enlazar CSS a HTML

Para enlazar un archivo CSS a tu documento HTML, sigue los siguientes pasos detallados:

Crear el archivo CSS:

Primero, crea un nuevo archivo CSS en tu proyecto. Por lo general, se guarda en una carpeta llamada css o styles dentro de la estructura del proyecto. Por ejemplo, crea un archivo llamado styles.css.

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

h1 {
    color: #ff6347;
}

Crear o abrir el archivo HTML:

Abre o crea el archivo HTML al que deseas aplicar los estilos. Un archivo típico se verá algo así:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Proyecto CSS</title>
</head>
<body>
    <h1>Hola, mundo!</h1>
</body>
</html>

Enlazar el archivo CSS al HTML:

Para que el navegador aplique los estilos del archivo CSS a tu documento HTML, debes enlazar ambos archivos. Esto se hace utilizando la etiqueta <link> dentro de la sección <head> del HTML.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Proyecto CSS</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <h1>Hola, mundo!</h1>
</body>
</html>

En este ejemplo, el atributo href de la etiqueta <link> apunta al archivo styles.css ubicado en la carpeta css.

Tipos de enlaces CSS:

Además del enlace externo que hemos visto, existen otros dos métodos para incorporar CSS en un documento HTML:

1. CSS en línea:

Aplica el CSS directamente a un elemento HTML usando el atributo style.

<h1 style="color: #ff6347; font-family: Arial, sans-serif;">Hola, mundo!</h1>

Sin embargo, este método no es recomendable para proyectos grandes porque dificulta la mantenibilidad del código.

2. Hoja de estilos interna:

Inserta CSS dentro de la sección <head> del archivo HTML utilizando una etiqueta <style>.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Proyecto CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
        }
        h1 {
            color: #ff6347;
        }
    </style>
</head>
<body>
    <h1>Hola, mundo!</h1>
</body>
</html>

Este método es útil para aplicaciones sencillas o para incluir hojas de estilo que solo aplican a una página específica. Sin embargo, al igual que el CSS en línea, no es óptimo para proyectos más grandes debido a problemas de escalabilidad y organización.

Usar múltiples archivos CSS:

En proyectos más complejos, es común dividir el CSS en múltiples archivos para modularizar los estilos. Puedes enlazar múltiples archivos CSS incluyendo múltiples etiquetas <link>.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Proyecto CSS</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <h1>Hola, mundo!</h1>
</body>
</html>

En este ejemplo, reset.css podría contener estilos para inicializar elementos HTML a un estado consistente, layout.css podría definir la disposición de elementos en la página, y styles.css podría contener estilos específicos de la interfaz.

Siguiendo estos pasos, puedes gestionar y enlazar eficientemente tus archivos CSS a tu documento HTML, logrando una separación clara entre el contenido y la presentación en tus proyectos web.

Ejemplo

Vamos a crear un ejemplo práctico que aplique varias de las características explicadas anteriormente. Imaginemos que estamos desarrollando una página web para un portfolio personal. Queremos que nuestra página tenga un diseño responsive y moderno utilizado CSS.

HTML:

Primero, creamos el archivo index.html que contiene la estructura básica del documento HTML5.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Personal</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>Mi Portfolio</h1>
    </header>
    <main>
        <section class="profile">
            <img src="profile.jpg" alt="Foto de perfil">
            <h2>Sobre mí</h2>
            <p>Soy desarrollador web con experiencia en frontend y backend.</p>
        </section>
        <section class="projects">
            <h2>Proyectos</h2>
            <div class="project">
                <h3>Proyecto 1</h3>
                <p>Descripción del proyecto 1.</p>
            </div>
            <div class="project">
                <h3>Proyecto 2</h3>
                <p>Descripción del proyecto 2.</p>
            </div>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 Mi Nombre</p>
    </footer>
</body>
</html>

CSS:

Ahora, creamos el archivo styles.css e incluimos varias de las técnicas y propiedades de CSS que hemos discutido.

/* Estilo global */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

h1, h2, h3 {
    color: #ff6347;
    text-align: center;
}

header, footer {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
}

header h1 {
    margin: 0;
}

main {
    padding: 20px;
}

.profile img {
    max-width: 100%;
    height: auto;
    border-radius: 50%;
}

.projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.project {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 600px) {
    header, footer {
        text-align: center;
    }

    .projects {
        grid-template-columns: 1fr;
    }
}

Explicaciones de los estilos aplicados:

• Estilo global:

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

Aplicamos un estilo global para el cuerpo del documento, estableciendo una fuente estándar, eliminando margen y padding, y configurando colores de fondo y de texto.

• Colores y alineación de títulos:

h1, h2, h3 {
    color: #ff6347;
    text-align: center;
}

Los títulos h1, h2 y h3 tienen un color específico y están centrados.

• Encabezado y pie de página:

header, footer {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
}

El encabezado y el pie de página tienen fondos oscuros y texto blanco, con un padding para separar el contenido.

• Imagen de perfil:

.profile img {
    max-width: 100%;
    height: auto;
    border-radius: 50%;
}

La imagen de perfil es circular (usando border-radius: 50%) y se adapta al ancho del contenedor.

• Diseño de proyectos con CSS grid:

.projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.project {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Utilizamos CSS grid para la sección de proyectos, creando un diseño responsive con grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)). Cada proyecto tiene un estilo específico que incluye bordes, sombra y redondeo.

• Media queries:

@media (max-width: 600px) {
    header, footer {
        text-align: center;
    }

    .projects {
        grid-template-columns: 1fr;
    }
}

Con las media queries, ajustamos el diseño para dispositivos más pequeños: centramos el texto del encabezado y el pie de página y hacemos que los proyectos se apilen verticalmente.

Con este ejemplo, se demuestra cómo aplicar y combinar múltiples técnicas y propiedades de CSS para construir un diseño web estructurado y responsive.