Sesión 6 – Introducción a CSS

1

¿Qué es CSS?Hojas de Estilo en Cascada

CSS (Cascading Style Sheets — Hojas de Estilo en Cascada) es el lenguaje que controla la apariencia visual de una página web: colores, tipografías, tamaños, espaciado, disposición de elementos, etc.

Se separa del HTML para mantener la estructura (HTML) y la presentación (CSS) independientes.

</>

HTML = Estructura

Define qué elementos hay en la página: títulos, párrafos, imágenes, enlaces...

{ }

CSS = Presentación

Define cómo se ven esos elementos: colores, fuentes, espaciado, posición...

↔

Separación

Mantener HTML y CSS separados permite reutilizar estilos y facilita el mantenimiento.

2

Tres formas de aplicar CSSExterno, interno y en línea

1. CSS externo (recomendado)

Un archivo .css independiente enlazado desde el HTML:

                HTML
<!-- En el <head> del HTML -->
<link rel="stylesheet" href="css/styles.css">
            

2. CSS interno

Dentro de una etiqueta <style> en el <head>:

                HTML
<head>
    <style>
        h1 { color: blue; }
    </style>
</head>
            

3. CSS en línea (no recomendado)

Directamente en el atributo style de un elemento:

                HTML
<p style="color: red; font-size: 18px;">Texto rojo.</p>
            

Buena práctica: Usa siempre CSS externo. Mantiene el código organizado y permite reutilizar los estilos en varias páginas.

3

Sintaxis CSSSelectores y declaraciones

Una regla CSS se compone de un selector y un bloque de declaraciones:

                CSS
selector {
    propiedad: valor;
    otra-propiedad: otro-valor;
}
            

Selectores de elementos

El selector más sencillo selecciona todos los elementos de un tipo:

                CSS
h1 {
    color: blue;
    font-size: 24px;
}

p {
    color: #333333;
    font-size: 16px;
    line-height: 1.6;
}

body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
            

4

Propiedades básicasLas propiedades CSS más utilizadas

Propiedad	Descripción	Ejemplo
`color`	Color del texto	`color: blue;`
`background-color`	Color de fondo	`background-color: #f0f0f0;`
`font-size`	Tamaño de fuente	`font-size: 16px;`
`font-family`	Tipografía	`font-family: Arial, sans-serif;`
`margin`	Espacio exterior	`margin: 10px;`
`padding`	Espacio interior	`padding: 15px;`
`text-align`	Alineación del texto	`text-align: center;`
`border`	Borde del elemento	`border: 1px solid black;`

5

Cascada y especificidadCómo decide CSS qué estilo aplicar

Cuando varias reglas afectan al mismo elemento, CSS decide cuál aplicar según:

Especificidad: CSS en línea > ID > clase > elemento.
Orden: Si dos reglas tienen la misma especificidad, gana la última escrita.
Herencia: Algunas propiedades (como color y font-family) se heredan de los elementos padre.

1

CSS en línea

Máxima especificidad. El atributo style="" gana a todo.

2

Selector ID

#mi-id tiene mayor especificidad que las clases.

3

Selector de clase

.mi-clase gana a los selectores de elemento.

4

Selector de elemento

h1, p, div — la especificidad más baja.

6

Vista previa CSS en vivoCambia una regla CSS y observa el efecto

Experimenta con propiedades CSS

7

Ejercicio prácticoAplica lo aprendido

Crea un archivo css/styles.css en la carpeta de tu proyecto.
Enlázalo desde index.html usando <link rel="stylesheet" href="css/styles.css"> en el <head>.
Aplica los siguientes estilos:
- Define un color de fondo para el <body> y una tipografía global (por ejemplo, Arial, sans-serif).
- Cambia el color y tamaño de los títulos <h1> y <h2>.
- Cambia el color y el interlineado de los párrafos <p>.
- Centra el <h1> con text-align: center.
- Añade un borde inferior a los <h2>.
- Añade un fondo de color a la tabla y bordes a las celdas.
Enlaza el mismo archivo CSS desde contacto.html y observa cómo los estilos se aplican automáticamente.