Guía del estudiante: CSS – HOJAS DE ESTILO

Obra de la editorial: EIGER Los Olivos

ESCUELA INTERNACIONAL DE GERENCIA – EIGER
Calle Palacios Valdez 144 – Urb. Panamericana
Los Olivos - Lima - Perú
Diseñador - Editor: Prof. José NIEVA
Todos los derechos reservados. Prohibida la reproducción
total o parcial de esta obra por cualquier medio, sin la
autorización expresa de EIGER.

pág. 1
pág. 2
 TABLA DE CONTENIDO
1. Palabras de Bienvenida
2. Editores de código gratuitos
3. Introducción a CSS
4. Sintaxis CSS
5. Selectores CSS
6. Cómo usar CSS con HTML
7. Comentarios CSS
8. Fuentes CSS
9. Modelo de Caja | CSS
10. Ejercicios Prácticos

pág. 3
pág. 4
Editores de código gratuitos
Si desea seguir adelante, descargue uno de los siguientes editores (gratis)
• Visual Studio Code
• Sublime Text

Introducción a CSS
CSS es un lenguaje de hojas de estilo que se utiliza para describir la presentación de un
documento escrito en un lenguaje de marcado como HTML.
Si acabas de comenzar a aprender HTML o ya tienes experiencia, puedes notar que HTML
no es más que texto en la web. Sin embargo, debe haber color, vida y estilo agregado a
las páginas web y un formato común que aparece en todos los navegadores y celular
digitales.
CSS es tan importante como HTML y JavaScript.

Sintaxis CSS
CSS consiste de reglas de estilo que son interpretadas por el navegador y luego
aplicadas a los elementos correspondientes como párrafos, encabezados, etc.
Una regla CSS tiene dos partes principales un selector y una o más declaraciones:

Selector:
El selector especifica a qué elemento o elementos de la página HTML se aplica la regla
CSS.
Declaración:
Las declaraciones dentro del bloque determinan cómo se formatean los elementos
en un navegador. Cada declaración consiste de una propiedad y un valor

pág. 5
separados por dos puntos (:) y terminado en punto y coma (;), y los grupos de
declaraciones estan rodeados por llaves { }.
Ejemplo:

h1 { color: red; font-size: 10px;

}

En el ejemplo de arriba, hemos seleccionado el elemento h1 para que tenga el

color del texto rojo y un tamaño de fuente de 10px.
Recuerda terminar cada declaración con un punto y coma (;). Esto te permitirá
ingresar múltiples declaraciones, si no lo haces, tendrás erros CSS en tu página
web.

Selectores CSS
Los selectores CSS se utilizan para seleccionar el contenido que deseas diseñar.
Como se mencionó anteriormente, los selectores son parte del conjunto de reglas
CSS. Los selectores CSS seleccionan elementos HTML de acuardo con su id, tipo
de clase, atributo, etc.
A continuación, explicaré los siguientes selectores.
Selector Universal:
El selector universal es el * en CSS. Es el carácter de asterisco. Básicamente es
un selector para seleccionar todos y cada uno de los tipos de elementos en una
página HTML.
El siguiente ejemplo establecerá cualquier elemento html en tu documento HTML
con el texto de la fuente ‘times new roman’, alineará el texto con el centro de la
pagina y cambiará el color del texto azul.
*{
font-family: 'Times New Roman', Times, serif; text-align: center; color: blue;
}

pág. 6
Selector de tipo de elemento:
El selector de tipo coincide con el nombre de un tipo de elemento HTML. Un
selector de tipo coincide con cada instancia del tipo de elemento en el árbol del
documento.
A continuación, cada etiqueta de párrafo se alineará con el centro de la página y
tendrá el color del texto azul.
p { text-align: center; color: blue;
}
Selector de clases:
Un selector de clase es un nombre precedido por un (.).
Cualquier elemento que contenga la clase de título que he creado como ejemplo
tendrá el elemento alineado con el centro de la página y tendrá el color de texto
azul.
Index.html
<h1 class="titulo">Hola Mundo</h1>
<p class="titulo">Bienvenido a CSS</p>
Estilo.css
.titulo { text-align: center; color: blue;
}
Selector de id
El selector de id es un nombre precedido por un caráter hash (#).
En el siguiente ejemplo, el div con el selector de id tendrá el color de fondo gris
para ese contenedor y un padding de 20px.
Index.html
<div id="titulo-div">
<h1 class="titulo">Hola Mundo</h1>
<p class="titulo">Bienvenido a CSS</p>
</div>
Estilo.css
#titulo-div { background-color: gray; padding: 20px;
}

pág. 7
La diferencia entre el id y el selector de clase
La diferencia entre un selector de clase y el selector de id es que el selector de id
se puede usar para identificar un elemento, mientras que el selector de clase se
puede usar para identificar más de un elemento.

Cómo usar CSS con HTML

A continuación, les mostraré las tres formas en que pueden agregar CSS a su
documento HTML.
En línea CSS
La etiqueta style=”” atributo se usa para crear una hoja de estilo interna.
Como puedes ver en el siguiente ejemplo. Al usar el atributo style=”” en línea,
tenemos que establecer la propiedad y el valor dentro de las comillas dobles
<h2 style="color: red; text-align: center;">Hello World</h2>
<p style="text-align: center;">Aprende a programmar!</p>
¿Cuándo deberías usar la etiqueta de estilo en línea?
Tiene sentido utilizar una hoja de estilo interna si estás creando un página web que
tenga solo un documento HTML. Si la página web es más grande, usa una hoja de
estilo externo.
Interno CSS
Una hoja de estilo interna se puede usar si una sola página HTML tiene un estilo
único.
En el siguiente ejemplo, definimos nuestros estilos dentro, la etiqueta de estilo, la
etiqueta de <style>…<style> debe estar dentro de la etiqueta de
<head>…</head>.
<head>
<style> body { background-color: green;
}
h1
{
color: maroon; margin-left: 40px;

pág. 8
 }
</style>
</head>
<body>
<h1>Hola Mundo</h2>
</body>
Si la etiqueta de <style>…</style> se llena a ser demasiado grande, sugeriría usar
una hoja de estilo externa.
Externo CSS
Al usar CSS, es preferible mantener el CSS separado de tu HTML. Colocar CSS
en un archivo permite al diseñador web diferenciar completamente entre HTML y
CSS y también ayuda a que su documento HTML se vea mucho mas limpio y fácil
de navegar. CSS externo es un estilo que contiene solo código CSS y se guarda
con una extensión ‘.css’. Luego, se hace referencia a este archivo CSS en su
documento de HTML usando la etiqueta <link>.
La etiqueta <link> define la relación entre el documento actual y un recurso externo.
Se utiliza con mayor frecuencia para relacionar a hojas de estilo externas. Es un
elemento vacío, solo contiene atributos.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hola Mundo</h1>
<h2>Estoy formateado con una hoja de estilo vinculada.</h2>
</body>
</html>

pág. 9
Estilo.css
h1 { color: green; text-align: center;
}
h2 { color: yellow; margin-top: 10px;
}
Si tuvieras que utilizar las 3 formas diferentes en tu proyecto, el estilo en línea
anulará los estilos externos e internos. Esto se debe a que el navegador lee un
documento HTML de arriba a abajo.

Comentarios CSS
Los comentarios CSS se utilizan para agregar notas al código o para evitar que el
navegador interprete partes específicas de la hoja de estilo.
Para escribir comentarios en CSS usa la siguiente sintaxis /* */. Se puede utilizar
para una sola línea o para varias líneas.
/* un comentario de una línea */ h1 { color: green; text-align: center;
}

/*
Un comentario que se estira sobre muchas líneas
*/
h1 { color: green; text-align: center;
}
h1 { color: green; text-align: center;
}
/* h2 { color: yellow; margin-top: 10px;
} */
En el ejemplo de arriba el estilo CSS no será interpretado por el navegador porque
esta comentado.

pág. 10
Fuentes CSS
Elegir la fuente adecuada para tu sitio web as tan importante como elegir el color
que debe tener tu página web. Elegir la fuente correcta permitirá a sus usuarios
leer el contenido que proporcionas.
Hay miles de fuentes, pero la mayoria no son gratuitos.
Hay cinco Familias de fuentes genericas
• Serif • Sans-serif • Monospace • Cursive • Fantasy
La propiedad font-family
En CSS, usamos la propiedad font-family para especificar la fuente de un texto.
Comienza con la fuente que deseas y termina con una fuente de family genérico
Si el nombre de la fuente es una palabra, necesitas citas “”
Los nombres de las fuentes deben sperarse con una coma
En el siguiente ejemplo, hemos establecido la fuente del text en ‘Arial’ los siguientes
dos valores son el sistema “alternativo” para garantizar la máxima compatibildad
entre navegadores/sistemas operativos.
p { font-family: Arial, Helvetica, sans-serif;
}
Cómo se verá en el navegaor:

