CSS aplicado · Fase 2 · Experiencia visual guiada

Paso 1 de 10 · Concepto fundamental

¿Qué es CSS y qué cambia en una página?

CSS significa Cascading Style Sheets (Hojas de Estilo en Cascada). Su función es controlar la presentación visual del contenido estructurado con HTML.

Al terminar este paso debes poder explicar: “HTML estructura el contenido y CSS controla cómo se presenta”.

La relación que debes conservar

HTMLNombre, perfil, habilidades, contacto

+

CSSColor, tipografía, espacios, distribución

→

NavegadorPresenta el CV final

Referencia del concepto: MDN describe CSS como el código que da estilo al contenido web y enseña CSS después de una base de HTML.

Importante: CSS no cambia que un <h1> sea un título ni que una lista siga siendo una lista. Cambia su apariencia.

Compruébalo: el mismo HTML con dos apariencias

Usa los botones para comparar. El contenido no cambia; cambia su presentación.

cv.html

Observa: el contenido es el mismo. Solo cambió la presentación.

Comprueba antes de seguir

¿Cuál afirmación describe mejor la relación entre HTML y CSS?

Paso 2 de 10 · Sintaxis visual

Una regla CSS responde: ¿a quién?, ¿qué propiedad?, ¿con qué valor?

Haz clic en cada parte de la regla. La misma idea se repetirá en todo CSS.

Debes reconocer: selector → propiedad → valor.

Explora la regla

h1 {
color: #145a86;
}

Una declaración CSS está formada por una propiedad y un valor; una regla agrega además el selector que indica qué elementos se estilizan.

Selector

Indica qué elemento o conjunto de elementos HTML recibirá el estilo.

h1

En el CV: selecciona el nombre principal.

Cuando cambia el valor, cambia la apariencia

Prueba otro valor para color

#145a86

cv.html

Comprueba antes de seguir

En h1 { color: navy; }, ¿qué parte es color?

Paso 3 de 10 · Organización

¿Dónde escribimos el CSS?

CSS puede escribirse de varias formas. Para este proyecto usaremos una hoja externa porque separa estructura y presentación.

Práctica del curso: index.html contiene la estructura y styles.css contiene los estilos.

En línea

<h1 style="color:navy">Ana</h1>

Útil para casos muy puntuales, pero mezcla contenido y presentación. No será nuestra estrategia principal.

Interno

<style>
h1 { color: navy; }
</style>

Funciona para demos o documentos pequeños, pero los estilos quedan dentro del HTML.

Externo

<link rel="stylesheet"
 href="styles.css">

✓ Recomendado para este proyecto

Separa responsabilidades y facilita reutilizar, mantener y organizar los estilos.

Mapa de archivos

index.html<link rel="stylesheet" href="styles.css">

Estructura y contenido del CV.

styles.css

body { ... }
h1 { ... }
.seccion { ... }

Reglas de presentación.

Qué debes observar: los dos archivos colaboran, pero cada uno tiene una responsabilidad distinta.

Comprueba antes de seguir

¿Qué opción facilita mantener el diseño separado del contenido y reutilizarlo?

Paso 4 de 10 · Elegir qué estilizar

El selector es la “puntería” de CSS

Selecciona un tipo de selector y observa exactamente qué parte del CV recibe el estilo.

Idea central: antes de escribir una propiedad, debes decidir qué elementos quieres modificar.

h1 selecciona todos los elementos <h1>. En este CV solo hay uno: el nombre principal.

Qué elementos alcanza el selector

cv.html

Cascada y especificidad: solo lo indispensable por ahora

Si varias reglas intentan cambiar la misma propiedad del mismo elemento, CSS decide cuál aplicar. Para comenzar: un ID suele ser más específico que una clase y una clase más específica que un selector de elemento; si la especificidad empata, normalmente gana la regla que aparece después. Evita usar !important como solución habitual.

Comprueba antes de seguir

Quieres dar el mismo estilo a varias secciones del CV. ¿Qué opción es más apropiada?

Paso 5 de 10 · Color con intención

El color comunica, pero la legibilidad manda

Prueba colores en tiempo real y comprueba su contraste. El color nunca debe ser la única pista para entender una interfaz.

Debes distinguir: color modifica el texto y background-color modifica el fondo.

1Elige colores2Comprueba contraste3Observa el CV

Laboratorio de color

Color del texto

#17324d

Color de fondo

#ffffff

Color de acento

#176a9b

Texto de ejemplo: Perfil profesional

Como referencia, WCAG 2.2 requiere normalmente una relación de contraste de al menos 4.5:1 para texto de tamaño normal.

Lo que estás escribiendo con los controles

selectorpropiedadvalor

body {
  color: #17324d;
  background-color: #ffffff;
}

.cv-header {
  background-color: #176a9b;
}

Vista previa del CV

cv.html

Comprueba antes de seguir

Si el texto y el fondo tienen poco contraste, ¿qué deberías hacer?

Paso 6 de 10 · Tipografía + modelo de caja

CSS también controla cuánto “respira” el contenido

