ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 3
Programador Web – Nivel 1
Unidad 3: Estilos CSS
Contacto: info@[Link]
Web: [Link]
1
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 3
Unidad 3: Estilos CSS
¿Qué es CSS?
¿Cómo incluir CSS en un documento HTML?
Contacto: info@[Link]
Web: [Link]
2
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 3
Que el alumno logre:
• Conocer el lenguaje de hojas de estilo y su implementación en el código HTML.
Contacto: info@[Link]
Web: [Link]
3
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 3
¿Qué es CSS?
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos
electrónicos definidos con HTML. CSS es la mejor forma de separar los contenidos y su presentación y es
imprescindible para crear páginas web complejas.
Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que
obliga a crear documentos HTML bien definidos y con significado completo (también llamados “documentos
semánticos”).
Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite
visualizar el mismo documento en infinidad de dispositivos diferentes.
Al crear una página web, se utiliza en primer lugar el lenguaje HTML para marcar los contenidos, es decir, para
designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de
elementos, etc.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color,
tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento
dentro de la página, etc.
Contacto: info@[Link]
Web: [Link]
4
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 3
BREVE HISTORIA DE CSS
Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML, alrededor del año 1970.
Desde la creación de SGML, se observó la necesidad de definir un mecanismo que permitiera aplicar de forma
consistente diferentes estilos a los documentos electrónicos.
El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y el crecimiento
exponencial del lenguaje HTML para la creación de documentos electrónicos. La guerra de navegadores y la
falta de un estándar para la definición de los estilos dificultaban la creación de documentos con la misma
apariencia en diferentes navegadores.
El organismo W3C (World Wide Web Consortium), encargado de crear todos los estándares relacionados con la
web, propuso la creación de un lenguaje de hojas de estilos específico para el lenguaje HTML y se presentaron
nueve propuestas. Las dos propuestas que se tuvieron en cuenta fueron la CHSS (Cascading HTML Style Sheets)
y la SSP (Stream-based Style Sheet Proposal).
La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuesto por Bert Bos. Entre finales de 1994 y
1995 Lie y Bos se unieron para definir un nuevo lenguaje que tomaba lo mejor de cada propuesta y lo llamaron
CSS (Cascading Style Sheets).
En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a su grupo de trabajo de
HTML. A finales de 1996, el W3C publicó la primera recomendación oficial, conocida como “CSS nivel 1”.
A principios de 1997, el W3C decide separar los trabajos del grupo de HTML en tres secciones: el grupo de
trabajo de HTML, el grupo de trabajo de DOM y el grupo de trabajo de CSS.
El 12 de Mayo de 1998, el grupo de trabajo de CSS publica su segunda recomendación oficial, conocida como
“CSS nivel 2”. La versión de CSS que utilizan todos los navegadores de hoy en día es CSS 2.1, una revisión de CSS
2. Al mismo tiempo, la siguiente recomendación de CSS, conocida como “CSS nivel 3”, continúa en desarrollo
desde 1998 y acompaña el desarrollo de HTML 5.
Contacto: info@[Link]
Web: [Link]
5
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 3
ESPECIFICACIÓN OFICIAL
La especificación o norma oficial que se utiliza actualmente para diseñar páginas web con CSS se puede
consultar libremente en [Link]
El sitio web del organismo W3C dispone de una sección en la que se detalla el trabajo que el W3C está
desarrollando actualmente en relación a CSS y también dispone de un blog en el que se publican todas las
novedades relacionadas con CSS ([Link]
Contacto: info@[Link]
Web: [Link]
6
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 3
FUNCIONAMIENTO BÁSICO DE CSS
Antes de que se generalizara el uso de CSS, los diseñadores de páginas web utilizaban etiquetas HTML
especiales para modificar el aspecto de los elementos de la página. El siguiente ejemplo muestra una página
HTML con estilos definidos sin utilizar CSS: (ver [Link])
<!DOCTYPE html >
<html>
<head>
<meta charset=”utf-8” />
<title>Ejemplo de estilos sin CSS</title>
</head>
<body>
<h1><font color=”red” face=”Arial” size=”5”>Titular de la página</font></h1>
<p><font color=”gray” face=”Verdana” size=”2”>Un párrafo de texto no muy
largo.</font></p>
</body>
</html>
El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el color, el tipo y el
tamaño de letra de cada elemento de la página.
El problema de utilizar este método para definir el aspecto de los elementos se puede ver claramente con el
siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas <font>. Si el
sitio web entero se compone de 10.000 páginas diferentes, habría que definir 500.000 etiquetas <font>. Como
cada etiqueta <font> tiene tres atributos, habría que definir 1.5 millones de atributos.
Como el diseño de los sitios web está en constante evolución, es habitual modificar cada cierto tiempo el
aspecto de las páginas del sitio. Siguiendo con el ejemplo anterior, cambiar el aspecto del sitio requeriría
modificar 500.000 etiquetas y 1.5 millones de atributos.
La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
Contacto: info@[Link]
Web: [Link]
7
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 3
<html>
<head>
<title>Ejemplo de estilos con CSS</title>
<style type=”text/css”>
h1 {color:red;
font-family:Arial;
font-size:20px;
}
p {color:gray;
font-family:Verdana;
font-size:12px;
}
</style>
</head>
<body>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
</body>
</html>
CSS permite separar los contenidos de la página y la información sobre su aspecto. En el ejemplo anterior,
dentro de la propia página HTML se crea una zona especial en la que se incluye toda la información relacionada
con los estilos de la página.
Utilizando CSS, se pueden establecer los mismos estilos con menos esfuerzo y sin ensuciar el código HTML de
los contenidos con etiquetas <font>. Como se verá más adelante, la etiqueta <style> crea una zona especial
donde se incluyen todas las reglas CSS que se aplican en la página.
En el ejemplo anterior, dentro de la zona de CSS se indica que todas las etiquetas <h1> de la página se deben
ver de color rojo, con un tipo de letra Arial y con un tamaño de letra grande. Además, las etiquetas <p> de la
página se deben ver de color gris, con un tipo de letra Verdana y con un tamaño de letra medio.
Definir los estilos de esta forma ahorra miles de etiquetas y millones de atributos respecto a la solución
anterior, pero sigue sin ser una solución ideal. Como los estilos CSS sólo se aplican en la página que los incluye,
si queremos que las 10.000 páginas diferentes del sitio tengan el mismo aspecto, se deberían copiar 10.000
veces esas mismas reglas CSS. Más adelante se explica la solución que propone CSS para evitar este problema.
Contacto: info@[Link]
Web: [Link]
8
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 3
Cómo incluir CSS en un documento HTML
Una de las principales características de CSS es su flexibilidad y las diferentes opciones que ofrece para realizar
una misma tarea. De hecho, existen tres opciones para incluir CSS en un documento HTML.
INCLUIR CSS EN EL MISMO DOCUMENTO HTML
Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> de
HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>).
Ejemplo:
<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” />
<title>Ejemplo de estilos CSS en el propio documento</ title>
<style type=”text/css”>
p { color: black; font-family: Verdana; }
</style>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos
específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas
las páginas del sitio web.
El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario
modificar todas las páginas que incluyen el estilo que se va a modificar.
Contacto: info@[Link]
Web: [Link]
9
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 3
DEFINIR CSS EN UN ARCHIVO EXTERNO
En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan
mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es
.css Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos
archivos CSS como necesite.
Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben seguir los siguientes
pasos:
1) Se crea un archivo de texto y se le añade solamente el siguiente contenido:
p { color: blue; font-family: Verdana; }
2) Se guarda el archivo de texto con el nombre [Link] Se debe poner especial atención a que el archivo
tenga extensión .css y no .txt
3) En la página HTML se enlaza el archivo CSS externo mediante la etiqueta <link> (ver [Link]):
<html><head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel=”stylesheet” type=”text/css” href=”/css/[Link]” media=”screen” /></head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Cuando el navegador carga la página HTML anterior, antes de mostrar sus contenidos también descarga los
archivos CSS externos enlazados mediante la etiqueta <link> y aplica los estilos a los contenidos de la página.
Contacto: info@[Link]
Web: [Link]
10
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 3
Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS:
.: rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS) y la página
HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet
.: type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor
siempre es text/css
.: href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y
puede apuntar a un recurso interno o externo al sitio web.
.: media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más adelante se explican en
detalle los medios CSS y su funcionamiento.
De todas las formas de incluir CSS en las páginas HTML, esta es la más utilizada con mucha diferencia. La
principal ventaja es que se puede incluir un mismo archivo CSS en multitud de páginas HTML, por lo que se
garantiza la aplicación homogénea de los mismos estilos a todas las páginas que forman un sitio web.
Con este método, el mantenimiento del sitio web se simplifica al máximo, ya que un solo cambio en un solo
archivo CSS permite variar de forma instantánea los estilos de todas las páginas HTML que enlazan ese archivo.
INCLUIR CSS EN LOS ELEMENTOS HTML
El último método para incluir estilos CSS en documentos HTML es el peor y el menos utilizado, ya que tiene los
mismos problemas que la utilización de las etiquetas <font>.
<!DOCTYPE html>
<head>
<meta charset=”utf-8” />
<title>Ejemplo de estilos CSS en el propio documento</ title>
</head>
<body>
Contacto: info@[Link]
Web: [Link]
11
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 3
<p style=”color: black; font-family: Verdana;”>Un párrafo de texto.</p>
</body>
</html>
Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas
situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto.
Glosario básico
CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS.
El siguiente esquema muestra las partes que forman un estilo CSS muy básico:
Los diferentes términos se definen a continuación:
.: Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una
parte de “selectores”, un símbolo de “llave de apertura” ({), otra parte denominada “declaración” y por último,
un símbolo de “llave de cierre” (}).
.: Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
.: Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más
propiedades CSS.
.: Propiedad: característica que se modifica en el elemento seleccionado, como por ejemplo su tamaño de
letra, su color de fondo, etc.
Contacto: info@[Link]
Web: [Link]
12
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 3
.: Valor: establece el nuevo valor de la característica modificada en el elemento.
Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener infinitos selectores y cada
declaración puede estar formada por un número infinito de pares propiedad/valor.
El estándar CSS 2.1 define 115 propiedades, cada una con su propia lista de valores permitidos. Por su parte,
los últimos borradores del estándar CSS 3 ya incluyen 239 propiedades.
Contacto: info@[Link]
Web: [Link]
13
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 3
En esta Unidad…
En la presente unidad desarrollamos los conceptos necesarios para incorporar los atributos gráficos a nuestras
estructuras de HTML utilizando el lenguaje CSS
Con las propiedades propuestas podemos comenzar a plantear la estructura gráfica de una página web.
En la próxima Unidad…
En la próxima unidad vamos a comenzar a trabajar con los nuevos elementos incorporados en la versión
HTML5 para maquetar sitios web.
Contacto: info@[Link]
Web: [Link]
14