Modelo de Caja | CSS

Desde la vista en perspectiva de los modelos de caja, así es como se ve un
elemento en una página web, cajas dentro de cajas. El modelo de caja consta de
cuatro partes:
• Margin / Margen (Espacio Exterior)
• Border / Frontera
• Padding / Relleno (Espacio interior)
• Content / Contenido (elemento)

pág. 11
Cada caja tiene cuatro lados arriba, abajo, izquierdo y derecho. Por lo tanto,
podemos aplicar padding, border, y margin en cada uno de los lados separado o
junto, lo que significa que, si solo queremos que un lado tenga margin, podemos
configurarlo usando margin-left o marginright y lo mismo se aplica a la parte de
arriba y abajo margin-top o margin-bottom.

Margin
Usamos margins para crear espacio entre elementos.
En el siguiente ejemplo, tenemos 2 contenedores, uno usa el modelo de caja y el
otro no.
Puedes ver cuánto espacio hemos establecido entre el contenedor que no está
usando el modelo de caja y también el lado izquierdo y la derecha de nuestro
contenedor que usa el modelo de caja.
index.html
<body>
<div class="titulo-con">
<h1>Usando el modelo de caja</h1>
</div>
<div class="parrafo-con">
<h2>Sin usar el modelo de caja</h2>
</div>

pág. 12
</body>
estilo.css
body { background-color: rgb(205, 205, 205);
}
.titulo-con { background-color: green;
color: #fff; margin-top: 50px; margin-left: 80px; margin-right: 150px;
margin-bottom: 80px;
}
.parrafo-con { background-color: red; color: #fff;
}
Resultado

Si quisiéramos que todos los lados tuvieran la misma cantidad de espacio, podemos
usar la propiedad margin en lugar de especificar todos los lados.
.titulo-con { margin: 50px;
}
El codigo de arriba configurará todos los lados para que tengan 50px de espacio.

Border / Frontera
Los borders son las líneas finales de un elemento.
En el siguiente ejemplo, tenemos un contenedor que tiene un relleno de 10x
alrededor. También está usando la propiedad de border, y la propiedad de border
toma los siguientes valores:
• Border-Width: Cuanto ancho quieres que tenga el border
• Border-style: El tipo de estilo de border (Requerido)
• Border-color: El color de la frontera
index.html
<div class="titulo-con">

pág. 13
 <h1>Usando el modelo de caja</h1>
</div>
estilo.css
.titulo-con { background-color: rgb(229, 233, 148); border: 3px solid rgb(247, 23,
23);
padding: 10px;
}
Resultado

CSS ofrece los siguientes tipos diferentes de border-style

• dotted / punteado
• solid / solido
• double / doble
dashed
Como mencionamos al comienzo de nuestra lección sobre el modelo de caja,
podemos configurar los lados de la caja como queramos. Para la propiedad border,
tenomos los siguiente:
border-top / arriba
border-bottom / abajo
border-right / derecha
border-left / izquierda

Padding / Relleno
Para los ejemplos anteriores, usamos la propiedad de padding frecuentemente para
ver las propiedades de css que estábamos revisando. Configuramos el padding de
los elementos para crear un espacio vacio entre el contenido y el border.
El primer ejemplo no tiene relleno, y el segundo ejemplo tiene un relleno de 20px
alrededor.

pág. 14
Elemento con padding
.titulo-con { background-color: rgb(229, 233, 148); border: solid rgb(247, 23, 23);
padding: 20px;
}

También podemos configurar el relleno individualmente con las siguientes

propiedades:
• padding-top / arriba
• padding-bottom / abajo
• padding-right / derecha
• padding-left / izquierda

Bordes con imágenes

La técnica 9-slice para crear bordes con imágenes
Una de las limitaciones que tenía CSS, es que, si en lugar de utilizar los bordes de los que disponemos
en CSS (sólidos, punteados, etc...) quisieramos hacer algo un poco más complejo con imágenes, podría
volverse una tarea muy complicada. Por esa razón, CSS3 incorporó en su momento un sistema para
crear bordes extensibles basados en una imagen de molde.
La técnica 9-slice
Dicho sistema se denomina 9-slice (muy utilizado en videojuegos) y se basa en delimitar una imagen
trazando cuatro líneas (en rojo). Esto hará que la imagen quede dividida en 9 fragmentos, donde el
fragmento central es descartado y el resto es utilizado de molde para los bordes de un elemento:

pág. 15
De esta forma, los fragmentos 1, 3, 7 y 9 se utilizarán para las esquinas y los
fragmentos 2, 4, 6 y 8 se utilizarán para los bordes laterales, pudiendo expandirlos si se requiere y
considera necesario con alguna de las propiedades que veremos a continuación.
Propiedades para crear bordes
Las propiedades que podemos utilizar para crear bordes con imágenes son las siguientes:
Propiedad Descripción
border-image-width Especifica el grosor de la imagen utilizada para el borde.
Imagen a utilizar para los bordes con imágenes mediante la
border-image-source
técnica 9-slice.
border-image-slice Distancia donde se hace el punto de corte en la imagen.
Tamaño en el que el borde crece hacia fuera. Una especie de
border-image-outset
padding del borde.
Estas propiedades pueden ser algo complicadas, por lo que vamos a utilizar la siguiente imagen
expandible (imagen de la izquierda), que simula ser un antiguo carrete fotográfico, como borde con
imagen. Las líneas rojas no forman parte de la imagen original, sino que se utilizan en este ejemplo
para dejar claro cuáles serían los límites marcados con border-image-slice. Una vez hecho esto,
conseguiremos el resultado de la imagen de la derecha, en el cuál podremos ampliar el texto del
elemento lo que queramos, que se adaptará solo a su contenido:

