Introducción

CSS, que significa Cascading Style Sheets (Hojas de Estilo en Cascada), es un lenguaje utilizado para describir la presentación de un documento escrito en HTML o XML. CSS controla cómo se muestran los elementos en la pantalla, en papel, en el habla o en otros medios.

Conceptos Clave

Separación de Contenido y Presentación: CSS permite separar el contenido (HTML) de la presentación (CSS), lo que facilita la gestión y el mantenimiento de los sitios web.
Cascada: Las reglas de CSS se aplican en cascada, lo que significa que las reglas pueden ser sobrescritas por otras más específicas.
Selectores: Los selectores en CSS se utilizan para seleccionar los elementos HTML que se desean estilizar.
Propiedades y Valores: Las propiedades de CSS definen aspectos específicos del estilo (como color, tamaño de fuente, etc.), y los valores asignan un valor específico a esas propiedades.

Ejemplo Básico

Para entender mejor qué es CSS, veamos un ejemplo simple. Supongamos que tenemos el siguiente código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hola, Mundo!</h1>
    <p>Este es un párrafo de ejemplo.</p>
</body>
</html>

Y el archivo CSS (styles.css) asociado podría ser:

/* styles.css */
h1 {
    color: blue;
    font-size: 24px;
}

p {
    color: green;
    font-size: 16px;
}

Explicación del Código

HTML:
- <link rel="stylesheet" href="styles.css">: Esta línea en el <head> del documento HTML enlaza el archivo CSS externo styles.css.
- <h1> y <p>: Estos son los elementos HTML que serán estilizados por el CSS.
CSS:
- h1 { color: blue; font-size: 24px; }: Esta regla CSS selecciona todos los elementos <h1> y les aplica un color azul y un tamaño de fuente de 24 píxeles.
- p { color: green; font-size: 16px; }: Esta regla CSS selecciona todos los elementos <p> y les aplica un color verde y un tamaño de fuente de 16 píxeles.

Ejercicio Práctico

Ejercicio 1: Crear tu Primer Archivo CSS

Paso 1: Crea un archivo HTML llamado index.html con el siguiente contenido:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Primer CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Bienvenido a CSS</h1>
    <p>Este es un párrafo de prueba.</p>
</body>
</html>

Paso 2: Crea un archivo CSS llamado styles.css con el siguiente contenido:

h1 {
    color: red;
    text-align: center;
}

p {
    color: blue;
    font-size: 18px;
}

Paso 3: Abre el archivo index.html en tu navegador web y observa cómo los estilos definidos en styles.css se aplican a los elementos HTML.

Solución del Ejercicio

Si has seguido los pasos correctamente, deberías ver un encabezado <h1> centrado y de color rojo, y un párrafo <p> de color azul con un tamaño de fuente de 18 píxeles.

Conclusión

En esta lección, hemos aprendido qué es CSS y cómo se utiliza para estilizar documentos HTML. Hemos visto cómo enlazar un archivo CSS externo a un documento HTML y cómo aplicar estilos básicos a los elementos HTML. En las próximas lecciones, profundizaremos en la sintaxis de CSS y exploraremos más propiedades y selectores para crear diseños web más complejos y atractivos.

¿Qué es CSS?

Introducción

Conceptos Clave

Ejemplo Básico

Explicación del Código

Ejercicio Práctico

Ejercicio 1: Crear tu Primer Archivo CSS

Solución del Ejercicio

Conclusión

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo