Sesión Sincrónica · Semana 3

Logro de la Sesión

🎯 Al finalizar la sesión...

El estudiante aplica los estilos CSS a una página web, integrándolo de forma adecuada con la herramienta HTML.

Esta sesión cubre dos grandes bloques:

Bloque 6: Aplicación de estilos CSS a páginas web (CSS, Comentarios, Sintaxis, Externo, Interno, En Línea, Múltiples hojas, Orden en cascada)

Bloque 7: Selectores CSS (Elementos, Id, Clase, Universal, Agrupamiento) + Colores CSS

6.1 ¿Qué es CSS?

CSS (Cascading Style Sheets / Hojas de Estilo en Cascada) es un lenguaje que describe el estilo de un documento HTML. Define cómo los elementos HTML deben ser mostrados en pantalla, en papel o en otros medios.

📌 Puntos clave

• CSS controla el diseño, layout y apariencia de una página web.

• Permite que los elementos HTML se muestren de forma diferente según el dispositivo y tamaño de pantalla.

• Las hojas de estilo externas se guardan en archivos con extensión .css

6.2 Comentarios CSS

Los comentarios en CSS se escriben entre /* y */. Son ignorados por el navegador, pero sirven para documentar y explicar el código.

/* Esto es un comentario en CSS */
/* Puedo escribir en varias
   líneas también */

h1 {
    color: blue; /* Color del título */
}

💡 Tip: Usa comentarios para separar secciones del CSS, explicar reglas complejas o dejar notas para tu equipo.

6.3 Sintaxis para Reglas CSS

Una regla CSS tiene dos partes: un selector y un bloque de declaración.

📐 Estructura

• Selector → el elemento HTML al que se aplica el estilo.

• Bloque de declaración → va entre llaves { } y contiene una o más declaraciones.

• Declaración → propiedad : valor ;

/* Selector con su bloque de declaraciones */
h1 {
    font-size: 60em;  /* Declaración CSS 1 */
    color: blue;      /* Declaración CSS 2 */
}

6.4 CSS Externo

Con CSS Externo puedes cambiar el look de toda una página modificando un único archivo. Cada página HTML enlaza el archivo CSS con el elemento <link> dentro del <head>.

<!-- En tu archivo HTML -->
<head>
    <link rel="stylesheet" href="estilos.css">
</head>

/* Archivo estilos.css */
.centrado {
    text-align: center;
    font-size: 60em;
    color: blue;
}

p.noticia {
    font-size: 60em;
    color: red;
}

✅ Ventaja principal

Un solo archivo CSS controla todas las páginas del sitio. Cambiar el diseño entero = modificar un archivo.

6.5 CSS Interno

El CSS Interno se usa cuando una sola página necesita un estilo distinto al resto. Se define dentro de la etiqueta <style></style> en el <head>.

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

6.6 CSS en Línea

Un estilo en línea se usa cuando quieres aplicar un estilo a un único elemento específico. Se agrega directamente con el atributo style="".

<h1 style="color: blue; font-size: 10em;">Bienvenidos</h1>

⚠️ Nota: El CSS en línea mezcla contenido con presentación. Úsalo solo para ajustes rápidos o pruebas.

6.7 Múltiples Hojas de Estilo CSS

Si la misma propiedad está definida para un mismo selector en diferentes hojas de estilo, gana la última hoja leída.

/* estilos.css → h1 es azul */
h1 { color: blue; }

<!-- En el HTML: externo primero, interno después -->
<link rel="stylesheet" href="estilos.css">
<style>
    h1 { color: red; } /* Este gana → h1 será ROJO */
</style>

📌 Regla clave

Si el interno va después del externo → gana el interno. Si lo pones al revés → gana el externo. El orden en el <head> importa.

6.8 Orden en Cascada

Cuando hay conflicto entre estilos, CSS sigue este orden de prioridad (de mayor a menor):

Prioridad	Tipo	Ejemplo
1 — Mayor	CSS en Línea	`style="color:red"`
2	CSS Interno o Externo (según orden en head)	`<style>` o `<link>`
3 — Menor	Estilos por defecto del navegador	Los que aplica el browser por sí solo

💡 Regla de oro: El CSS en línea siempre gana. Puede sobreescribir cualquier estilo definido en hojas externas o internas.

7. Selectores CSS — Introducción

Los selectores CSS sirven para buscar y seleccionar los elementos HTML a los que se quiere aplicar un estilo.

📌 Las 5 categorías de selectores

Simples Seleccionan por nombre, id o clase.

Combinadores Seleccionan por relación entre elementos.

Pseudo-clases Seleccionan por estado (hover, focus...).

Pseudo-elementos Seleccionan una parte del elemento.

De atributos Seleccionan por atributo o valor.

En esta sesión nos enfocamos en los selectores simples.

7.1 Selector Simple de Elementos

Selecciona elementos HTML basándose en el nombre del elemento. Aplica el estilo a todos los elementos de ese tipo en la página.

h1 {
    font-size: 60em;
    color: blue;
}

Esto aplicará el estilo a todos los <h1> del documento.

7.2 Selector Simple de Id

Selecciona un único elemento usando su atributo id. Como el id es único en una página, este selector afecta solo a ese elemento. Se escribe con # seguido del id.