Para ello, utilizaremos el siguiente código CSS, donde antes que nada, establecemos un ancho al
elemento con width y un border básico para que, en el caso de navegadores que no soporten border-
image, tenga al menos un borde básico y nos sirva también como base a lo que vamos a hacer a
continuación:
.borde {
width: 200px;
border: 42px solid black;

pág. 16
 border-image-width: 42px;
border-image-source: url(https://i.imgur.com/YC5PUl6.png);
border-image-slice: 110;
border-image-outset: 0px;
border-image-repeat: repeat;
Para establecer los límites y poder utilizar imágenes en los bordes, hemos hecho
uso de varias de las propiedades CSS necesarias para los bordes con imágenes.
Veamos una por una para ver como funcionan.
La propiedad border-image-width
La propiedad border-image-width indica el tamaño que tendrá el borde de la imagen. El tamaño
puede ser indicado con unidades (píxeles o porcentajes, por ejemplo) o como un , sin indicar ninguna
unidad, lo que lo tomará como múltiplo del tamaño establecido en border-width.
Propiedad Valor
border-image-width 1234 0| size
En nuestro ejemplo, tanto indicarle un valor de 1 como dejarlo sin especificar, sería lo mismo que
darle un tamaño de borde de de 42px, pero por ejemplo, si indicamos border-image-width: 2, le
estaremos indicando que use un tamaño de 84px. Por otro lado, y al igual que vimos en el apartado
de margin, se puede indicar 1, 2, 3 o 4 parámetros .
Consejo: No olvides que hay que indicar también un border-width y un border-style para que el borde
CSS esté definido y se pueda visualizar.
La propiedad border-image-source
La propiedad border-image-source establece, mediante la función CSS url(), la imagen que vamos a
utilizar para crear nuestro borde con imágenes. Para ello, indicaremos una imagen al igual que lo
hacemos con la propiedad background-image:
Propiedad Valor
border-image-source none |G | url(imagen.png)
Truco: ¡Recuerda que como imagen de fondo puedes usar gradientes de CSS, ya que internamente
se interpretan como imágenes!
La propiedad border-image-slice
La propiedad border-image-slice define el desplazamiento de las líneas divisorias de la imagen, o lo
que es lo mismo, el tamaño de los bordes. Por defecto, el valor es de 100% (tamaño de ancho completo
de la imagen), pero también podemos usar números sin unidad , que simbolizan píxeles de recorte. Se
pueden especificar 1, 2, 3 ó 4 parámetros .
Propiedad Valor
border-image-slice 100% | 5 | | N fill
Por otro lado, añadiendo la palabra clave opcional fill, indicaremos que queremos rellenar el
elemento con el fondo del fragmento 5, que por defecto es descartado. Útil en casos que quieras
aprovechar el fondo.
En nuestro caso, nos podría valer tanto con 110 (110 píxeles de recorte) como con 23%, ya que es más
o menos la cantidad apropiada para establecer el límite tanto de ancho como de alto.

pág. 17
La propiedad border-image-outset
La propiedad border-image-outset establece el factor de crecimiento (hacia fuera) de la imagen.
Muy útil para compensar la imagen si se extiende hasta el contenido. Usar con cuidado, ya que puede
desplazar el contenido.
Propiedad Valor
border-image-outset 1|0|5
Por defecto, esta propiedad no tiene desplazamiento, o lo que es lo mismo, el valor por defecto
es 0.
La propiedad border-image-repeat
Habremos comprobado que en algunas ocasiones, el modo en que se repite la imagen de borde no
es la apropiada, o al menos, no es la que más se adapta a nuestro caso específico. Este
comportamiento se puede variar mediante la propiedad border-image-repeat:
Propiedad Valor Significado
1 parámetro. Comportamiento de
border-image-repeat [repetición en X e Y]
repetición en ambos ejes.
2 parámetros. Comportamiento
[rep. en X] [rep. en Y]
de repetición por separado.
Con dicha propiedad se establece como deben comportarse los fragmentos del borde y el tipo de
repetición que deben efectuar. Se puede usar la modalidad de un parámetro en la que se aplica a
todos los bordes, o la modalidad de dos parámetros donde estableces diferente comportamiento para
los bordes horizontales y verticales.
Esta propiedad puede tomar los siguientes valores:
Valor Significado
Los bordes se estiran hasta rellenar el área. Es el valor por
stretch
defecto.
repeat Los bordes se repiten hasta rellenar el área.
Igual que repeat, pero estira los fragmentos individualmente
round
hasta rellenar el área completa.
Igual que repeat, pero añade espacios hasta rellenar el área
space
completa.
Para verlo más claramente, echemos un vistazo a esta representación visual del comportamiento de
cada uno:

pág. 18
Es importante recalcar los dos últimos valores (round y space) actúan igual que repeat, pero con un
comportamiento ligeramente diferente que nos puede interesar en el caso de que la zona repetida
quede descompensada.
Utilizando la imagen y código CSS anterior, obtendríamos un resultado similar a este, que se
adaptaría sólo al contenido que escribamos dentro del elemento HTML con clase borde :

Atajo: Bordes con imágenes

Como suele ser costumbre, este tipo de propiedades tienen una propiedad para ahorrar espacio y
escribirlo todo de una sola vez. En este caso, la sintaxis es la siguiente:
div {
/* border-image: <source> <slice> <width> <outset> <repeat> */
border-image: url(https://i.imgur.com/YC5PUl6.png) 23% 1 0 round;
}

Funciones CSS
Funciones CSS para calcular cantidades específicas
En CSS, muchas veces necesitaremos un sistema de apoyo para realizar
operaciones más cercanas a un lenguaje de programación que a un lenguaje
de estilos, como pueden ser cálculos o utilizar valores precalculados. Por
esta razón, con el tiempo, se han ido añadiendo mejoras, como las custom
properties, un mecanismo similar a unas variables CSS.
En este artículo vamos a ver algunas funciones CSS, que no son más que
funciones de apoyo que podemos utilizar en CSS para realizar cálculos u
operaciones sencillas de una forma fácil y sencilla, sin tener que abandonar
CSS.
Un resumen de las funciones CSS que veremos:
Función
Descripción
CSS
Permite calcular operaciones con unidades CSS como px, %, vw, vh u otras (incluso
calc()
combinadas)
min() Permite calcular el valor mínimo de las unidades indicadas.
max() Permite calcular el valor máximo de las unidades indicadas.
clamp() Permite calcular valores «ajustados». Equivalente a max(MIN, min(VAL, MAX)).
attr() Permite obtener el valor de un atributo desde CSS.

pág. 19
Valores calculados: Función calc()
Es posible que en algunas ocasiones necesitemos indicar valores
precalculados por el navegador. Por ejemplo, la suma de dos valores que a
priori desconocemos o no sabemos exactamente cuanto suman, pero que el
navegador si debería conocer.
Esto es posible hacerlo con la función calc() de CSS, como se muestra a
continuación:
.elemento {
width: calc(200px + 1em);
height: 300px;
background: blue;
Como se puede ver, se pueden usar operaciones como sumas ( + ), restas ( - ),
multiplicaciones ( * ) o divisiones ( / ) que utilicen alguna de las unidades
soportadas por CSS, como por ejemplo, números, dimensiones, porcentajes,
tiempos, ángulos, etc...
calc() as CSS unit value
12
4
19
6
15
6.0-6.1
111
110
Ten en cuenta que también se pueden anidar funciones calc() una dentro de
otra. Resulta especialmente interesante su utilización junto a variables
(custom properties CSS).
Valor mínimo: Función min()
En algunas ocasiones, necesitaremos que en una propiedad se aplique un
valor de varias posibilidades posibles. De dichas posibilidades, no sabremos
exactamente cuál necesitamos, pero si sabremos una de sus cualidades: es la
más pequeña, es decir, necesitamos el valor mínimo.
CSS permite realizar esto utilizando la función min() que nos permite elegir el
valor más pequeño de 2 o más posibilidades aplicadas por parámetro:
.elemento {
width: min(200px, 25%);
height: 200px;
background: red;
Esto aplicaría un width de 200px, siempre y cuando el 25% del elemento padre sea

pág. 20
más grande de 200px. Todo este cálculo, generalmente realizado en Javascript
debido a su cualidad de lógica de cálculo, puede realizarse desde CSS si sólo
se utiliza exclusivamente para esta finalidad.
Valor máximo: Función max()
De la misma forma que tenemos una función min(), también tenemos una
función max(). Como podemos imaginar, dicha función sirve para lo opuesto de
la función min(): obtener el valor máximo entre varias posibilidades.
Observa el siguiente ejemplo, donde utilizamos más de 2 parámetros (ambas
funciones permiten múltiples valores, no necesariamente dos):
.elemento {
width: max(200px - 100px, 25%, 14vw);
height: 200px;
background: red;
Observa que como se ve en el ejemplo en 200px - 100px, tanto en min() como en max(),
puedes realizar operaciones directamente en su interior sin necesidad de
utilizar la función calc().
Valor ajustado: Función clamp()
Ahora pensemos en un caso que podríamos necesitar y que se puede volver
algo poco legible. Imagina que necesitas obtener el valor mínimo
Con la función clamp() podemos realizar, de forma concisa la operación max(MIN,
min(VAL, MAX)). Veamos un ejemplo:
.elemento {
width: max(100px, min(25%, 300px));
width: clamp(100px, 25%, 300px);
height: 200px;
background: red;
Observa que existen dos líneas con un width. Ambas líneas son equivalentes. El
primer valor de clamp() sería el valor mínimo, mientras que el tercero es
el valor máximo. De esta forma, el navegador realiza lo siguiente:
▪ Obtiene el valor mínimo entre el segundo y tercer parámetro.
▪ Obtiene el valor máximo entre el primer parámetro y el resultado
anterior.
▪ Utiliza el resultado de la operación anterior en el width.
El soporte en navegadores de estas 3 últimas funciones es el siguiente:
CSS math functions min(), max() and clamp()
79
75
79
13.1
66

pág. 21
13.4-13.7
111
110
Valor del atributo: Función attr()
Aunque no es de género matemático como las anteriores, existe la función
CSS attr(), que es algo más particular, ya que permite obtener el valor de un
atributo HTML y utilizarlo desde CSS, generalmente para temas de
decoración.
Por ejemplo, observa el siguiente fragmento de código:
<div class=element"data-author=Manz"div>
<style>
.element::before {
content: attr(data-author);
font-size: 22px;
color: #444;
}</style>
Por medio de una pseudoclase CSS, utilizando la propiedad content, le pedimos
al navegador que utilice el metadato del atributo data-author del elemento donde
se le está aplicando el CSS para mostrarlo como contenido.
Colores CSS
Establecer colores de texto y de fondo
Uno de los primeros cambios de estilo que hacemos cuando aprendemos CSS es hacer variaciones
en los colores de primer plano y de fondo de un documento HTML o de cualquiera de sus
elementos o partes. Sin embargo, indicar el color específico no es una tarea fácil. Hay múltiples
formas de definir un color en CSS, algunas más sencillas, otras más complejas.
Propiedades de color
Primero vamos a ver las propiedades CSS que podemos utilizar para cambiar el color de texto y el
color de fondo de un elemento HTML:
Propiedad Valor Significado
Cambia el color del texto que está en el interior de un
color COLOR
elemento.
background-
COLOR Cambia el color de fondo de un elemento.
color
Como podemos ver en la tabla anterior, la propiedad color establece el color del texto, mientras
que la propiedad background-color establece el color de fondo del elemento. De esta forma,
podemos hacer cosas como estas:
.element {
background-color: black; /* Color de fondo */
color: white; /* Color de texto */
}

pág. 22
Sin embargo, aunque se suele hacer mucho en fases de aprendizaje, lo normal no suele ser indicar
colores con palabras clave, ya que es una forma poco precisa de hacerlo, sino utilizar alguna
función CSS de colores que veremos a continuación.
Formas de indicar un color
Todas las propiedades CSS donde existen valores , establecen la posibilidad de indicar
varias formas alternativas (con algunos derivados) para especificar el color deseado:
Esquema Nombre Descripción
Establece un color mediante una palabra clave
red Palabra clave predefinida
predefinida.
rgb() Función RGB Utiliza una función rgb() (rojo, verde, azul).
Función rgb() o rgba() con un canal alfa
rgba() Función RGB con canal alfa
(transparencia) añadido.
#rrggbb Código RGB hexadecimal Notación RGB abreviada en hexadecimal.
Código RGB hexadecimal Notación RGB abreviada en hexadecimal con un
#rgb
con canal alfa canal alfa añadido.
hsl() Función HSL Función hsl() (matiz de color, saturación y brillo).
hsla() Función HSL con canal alfa Función hsl() o hsla() con un canal alfa añadido.
A continuación iremos explicando cada uno de estos formatos para entender como se especifican
los colores en CSS y utilizar el método que más se adapte a nuestras necesidades.
La mayoría de los editores tienen los denominados ColorPicker, que no son más que un sistema
cómodo y rápido para elegir un color a base de clics por una paleta o circulo visual. También
podemos hacerlo directamente en buscadores como Duck Duck Go o Google.
Consejo: Si lo que buscamos es un sistema para extraer colores (color dropper) de una página web,
imagen u otra aplicación de nuestro escritorio, podemos usar tanto el Developer Tools del
navegador (incorpora uno integrado en el selector de colores), como la aplicación Power Toys (Windows).
Palabras clave de color
El primer caso (y más limitado) permite establecer el color utilizando palabras reservadas de
colores, como red, blue, orange, white, navy, yellow u otras. Existen más de 140 palabras clave
para indicar colores:
Pulsa para mostrar lista de colores...
Además, existen algunos valores especiales que puedes utilizar cuando quieras especificar un
color, como colores transparentes o el color actual del texto, muy útil para SVG, por ejemplo:
Valor Significado
Establece un color completamente transparente (valor por defecto
transparent
de background-color)
Establece el mismo color que se está utilizando para el texto (tanto en CSS,
currentColor
como en SVG)
Veamos algunos ejemplos de palabras clave de color:
.element {
background-color: blue;
background-color: transparent;

pág. 23
 background-color: lightpink;
background-color: rebeccapurple; /* En honor a Rebeca, la hija de Eric Meyer */
}
Como hemos dicho, estas palabras clave son limitadas, por lo que si necesitamos una tonalidad
muy específica puede ser insuficiente, y sería mejor utilizar uno de los códigos o funciones de
color que veremos en los próximos apartados.
Colores del sistema
Además de las palabras clave predefinidas anteriores, también tenemos algunas otras palabras
clave para hacer referencia a ciertos colores establecidos por el sistema operativo. Estas palabras
clave son las siguientes:
Valor Significado
canvas Color de fondo del contenido de una aplicación o documento.
canvastext Color de texto de una aplicación o documento.
linktext Enlace no visitado y no activo.
visitedtext Enlace ya visitado.
activetext Enlace activo.
buttonface Color de fondo de un botón pulsable.
buttontext Color de texto de un botón pulsable.
buttonborder El color del borde un botón pulsable.
field Color de fondo de campos de texto <input>.
fieldtext Color de texto de campos de texto <input>.
highlight Color de fondo de textos seleccionados.
highlighttext Color de texto de textos seleccionados.
selecteditem Color de fondo de ítems seleccionados.
selecteditemtext Color de texto de ítems seleccionados.
mark Color de fondo de un texto especialmente marcado <mark>.
marktext Color de texto especialmente marcado <mark>.
graytext Color de texto desactivado.
* Los cuadritos anteriores se calculan a partir del sistema operativo en tu navegador. Si tienes un
sistema operativo que no soporta alguna de estas palabras clave, te aparecerá con fondo rojo
rayado.
Función RGB
Si queremos indicar en CSS un color utilizando la función RGB, podemos utilizar la función rgb(),
escogiendo entre una de las siguientes variaciones:
Función RGB Descripción
rgb(r, g, b) Notación clásica: Valores numéricos o porcentajes separados por coma.
Se añade al anterior un valor correspondiente al canal alfa, separado por
rgb(r, g, b, a)
coma. Ver canales alfa

pág. 24
 Notación moderna: Valores numéricos o porcentajes separados por
rgb(r g b)
espacio.
Se añade al anterior un valor correspondiente al canal alfa, separado
rgb(r g b / a)
por /. Ver canales alfa
Como se puede ver, en cada uno de los casos anteriores, se deben indicar los valores r, g y b.
Significan rojo, verde y azul, respectivamente, y hacen referencia a la cantidad de color que
poseen estos canales para generar otro color. Para especificarlo se puede hacer de dos formas:
▪ Como números, desde el 0 al 255, siendo el primero el más oscuro y el segundo el más
claro.
▪ Como porcentajes, desde el 0% al 100%, siendo el primero el más oscuro y el segundo el
más claro.
Como se puede ver en la siguiente imagen, donde utilizamos el formato de , si utilizamos una
cantidad rgb(0, 0, 0) de cada canal, obtenemos el color negro (todos los canales están en su valor más
oscuro). En cambio, si utilizamos una cantidad rgb(255, 0, 0), obtendremos el color rojo (solo el
canal rojo está en el más oscuro).

De esta forma, mezclando las cantidades de cada canal, se puede obtener prácticamente cualquier
color. Existen otros esquemas de colores, pero en diseño web es muy importante comprender el
esquema RGB, ya que es uno de los más conocidos.
Veamos algunos ejemplos de indicar colores con la función rgb():
.element {
/* Notación clásica */
background-color: rgb(125, 80, 10);
background-color: rgb(55%, 25%, 75%);
/* Notación moderna */
background-color: rgb(125 80 10);
background-color: rgb(55% 25% 75%);
Más adelante veremos los canales alfa, que actualmente pueden indicarse tanto en las
funciones rgb() como en las funciones rgba().
Formato hexadecimal
El formato hexadecimal es el más utilizado por los desarrolladores web, y viene derivado del
formato RGB. Aunque en principio puede parecer algo extraño y complicado, sobre todo si no has
oído hablar nunca del sistema hexadecimal (sistema en base 16 en lugar del que utilizamos normalmente:
base 10), es simplemente el formato RGB abreviado.

pág. 25
Cada par de letras simboliza el valor del RGB en el sistema de numeración hexadecimal. Por
ejemplo, tenemos el color rojo en RGB, que es rgb(255, 0, 0). Si queremos pasarlo al formato RGB
abreviado, debemos convertir cada valor a hexadecimal, quedando FF (255), 00 (0) y 00 (0). Es
decir, en hexadecimal: #FF0000.
Hexadecimal Hex.
Color RGB Palabra clave
(RGB Abreviado) abreviado
rgb(255, 0, 0) #FF0000 #F00 red (rojo)
rgb(0, 0, 0) #000000 #000 black (negro)
rgb(0, 255, 255) #00FFFF #0FF cyan (azul claro)
rgb(147, 112, 219) #9370DB #97D mediumpurple (lila)
HailPixel nos proporciona una manera muy sencilla y rápida de seleccionar tonalidades de color
en formato hexadecimal con sólo mover el ratón.
Truco: Como se puede ver en la tercera columna, para ahorrar espacio puedes utilizar el formato
hexadecimal abreviado, especificando sólo las primeras tres cifras de cada par. Por
ejemplo, #9933AA como #93A. El color abreviado sólo será fiel cuando los pares de cifras sean
idénticos (o al menos, aproximados).
Veamos algunos ejemplos del formato hexadecimal (RGB abreviado):
.element {
background-color: #512592;
background-color: #000000; /* Abreviable a #000 */
background-color: #451; /* Equivalente a #445511; */
Existe una forma de añadir un canal alfa en los colores hexadecimales, lo explicaremos más
adelante.
Formato HSL
Otra función interesante para indicar colores en CSS es la función hsl(), ya que sus parámetros
suelen ser mucho más intuitivos para la mayoría de los desarrolladores que otros como
hexadecimal o RGB. Su sintaxis es la siguiente:
Función RGB Descripción
hsl(h, s, l) Notación clásica: Número de grados separados por coma.
Se añade al anterior un valor correspondiente al canal alfa, separado por
hsl(h, s, l, a)
coma. Ver canales alfa
hsl(h s l) Notación moderna: Número de grados separados por espacio.
Se añade al anterior un valor correspondiente al canal alfa, separado
hsl(h s l / a)
por /. Ver canales alfa
Las siglas HSL significan matiz de color (hue), saturación y luminosidad (brillo). La primera cifra
selecciona el matiz de color, representado con H en el círculo exterior de la imagen. Se trata de un
valor de 0deg a 360deg. Por otro lado, las dos siguientes, son el porcentaje de saturación y el
brillo del color, respectivamente, en ambos casos un valor de 0% a 100%.

pág. 26
Veamos algunos ejemplos de la aplicación de la función hsl() en nuestro código:
.element {
/* Notación clásica */
background-color: hsl(120deg, 25%, 75%);
/* Notación moderna */
background-color: hsl(120deg 25% 75%);
}
Canales Alfa
En algunos casos, es muy posible que deseemos indicar un color que tenga cierto grado de
transparencia, y de esta forma, refleje el contenido, color o imágenes que se encuentren detrás
parcial o completamente. Hasta ahora solo conocíamos la palabra clave transparent, que es una
transparencia completa aplicable sólo en ciertas situaciones.
Sin embargo, existe la posibilidad de utilizar los denominados canales alfa, que permiten
establecer un porcentaje de transparencia parcial sobre un color. Estos se pueden establecer en
los diferentes formatos vistos hasta ahora, salvo en los colores con palabras clave.
Método Descripción
rgb(r, g, b, a) Notación clásica: Se añade un último parámetro con el porcentaje del canal alfa.
rgb(r g b / a) Notación moderna: Se añade el porcentaje del canal alfa separado por un /.
hsl(r, g, b, a) Notación clásica: Se añade un último parámetro con el porcentaje del canal alfa.
hsl(r g b / a) Notación moderna: Se añade el porcentaje del canal alfa separado por un /.
#rrggbbaa Se añade el porcentaje del canal alfa en hexadecimal como un nuevo par aa.
#rgba Notación abreviada: Idem al anterior, pero sin repetir cada par.
Veamos algunos ejemplos de cada caso:
.element {
background-color: rgb(0, 0, 0, 0.5); /* Notación clásica */
background-color: rgb(0 0 0 / 50%); /* Notación moderna */
background-color: hsl(180deg, 50%, 25%, 0.75); /* Notación clásica */
background-color: hsl(180deg 50% 25% / 75%); /* Notación moderna */
background-color: #aa44bb77;
background-color: #a4b7; /* Notación abreviada */
Ten en cuenta que puedes usar tanto rgba() como hsla() en lugar de rgb() y hsl() para usar
canales alfa. Antiguamente había que utilizarlos de forma obligatoria, pero
actualmente rgb() y hsl() soportan canales alfa sin problemas.

pág. 27
#rrggbbaahexcolornotation
79
49
62
10
52
10.0-10.2
111
110
Consejo: Una herramienta genial para seleccionar varios colores en nuestros proyectos es Adobe
Color CC. Nos permite escoger entre colores análogos, monocromáticos, tríadas, colores
complementarios, compuestos o tonos similares. Muy visual e intuitiva. Otra herramienta, más
simple pero muy práctica es HSL Picker, donde puedes elegir el color deseado utilizando
el formato de colores HSL y pudiendo seleccionar incluso los canales alfa.

pág. 28
Ejercicios Prácticos
Ejercicio 1
A partir del código HTML y CSS que se muestra, añadir los selectores CSS que
faltan para aplicar los estilos deseados. Cada regla CSS incluye un comentario en
el que se explica los elementos a los que debe aplicarse:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio de selectores</title>
<style type="text/css">
/* Todos los elementos de la pagina */
{ font: 1em/1.3 Arial, Helvetica, sans-serif; }
/* Todos los parrafos de la pagina */
{ color: #555; }
/* Todos los párrafos contenidos en #primero */
{ color: #336699; }
/* Todos los enlaces la pagina */
{ color: #CC3300; }
/* Los elementos "em" contenidos en #primero */
{ background: #FFFFCC; padding: .1em; }
/* Todos los elementos "em" de clase "especial" en toda la pagina */
{ background: #FFCC99; border: 1px solid #FF9900; padding: .1em; }
/* Elementos "span" contenidos en .normal */
{ font-weight: bold; }
</style>
</head>
<body>
<div id="primero">
<p> Estamos muy contentos de darle la bienvenida, <a href="#">nuestro proveedor
de servicio al cliente. </a>Es halagador en el gatillo. Pero tampoco lo hizo el patio
en los camiones del almacén. Si no tienes un familiar, si no tienes un trabajo fácil,
no hay necesidad <em>de ningún tipo de trabajo</em>, porque Lacinia lo quiere
para mí.</p>
</div>
<div class="normal">

pág. 29
<p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat. <span><a
href="#">Donec porttitor</a>, magna eu varius luctus,</span> metus massa
tristique massa, in imperdiet est velit vel magna. Phasellus erat. Duis risus. <a
href="#">Maecenas dictum</a>, nibh vitae pellentes que auctor, tellus velit
consectetuer tellus, tempor pretium felis tellus at metus.</p>
<p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis
parturient montes, nascetur ridiculus mus. Proin aliquam convallis ante.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Nunc aliquet. Sed eu metus. Duis justo.</p>
<p>Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat, <em
class="especial">enim id iaculis congue</em>, orci justo ultrices tortor, <a
href="#">quis lacinia eros libero in eros</a>. Sed malesuada dui vel quam. Integer
at eros.</p>
</div>
</body>
</html>

pág. 30
Ejercicio 2
A partir del código HTML proporcionado, añadir las reglas CSS necesarias para que
la página resultante tenga el mismo aspecto que el de la siguiente imagen:

A continuación, se muestra el código HTML de la página sin estilos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejercicio de selectores</title>
</head>
<body>
<h1 id="titulo">Lorem ipsum dolor sit amet</h1>

pág. 31
<p>Nulla pretium. Sed tempus nunc vitae neque. <strong>Suspendisse
gravida</strong>, metus a scelerisque sollicitudin, lacus velit
ultricies nisl, nonummy tempus neque diam quis felis. <span
class="destacado">Etiam sagittis tortor</span> sed arcu sagittis tristique.</p>
<h2 id="subtitulo">Aliquam tincidunt, sem eget volutpat porta</h2>
<p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna. <a href="#">Aenean
turpis metus, <em>aliquam non</em>, tristique in</a>, pretium varius, sapien. Proin
vitae nisi. Suspendisse <span class="especial">porttitor purus ac elit</span>.
Suspendisse eleifend odio at dui. In in elit sed metus pretium elementum.</p>
<table summary="Descripción de la tabla y su contenido">
<caption>Título de la tabla</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col" class="especial">Título columna 1</th>
<th scope="col" class="especial">Título columna 2</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col"></th>
<th scope="col">Título columna 1</th>
<th scope="col">Título columna 2</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" class="especial">Título fila 1</th>
<td>Donec purus ipsum</td>
<td>Curabitur <em>blandit</em></td>

pág. 32
 </tr>
<tr>
<th scope="row">Título fila 2</th>
<td>Donec <strong>purus ipsum</strong></td>
<td>Curabitur blandit</td>
</tr>
</tbody>
</table>
<div id="adicional">
<p>Donec purus ipsum, posuere id, venenatis at, <span>placerat ac, lorem</span>.
Curabitur blandit, eros sed gravida aliquet, risus justo
porta lorem, ut mollis lectus tortor in orci. Pellentesque nec augue.</p>
<p>Fusce nec felis eu diam pretium adipiscing. <span id="especial">Nunc elit elit,
vehicula vulputate</span>, venenatis in,
posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan, diam nisi feugiat ante,
eu congue magna mi non nisl.</p>
<p>Vivamus ultrices aliquet augue. <a href="#">Donec arcu pede, pretium
vitae</a>, rutrum aliquet, tincidunt blandit, pede.
Aliquam in nisi. Suspendisse volutpat. Nulla facilisi. Ut ullamcorper nisi quis mi.</p>
</div>
</body>
</html>

pág. 33
Aunque la propiedad que modifica el color del texto se explica detalladamente en
los próximos capítulos, en este ejercicio solamente es preciso conocer que la
propiedad se llama color y que como valor se puede indicar directamente el nombre
del color.
Los nombres de los colores también están estandarizados y se corresponden con
el nombre en inglés de cada color. En este ejercicio, se deben utilizar los
colores: teal, red, blue, orange, purple, olive, fuchsia y green.

pág. 34
Ejercicio 3
A partir del código HTML y CSS proporcionados, determinar las reglas CSS
necesarias para añadir los siguientes márgenes y rellenos:
1. El elemento #cabecera debe tener un relleno de 1em en todos los lados.
2. El elemento #menu debe tener un relleno de 0.5em en todos los lados y un
margen inferior de 0.5em.
3. El resto de elementos (#noticias, #publicidad, #principal, #secundario) deben
tener 0.5em de relleno en todos sus lados, salvo el elemento #pie, que sólo
debe tener relleno en la zona superior e inferior.
4. Los elementos .articulo deben mostrar una separación entre ellos de 1em.
5. Las imágenes de los artículos muestran un margen de 0.5em en todos sus
lados.
6. El elemento #publicidad está separado 1em de su elemento superior.
7. El elemento #pie debe tener un margen superior de 1em.

pág. 35
/* === IMPORTANTE ======================================= =======
No modificar estos estilos, ya que son imprescindibles para
que la página se ve correctamente.
=========================================== ================*/
/*-- Básico --------------------------------------------- -------------*/
ul, ul li { margen: 0; relleno: 0; estilo de lista: ninguno; }
h1, h2, h3, p, forma { margen: 0; relleno: 0; }
.claro {claro: ambos; }
img { borde: ninguno; }
/*-- Diseño --------------------------------------------- -------------*/
#contenedor {
ancho: 90%;
ancho máximo: 900px;
ancho: expresión (document.body.clientWidth> 901? "900px": "auto");
margen: 0 automático;
}
#cabecera, #menu, #lateral, #contenido, #contenido #principal, #contenido
#secundario, #pie {
borde: 2px sólido #777;
}
#cabecera {claro: ambos; }
#menú { claro: ambos; }
#lateral { flotador: izquierda; ancho: 20%; }
#contenido { float: right; ancho: 78%; }
#contenido #principal { float: izquierda; ancho: 78%; }
#contenido #secundario { float: right; ancho: 20%; }
#pastel {claro: ambos; }
/*--Cabecera --------------------------------------------- -----------*/
#cabecera #logo { float: izquierda; }
#cabecera #buscador { float: right; }

pág. 36
/*-- Menú --------------------------------------------- ---------------*/
#menu ul#menu_principal li { pantalla: en línea; flotador izquierdo; }
/*-- Sección principal -------------------------------------------- ---*/
#contenido #principal .articulo img { ancho: 100px; flotador izquierdo; }
/*-- Pie de página ------------------------------------------- --------*/
#pie .enlaces { float: izquierda; }
#pie .copyright { float: derecha; }
/* === IMPORTANTE ======================================= =======
A partir de aquí, se pueden añadir todos los estilos propios que
sean necesarios.
=========================================== ================*/

pág. 37
Ejercicio 4
A partir del código HTML y CSS proporcionados, determinar las reglas CSS
necesarias para añadir los siguientes bordes:
1. Eliminar el borde gris que muestran por defecto todos los elementos.
2. El elemento #menu debe tener un borde inferior de 1 píxel y azul (#004C99).
3. El elemento #noticias muestra un borde de 1 píxel y gris claro (#C5C5C5).
4. El elemento #publicidad debe mostrar un borde discontinuo de 1 píxel y de
color #CC6600.
5. El lateral formado por el elemento #secundario muestra un borde de 1 píxel y
de color #CC6600.
6. El elemento #pie debe mostrar un borde superior y otro inferior de 1 píxel y
color gris claro #C5C5C5.

página HTML

pág. 38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="pagina_completa_estilos.css"
title="style" />
<title>Lorem ipsum</title>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<div id="logo">
<h1><span>LOGOTIPO</span></h1>
</div>
<div id="buscador">
<form action="#" method="post">
Buscar &nbsp; <input name="busqueda" type="text" />
</form>
</div>
<div class="clear"></div>
</div>
<div id="menu">
<ul id="menu_principal">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Sit</a></li>
<li><a href="#">Amet</a></li>
</ul>

pág. 39
<div class="clear"></div>
</div>
<div id="lateral">
<div id="noticias">
<h3><a href="#">Noticias</a></h3>
<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Lorem ipsum dolor sit
amet</a></p>
<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Consectetuer
adipiscing elit</a></p>
<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Donec molestie nunc eu
sapien</a></p>
<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Maecenas aliquam
dolor eget metus</a></p>
<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Fusce tristique lorem id
metus</a></p>
<h3><a href="#">Enlaces relacionados</a></h3>
<ul>
<li><a href="#">Proin placerat</a></li>
<li><a href="#">Nulla in felis</a></li>
<li><a href="#">Nam luctus</a></li>
</ul>
</div>
<div id="publicidad">
<h3><a href="#">Publicidad</a></h3>
<p>Etiam fermentum, nisl tincidunt blandit interdum, massa velit posuere dolor, sed
euismod sem odio at mi.</p>
<p>Duis porta placerat arcu. Nullam felis pede, commodo vel, suscipit a, molestie
vel, felis. Maecenas mattis est vel est.</p>
<p><a href="#">Seguir leyendo...</a></p>
</div>

pág. 40
</div>
<div id="contenido">
<div id="principal">
<div class="articulo">
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
<img src="imagenes/imagen.png" alt="Imagen gen�rica" />
<p>Nullam est lacus, suscipit ut, dapibus quis, condimentum ac, risus. Vivamus
vestibulum, ipsum sollicitudin faucibus pharetra, dolor metus fringilla dui, vel aliquet
pede diam tempor tortor.</p>
<p>Vestibulum pulvinar urna et quam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Nullam vel turpis vitae dui
imperdiet laoreet. Quisque eget ipsum.</p>
<p>Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed
eleifend justo lectus quis sapien. Ut consequat libero eget est.</p>
<p><a href="#">Seguir leyendo...</a></p>
</div>
<div class="articulo">
<h2>Vivamus lobortis turpis ac ante fringilla faucibus</h2>
<img src="imagenes/imagen.png" alt="Imagen gen�rica" />
<p>Quisque eget ipsum. Donec commodo, turpis vel venenatis sollicitudin, quam
ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget
est.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam dictum hendrerit neque. Mauris id ligula non elit mattis
semper. Fusce arcu ipsum, tempus eget, tincidunt at, imperdiet in, mi.</p>
<p>Sed fermentum cursus dolor. Aenean a diam. Phasellus feugiat. Donec tempor
dignissim sem.</p>
<p><a href="#">Seguir leyendo...</a></p>
</div>
</div>

pág. 41
<div id="secundario">
<h2>Phasellus blandit</h2>
<p>Praesent sodales imperdiet augue. Mauris lorem felis, semper eu, tincidunt eu,
sollicitudin eget, sem. Nulla facilisi. Morbi ut enim ut enim ultricies dapibus.</p>
<p><a href="#">Seguir leyendo...</a></p>
<h2>Nullam vel turpis</h2>
<p>Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed
eleifend justo lectus quis sapien. Ut consequat libero eget est.</p>
<p><a href="#">Seguir leyendo...</a></p>
</div>
</div>
<div class="clear"></div>
<div id="pie">
<span class="enlaces">
<a href="#">Nulla</a> |
<a href="#">Pharetra</a> |
<a href="#">Luctus</a> |
<a href="#">Ipsum</a> |
<a href="#">Proin</a> |
<a href="#">Placerat</a>
</span>
<span class="copyright">
&copy; Copyright Lorem ipsum
</span>
<div class="clear"></div>
</div>
</div>
</body>
</html>

pág. 42
archivo CSS
/* === IMPORTANTE =============================================
No modificar estos estilos, ya que son imprescindibles para
que la página se vea correctamente.
============================================================ */
/*-- Básico ----------------------------------------------------------*/
ul, ul li { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, form { margin: 0; padding: 0; }
.clear { clear: both; }
img { border: none; }
/*-- Layout ----------------------------------------------------------*/
#contenedor {
width: 90%;
max-width: 900px;
width: expression(document.body.clientWidth > 901? "900px": "auto");
margin: 0 auto;
}
#cabecera, #menu, #lateral, #contenido, #contenido #principal, #contenido
#secundario, #pie {
border: 2px solid #777;
}
#cabecera { clear: both; }
#menu { clear: both; }
#lateral { float: left; width: 20%; }
#contenido { float: right; width: 78%; }
#contenido #principal { float: left; width: 78%; }
#contenido #secundario { float: right; width: 20%; }
#pie { clear: both; }
/*-- Cabecera --------------------------------------------------------*/
#cabecera #logo { float: left; }

pág. 43
#cabecera #buscador { float: right; }
/*-- Menu ------------------------------------------------------------*/
#menu ul#menu_principal li { display: inline; float: left; }
/*-- Sección Principal -----------------------------------------------*/
#contenido #principal .articulo img { width: 100px; float: left; }
/*-- Pie de página ---------------------------------------------------*/
#pie .enlaces { float: left; }
#pie .copyright { float: right; }
/* === IMPORTANTE ==============================================
A partir de aquí, se pueden añadir todos los estilos propios que
sean necesarios.
============================================================ */

#cabecera,
#menu,
#lateral,
#lateral #noticias,
#lateral #publicidad,
#contenido,
#contenido #principal,
#contenido #secundario,
#pie {
padding: .5em;
}
#lateral {
padding: 0;
}
#cabecera {
padding: 1em;
}

pág. 44
#menu {
margin-bottom: .5em;
}
#contenido {
width: 77%;
padding: 0;
}
#contenido #principal {
width: 73%;
}
#pie {
padding: .5em 0;
margin-top: 1em;
}
#contenido #principal .articulo {
margin-bottom: 1em;
}
#contenido #principal .articulo img {
margin: .5em;
}
#lateral #publicidad {
margin-top: 1em;
}

pág. 45
Ejercicio 5
A partir del código HTML proporcionado:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio posicionamiento float</title>
<style type="text/css">
</style>
</head>
<body>
<div>
&laquo; Anterior &nbsp; Siguiente &raquo;
</div>
</body>
</html>
Determinar las reglas CSS necesarias para que el resultado sea similar al mostrado
en la siguiente imagen:

pág. 46
Ejercicio 6
Definir las reglas CSS que permiten mostrar los enlaces con los siguientes estilos:
1. En su estado normal, los enlaces se muestran de color rojo #CC0000.
2. Cuando el usuario pasa su ratón sobre el enlace, se muestra con un color de
fondo rojo #CC0000 y la letra de color blanco #FFF.
3. Los enlaces visitados se muestran en color gris claro #CCC.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio de pseudo clases de enlaces</title>
<style type="text/css">
a{
margin: 1em 0;
float: left;
clear: left;
padding: 2px;
}
</style>

pág. 47
</head>
<body>
<a href="#">Enlace numero 1</a>
<a href="#">Enlace numero 2</a>
<a href="#">Enlace numero 3</a>
<a href="#">Enlace numero 4</a>
<a href="#">Enlace numero 5</a>
</body>
</html>

pág. 48
Ejercicio 7
Definir las reglas CSS que permiten mostrar una galería de imágenes similar a la
que se muestra en la siguiente imagen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio galeria de imagenes</title>
<style type="text/css">
</style>
</head>
<body>
<div id="galeria">
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
</div>
</body>
</html>

pág. 49
Ejercicio 8
Modificar el menú vertical sencillo
para que muestre el siguiente
comportamiento:
1) Los elementos deben mostrar
una imagen de fondo
(flecha_inactiva.png):

2) Cuando se pasa el ratón por

encima de un elemento, se debe
mostrar una imagen alternativa
(flecha_activa.png):
3) El color de fondo del elemento también
debe variar ligeramente y mostrar un color
gris más oscuro (#E4E4E4) cuando se

pasa el ratón por encima:

4) El comportamiento anterior se debe
producir cuando el usuario pasa el
ratón por encima de cualquier zona del

