CSS
¿Qué son las hojas de estilos CSS y para qué sirven?
La idea más importante detrás de las hojas de estilo CSS es separar el contenido de su presentación, es decir, de
su aspecto visual.
En las páginas web el lenguaje HTML se usa para estructurar el contenido semánticamente (títulos, subtítulos,
texto, etc.) y CSS para la maquetación y estética del mismo.
Este principio es fundamental por muchos motivos. Un ejemplo claro es el “diseño adaptativo” (responsive
design): poder adaptar el mismo contenido a diferentes dispositivos. Es decir, que una misma página web se puede
visualizar de una manera diferente en un PC que un móvil, optimizada para cada caso.
Los elementos básicos CSS: reglas, selectores y propiedades
Ejemplo:
Prof. Saraith de J. Osorio G,
Para comenzar a entender CSS, leamos detalladamente el siguiente ejemplo donde con las reglas podemos
definir cosas como éstas:
Aspecto visual de la página según el mockus:
• “El título principal de cada página (<h1>) debe estar centrado, ser de color gris oscuro y usar la fuente
“Montserrat” con un tamaño de 40 pixeles”.
• “Los subtítulos de cada página de nivel dos (<h2>) deben estar alineados a la izquierda, color negro
ligeramente más claro y usar también el tipo de letra “Montserrat”, pero con un tamaño de 32 pixeles.”
• “Las imágenes dentro de la columna principal deben expandirse siempre al ancho máximo de dicha
columna.”
• Etc. etc., etc.
Estas reglas de arriba concretamente traducidas al lenguaje CSS real tendrían el siguiente aspecto:
h1 {
font-family: Montserrat;
font-size: 40px;
color: #333;
text-align: center;
}
Prof. Saraith de J. Osorio G,
h2 {
font-family: Montserrat;
font-size: 32px;
color: #444;
}
div.contenido img {
width: 100%;
}
Con este pequeño ejemplo ya podemos ver perfectamente cómo funcionan las hojas de estilo CSS.
Las reglas
En primer lugar fíjate cómo esta hoja de estilos se divide en tres bloques diferenciados, envueltos en llaves, “{…}”,
esto son las reglas.
Cada una implementa una directiva concreta de la pequeña lista de reglas que formulamos un poco más
arriba.
Prof. Saraith de J. Osorio G,
Los selectores
Para especificar a qué partes de la página HTML se aplica cada regla, le precede un selector. Un selector
especifica el ámbito de aplicación de la regla, es decir, a qué partes de la página aplica.
Las propiedades
Son las que vemos dentro de las llaves de una regla. Las reglas siguen la sintaxis de [propiedad]:[valor].
Por ejemplo:
font-size : 40px;
Aquí estamos diciendo que a los elementos que entran dentro del ámbito de la regla se les aplique un tamaño
de letra de 40 pixeles. Los elementos deben ser por tanto elementos tipo texto, es decir, elementos como <h1>,
<h2>, <p>, etc.
Propiedades CSS básicas, comunes a todos los elementos
Prof. Saraith de J. Osorio G,
• width: establece la anchura del elemento. Pueden ser valores absolutos o relativos al contenedor del
elemento.
• height: similar a height para la altura del elemento.
• margin: espacio exterior al borde del elemento que mantiene con los elementos vecinos.
• padding: espacio entre el borde del elemento y su contenido.
Junto con las propiedades básicas, conviene comentar también el famoso modelo de caja de CSS:
Prof. Saraith de J. Osorio G,
Propiedades CSS para texto
• font-family: tipo de letra (nombre del tipo => “Montserrat”, “Open Sans”, etc.).
• font-size: tamaño de letra.
• font-weight: peso (normal, negrita, ...).
• font-style: estilo (normal, cursiva, ...).
• letter-spacing: espacio entre letras.
• line-height: espacio entre líneas / altura de la línea.
• text-decoration: cosas como subrayados, tachados, etc.
• text-align: alineación del texto (left, center, right).
Propiedades CSS para colores y fondos
• color: color del elemento. Es importante notar que existen diferentes formatos para especificar el color como
palabras predefinidas (“red”, “green”, etc.), formato RGB o valor hexadecimales (ver detalles en el material
de referencia).
• background-color: color del fondo del elemento.
• background-image: usar una imagen de fondo.
Prof. Saraith de J. Osorio G,
• background-repeat: usar una imagen de fondo como mosaico. Permite diferentes modos de organización de
la imagen (ver detalles en material de referencia).
• opacity: opacidad del elemento. Va desde 0 (completamente transparente) hasta 1 (sólido). Un valor de 0.5
sería, por tanto, un nivel de transparencia del 50%.
Propiedades CSS para bordes
• border: añade un borde a un elemento y especifica sus propiedades (grosor, estilo de línea, etc.). Ver también
el modelo de caja de arriba.
• border-color: color del borde.
• border-style: diferentes estilos (sólido, rayitas, puntos, etc.).
• border-radius: redondear las esquinas de un elemento.
Otras propiedades CSS interesantes
• float: propiedad avanzada que permite una maquetación más sofisticada. Posicionar los elementos de
manera “flotante”. Ver este tutorial básico sobre posicionamiento flotante.
• clear: controla el comportamiento de los elementos adyacentes a elementos posicionados de forma flotante.
• overflow: controla el comportamiento de los contenidos que no caben en su elemento contenedor (valores:
visible, hidden, scroll, auto, inherit)
Prof. Saraith de J. Osorio G,
• display: controla diferentes aspectos de la visualización de un elemento, permite incluso ocultarlo con el valor
“none”.
• list-style-image: URL con una imagen que se debe usar como viñeta.
• list-style-type: diferentes estilos de viñetas y numeración para los elementos de la lista.
• box-shadow: aplicar un efecto de sombra a un elemento.
Cascadas y herencia: reutilizar código forma inteligente
Una de las cosas más útiles de las hojas de estilo CSS es que soportan la idea de herencia. Esta idea se
manifiesta básicamente a dos niveles:
1. La herencia de elementos más generales a más específicos.
2. El concepto de “cascada” de hojas de estilo.
Herencia entre elementos HTML
Esta idea es muy simple: los elementos que contienen a otros elementos (elementos contenedores o “padres”)
transmiten sus propiedades a los elementos hijos.
Por ejemplo:
El elemento <body> de una página HTML contiene a todos los demás elementos. Por tanto, si la propiedad CSS
“background-color” es “white” en una regla para <body>, todos los demás elementos van a tener por defecto
Prof. Saraith de J. Osorio G,
también un fondo blanco, salvo que una regla CSS más específica diga lo contrario. Es decir, heredan la propiedad
del elemento padre.
Cómo editar los estilos CSS en una página web
Ahora que hemos visto qué son las reglas CSS y cómo se usan, veamos cómo se incluyen en una página web.
Para ello hay diferentes opciones:
Estilos CSS inline
Las hojas de estilo inline permiten añadir las reglas CSS directamente como atributo de un elemento HTML.
<h1 style=”font-family:Montserrat; color:gray”>Título principal</h1>
Aquí no hay realmente un selector de reglas puesto que la regla ya está dentro del propio elemento. Este tipo de
reglas tienen la mayor prioridad de todas las reglas.
Hojas de estilo CSS embebidas
Prof. Saraith de J. Osorio G,
Con esta opción, escribimos las reglas dentro de un elemento <style> que iría anidado dentro del elemento
<head> de la página HTML.
Aquí reutilizamos el código CSS para los elementos de la página, aunque las reglas sólo serán visibles para está
página en las que se han declarado y no para las demás, de modo que tendríamos que repetir lo mismo también
en las demás páginas.
Hojas de estilo CSS externas
Las hojas de estilo externas son la manera de vincular estilos CSS a una página HTML que se debería utilizar
siempre, salvo que, por razones especiales como las arriba mencionadas, no sea posible.
Esto se hace creando un fichero .css con las reglas CSS y vinculándolo a la página insertando en la página HTML
(como hijo del elemento <head>) una línea CSS como ésta:
<link rel="stylesheet" type="text/css" href="/css/mis-estilos.css" />
Prof. Saraith de J. Osorio G,