La tipografía modifica cómo se lee; el modelo de caja explica el espacio que ocupa cada elemento.

Debes visualizar: contenido → padding → border → margin.

1Ajusta tipografía2Observa legibilidad3Relaciona propiedad y efecto

Tipografía en vivo

Familia tipográfica

Tamaño base: 16px

Interlineado: 1.6

Buena práctica: prioriza legibilidad y jerarquía. Un CV no necesita diez fuentes ni tamaños arbitrarios.

CSS que representa tus ajustes

selectorpropiedadvalor

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

El texto cambia, la estructura HTML no

cv.html

1Mueve un control2Ve qué zona crece3Lee el CSS generado

Controla el modelo de caja

Margin: 20px

Border: 3px

Padding: 24px

.cv-section {
  margin: 20px;
  border: 3px solid #e35775;
  padding: 24px;
}

CONTENT
Texto o imagen

MARGIN · espacio exterior

BORDER · borde

PADDING · espacio interior

CONTENT · contenido

`box-sizing: border-box`

Es una práctica común porque hace más predecible el tamaño de las cajas: el ancho declarado incluye padding y borde. Por eso verás con frecuencia * { box-sizing: border-box; } al inicio de una hoja de estilos.

Comprueba antes de seguir

¿Qué propiedad crea espacio entre el contenido y su borde?

Paso 7 de 10 · Distribución y adaptación

Un diseño debe organizarse y adaptarse, no solo “verse bonito”

Usaremos un layout sencillo con Flexbox y una media query para que el CV funcione en escritorio y móvil.

Debes reconocer: display:flex, gap, max-width y @media.

Regla clave

.cv-layout {
  display: flex;
  gap: 2rem;
}

@media (max-width: 700px) {
  .cv-layout {
    flex-direction: column;
  }
}

Cambia el tamaño del dispositivo

Vista de escritorio

Referencia: MDN señala que las media queries permiten aplicar CSS cuando el entorno cumple una condición y son una parte clave del diseño web responsive.

Comprueba antes de seguir

¿Para qué sirve una media query en este ejercicio?

Paso 8 de 10 · Convenciones

CSS mantenible: no es solo que funcione, sino que se entienda

Antes de diseñar el CV final, revisa decisiones que harán tu CSS más claro y predecible.

Objetivo: escribir estilos que otra persona pueda leer, modificar y reutilizar.

Piensa en `styles.css` como un archivo con zonas

No se trata de poner reglas donde “quepan”. Una hoja mantenible permite localizar rápido qué controla cada bloque y modificarlo sin romper lo demás.

Difícil de entender
.caja3

Explica su función
.cv-section

Una idea sencilla

orden + nombres claros + reutilización = CSS mantenible

Si otra persona puede encontrar, entender y cambiar una regla, vas por buen camino.

Mapa visual de una hoja CSS organizada

Lee de izquierda a derecha. Cada zona tiene un propósito distinto; el color ayuda a distinguirlas, pero también están numeradas y nombradas.

1

Variables

Valores reutilizables: colores, espacios, radios.

:root

2

Base

Reglas generales del documento y caja.

body, *

3

Componentes

Cabecera, secciones, tarjetas y zonas del CV.

.cv-section

4

Estados

Qué ocurre al pasar el mouse o usar teclado.

:hover / :focus

5

Responsive

Ajustes cuando cambia el ancho de pantalla.

@media

Idea clave:lo general va primerolo específico despuésadaptaciones al final

✓ Haz esto

Separa estructura y aparienciaHTML en cv.html y estilos en styles.css.

Nombra por función.perfil, .cv-header, .cv-section.

Reutiliza valoresVariables para colores, espacios y radios que se repiten.

Diseña con accesibilidadContraste, foco visible, tamaños legibles y más de una señal visual.

Usa medidas flexiblesmax-width, unidades relativas y layouts que se adapten.

✗ Evita esto

Nombres sin significado.caja1, .azul2, .texto3 dificultan mantener el proyecto.

Abusar de !importantPuede ocultar problemas de cascada y especificidad.

Copiar reglas sin comprenderlasCada propiedad debe tener un efecto que puedas explicar en tu CV.

Repetir el mismo valor muchas vecesSi un color aparece en diez reglas, conviene convertirlo en variable.

Ahora mira el mapa convertido en código

Los colores del código tienen un significado constante: selector, propiedad, valor, variable, comentario y regla especial.

selectorpropiedadvalorvariablecomentario@regla

/* 1. Variables: valores que reutilizarás */
:root {
  --color-principal: #176a9b;
  --espacio: 1rem;
}

/* 2. Base: reglas generales */
* {
  box-sizing: border-box;
}
body {
  color: #17324d;
  line-height: 1.6;
}

/* 3. Componentes: zonas del CV */
.cv-header {
  background-color: var(--color-principal);
}
.cv-section {
  padding: var(--espacio);
}

/* 4. Estados: interacción */
a:hover,
a:focus-visible {
  text-decoration-thickness: 3px;
}

