Diseño Web 1 — 2026

Temas

CSS - Introducción

¿Qué es?

CSS (Cascading Style Sheet - Hojas de Estilo en Cascada) es un lenguaje que permite asociar estilos a documentos de marcación como html.

Son conjuntos de reglas, que asocian un estilo a una parte o todo el documento.

Son “bibliotecas de estilos”.

¿Por qué los Usamos?

Separación del Contenido y Diseño

Uno de los principales problemas de accesibilidad radica en la utilización de etiquetas y atributos HTML para determinar el formato visual de una página Web.

La utilización de estilos se convierte entonces en la mejor herramienta para separar exitosamente la información del formato visual.

Su uso contribuye a tener documentos bien definidos y de significado completo, llamados “DOCUMENTOS SEMÁNTICOS”.

Reutilización y Mantenimiento

La forma en que CSS se asocian con documentos nos permite reutilizarlos para determinar el formato de sitios enteros, facilitando el mantenimiento del formato visual de los mismos.

Si no usamos CSS: Si no separamos el contenido del diseño, o sea, incluimos los atributos en cada etiqueta html, debemos abrir y modificar todas y cada una de las etiquetas para realizar los cambios.

Beneficios

  • Aumento de accesibilidad, ya que el contenido se mantiene “limpio” con etiquetas semánticas.
  • Trabajo ordenado, disminución del trabajo de producción y mantenimiento.
  • Utilidades que no se pueden lograr con HTML.
  • Anidamiento.
  • Podemos ver el mismo documento en una infinidad de navegadores y dispositivos diferentes.
  • Pueden existir varias hojas de estilo para un mismo documento, discriminando por soporte o hasta se usa para ordenar los estilos en sitios muy complejos.

Sintaxis en CSS

selector {
  propiedad: valor ;
  propiedad: valor ;
}

/*comentario en css*/
  • Selector o patrón de selección: ¿A qué elemento?
  • Propiedad: ¿Qué propiedad deseo cambiar?
  • Valor: ¿Qué valor le doy?
  • Una o más declaraciones: Múltiples declaraciones se separan por punto y coma.

Aplicación de Estilos

CSS Interno

Se puede aplicar en la misma página (html), en el HEAD.

<style type="text/css">
  p {color: red;}
</style>

CSS Externo

Se detalla en un archivo externo (archivo.css) y se llama desde el HEAD del html.

<link href="/css/archivo.css" rel="stylesheet" type="text/css">

O mediante import:

<style type="text/css">
  @import url("/css/archivo.css");
</style>
<link href="/css/archivo.css" rel="stylesheet" type="text/css">
  • href: Url del vínculo, puede ser absoluto o relativo.
  • rel: Tipo de vínculo que se hace con el archivo externo.
  • type: Tipo de datos externos, text/css, textos y reglas css.

Tipos de Selectores

Selectores Simples

Selector Universal

Un selector para todos los elementos.

* {
  color: red;
}

Selectores de Tipo

Selectores de elementos predefinidos (según su etiqueta).

p {
  color: red;
}
h1 {
  color: blue;
}

Selectores de Clase

Selectores de cualquier elemento (o elementos) particularmente denominado por el atributo class.

.nombreClase {
  color: red;
}

Selectores de ID

Selectores de un elemento particularmente denominado por el atributo id. No puede haber en una misma página más de un elemento con el mismo id.

#nombreID {
  color: blue;
}

Selectores de Descendencia

Cadenas de dos o más selectores separados por espacio blanco, que seleccionan elementos que estén dentro de otros. No tienen porque ser “hijos directos”.

p a {
  color: blue;
}

Selectores Agrupados

Agrupación de selectores, separados por una coma, que permiten aplicar las mismas propiedades a diferentes elementos.

p, a {
  color: blue;
}

Nota: Son diferentes a los selectores de descendencia.

Selectores de Atributo

Selectores de elementos HTML en función de sus atributos y/o valores de dichos atributos.

Selecciona todos los enlaces que tengan asociados una clase, cualquiera sea:

a[class] {
  color: red;
}

Selecciona el enlace que redirige al usuario a la página de Google. Tiene un atributo con un valor específico:

a[href="http://www.google.com"] {
  color: green;
}

Selectores Compuestos

Pseudoclases

Selectores que hacen referencia a estados de una etiqueta.

:first-child - Para seleccionar el primer elemento especificado dentro de otro. “Primer hijo de su padre”.

A continuación se seleccionan todos aquellos casos que p sea el primer hijo del elemento que lo contiene:

p:first-child { 
  font-size: 14px; 
}

Pseudoelementos

::before - Inserta dinámicamente contenido al principio del un elemento.

::after - Inserta dinámicamente contenido al final de un elemento.

a::before { 
  content:"Nuevo!"; 
}
a::after { 
  content:"*"; 
}

Herencia - “Estilos en Cascada”

Cuanto más específica sea la regla, más poder tiene. Si hay dos normas iguales, prevalece la última declarada.

!important - Algunos navegadores hacen caso a la importancia e interpretan dicha regla como definitiva.

Prototipo de Hoja CSS

/* GENERAL */
/* TIPOGRAFÍA */
/* ENCABEZADOS */
/* ENLACES */
/* PUBLICIDAD */
/* NAVEGACIÓN PRINCIPAL */
/* NAVEGACIÓN SECUNDARIA */
/* CONTENIDO PRINCIPAL */
/* CONTENIDO SECUNDARIO */
/* PIE */
/* FORMULARIOS */
/* TABLAS */
/* PARTICULARES */

Ejemplo - Estilos Generales

/* GENERAL */

/* Quita rellenos y márgenes, cambia modelo de caja */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box;
}