elemento del menú, no solo cuando se pasa el

ratón por encima del texto del elemento (este
problema sólo sucede con Internet Explorer 6):
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

pág. 50
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio menu vertical avanzado</title>
<style type="text/css">
ul.menu {
width: 180px;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #7C7C7C;
}
ul.menu li {
border-bottom: 1px solid #7C7C7C;
border-top: 1px solid #FFF;
background: #F4F4F4;
}
ul.menu li a {
padding: .2em 0 .2em 1.3em;
display: block;
text-decoration: none;
color: #333;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#" title="Enlace generico">Elemento 1</a></li>
<li><a href="#" title="Enlace generico">Elemento 2</a></li>
<li><a href="#" title="Enlace generico">Elemento 3</a></li>
<li><a href="#" title="Enlace generico">Elemento 4</a></li>
<li><a href="#" title="Enlace generico">Elemento 5</a></li>
<li><a href="#" title="Enlace generico">Elemento 6</a></li>
</ul>
</body>
</html>

pág. 51
Ejercicio 11
Determinar las reglas CSS necesarias
para mostrar la siguiente tabla con el
aspecto final mostrado en la imagen
(modificar el código HTML que se
considere necesario añadiendo los
atributos class oportunos).
Tabla original:
Aspecto definitivo de la tabla después de aplicar estilos CSS
1) Alinear el texto de las celdas,
cabeceras y título. Definir los bordes de
la tabla, celdas y cabeceras (color gris
oscuro #333):

Tabla con texto alineado y bordes

2) Formatear las cabeceras de fila y
columna con la imagen de fondo
correspondiente en cada caso (fondo_gris.gif, euro.png, dolar.png, yen.png,
libra.png).
Modificar el tipo de letra de la tabla y
utilizar Arial. El color azul claro
es #E6F3FF.
Tabla con colores e imágenes de fondo
3) Mostrar un color alterno en las filas de
datos (color amarillo claro #FFFFCC).

pág. 52
 Tabla con colores de fila alternos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio formatear tabla</title>
</head>
<body>
<table border="1" summary="Tipos de cambio">
<tr>
<th scope="col">Cambio</th>
<th scope="col">Compra</th>
<th scope="col">Venta</th>
<th scope="col">M&aacute;ximo</th>
<th scope="col">M&iacute;nimo</th>
</tr>
<tr>
<th scope="row">Euro/Dolar</th>
<td>1.2524</td>
<td>1.2527</td>
<td>1.2539</td>
<td>1.2488</td>
</tr>
<tr>
<th scope="row">Dolar/Yen</th>
<td>119.01</td>
<td>119.05</td>
<td>119.82</td>
<td>119.82</td>
</tr>
<tr>
<th scope="row">Libra/Dolar</th>
<td>1.8606</td>
<td>1.8611</td>
<td>1.8651</td>
<td>1.8522</td>
</tr>
<tr>

pág. 53
<th scope="row">Euro/Yen</th>
<td>149.09</td>
<td>149.13</td>
<td>149.79</td>
<td>148.96</td>
</tr>
</table>
</body>
</html>

pág. 54
Ejercicio 10
A partir del código HTML proporcionado:
1) Aplicar las reglas CSS necesarias para que el formulario muestre el siguiente
aspecto:

Formulario estructurado a dos columnas

2) Cuando el usuario pasa el ratón por encima de cada grupo de elementos de
formulario (es decir, por encima de cada <li>) se debe modificar su color de fondo
(sugerencia: color amarillo claro #FF9). Además, cuando el usuario se posiciona en
un cuadro de texto, se debe modificar su borde para resaltar el campo que está
activo cada momento (sugerencia: color amarillo #E6B700):
Mejoras en los campos de formulario

pág. 55
3) Utilizando el menor número de reglas
CSS, cambiar el aspecto del formulario
para que se muestre como la siguiente
imagen:

Formulario estructurado a una columna

4) Cuando el usuario pasa el ratón por encima
de un grupo de elementos de formulario (es
decir, por encima de cada <li>) se debe
mostrar el mensaje de ayuda asociado. Añadir las reglas CSS necesarias para que
el formulario tenga el aspecto definitivo mostrado en la siguiente imagen:
Aspecto final del formulario
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Ejercicio 12 - Formulario de alta</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* Formatear el formulario a dos columnas */
body {
font: 13px/1.6 Tahoma, sans-serif;
background: #F5F5F5;
}
.izquierda {
float: left;
clear: left;
}

pág. 56
.derecha {
float: right;
clear: right;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#contenedor {
background: #FFF;
border: 1px solid silver;
margin: 1em auto;
padding: 1em;
width: 768px;
}
span.requerido {
font-size: 1.3em;
font-weight: bold;
color: #C00;
}
h2 {
font: normal 2em arial, sans-serif;
margin: 0;
}
ul li.botones {
border-top: 2px solid #CCC;
clear: both;
float: none;
padding: 1em 0;

pág. 57
 margin-top: 1em;
text-align: right;
width: 100%;
}
ul li.botones input {
font-size: 1.3em;
}
ul li {
margin: 0.5em 0;
padding: 0.5em;
width: 46%;
}
ul li label.titulo {
font-weight: bold;
}
ul li div span {
float: left;
padding: 0.3em 0;
}
ul li div span.completo {
width: 100%;
}
ul li div span.mitad {
width: 50%;
}
ul li div span.tercio {
width: 33%;
}
ul li div span.dostercios {
width: 66%;

pág. 58
}
ul li div span label {
display: block;
font: normal 0.8em arial, sans-serif;
color: #333;
}
ul li p.ayuda {
display: none;
}
ul li input {
padding: 0.2em;
}
input#apellido1, input#apellido2, input#direccion, input#email {
width: 260px;
}
input#codigopostal {
width: 80px;
}
select#provincia {
width: 90px;
}
select#pais {
width: 150px;
}
input#telefonofijo, input#telefonomovil {
width: 135px;
}
/* Cambiar el color en el :hover y resaltar los campos en el :focus */
ul li:hover {
background-color: #FF9;

pág. 59
}
ul li.botones:hover {
background-color: transparent;
}
ul li input:focus {
border: 2px solid #E6B700;
}
/* Formatear el formulario a una columna */
ul li.izquierda, ul li.derecha {
float: none;
width: auto;
}
ul li {
overflow: hidden;
}
ul li label.titulo {
float: left;
width: 150px;
}
ul li div {
margin-left: 160px;
}
/* Aspecto final del formulario con los mensajes de ayuda */
h2 {
margin-bottom: 0.3em;
}
ul li {
border-top: 1px solid #CCC;
margin: 0;
padding: 1em;

pág. 60
}
ul li.botones {
margin: 0;
}
ul li label.titulo {
text-align: right;
width: 100px;
}
ul li div {
margin-left: 110px;
overflow: hidden;
}
ul li {
position: relative;
}
ul li:hover p.ayuda {
display: block;
margin: 0.3em;
position: absolute;
top: 0;
right: 0;
width: 150px;
}
</style>
</head>
<body>
<div id="contenedor">
<h2>Formulario de alta</h2>
<form method="post" action="#">
<ul>