/* 5. Responsive: adaptación */
@media (max-width: 700px) {
  .cv-layout {
    flex-direction: column;
  }
}

Comprueba antes de seguir

¿Cuál opción representa una mejor práctica para un proyecto mantenible?

Paso 9 de 10 · Aprende haciendo

Da identidad visual al CV de la Fase 1

Completa cinco misiones. Cada decisión actualiza el CSS y la vista previa. Después podrás modificar libremente el código en el Playground.

Producto: el mismo CV HTML, ahora con una hoja CSS propia, legible, responsive y accesible.

Misión 1 · Paleta

Elige una paleta que represente tu CV. Verifica que el texto sea legible.

CV · Fase 2

Laboratorio libre

CSS Playground

Cuando termines las misiones, abre un espacio amplio para experimentar sin comprimir el contenido de la actividad. El HTML del CV permanece fijo y tú modificas únicamente su presentación con CSS.

selector propiedad valor

Antes de generar la evidencia

¿Qué relación debe mantenerse en tu proyecto final?

Paso 10 de 10 · Cierre de la Fase 2

Documenta tu CV estilizado y explica qué aprendiste

La evidencia no solo registra el resultado visual: también registra tus decisiones, comprobaciones y reflexión.

Producto de cierre: PDF con matrícula + archivos del CV + reflexión metacognitiva.

3 · Reflexión metacognitiva

¿Qué cambió en tu forma de entender la relación entre HTML y CSS? *

Describe una decisión visual de tu CV y explica qué propiedades CSS utilizaste para lograrla. *

¿Qué fue lo más difícil y cómo lo resolviste? *

¿Qué hiciste para que tu diseño fuera legible y accesible? *

4 · Genera la evidencia

El reporte incluye tus datos, el CSS final, parámetros visuales, misiones completadas y reflexión. Además puedes entregar CV.html y styles.css como archivos del proyecto.

Completa los campos obligatorios antes de generar el PDF.

5 · Transparencia, accesibilidad y usabilidad

Alcance: este recurso fue diseñado y revisado con criterios de WCAG 2.2 nivel AA, patrones accesibles de WAI-ARIA y las heurísticas de usabilidad de Nielsen. Esto describe criterios aplicados al diseño; no constituye una certificación formal de conformidad.

Accesibilidad

Navegación mediante teclado y foco visible.
Etiquetas e instrucciones asociadas a controles.
Mensajes de estado anunciables con aria-live.
Diseño adaptable y movimiento reducido cuando el sistema lo solicita.
La información no depende exclusivamente del color.

Usabilidad

Progreso y estados visibles.
Lenguaje cercano a la tarea real: estilizar un CV.
Retroceso, restauración y cierre claro de laboratorios.
Prevención y recuperación de errores.
Referencia CSS para reconocer opciones sin memorizarlas.

Transparencia de uso de IAG · UdeC

El artefacto fue elaborado por el docente con apoyo de Inteligencia Artificial Generativa para producir material educativo, apoyar el diseño de actividades y generar código de la herramienta interactiva.
La IA no responde por el estudiante ni sustituye sus decisiones, evidencias o reflexión.
Esta declaración se alinea con la Declaratoria de Uso de IAG del curso y con el Acuerdo No. 23 de 2024 de la Universidad de Colima.
Los datos ingresados y el PDF se procesan localmente en el navegador.

Autoría y derechos

Autor y responsable académico: Ing. Ricardo Jaramillo Velasco.

Facultad de Telemática · Universidad de Colima.

Licencia: CC BY-NC-SA 4.0. El nombre, escudo y signos distintivos institucionales se sujetan a la normativa de la Universidad de Colima.

Importante: el alumno puede modificar colores y CSS en el Playground. Un diseño personalizado puede reducir contraste o legibilidad; por eso el artefacto enseña a comprobarlos, pero la accesibilidad del CV final también depende de las decisiones del estudiante.

6 · Referencias · APA 7

Mozilla Developer Network. (2026). Getting started with CSS. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started
Mozilla Developer Network. (2026). CSS: Styling the content. https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content
Mozilla Developer Network. (2026). The box model. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model
Mozilla Developer Network. (2026). Media query fundamentals. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries
World Wide Web Consortium, Web Accessibility Initiative. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/
World Wide Web Consortium, Web Accessibility Initiative. (2026). Dialog (Modal) Pattern. https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
Nielsen, J. (1994/2024). 10 usability heuristics for user interface design. Nielsen Norman Group.
Universidad de Colima. (2024). Acuerdo No. 23 de 2024: Lineamientos para el uso de Inteligencia Artificial Generativa.

El recurso fue elaborado por el docente con apoyo de inteligencia artificial como herramienta de producción. Las decisiones, respuestas y reflexiones de la evidencia corresponden al estudiante.

Licencia del recurso: Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional (CC BY-NC-SA 4.0).

El HTML ya tiene estructura. Ahora CSS le da identidad visual.

¿Qué es CSS y qué cambia en una página?

La relación que debes conservar

Comprueba antes de seguir