/* CSS */
#titulo {
    font-size: 60em;
    color: blue;
}

<!-- HTML -->
<h1 id="titulo">Bienvenidos a Certus</h1>

7.3 Selector Simple de Clase

Selecciona todos los elementos que tengan un atributo class específico. Se escribe con . seguido del nombre de la clase.

También puedes limitarlo a un tipo de elemento: p.noticia solo afecta a los <p> con clase noticia.

/* Aplica a TODOS los elementos con class="centrado" */
.centrado {
    text-align: center;
    color: blue;
}

/* Aplica solo a <p> con class="noticia" */
p.noticia {
    color: red;
}

<!-- HTML -->
<h1 class="centrado">Bienvenidos</h1>
<p class="noticia">Noticia 1</p>

7.4 Selector Simple Universal

Selecciona todos los elementos HTML de la página. Se escribe con *. Muy usado para el "CSS reset".

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

⚠️ Úsalo con cuidado: Aplica a absolutamente todo. Si lo combinas con muchas propiedades puede afectar el rendimiento de la página.

7.5 Selector Simple de Agrupamiento

Permite aplicar los mismos estilos a varios elementos a la vez. Los selectores se separan con coma ,.

h1, p, span {
    font-size: 60em;
    color: blue;
}

✅ Ventaja

En lugar de repetir la misma regla tres veces, la escribes una sola vez agrupando los selectores. Código más limpio y fácil de mantener.

Colores CSS

En CSS los colores pueden especificarse de 6 formas distintas:

Forma	Ejemplo	Nota
Nombre	`color: tomato;`	Solo colores con nombre definido
RGB	`rgb(255, 99, 71)`	Rojo, Verde, Azul (0–255)
RGBA	`rgba(255, 99, 71, 0.5)`	RGB + transparencia (0–1)
HSL	`hsl(9, 100%, 64%)`	Tono, Saturación, Luminosidad
HSLA	`hsla(9, 100%, 64%, 0.5)`	HSL + transparencia
HEX	`#ff6347`	Hexadecimal — el más usado

<!-- Las 6 formas aplicadas en línea -->
<h1 style="color: tomato;">Por nombre</h1>
<h1 style="background-color: rgb(255, 99, 71);">RGB</h1>
<h1 style="background-color: rgba(255, 99, 71, 0.5);">RGBA</h1>
<h1 style="border: 2px solid hsl(9, 100%, 64%);">HSL</h1>
<h1 style="color: #ff6347;">HEX</h1>

📋 Resumen y Ejemplos Prácticos

Repaso rápido de todo lo visto en la sesión, con ejemplos listos para usar en tu proyecto:

🔵 Los 3 tipos de CSS — cuándo usar cada uno

Externo → Proyectos con múltiples páginas. Archivo .css separado, enlazado con <link>.

Interno → Una sola página con estilo único. Dentro de <style> en el <head>.

En Línea → Un solo elemento puntual. Atributo style="" directo en la etiqueta.

💻 Ejemplo completo — CSS Externo

/* estilos.css */
body {
    background-color: #0d1117;
    font-family: Arial, sans-serif;
    color: white;
}

h1 {
    color: #a78bfa;
    font-size: 2em;
}

.destacado {
    border: 2px solid #58a6ff;
    padding: 10px;
    border-radius: 4px;
}

<!-- index.html -->
<head>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <h1>Mi Página</h1>
    <p class="destacado">Texto importante</p>
</body>

💻 Ejemplo — Sintaxis correcta de una regla CSS

/* selector { propiedad: valor; } */

p {
    color: white;         /* color del texto */
    font-size: 16px;      /* tamaño de fuente */
    margin-bottom: 10px;  /* espacio abajo */
}

💻 Ejemplo — Los 5 selectores simples juntos

/* 1. Elemento — aplica a todos los <p> */
p { color: white; }

/* 2. Id — aplica solo al elemento con id="encabezado" */
#encabezado { font-size: 32px; color: #a78bfa; }

/* 3. Clase — aplica a todos con class="caja" */
.caja { background-color: #1c2128; padding: 12px; }

/* 4. Universal — aplica a TODOS los elementos (reset) */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 5. Agrupamiento — aplica a h1, h2 y h3 a la vez */
h1, h2, h3 { color: #58a6ff; font-weight: bold; }

💻 Ejemplo — Colores CSS (las 6 formas)

/* Las 6 formas de escribir el mismo color "tomate" */
h1 { color: tomato; }                       /* Nombre */
h1 { color: rgb(255, 99, 71); }             /* RGB */
h1 { color: rgba(255, 99, 71, 0.5); }      /* RGBA — 50% transparente */
h1 { color: hsl(9, 100%, 64%); }           /* HSL */
h1 { color: hsla(9, 100%, 64%, 0.5); }     /* HSLA — 50% transparente */
h1 { color: #ff6347; }                     /* HEX — el más usado */

💡 Truco para recordar todo: Prioridad CSS → En Línea > Interno/Externo > Navegador. Selectores → Id es único (una vez por página), Clase es reutilizable (muchas veces), Universal afecta a todo. El HEX es el formato de color más usado en proyectos reales.