pág. 61
<li class="izquierda">
<label class="titulo" for="nombre">Nombre y apellidos <span class="requerido">*<
/span></label>
<div>
<span class="completo">
<input id="nombre" name="nombre" value="" />
<label for="nombre">Nombre</label>
</span>
<span class="completo">
<input id="apellido1" name="apellido1" value="" />
<label for="apellido1">Primer apellido</label>
</span>
<span class="completo">
<input id="apellido2" name="apellido2" value="" />
<label for="apellido2">Segundo apellido</label>
</span>
</div>
<p class="ayuda">No te olvides de escribir también tu segundo apellido</p>
</li>
<li class="derecha">
<label class="titulo" for="direccion">Dirección <span class="requerido">*</span><
/label>
<div>
<span class="completo">
<input id="direccion" name="direccion" value="" />
<label for="direccion">Calle, número, piso, puerta</label>
</span>
<span class="tercio">
<input id="codigopostal" name="codigopostal" value="" />
<label for="codigopostal">Código postal</label>

pág. 62
 </span>
<span class="dostercios">
<input id="municipio" name="municipio" value="" />
<label for="municipio">Municipio</label>
</span>
<span class="tercio">
<select id="provincia" name="provincia">
<option value=""></option>
<option value="provincia1">Provincia 1</option>
<option value="provincia2">Provincia 2</option>
<option value="provincia3">Provincia 3</option>
</select>
<label for="provincia">Provincia</label>
</span>
<span class="dostercios">
<select id="pais" name="pais">
<option value=""></option>
<option value="pais1">País 1</option>
<option value="pais2">País 2</option>
<option value="pais3">País 3</option>
</select>
<label for="pais">País</label>
</span>
</div>
<p class="ayuda">El código postal es imprescindible para poder recibir los pedido
s</p>
</li>
<li class="izquierda">
<label class="titulo" for="email">Email</label>
<div>

