VICTOR ALARCONVOL. 01 — 2025
ACTIVIDAD SUMATIVA 3 · UBACSS para
CSS para
dar forma.
CSS · SELECTORES · COMPOSICIÓN01 — 10
Revista de diseño web · Edición 01
Leer la edición ↗Una edición para explorar
cómo se construye la web.
VICTOR ALARCON
VICTOR ALARCON
01 / 10Arrastra para girar · Toca para abrir
VICTOR ALARCONVOL. 01 — 2025
ACTIVIDAD SUMATIVA 3 · UBA
CSS para
dar forma.
CSS · SELECTORES · COMPOSICIÓN01 — 10
UBA / EDITORIAL02
PRESENTACIÓN DEL AUTORUna mirada
Una mirada
a CSS.
Esta revista corresponde a la tercera actividad sumativa de la Universidad Bicentenaria de Aragua (UBA).
Estudiante
Victor Alarcon
Cédula de identidad
C.I 26612895
Un recorrido práctico por las hojas de estilo, sus selectores y las decisiones que dan forma a una página web.
Tercera actividad sumativaUniversidad Bicentenaria de Aragua · UBA
RUTA DE LECTURA03
EN ESTA EDICIÓNEl recorrido
- Editorial02
- Índice y directorio03
- Introducción04
- Desarrollo05
- CSS en acción06
- Selectores y cascada07
- HTML semántico08
- Conclusiones09
- Créditos10
DIRECTORIO
Dirección editorial · Equipo de desarrollo web
Edición · Ejercicios prácticos
Especialidad · Tecnologías backend con JavaScript
01 / PUNTO DE PARTIDA04
INTRODUCCIÓNLa estructura
se vuelve estilo.
HTML organiza el significado; CSS convierte la estructura en experiencia.
Una página web no es solo contenido: es una estructura de elementos que el navegador interpreta y presenta. HTML organiza el significado; CSS define la apariencia, el ritmo y la relación entre las partes.
En esta edición exploramos las hojas de estilo, los selectores y las declaraciones que permiten posicionar elementos y crear experiencias claras en distintos dispositivos.
El navegador construye la página a partir de estas instrucciones. El contenido conserva su significado aunque cambie su presentación: un artículo puede ocupar dos columnas en una computadora y una sola en un teléfono, sin alterar su orden de lectura.
“Una buena interfaz guía la mirada antes de pedir un clic.”
02 / LAS REGLAS05
DESARROLLOReglas para
dar forma.
Una hoja de estilo reúne reglas que describen cómo se muestra un documento. Cada regla conecta un selector —el elemento que queremos alcanzar— con una lista de declaraciones.
UNA REGLA CSS
section.destacado {
position: relative;
padding: 2rem;
background: #f0c84b;
}El selector section.destacado identifica las secciones que tienen esa clase. Dentro de las llaves, cada declaración combina una propiedad y un valor, separados por dos puntos y cerrados con punto y coma.
Una hoja, muchas páginas
Los estilos pueden escribirse en un archivo externo enlazado desde HTML. Esta separación permite compartir reglas entre páginas, modificar la apariencia sin reescribir el contenido y mantener criterios visuales consistentes.
Una lista de declaraciones puede definir simultáneamente el color, los espacios y los bordes de un componente. Si una declaración contiene un valor inválido, el navegador descarta esa declaración y continúa interpretando las demás.
EN BREVE Selector → objetivo
Propiedad → característica
Valor → resultado
Propiedad → característica
Valor → resultado
03 / DISEÑO RESPONSIVE06
CSS EN ACCIÓNPosición,
espacio y ritmo.
Los selectores pueden apuntar a etiquetas, clases o relaciones entre elementos. Las propiedades controlan tipografía, color, tamaño y posicionamiento.
Con display: grid se distribuye el contenido en columnas; con position se controla su ubicación. Las unidades flexibles y las media queries adaptan el diseño a cada pantalla.
section.clase#identificador[atributo]
Usar selectores claros y específicos hace que las hojas de estilo sean más fáciles de mantener.
Elegir cómo se distribuye el espacio
Flexbox resulta útil para alinear elementos en una dirección, como una barra de navegación. Grid organiza filas y columnas. Ambos permiten construir composiciones flexibles sin depender de coordenadas fijas.
Un elemento con position: relative mantiene su lugar en el flujo y puede actuar como referencia para un hijo con position: absolute. En cambio, fixed suele anclar el elemento a la ventana y sticky lo mantiene visible al alcanzar un límite de desplazamiento.
04 / ELEGIR CON PRECISIÓN07
SELECTORES Y CASCADALa regla
encuentra su lugar.
Un selector indica qué elementos reciben una regla. El selector de tipo, como p, alcanza todos los párrafos; una clase como .resumen permite reutilizar un estilo; un identificador como #portada señala un elemento cuyo atributo id debe ser único en el documento.
RELACIONES ENTRE ELEMENTOS
.articulo > p {
line-height: 1.7;
}
a:focus-visible {
outline: 2px solid currentColor;
}El combinador > selecciona hijos directos. Las pseudoclases describen estados: :hover responde al puntero y :focus-visible permite destacar controles al navegar con el teclado. Así, el diseño también comunica cómo se usa la interfaz.
¿Qué regla gana?
Cuando varias reglas declaran la misma propiedad, la cascada considera su origen, importancia y capas, entre otros criterios. Dentro de un mismo nivel, la especificidad distingue los selectores; si esta empata, prevalece la declaración que aparece después.
No conviene resolver cada conflicto con !important. Es más claro mantener clases breves, agrupar reglas relacionadas y revisar los estilos calculados en las herramientas del navegador.
05 / CONTENIDO CON SENTIDO08
HTML SEMÁNTICOAntes de la forma,
el significado.
El HTML semántico describe la función del contenido, no solamente su apariencia. Un encabezado presenta un tema, un artículo reúne una pieza autónoma y una navegación identifica enlaces para recorrer el sitio.
Section: agrupar un tema
<section> representa una sección temática del documento y normalmente debe contar con un encabezado que la identifique. No sustituye a todos los contenedores: si solo se necesita una caja para aplicar estilos, un <div> puede ser suficiente.
Hgroup: un título con contexto
<hgroup> agrupa un encabezado con párrafos relacionados, como un subtítulo o una frase introductoria. La jerarquía sigue dependiendo de h1 a h6; no se elige su nivel por el tamaño de letra que se desea mostrar.
ESTRUCTURA DE UN APARTADO
<section>
<hgroup>
<h2>Diseño web</h2>
<p>Estructura y presentación</p>
</hgroup>
<p>Contenido del apartado…</p>
</section>Una estructura clara ayuda a lectores, tecnologías de asistencia y buscadores a interpretar la página. Para acompañarla, conviene escribir títulos descriptivos, textos alternativos útiles para las imágenes y enlaces que expliquen su destino.
06 / PARA LLEVAR09
CONCLUSIONESDiseñar es
decidir.
Comprender CSS ayuda a construir sitios más consistentes, legibles y accesibles. Las hojas de estilo expresan decisiones; los selectores conectan esas decisiones con el documento; las declaraciones convierten la intención en una presentación visible.
Al combinar estructura semántica, posicionamiento consciente y reglas responsivas, cada dispositivo recibe una experiencia pensada para su contexto.
✳
Primero la estructura.
Después, la forma.
Siempre, las personas.
El próximo paso: experimentar, inspeccionar y volver a ajustar.
UBA / CRÉDITOS10
✳
CRÉDITOSHecha para
compartir.
Revista gráfica e interactiva creada como ejercicio práctico de diseño web. Una exploración de HTML semántico, hojas de estilo CSS y tecnologías JavaScript para la web.
Edición
Victor Alarcon · UBA
VICTOR ALARCON Fin de la edición · Gracias por leer