pág. 63
 <span class="completo">
<input id="email" name="email" value="" />
</span>
</div>
<p class="ayuda">Asegúrate de que sea válido</p>
</li>
<li class="derecha">
<label class="titulo" for="telefonofijo">Teléfono <span class="requerido">*</span>
</label>
<div>
<span class="mitad">
<input id="telefonofijo" name="telefonofijo" value="" />
<label for="telefonofijo">Fijo</label>
</span>
<span class="mitad">
<input id="telefonomovil" name="telefonomovil" value="" />
<label for="telefonomovil">Móvil</label>
</span>
</div>
<p class="ayuda">Sin prefijo de país y sin espacios en blanco</p>
</li>
<li class="botones">
<input id="alta" type="submit" value="Darme de alta &rarr;" />
</li>
</ul>
</form>
</div>
</body>
</html>

pág. 64
Ejercicio 11
Determinar las reglas CSS necesarias para mostrar la página HTML que se
proporciona con el estilo que se muestra en la siguiente imagen:

Figura 15.26 Aspecto final que debe mostrar la página HTML proporcionada
A continuación, se indica una propuesta de los pasos que se pueden seguir para
obtener el aspecto final deseado:
• Añadir los estilos básicos de la página (tipo de letra Verdana, color de
letra #192666, imagen de fondo llamada fondo.gif, color de fondo #F2F5FE).
• Definir la estructura básica de la página: anchura fija de 770 píxel, centrada
en la ventana del navegador, cabecera y pie, columna central de contenidos
de anchura 530 píxel y columna secundaria de contenidos de 200 píxel de
anchura.
• La cabecera tiene una altura de 100 píxel y una imagen de fondo
llamada cabecera.jpg.
• Los elementos del menú de navegación tienen un color de fondo #253575, un
color de letra #B5C4E3. Cuando el ratón pasa por encima de cada elemento,
su color de fondo cambia a #31479B. Los elementos seleccionados se
muestran con un color de fondo blanco y un color de letra #FF9000:

Figura 15.27 Imagen detallada del aspecto que muestran los elementos del menú
de navegación

pág. 65
 • Con la ayuda de las imágenes que se proporcionan, mostrar cada uno de los
artículos de contenido con el estilo que se muestra en la siguiente imagen:

Figura 15.28 Aspecto de un artículo de la sección principal de contenidos

• Añadir los estilos adecuados para mostrar los elementos de la columna
secundaria de contenidos con el siguiente aspecto.

Aspecto de las secciones de la columna secundaria de contenidos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>

pág. 66
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="es" />
<meta name="copyright" content="Design/Code: Vit Dlouhy [Nuvio - www.nuvio.cz];
e-mail: [email protected]" />
<title>Mi sitio web</title>
<meta name="description" content="Mi sitio web" />
<meta name="keywords" content="sitio, web" />
<link rel="index" href="./" title="Inicio" />
<link rel="stylesheet" media="screen,projection" type="text/css"
href="./css/principal.css" />
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<h1 id="logo"><a href="./" title="Mi sitio web">Mi sitio web</a></h1>
<div id="buscador">
<form action="" method="get">
<fieldset>
<legend>Buscador</legend>
<input type="text" name="busqueda" size="30" />
<input type="submit" name="botonbuscar" value="Buscar" />
</fieldset>
</form>
</div>
<div class="clear"></div>
</div>
<div id="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li class="seleccionado"><a href="#">Blog</a></li>
<li><a href="#">Sobre mi</a></li>
<li><a href="#">Fotos</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Enlaces</a></li>

pág. 67
</ul>
<div class="clear"></div>
</div>
<div id="contenido">
<div id="principal">
<div class="articulo">
<h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
<p class="info">
<span class="fecha">dd-mm-aaaa 00:00</span>
<span class="categoria"><a href="#">diseño</a></span>
<span class="autor"><a href="#">Nombre Apellido</a></span>
<span class="comentarios"><a href="#">Añadir comentario</a></span>
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque
enim blandit enim bibendum blandit.
Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere
malesuada. Nullam ac metus. Cras non leout est placerat condimentum.</p>
<p class="btn-more"><a href="#">Seguir leyendo...</a></p>
</div>
<div class="clear"></div>
<div class="articulo">
<h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
<p class="info">
<span class="fecha">dd-mm-aaaa 00:00</span>
<span class="categoria"><a href="#">diseño</a></span>
<span class="autor"><a href="#">Nombre Apellido</a></span>
<span class="comentarios"><a href="#">Añadir comentario</a></span>
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque
enim blandit enim bibendum blandit.
Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere
malesuada. Nullam ac metus. Cras non leo
ut est placerat condimentum.</p>
<p class="btn-more"><a href="#">Seguir leyendo...</a></p>
</div>

pág. 68
<div class="clear"></div>
<div class="articulo">
<h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
<p class="info">
<span class="fecha">dd-mm-aaaa 00:00</span>
<span class="categoria"><a href="#">diseño</a></span>
<span class="autor"><a href="#">Nombre Apellido</a></span>
<span class="comentarios"><a href="#">Añadir comentario</a></span>
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque
enim blandit enim bibendum blandit.
Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere
malesuada. Nullam ac metus. Cras non leout est placerat condimentum.</p>
<p class="btn-more"><a href="#">Seguir leyendo...</a></p>
</div>
<div class="clear"></div>
</div>
<div id="secundario">
<h3><a href="#">Sobre mí</a></h3>
<div id="sobremi">
<img src="imagenes/mifoto.gif" alt="Mi foto" />
<p><strong>Nombre apellidos</strong><br />
Edad<br />
Ciudad de residencia<br />
<a href="#">Mi perfil público</a></p>
</div>
<div class="clear"></div>
<h3>Categorías</h3>
<ul id="categorias">
<li class="seleccionado"><a href="#">Categoría 1</a></li>
<li><a href="#">Categoría 2</a></li>
<li><a href="#">Categoría 3</a></li>
<li><a href="#">Categoría 4</a></li>
<li><a href="#">Categoría 5</a></li>
</ul>

pág. 69
<div class="clear"></div>
<h3>Archivo</h3>
<ul id="archivo">
<li class="seleccionado"><a href="#">Enero 200X</a></li>
<li><a href="#">Diciembre 200X</a></li>
<li><a href="#">Noviembre 200X</a></li>
<li><a href="#">Octubre 200X</a></li>
<li><a href="#">Septiembre 200X</a></li>
</ul>
<div class="clear"></div>
<h3>Enlaces</h3>
<ul id="enlaces">
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
<li><a href="#">Enlace 5</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div id="pie">
<p id="copyright">&copy; 200X Nombre de empresa</p>
</div>
</div>
</body>
</html>

pág. 70