03 CSS Ya

Orden
del
concept
o
Concepto
Que son las hojas de estilo (CSS)?
Definicin de estilos a nivel de marca HTML.
Definicin de estilos a nivel de pgina.
Propiedades relacionadas a fuentes.
Agrupacin de varias marcas HTML con una misma

regla de estilo.
Definicin de varias reglas para una misma marca

HTML.
Propiedades relacionadas al texto.
Ms propiedades relacionadas al texto.
Herencia de propiedades de estilo.
10
Definicin de un estilo en funcin del contexto.
11
Definicin de hojas de estilo en un archivo

externo.
12
Definicin de estilos por medio de clases.
13
Definicin de estilos por medio de Id.
14
Propiedades relacionadas al borde de una marca

HTML.
15
Ms propiedades relacionadas al borde de una

marca HTML
16
Propiedades relacionadas al padding de una marca

HTML.
17
Propiedades relacionadas al margen de una marca

HTML.
18
Propiedades relacionadas a listas.
19
Propiedades relacionadas al fondo (background)
20
Propiedades relacionadas a fuentes (FORMATO

RESUMIDO)
21
Propiedades relacionadas al border (FORMATO

RESUMIDO)
22
Propiedades relacionadas al padding (FORMATO

RESUMIDO)
23
Propiedades relacionadas al margin (FORMATO

RESUMIDO)
24
Propiedades relacionadas al fondo (background)

(FORMATO RESUMIDO)
25
El selector universal *
26
Pseudoclases
Detalle
Problem
Problem
del
a
a
concept
a
resuelto
o
resolver
27
Eliminar el subrayado a un enlace por medio de las

pseudoclases
28
Creacin de un men vertical configurando las

pseudoclases.
29
Creacin de un men horizontal con una lista.
30
Propiedades relacionadas a la dimensin de un

objeto en la pgina.
31
Unidades de medida (px, cm, mm, em etc.)
32
Formas para indicar el color.
33
Definir un cursor para un control HTML.
34
Aplicacin de hojas de estilo a un formulario.
35
Definiendo reglas de estilo a una tabla.
36
Posicionamiento relativo.
37
Posicionamiento absoluto.
38
Disposicin de 2 columnas.
39
Propiedad float aplicada a una imagen.
40
Disposicin de 2 columnas (propiedad float)
41
Disposicin de 2 columnas, cabecera y pie.
42
1 - Que son las hojas de estilo (CSS)?
CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada.
Las hojas de estilo es una tecnologa que nos permite controlar la apariencia de una pgina
web. En un principio, los sitos web se concentraban ms en su contenido que en su
presentacin.
HTML no pone mucha atencin en la apariencia del documento. CSS describe como los
elementos dispuestos en la pgina son presentados al usuario. CSS es un gran avance que
complementa el HTML y la Web en general.
Con CSS podemos especifiar estilos como el tamao, fuentes, color, espaciado entre textos y
recuadros as como el lugar donde disponer texto e imagenes en la pgina.
El lenguaje de las Hojas de Estilo est definido en la Especificaciones CSS1 y CSS2 del World
Wide Web Consortium (W3C), es un estndar aceptado por toda la industria relacionada con la
Web, o por lo menos, gran parte de navegadores (es verdad el IExplorer de Microsoft nos
puede dar un dolor de cabeza). Podemos visitar W3C
Veremos que podemos asociar las reglas de estilo a las marcas HTML de tres maneras:
directamente a la marca, en el head de la pgina o agrupar las reglas de estilo en un archivo
independiente con extensin *.css
En este curso veremos las tres metodologas, pero pondremos nfasis en la tercera forma, que
es la ms adecuada para separar el contenido de la pgina y la forma como se debe
representar la misma por medio de la hoja de estilo.
El curso brinda un concepto terico corto, luego un problema resuelto que invito a ejecutar,
modificar y jugar con el mismo. Por ltimo, y lo ms importante, un ejercicio propuesto que
nos permitir saber si podemos aplicar el concepto.
Simulador (Cuando presiona el botn "ejecutar el programa" se graba lo que contiene la
caja de texto y se visualiza el resultado en una pgina)
Problema:El objetivo de esta pequea pgina es ver como afecta el estilo definido a la marca
p (prrafo)
pagina1.html
<html>
<head>
</head>
<body>
<p style="color:#000000;background-color:yellow;font-family:vardana;fontsize:25px;text-align:center">Esto es un ejemplo</p>
</body>
</html>
2 - Definicin de estilos a nivel de marca HTML.
Es la forma ms fcil pero menos recomendada para aplicacin de un estilo a una marca
HTML. Se define en la propiedad style los estilos a definir para dicha marca.
Es comn definir estilos directamente en las marcas HTML cuando estamos diseando la
pgina y posteriormente trasladar el estilo creado a una hoja de estilos.
La sintaxis para definir un estilo a una marca HTML es la siguiente:
<html>
<head>
</head>
<body>
<h1 style="color:#ff0000;background-color:#ffff00">
Este mensaje es de color rojo sobre fondo amarillo.
</h1>
</body>
</html>
Por defecto, todo navegador tiene un estilo definido para cada marca HTML, lo que hacemos
con la propiedad style es redefinir el estilo por defecto. En este problema definimos que la
marca h1 defina como color de texto el rojo y como color de fondo el amarillo:
</h1>
Veremos ms adelante que hay muchas propiedades en CSS. En este primer ejemplo
inicializamos las propiedades color (define el color del texto) y background-color (define el
color de fondo del texto).
Cada vez que inicializamos una propiedad debemos separarla de la siguiente por punto y
coma.
Cuando definimos estilos directamente en las marcas HTML, tenemos que tener en cuenta que
el estilo se aplica nicamente a la marca donde inicializamos la propiedad style, es decir, si
tenemos dos secciones h1, deberemos definir la propiedad style para cada marca:
Primer ttulo
</h1>
Segundo ttulo
</h1>
Como podemos observar, ms alla que los dos estilos son exactamente iguales, estamos
obligados a definirlos para cada marca HTML.
Problema:Definir un texto dentro de la marca HTML h1. Luego definir un estilo interno a la
marca que fije el color de texto en rojo y el fondo en amarillo.
pagina1.html
<html>
<head>
</head>
<body>
</h1>
</body>
</html>
Problema:
Crear una pgina HTML y definir tres mensajes entre las marcas h1, h2 y h3. Definir el mismo
color para el texto de cada bloque y colores diferentes para el fondo de los mismos (cada
marca HTML debe tener definida la propiedad style).
pagina1.html
<html>
<head>
<title>Problema</title>
</head>
<body>
</body>
</html>
3 - Definicin de estilos a nivel de pgina.
Es la definicin de estilos en una seccin de la cabecera de la pgina HTML donde podemos

definir estilos que se aplican a las distintas marcas HTML de la pgina.
El problema del concepto anterior donde debamos crear un estilo similar para la marca h1 se
puede resolver en forma ms adecuada empleando la definicin de estilos a nivel de pgina.
Problema: Mostrar dos ttulos con texto de color rojo sobre fondo amarillo.
<html>
<head>
<style type="text/css">
h1 {color:#ff0000;background-color:#ffff00}
</style>
</head>
<body>
<h1>Primer ttulo</h1>
<h1>Segundo ttulo</h1>
</body>
</html>
Podemos observar que en la cabecera de la pgina definimos la seccin:
</style>
Debe estar encerrada por la marca style. En este ejemplo indicamos al navegador que en
todos los lugares de esta pgina donde se utilice la marca h1 debe aplicar como estilo de
color de texto el rojo y fondo el amarillo. Podemos observar que es mucho ms eficiente que
definir los estilos directamente sobre las marcas HTML.
Podemos definir estilos para muchas marcas en la seccin style:
<html>
<head>
<style type="text/css">>
h1 {color:#ff0000}
h2 {color:#00ff00}
h3 {color:#0000ff}
</style>
</head>
<body>
<h1>rojo</h1>
<h2>verde</h2>
<h3>azul</h3>
</body>
</html>
Problema:Mostrar dos ttulos con texto de color rojo sobre fondo amarillo.
pagina1.html
<html>
<head>
</style>
</head>
<body>
<h1>Primer ttulo</h1>
<h1>Segundo ttulo</h1>
</body>
</html>
Definir un estilo diferente para las marcas h1,h2,h3,h4,h5 y h6. Mostrar mensajes utilizando
estas marcas a las que se le han definido estilos (por ahora slo conocemos el color de texto y
fondo).
pagina1.html
<html>
<head>
</style>
</head>
<body>
</body>
</html>
4 - Propiedades relacionadas a fuentes.
Contamos con una serie de propiedades relacionadas a fuentes:

font-family
font-size
font-style
font-weight
font-variant
Podemos inicializar algunas o todas las propiedades relacionadas a fuentes, un ejemplo:
<html>
<head>
h1 {
font-family:times new roman;
font-size:30px;
font-style:italic;
font-weight:bold;
}
h2 {
font-family:verdana;
font-size:20px;
}
</style>
</head>
<body>
<h1>Titulo de nivel 1</h1>
</body>
</html>
Como podemos observar, hemos definido dos reglas de estilos para las marcas h1 y h2, eso
significa que el navegador utilizar esas reglas de fuentes para todas las partes de la pgina
que se utilicen dichas marcas HTML.
La primera regla definida para la marca h1 es:
h1 {
font-size:30px;
font-style:italic;
font-weight:bold;
}
Recordemos que para definir la regla de estilo debemos indicar el nombre de la marca HTML a
la que definiremos el estilo y luego, entre parntesis, todas las propiedades y sus valores
separados por punto y coma.
La primera propiedad inicializada es font-family, algunas de las fuentes ms comunes que
puede acceder el navegador son:
Arial
Arial Black
Arial Narrow
Courier New
Georgia
Impact
Tahoma
Times New Roman
Verdana
En caso que la fuente no est disponible el navegador selecciona el estilo por defecto para
esa marca HTML.
Podemos definir varias fuentes por si acaso alguna no se encuentra disponible para el
navegador, esto lo hacemos separando por coma todas las fuentes (se eligen de izquierda a
derecha):
font-family: verdana, arial, georgia;
La segunda propiedad inicializada es font-size, hay varias medidas para indicar el tamao de
la fuente (veremos ms adelante otros sistemas de medida), en nuestro caso indicamos en
pxeles:
font-size:30px;
La tercera propiedad es font-style, que puede tener los siguientes valores :
normal
italic
oblique
La ltima propiedad es font-weight, pudiendo tomar los siguientes valores:
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
Esta propiedad indica el peso de la fuente (mientras tenga un valor mayor los caracteres
sern ms rellenos).
La segunda regla define slo dos propiedades relacionadas a la fuente:
h2 {
font-size:20px;
}
Las propiedades que no se inicializan quedan como responsabilidad al navegador, quien
elegir los valores correspondientes.
Existe una ltima propiedad no utilizada en este ejemplo que es font-variant que puede
asumir estos dos valores:
small-caps
normal
Define si la fuente se muestra en maysculas tipo normal o pequeas.
Problema:Definir para la marca h1 una fuente de tipo 'new times roman', fuente de 30
pixeles, estilo italic y peso bold.
Para la marca h2 definir una fuente de tipo 'verdana' y de 20 pxeles de alto.
pagina1.html
<html>
<head>
h1 {
font-size:30px;
font-style:italic;
font-weight:bold;
}
h2 {
font-size:20px;
}
</style>
</head>
<body>
</body>
</html>
Definir reglas para las marcas HTML: h1,h2,h3,h4,h5 y h6. Inicializar la propiedad font-size
con valores decrecientes para cada una de las marcas (40,30,25,20,15 y 10 pxeles).
Inicializar la propiedad font-family para las tres primeras marcas con los valores: Arial, Arial
Black y Arial Narrow.
pagina1.html
<html>
<head>
</style>
</head>
<body>
</body>
</html>
5 - Agrupacin de varias marcas HTML con una misma regla de

estilo.
Esta caracterstica nos permite ahorrar la escritura de reglas duplicadas para diferentes
marcas HTML.
Supongamos que queremos la misma fuente y color para las marcas h1,h2 y h3 luego podemos
implementarlo de la siguiente manera:
<html>
<head>
h1,h2,h3 {
color:#0000ff;
}
</style>
</head>
<body>
<h1>Ttulo de nivel 1</h1>

</body>
</html>
Es decir, separamos por coma todas las marcas a las que se aplicar la misma regla de estilo:
h1,h2,h3 {
color:#0000ff;
}
Problema:Confeccionar una pgina HTML que defina la misma fuente y color para las marcas
h1,h2 y h3.
pagina1.html
<html>
<head>
h1,h2,h3 {
color:#0000ff;
}
</style>
</head>
<body>
</body>
</html>
Definir la misma fuente, color y tamao de fuente para las marcas p (prrafo) y h6 (tener en
cuenta que cuando vea la pgina el texto que se encuentra en la marca h6 difiere del texto
que se encuentra dentro del prrafo por la propiedad font-weight (ya que la marca h6 es de
tipo bold y la marca p tiene por defecto normal)
pagina1.html
<html>
<head>
</style>
</head>
<body>
</body>
</html>
6 - Definicin de varias reglas para una misma marca HTML.
En algunas circunstancias, es necesario desglosar la inicializacin de propiedades en distintas

reglas.
Supongamos que queremos todas las cabeceras con la misma fuente pero tamaos de fuente
distinta, luego podemos implementarlo de la siguiente manera:
<html>
<head>
h1,h2,h3,h4,h5,h6 {
font-family:Verdana;
}
h1 {
font-size:40px;
}
h2 {
font-size:30px;
}
h3 {
font-size:25px;
}
h4 {
font-size:20px;
}
h5 {
font-size:15px;
}
h6 {
font-size:10px;
}
</style>
</head>
<body>
</body>
</html>
Es decir, podemos inicializar un conjunto de marcas HTML con una serie de propiedades de
estilo comunes. Luego agregamos en forma individual las propiedades no comunes a dichas
marcas:
h1,h2,h3,h4,h5,h6 {
}
h1 {
font-size:40px;
}
Es decir, a la marca h1 realmente le hemos definido 2 propiedades: font-family y font-size. Lo
mismo para las otras marcas HTML.
Problema:Definir todas las marcas de cabecera (h1,h2,h3,h4,h5,h6) con la misma fuente
(Verdana) pero tamaos de fuente distinta.
pagina1.html
<html>
<head>
h1,h2,h3,h4,h5,h6 {
}
h1 {
font-size:40px;
}
h2 {
font-size:30px;
}
h3 {
font-size:25px;
}
h4 {
font-size:20px;
}
h5 {
font-size:15px;
}
h6 {
font-size:10px;
}
</style>
</head>
<body>
</body>
</html>
Definir para la marca <h6> el mismo tamao de fuente (12px) que la marca <p> (prrafo) pero
color azul para el ttulo y gris claro (color:#aaaaaa) para el prrafo. Agrupar las dos marcas
para la definicin de la fuente y posteriormente agregar a cada marca el valor respectivo
para el color del texto.
pagina1.html
<html>
<head>
</style>
</head>
<body>
</body>
</html>
7 - Propiedades relacionadas al texto.
A una de estas propiedades ya la vimos cuando comenzamos con los primeros conceptos:
color, nos permite definir el color del texto, lo podemos indicar por medio de tres valores
hexadecimales que indican la mezcla de rojo, verde y azul. Por ejemplo si queremos rojo
puro debemos indicar:
color:#ff0000;
Si queremos verde puro:
color:#00ff00
Si queremos azul puro:
color:#0000ff
Luego si queremos amarillo debemos mezclar el rojo y el verde:
color:#ffff00
Hay muchos programas que nos permiten seleccionar un color y nos descomponen dicho valor
en las proporciones de rojo,verde y azul.
Otra forma de indicar el color, si tenemos los valores en decimal, es por medio de la siguiente
sintaxis:
color:rgb(255,0,0);
Es decir, por medio de la funcin rgb (red,green,blue), indicamos la cantidad de rojo, verde y
azul en formato decimal.
La segunda propiedad relacionada al texto es text-align, que puede tomar alguno de estos
cuatro valores:
left
right
center
justify
Si especificamos:
text-align:center;
El texto aparecer centrado. Si queremos justificar a derecha, emplearemos el valor right y si
queremos a la izquierda, el valor ser left.
La tercera propiedad relacionada al texto que podemos emplear es text-decoration que nos
permite entre otras cosas que aparezca subrayado el texto, tachado o una lnea en la parte
superior, los valores posibles de esta propiedad son:
none
underline
overline
line-through
Como ejemplo, definiremos estilos relacionados al texto para las marcas de cabecera h1,h2 y
h3:
<head>
h1 {
color:#ff0000;
text-align:left;
text-decoration:underline;
}
h2 {
color:#dd0000;
text-align:center;
}
h3 {
color:#aa0000;
text-align:right;
}
</style>
</head>
<body>
<h1>Ttulo de nivel 1.<h1>
</body>
</html>
Es decir, para los ttulos de nivel 1 tenemos la regla:
h1 {
color:#ff0000;
text-align:left;
}
Es decir, color de texto rojo intenso, el texto debe aparecer de izquierda a derecha y
subrayado.
Luego para la marca h2 tenemos:
h2 {
color:#dd0000;
text-align:center;
}
El color sigue siendo rojo pero un poco ms oscuro, el texto debe aparecer centrado y
subrayado.
Y por ltimo:
h3 {
color:#aa0000;
text-align:right;
}
Para los ttulos de nivel tres, el texto es rojo ms oscuro, alineado a derecha y subrayado.
Problema:Definir estilos relacionados al texto para las marcas de cabecera h1,h2 y h3,
inicializando las propiedades: color, text-align y text-decoration con los siguientes valores:
para la marca h1:
color:#ff0000;
text-align:left;
para la marca h2:
color:#dd0000;
text-align:center;
y para la marca h3:
color:#aa0000;
text-align:right;
pagina1.html
<html>
<head>
h1 {
color:#ff0000;
text-align:left;
}
h2 {
color:#dd0000;
text-align:center;
}
h3 {
color:#aa0000;
text-align:right;
}
</style>
</head>
<body>
</body>
</html>
Definir para la marca de prrafo (p) el color verde puro, texto centrado. Imprimir varios
prrafos para ver los resultados segn la regla de estilo definida. Que valor debemos definir
para que el texto aparezca con color rojo oscuro.
pagina1.html
<html>
<head>
</style>
</head>
<body>
</body>
</html>
8 - Ms propiedades relacionadas al texto.
Vimos en el concepto anterior las propiedades:

color
text-align
text-decoration
Ahora veremos el objetivo de las siguientes propiedades que nos faltan:
letter-spacing
word-spacing
text-indent
text-transform
La propiedad letter-spacing y word-spacing permiten indicar el espacio que debe haber entre
los caracteres y entre las palabras.
La propiedad text-indent, indenta la primera linea de un texto. A partir de la segunda lnea,
el texto aparece sin indentacin. Podemos indicar un valor negativo con lo que la indentacin
es hacia la izquierda.
Por ltimo, la propiedad text-transform puede inicializarse con alguno de los siguientes
valores:
none - capitalize - lowercase - uppercase
Cada uno de estos valores transforman el texto como sigue:
capitalize: Dispone en maysculas el primer caracter de cada palabra.
lowercase: Convierte a minsculas todas las letras del texto.
uppercase: Convierte a maysculas todas las letras del texto.
none: No provoca cambios en el texto.
El siguiente ejemplo define reglas para las marcas h1 y p:
<html>
<head>
h1 {
letter-spacing:10px;
word-spacing:30px;
text-transform:capitalize;
}
p {
text-indent:20px;
}
</style>
</head>
<body>
<h1>Este es un ttulo de nivel 1</h1>
<p>Todo el texto siguiente se encuentra encerrada en la marca de
prrafo
y con el objetivo de ver el efecto de la propiedad text-indent.
La propiedad text-indent podemos inicializarla con un valor positivo,
como es el caso actual o podemos inicializarla con un valor negativo
lo que
provocar que el texto de la primera lnea del prrafo
comience en una columna inferior al de todo el bloque. </p>
</body>
</html>
La cabecera de nivel uno, tiene la siguiente regla:
h1 {
word-spacing:30px;
}
Es decir que las letras deben tener una separacin de 10 pixeles, las palabras deben estar
separadas por 30 pixeles y por ltimo deben disponerse en maysculas la primera letra de
cada palabra.
Para la marca p tenemos la siguiente regla:
p {
text-indent:20px;
}
Es decir, la primera lnea del prrafo deber imprimirse 20 pxeles a la derecha donde
normalmente debera aparecer.
Problema:Inicializar las marcas h1 y p con los siguientes valores:
h1 {
word-spacing:30px;
}
p {
text-indent:20px;
}
pagina1.html
<html>
<head>
h1 {
word-spacing:30px;
}
p{
text-indent:20px;
}
</style>
</head>
<body>
<h1>Este es un ttulo de nivel 1</h1>
<p>Todo el texto siguiente se encuentra encerrada en la marca de prrafo y con el
objetivo de
ver el efecto de la propiedad text-indent. La propiedad text-indent podemos inicializarla
con un valor positivo, como es el caso actual o podemos inicializarla con un valor
negativo lo que provocar que el texto de la primera lnea del prrafo comienze en una
columna inferior al de todo el bloque. </p>
</body>
</html>
Definir las marcas de cabecera h1,h2 y h3 con valores decrecientes para las propiedades:
letter-spacing
word-spacing
Luego inicializar la propiedad text-transform para que el texto siempre salga en maysculas.
pagina1.html
<html>
<head>
</style>
</head>
<body>
</body>
</html>
9 - Herencia de propiedades de estilo.
Ahora veremos que el conjunto de marcas HTML forman en s un rbol que en su raiz podemos
identificar la marca body del cual se desprenden otras marcas contenidas en esta seccin,
como podran ser las marcas h1,h2,h3,h4,h5,h6,p,div luego estas en su interior contienen
otras marcas HTML como podran ser em,b,i,pre etc.
Ahora veremos con ejemplos que hay muchos estilos que se heredan (todos los vistos hasta el
momento se heredan), es decir si definimos la propiedad color para la marca h1, luego si
dicha marca incorpora un texto con la marca b (bold) en su interior, la propiedad color de la
marca b tendr el mismo valor que la propiedad h1 (es decir la marca b hereda las
propiedades de la marca h1)
Con un ejemplo veremos el resultado de la herencia de propiedades entre las marchas HTML:
<html>
<head>
body {
color:#0000ff;
}
</style>
</head>
<body>
<h1>Este es un ttulo de nivel 1 y con la marca 'em' la palabra:
<em>Hola</em></h1>
<p>Todo este prrafo debe ser de color azul ya que lo hereda de la
marca body.</p>
<a href="pagina2.html">Siguiente ejemplo</a>
</body>
</html>
En este ejemplo hemos definido la siguiente regla para la marca body:
body {
color:#0000ff;
}
Inicializamos la propiedad color con el valor de azul y la fuente de tipo verdana. Con esto
todas las marcas contenidas en el body que no redefinan estas dos propiedades recibirn los
valores aqu definidos. En este ejemplo la cabecera de primer nivel es decir h1, el prrafo y
el hipervnculo tienen como color el azul y la fuente es de tipo verdana.
Ahora bien en muchas situaciones podemos redefinir propiedades para marcas contenidas,
veamos como podemos hacer que el texto contenido en las marcas em y p aparezcan de color
distinto:
<html>
<head>
body {
color:#0000ff;
}
em {
color:#008800;
}
p {
color:#999999;
}
</style>
</head>
<body>
</body>
<h1>Este es un ttulo de nivel 1 y con la marca 'em' la palabra:
<em>Hola</em></h1>
<p>Todo este prrafo debe ser de color gris ya que lo redefine la
marca p y no lo hereda de la marca body.</p>

</html>
Ahora hemos definido tres reglas, la primera igual que el problema anterior, define la
propiedad color en azul y la fuente de tipo verdana para la marca body:
body {
color:#0000ff;
}
La segunda regla define la propiedad color en verde para la marca em, con esto no heredar
el color azul de la marca body (que es la marca padre):
em {
color:#008800;
}
Algo similar hacemos con la marca p para indicar que sea de color gris:
p {
color:#999999;
}
Pero podemos ver que todas las marcas heredan la fuente verdana ya que ninguna marca la
sobreescribe.
Problema:Confeccionar una pgina aplicando el siguiente estilo:
body {
color:#0000ff;
}
Luego imprimir contenido dentro de las marcas h1,em y p.
Problema 2
Definir dos reglas ms de estilo al problema uno, que sobreescriban la propiedad color:
em {
color:#008800;
}
p {
color:#999999;
}
pagina1.html
<html>
<head>
body {
color:#0000ff;
}
</style>
</head>
<body>
<h1>Este es un ttulo de nivel 1 y con la marca 'em' la palabra: <em>Hola</em></h1>
<p>Todo este prrafo debe ser de color azul ya que lo hereda de la marca body.</p>
<a href="pagina2.html">Siguiente ejemplo</a>
</body>
</html>
pagina2.html
<html>
<head>
body {
color:#0000ff;
}
em {
color:#008800;
}
p{
color:#999999;
}
</style>
</head>
<body>
</body>
<h1>Este es un ttulo de nivel 1 y con la marca 'em' la palabra: <em>Hola</em></h1>
<p>Todo este prrafo debe ser de color gris ya que lo redefine la marca p y no lo hereda
de la marca body.</p>
</html>
Confeccione una pgina que define una regla para la marca body e inicialice las propiedades
color, font-family. Luego defina reglas de estilo para las marcas h1,h2 y h3 que redefinan la
fuente con los valores: Times New Roman, Courier y Arial. Imprima tres ttulos, cada uno con
las marcas h1,h2 y h3. Por ltimo imprima un prrafo.
pagina1.html
<html>
<head>
</style>
</head>
<body>
</body>
</html>
10 - Definicin de un estilo en funcin del contexto.
Este otro recurso que provee las css es la definicin de un estilo para una marca HTML
siempre y cuando la misma est contenida por otra marca determinada. Slo en ese caso el
estilo para dicha marca se activar.
Supongamos que queremos que cuando disponemos un texto encerrado por la marca b (bold)
dentro de un prrafo el color de la misma sea verde. Pero si la marca b est contenida por la
marca h1 el color debe ser rojo, luego la sintaxis del problema es:
<html>
<head>
p b{
color:#0000ff;
}
h1 b{
color:#ff0000;
}
</style>
</head>
<body>
<h1>Ac tenemos un ttulo de nivel uno, luego un bloque con
la marca bold debe aparecer <b>as</b></h1>
<p>
Luego si escribimos un prrafo y encerramos un bloque con la marca
bold
debe aparecer <b>as</b>
</p>
</body>
</html>
Es importante analizar la sintaxis para la defincin de estilos en funcin del contexto.
Tenemos:
p b{
color:#0000ff;
}
Estamos diciendo que todas los bloques de la pgina que contengan la marca b (bold) y que
estn contenidas por la marca p (prrafo) se pinten de azul. Si bien hay dos bloques en la
pgina que estn encerrados por la marca b, solo uno se pinta de color azul, el otro bloque se
pinta de color verde, ya que tenemos:
h1 b{
color:#ff0000;
}
Es decir, activar el color rojo para el contenido encerrado por la marca b, siempre y cuando
se encuentre contenido por la marca h1.
No confundir con la sintaxis para definir reglas de estilo a dos marcas que se hace separando
por coma las marcas HTML:
h1,b{
color:#ff0000;
}
Es decir que el texto contenido por las marcas h1 y b deben aparecer de color rojo.
Se pueden definir estilos en funcin del contexto, con mayor precisin, como por ejemplo:
div h1 em {
color:#ff0000;
}
Con esto estamos diciendo que se debe pintar de color rojo el texto contenido por la marca
em siempre y cuando est contenida en un bloque con la marca h1 y esta a su vez dentro de
un div.
La pgina completa queda codificada de la siguiente forma:
<html>
<head>
div h1 em {
color:#ff0000;
}
</style>
</head>
<body>
<div>
<h1>Este es un titulo de nivel 1 dentro de un <em>div</em></h1>
</div>
<h1>Este es un titulo de nivel 1 fuera de un <em>div</em></h1>
</body>
</html>
Problema:Disponer un texto encerrado por la marca b (bold) dentro de un prrafo, el color de
la misma ser verde. Pero si la marca b est contenida por la marca h1 el color debe ser rojo.
La segunda pgina muestra un estilo en funcin del contexto dependiendo de dos marcas que
la contengan. Pinta de rojo un texto contenido por la marca em siempre y cuando este
contenido por la marca h1 y div (en ese orden).
pagina1.html
<html>
<head>
p b{
color:#0000ff;
}
h1 b{
color:#ff0000;
}
</style>
</head>
<body>
<h1>Ac tenemos un ttulo de nivel uno, luego un bloque con la marca bold debe
aparecer <b>as</b></h1>
<p>
Luego si escribimos un prrafo y encerramos un bloque con la marca bold debe aparecer
<b>as</b>
</p>
<a href="pagina2.html">Siguiente pgina</a>
</body>
</html>
pagina2.html
div h1 em {
color:#ff0000;
}
</style>
</head>
<body>
<div>
<h1>Este es un titulo de nivel 1 dentro de un <em>div</em></h1>
</div>
<h1>Este es un titulo de nivel 1 fuera de un <em>div</em></h1>
</body>
</html>
Definir distintas escalas de grises para los bloques encerrados por la marca HTML em que se
encuentren contenidos por las marcas h1,h2,h3,h4,h5 y h6.
Una escala de grises que podemos utilizar es:
color:#dddddd;
color:#cccccc;
color:#bbbbbb;
color:#aaaaaa
color:#999999
color:#888888;
Aparecen los bloques de ms claro a ms oscuro (cuando los tres valores son iguales
(rojo,verde,azul) estamos en presencia de un gris (salvo el #000000 y el #ffffff)
pagina1.html
<html>
<head>
</style>
</head>
<body>
</body>
</html>
11 - Definicin de hojas de estilo en un archivo externo.
Hasta ahora hemos visto la definicin de estilos a nivel de marca HTML y la definicin de
estilos a nivel de pgina. Dijimos que la primera forma es muy poco recomendada y la
segunda es utilizada cuando queremos definir estilos que sern empleados slo por esa
pgina.
Ahora veremos que la metodologa ms empleada es la definicin de una hoja de estilo en un
archivo separado que deber tener la extensin css.
Este archivo contendr las reglas de estilo (igual como las hemos visto hasta ahora) pero
estarn separadas del archivo HTML.
La ventaja fundamental es que con esto podemos aplicar las mismas reglas de estilo a parte o
a todas las pginas del sitio web. Veremos que esto ser muy provechoso cuando necesitemos
hacer cambios de estilo (cambiando las reglas de estilo de este archivo estaremos cambiando
la apariencia de mltiples pginas del sitio).
Tambien tiene como ventaja que al programador le resulta ms ordenado tener lo referente a
HTML en un archivo y las reglas de estilo en un archivo aparte.
Otra ventaja es que cuando un navegador solicita una pgina, se le enva el archivo HTML y el
archivo CSS, quedando guardado este ltimo archivo en la cach de la computadora, con lo
cual, en las sucesivas pginas que requieran el mismo archivo de estilos, ese mismo archivo se
rescata de la cach y no requiere que el servidor web se lo reenve (ahorrando tiempo de
transferencia).
Ahora veremos la primera pgina HTML que tiene asociada una hoja de estilo en un archivo
externo. El archivo HTML es (pagina1.html):
<html>
<head>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>Definicin de hojas de estilo en un archivo externo.</h1>
<p>
Hasta ahora hemos visto la definicin de estilos a nivel de marca HTML
y la definicin de estilos a nivel de pgina. Dijimos que la primera
forma es muy poco recomendada y la segunda es utilizada cuando
queremos definir
estilos que sern empleados solo por esa pgina.

Ahora veremos que la metodologa ms empleada es la definicin
de una hoja de estilo en un archivo separado que deber tener la
extensin
css.
</p>
</body>
</html>
El archivo que tiene las reglas de estilo es (estilos.css):
body {
background-color:#eafadd;
}
h1 {
color:#0000cc;
font-size:25px;
text-align:center;
}
p {
color:#555555;
text-align:justify;
}
Como podemos observar, para indicar el archivo de estilos externo, debemos agregar en la
cabecera (head) del archivo HTML la siguiente marca:
La propiedad href hace referencia al archivo externo que afectar la presentacin de esta
pgina. En la propiedad type, indica al navegador cual es el formato de archivo.El atributo rel
se usa para definir la relacin entre el archivo enlazado y el documento HTML.
Slo queda probar esta pgina desde la seccin de "Problema Resuelto".
De ahora en ms nos acostumbraremos a trabajar con hojas de estilo definidas en un archivo
externo, que es en definitiva la forma ms comn de desarrollar un sitio web aplicando CSS.
Problema:Confeccionar una pgina HTML que incorpore una hoja de estilo desde un archivo
externo. Definir reglas de estilos para las marcas body, h1 y p.
pagina1.html
<html>
<head>
</head>
<body>
<h1>Definicin de hojas de estilo en un archivo externo.</h1>
<p>
Hasta ahora hemos visto la definicin de estilos a nivel de marca HTML y la definicin
de estilos a nivel de pgina. Dijimos que la primera forma es muy poco recomendada y
la segunda es utilizada cuando queremos definir estilos que sern empleados solo por
esa pgina.
Ahora veremos que la metodologa ms empleada es la definicin de una hoja de estilo
en un archivo separado que deber tener la extensin css.
</p>
</body>
</html>
estilos.css
body {
background-color:#eafadd;
}
h1 {
color:#0000cc;
font-size:25px;
text-align:center;
}
p{
color:#555555;
text-align:justify;
}
Crear una pgina web que contenga una cabecera de nivel 1 (h1), luego una cabecera de nivel
2 (h2) y un prrafo.
Definir reglas de estilo para las tres marcas h1,h2 y p. Inicializar propiedades vistas en
conceptos anteriores. Intentar el planteo de una pgina que muestre el contenido de la forma
ms clara posible.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
12 - Definicin de estilos por medio de clases.
En muchas situaciones una regla de estilo puede ser igual para un conjunto de marcas HTML,
en esos casos conviene plantear una regla de estilo con un nombre genrico que
posteriormente se puede aplicar a varias marcas de HTML.
Para conocer la sintaxis para la definicin de clases veamos un ejemplo, la pagina1.html es:
<html>
<head>
</head>
<body>
<h1 class="resaltado">Titulo de nivel 1</h1>
<p>
Este parrafo muestra el resultado de aplicar la clase .resaltado en la
ltima
<span class="resaltado">palabra.</span>
</p>
</body>
</html>
La hoja de estilo externa (estilos.css) es:
body {
background-color:#eeeeee;
}
.resaltado{
color:#000000;
background-color:#ffff00;
font-style:italic;
}
La sintaxis para definir una clase aplicable a cualquier marca HTML es:
.resaltado{
color:#000000;
font-style:italic;
}
Es decir, la inicializamos con el caracter punto y seguidamente un nombre de clase. Dentro
definimos las reglas de estilo como hemos venido trabajando normalmente.
El nombre de la clase no puede comenzar con un nmero.
Luego, para indicar que una marca sea afectada por esta regla:
Es decir, agregamos la propiedad class y le asignamos el nombre de la clase (sin el punto).
Podemos inicializar tantas marcas HTML con esta regla como necesitemos:
<p>
Este parrafo muestra el resultado de aplicar la clase .resaltado en la
ltima
<span class="resaltado">palabra.</span>
</p>
Aca definimos la propiedad class a la marca span y le asignamos la misma clase aplicada
anteriormente a la marca h1.
Problema:Definir la clase:
.resaltado{
color:#000000;
font-style:italic;
}
Aplicar esta regla a las marcas h1 y span.
pagina1.html
<html>
<head>
</head>
<body>
<p>
Este parrafo muestra el resultado de aplicar la clase .resaltado en la ltima <span
class="resaltado">palabra.</span>
</p>
</body>
</html>
estilos.css
body {
background-color:#eeeeee;
}
.resaltado{
color:#000000;
font-style:italic;
}
Problema 1:
Definir en la hoja de estilo estas dos clases:
.subrayado {
color:#00aa00;
}
.tachado {
color:#00aa00;
text-decoration:line-through;
}
Luego, en la pgina html, definir un ttulo con nivel h1 (subrayar todo el ttulo). Luego un
prrafo que tenga algunas palabras subrayadas y otras tachadas (utilizar la marca span para
asignar estilos a una palabra).
Problema 2:
Definir estas dos reglas en la hoja de estilo externa. Luego crear una pgina HTML que
contenga 3 preguntas y 3 respuestas. A cada pregunta y respuesta disponerla en un prrafo
distinto. Asignar los estilos .pregunta y .respueta
.pregunta {
font-size:14px;
font-style:italic;
color:#0000aa;
}
.respuesta {
font-size:12px;
font-style:normal;
text-align:justify;
color:#555555;
}
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
13 - Definicin de estilos por medio de Id.
La diferencia fundamental en la definicin de un estilo por medio de Id con respecto a las

clases, es que slo podremos aplicar dicho estilo a una sola marca dentro de la pgina HTML.
La sintaxis para definir un estilo por medio de Id es:
#cabecera {
font-family:Times New Roman;
font-size:30px;
text-align:center;
color:#0000ff;
background-color:#bbbbbb;
}
Es decir, utilizamos el caracter numeral (#) para indicar que se trata de un estilo de tipo Id.
Luego, slo una marca HTML dentro de una pgina puede definir un estilo de este tipo:
<div id="cabecera">
Hay que tener en cuenta que slo una marca puede definir la propiedad id con el valor de
cabecera.
Los dos archivos completos del ejemplo entonces quedan (pagina1.html):
<html>
<head>
</head>
<body>
<div id="cabecera">
<h1>Ttulo de la cabecera</h1>
</div>
</body>
</html>
Y el archivo de estilos (estilos.css) es:
#cabecera {
font-size:30px;
text-align:center;
color:#0000ff;
}
Problema:Crear un estilo por medio de un Id, luego crear una pgina con un bloque div,
definir la propiedad id con el nombre del estilo creado.
pagina1.html
<html>
<head>
</head>
<body>
<div id="cabecera">
<h1>Ttulo de la cabecera</h1>
</div>
</body>
</html>
estilos.css
#cabecera {
font-size:30px;
text-align:center;
color:#0000ff;
}
14 - Propiedades relacionadas al borde de una marca HTML.
Debemos ahora hacernos la idea que todo elemento que se crea dentro de una pgina HTML
genera una caja. Imaginemos los controles que hemos creado h1,h2,h3,p,em, etc.; si fijamos
la propiedad background-color veremos que el contenido se encuentra dentro de un
rectngulo.
Podemos acceder a las propiedades del borde de ese rectngulo mediante las CSS; las
propiedades ms importantes a las que tenemos acceso son:
border-width
border-style
border-color
Veamos un ejemplo que inicialice estas propiedades:
pagina1.html
<html>
<head>
</head>
<body>
<p class="pregunta">Quin descubri Amrica
y en que ao fue?</p>
<p class="respuesta">Coln en 1492</p>
</body>
</html>
estilos.css
.pregunta {
border-width:1px;
border-style:solid;
border-color:#000000;
}
.respuesta {
border-width:1px;
border-style:dashed;
}
Como podemos ver, hemos definido dos clases .pregunta que inicializa el color de fondo en
amarillo y luego define el ancho del borde en un pixel, el estilo es slido y el color de la lnea
de borde es negro.
Luego recordar que para indicar que una marca tenga este estilo debemos inicializar la
propiedad class de la marca HTML:
<p class="pregunta">Quin descubri Amrica
y en que ao fue?</p>
Al segundo estilo definido lo hemos hecho con la clase .respuesta
.respuesta {
border-width:1px;
}
En sta hemos cambiado el estilo de borde.

Disponemos de los siguientes estilos de borde:
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Problema:Definir dos prrafos que representen una pregunta y una respuesta. Inicializar
estilos para el borde.
pagina1.html
<html>
<head>
</head>
<body>
<p class="pregunta">Quin descubri Amrica y en que ao fue?</p>
<p class="respuesta">Coln en 1492</p>
</body>
</html>
estilos.css
.pregunta {
border-width:1px;
border-style:solid;
}
.respuesta {
border-width:1px;
}
Inicializar las marcas h1,h2 y h3 con bordes de 2 pixeles, color azul y diferentes estilos para
cada una. Crear una pgina HTML que los utilice.
Ej:
h1 {
border-width:2px;
border-style:solid;
border-color:#0000ff;
}
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
15 - Ms propiedades relacionadas al borde de una marca

HTML
Como vimos en el concepto anterior tenemos propiedades que nos permiten fijar el grosor,
estilo y color del borde de una marca HTML. Pero podemos ir un paso ms alla, las CSS nos
permiten modificar independientemente cada uno de los cuatro bordes del rectngulo.
Contamos con las siguientes propiedades:
border-top-width
border-right-width
border-bottom-width
border-left-width
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-color
border-right-color
border-bottom-color
border-left-color
Un ejemplo inicializando estas propiedades:
<html>
<head>
</head>
<body>
<h1 class="titulopagina">El blog del pensador</h1>
</body>
</html>
y el archivo de estilos:
.titulopagina {
background-color:#ffffcc;
text-align:center;
font-size:40px;
border-top-width:1px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:1px;
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:dotted;
border-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;
}
Es decir, esta metodologa de inicializar el borde de un control HTML, tiene utilidad si los
mismos varian en grosor, estilo o color.
Veremos ms adelante que hay otras formas de inicializar los bordes de las marcas que
reducen el texto a tipear, pero no son las ms adecuadas cuando uno est comenzando a
estudiar CSS.
Problema:Crear una clase .titulopagina que inicialice independientemente el grosor, estilo y
color de la propiedad del borde.
pagina1.html
<html>
<head>
</head>
<body>
<h1 class="titulopagina">El blog del pensador</h1>
</body>
</html>
estilos.css
.titulopagina {
text-align:center;
font-size:40px;
border-top-width:1px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:1px;
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:dotted;
border-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;
}
Crear una clase .titulosecundario que inicialice el borde superior e inferior con ancho de 2
pixeles y los bordes laterales con cero pixel. A su eleccin queda el estilo y color.
pagina1.html
<html>
<head>

</head>
<body>
</body>
</html>
estilos.css
16 - Propiedades relacionadas al padding de una marca HTML.
El padding (almohadilla) suma espacio entre el contenido de la marca HTML y el borde

(recordar propiedad border)
Podemos configurar los 4 en caso que tengan el mismo valor accediendo a la propiedad:
padding
o podemos configurar en forma independiente cada lado:
padding-top
padding-right
padding-bottom
padding-left
Veamos un ejemplo, la pagina1.html:
<html>
<head>
</head>
<body>
<pre class="codigofuente">
public class Rectangulo{
//atributos
int alto;
int ancho;
boolean relleno;
//mtodos
public int devolverArea(){
return alto*ancho;
}
public void rellenar(boolean r){
relleno=r;
}
public void cambiarTamano(int an, int al){
ancho=an;
alto=al;
}
public Rectangulo() {// constructor
alto=20;
ancho=10;
relleno=false;
}
}//fin clase Rectangulo
</pre>
</body>
</html>
El archivo estilos.css es:
.codigofuente {
font-family:Courier;
font-size:12px;
border-width:1px;
border-style:dotted;
border-color:#ffaa00;
padding:20px;
}
Con la marca HTML pre, se respetan los espacios y retornos de carro que hayamos puesto en
el texto fuente. Este estilo de texto es muy adecuado cuando queremos mostrar el cdigo
fuente de un programa.
Problema:Mostrar con la marca pre de HTML un pequeo programa de Java. Hacer que el
mismo aparezca en un rectangulo amarillo, con borde y una separacin entre el borde y el
contendio de 20 pixeles.
pagina1.html
<html>
<head>
</head>
<body>
<pre class="codigofuente">
public class Rectangulo{
//atributos
int alto;
int ancho;
boolean relleno;
//mtodos
public int devolverArea(){
return alto*ancho;
}
public void rellenar(boolean r){
relleno=r;
}
public void cambiarTamano(int an, int al){
ancho=an;
alto=al;
}
public Rectangulo() {// constructor
alto=20;
ancho=10;
relleno=false;
}
}//fin clase Rectangulo
</pre>
</body>
</html>
estilos.css
.codigofuente {
font-family:Courier;
font-size:12px;
border-width:1px;
border-style:dotted;
border-color:#ffaa00;
padding:20px;
}
Definir una clase titulo que fije los padding de izquierda y derecha con 20 pixeles y el
superior e inferior en 10. Escribir un texto dentro de la marca h1.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
17 - Propiedades relacionadas al margen de una marca HTML.
Otra serie de propiedades relacionadas al contorno de una marca HTML son:

margin
margin-top
margin-right
margin-bottom
margin-left
El margen est despus del borde.
Veamos un ejemplo, la pgina HTML muestra dos prrafos con cero pixeles de margen:
<html>
<head>
</head>
<body>
<p>Primer prrafo</p>
<p>Segundo prrafo</p>
</body>
</html>
La hoja de estilo:
p {
background-color:#ffffaa;
margin:0px;
}
Pruebe modificar el valor para la propiedad margin y vea el resultado de la pgina.

El modelo final de caja se puede resumir con esta imagen:

Problema:Mostrar dos prrafos con un margen de cero pixel.
pagina1.html
<html>
<head>
</head>
<body>
<p>Primer prrafo</p>
<p>Segundo prrafo</p>
</body>
</html>
estilos.css
background-color:#ffffaa;
margin:0px;
}
Disponer ttulos de primer y segundo nivel con un margen de 5 pixeles.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
18 - Propiedades relacionadas a listas.
Las listas se utilizan para enumerar una serie de elementos, se utiliza la marca HTML ul
(Unordered List), y cada item de la lista con la marca HTML li (List Item).
Las CSS nos permiten configurar las listas por medio de tres propiedades:
list-style-type
list-style-position
list-style-image
A list-style-type puede asignrsele alguno de estos valores:
none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
Los valores de list-style-position:
inside
outside
Los valores de list-style-image:
none
url
Veamos un ejemplo que prueba todos los valores posibles que puede tomar la propiedad liststyle-type:
<html>
<head>
</head>
<body>
<ul class="vacio">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="circulorelleno">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="circulovacio">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="cuadrado">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="decimal">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="romanominuscula">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="romanomayuscula">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="letrasminusculas">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="letrasmayusculas">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
</body>
</html>
Luego la hoja de estilo es:
ul.vacio{
list-style-type:none;
}
ul.circulorelleno{
list-style-type:disc;
}
ul.decimal{
list-style-type:decimal;
}
ul.romanominuscula{
list-style-type:lower-roman;
}
ul.romanomayuscula{
list-style-type:upper-roman;
}
ul.circulovacio{
list-style-type:circle;
}
ul.cuadrado{
list-style-type:square;
}
ul.letrasminusculas{
list-style-type:lower-alpha;
}
ul.letrasmayusculas{
list-style-type:upper-alpha;
}
Lo que podemos ver es que cuando definimos las clases, le antecedemos al punto, el nombre
de la marca donde se aplica dicha clase (en este caso ul, es decir que esta clase slo tiene
sentido aplicarla a dicha marca).
Problema:Probar todos los valores posibles que puede tomar la propiedad list-style-type.
pagina1.html
<html>
<head>
</head>
<body>
<ul class="vacio">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="circulorelleno">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="circulovacio">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="cuadrado">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="decimal">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="romanominuscula">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="romanomayuscula">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="letrasminusculas">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="letrasmayusculas">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
</body>
</html>
estilos.css
ul.vacio{
}
ul.circulorelleno{
list-style-type:disc;
}
ul.decimal{
list-style-type:decimal;
}
ul.romanominuscula{
list-style-type:lower-roman;
}
ul.romanomayuscula{
list-style-type:upper-roman;
}
ul.circulovacio{
list-style-type:circle;
}
ul.cuadrado{
list-style-type:square;
}
ul.letrasminusculas{
list-style-type:lower-alpha;
}
ul.letrasmayusculas{
list-style-type:upper-alpha;
}
Confeccionar una lista con los nombres de pases que jugaron el mundial de Alemania 2006
(mostrar slo los cuatro primeros puestos, junto con la posicin que obtuvieron).
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
19 - Propiedades relacionadas al fondo (background)
Hasta ahora hemos probado y utilizado la propiedad background-color para fijar el color de
fondo del contenido de una marca HTML (body, h1, h2, p, etc.).
Hay otras propiedades relacionadas al fondo que nos permiten, entre otras cosas, disponer un
archivo de imagen. Las propiedades relacionadas al background y sus valores son:
background-color
background-image
background-repeat
background-position
background-attachment
Veamos un ejemplo de disponer una imagen sobre el fondo de la pgina:
<html> <head> <title>Problema</title> <link rel="StyleSheet"
href="estilos.css" type="text/css"> </head> <body>
</body> </html>
La hoja de estilo queda:
body {
background-image:url(../fondo.jpg);
}
La nica propiedad que hemos inicializado es background-image indicando el nombre del
archivo de imagen a mostrar. Como se encuentra en la carpeta inmediatamente superior
debemos indicar con ../
La imagen se repite en x e y hasta llenar la pgina por completo, ya que por defecto
background-repeat est inicializada con el valor repeat, probar de modificar el estilo primero
con:
body {
background-repeat:repeat-x;
}
Luego con:
body {
background-repeat:repeat-y;
}
Y por ltimo:
body {
background-repeat:no-repeat;
}
Tener en cuenta que podemos aplicar una imagen a otras marcas HTML (h1,h2,h3,p, etc.).
La ltima propiedad background-position podemos indicar la posicin de la imagen segn los
siguientes valores:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
Para que tenga sentido esta propiedad debemos inicializar la propiedad background-repeat
con el valor no-repeat.
Por ejemplo:
body {
background-position:20% 50%;
}
Dispone la imagen 20% avanzando desde la izquierda y 50% avanzando desde arriba.
La siguiente regla:
body {
background-position:400px 10px;
}
Dispone la imagen 400 pixeles desde la derecha y 10 pxeles desde arriba.
La regla:
body {
background-position:top right;
}
Dispone la imagen en la parte superior a la derecha.
Problema:La imagen se repite en x e y hasta llenar la pgina por completo, ya que por
defecto background-repeat est inicializada con el valor repeat, probar de modificar el estilo
primero con:
body {
background-repeat:repeat-x;
}
Luego con:
body {
background-repeat:repeat-y;
}
Y por ltimo:
body {
}
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
body {
}
Definir la imagen fondo.jpg como fondo de la pgina, luego inicializar y probar la propiedad
background-attachment con los dos valores posibles (scroll/fixed).
body {
background-attachment:scroll;/*luego probar con fixed*/
}
Para probar el efecto que produce esta propiedad debe ingresar en el body de la pgina un
texto muy grande que llene toda la pgina y permita hacer scroll (de no hacer esto no ver la
diferencia entre un valor y otro del background-attachemnt).
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
20 - Propiedades relacionadas a fuentes (FORMATO RESUMIDO)
Vimos anteriormente una serie de propiedades relacionadas a la fuente:

font-family
font-size
font-style
font-weight
font-variant
En situaciones donde necesitemos inicializar varias de estas propiedades CSS nos permite
utilizar una propiedad que engloba a todas estas:
font
Podemos indicar en cualquier orden font-weight, font-style, font-variant y luego los valores
obligatorios font-size y font-family en ese orden.
Como ejemplo tenemos:
<html>
<head>
</head>
<body>
<p>Hola Mundo</p>
</body>
</html>
Luego el archivo de estilos:
p {
font:bold italic 25px verdana;
}
Es importante recordar que font-size y font-family deben ser los ltimos valores inicializados
y en ese orden. No debemos separar por coma.
Problema:Definir la propiedad font para la marca p utilizando el formato reducido de
inicializacin.
pagina1.html
<html>
<head>
</head>
<body>
<p>Hola Mundo</p>
</body>
</html>
estilos.css
p{
font:bold italic 25px verdana;
}
Definir formatos reducidos para la propiedad font de las marcas h1,h2 y h3. Luego probar con
tres ttulos los resultados obtenidos.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
21 - Propiedades relacionadas al border (FORMATO RESUMIDO)
Podemos inicializar todos los bordes con una sola propiedad:

border
Debemos indicar el border-width border-style border-color
No debemos separarlas por coma.
Por otro lado podemos inicializar cada borde con:
border-top
border-right
border-bottom
border-left
Debemos indicar el border-(top/right/bottom/left)-width border-style border-color
Un ejemplo nos permitir ver esta otra forma de inicializar los bordes de una marca HTML:
<html>
<head>
</head>
<body>
<h1 class="tituloprincipal">Propiedad border</h1>
<p class="comentarios">Debemos indicar el border-width border-style
border-color</p>
</body>
</html>
Y la hoja de estilo definida para esta pgina es:
h1.tituloprincipal{
border:5px solid #ff0000;
}
p.comentarios{
border-top:1px solid #ffff00;
border-right:1px none #ffff00;
border-bottom:1px solid #ffff00;
border-left:1px none #ffff00;
}
Tener en cuenta que cuando le antecedemos el nombre de la marca HTML al nombre de la
clase: h1.tituloprincipal estamos indicando que dicha clase slo se puede aplicar a dichas
marcas. De todos modos, si le sacamos el nombre de la marca HTML funciona igual.
Problema:
pagina1.html
<html>
<head>
</head>
<body>
<h1 class="tituloprincipal">Propiedad border</h1>
<p class="comentarios">Debemos indicar el border-width border-style bordercolor</p>
</body>
</html>
estilos.css
h1.tituloprincipal{
border:5px solid #ff0000;
}
p.comentarios{
border-top:1px solid #0000ff;
border-right:1px none #0000ff;
border-bottom:1px solid #0000ff;
border-left:1px none #0000ff;
}
Confeccionar una pgina que disponga una lnea en la parte inferior y superior de los ttulos
de nivel 1,2 y 3. Inicializar las propiedades border-top y border-bottom para dicho cometido.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
22 - Propiedades relacionadas al padding (FORMATO RESUMIDO)
Podemos inicializar el padding de una marca HTML en forma resumida con:

padding:padding-top padding-right padding-bottom padding-left
si indicamos un nico valor se aplica a los cuatro lados:
padding: 1px
si indicamos dos valores, el primero se aplica a la parte superior e inferior y el segundo valor
a los lados izquierdo y derecho.
Veamos un ejemplo:
<html>
<head>

</head>
<body>
<p class="comentarios">Esto es una prueba para ver el funcionamiento
de la propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
</p>
</body>
</html>
Luego el archivo CSS:
p.comentarios {
background-color:#dddddd;
padding:5px 30px;
}
Con este ejemplo, el prrafo tiene 5 pxeles de separacin con el borde en la parte inferior y
superior, y a la izquierda y derecha tiene 30 pxeles.
Problema:Esto es una prueba para ver el funcionamiento de la propiedad padding.
pagina1.html
<html>
<head>
</head>
<body>
<p class="comentarios">Esto es una prueba para ver el funcionamiento de la propiedad
padding.
</p>
</body>
</html>
estilos.css
p.comentarios {
background-color:#dddddd;
padding:5px 30px;
}
Definir tres clases distintas con formatos diferentes para expresar el padding. Aplicar las
clases a tres prrafos.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
23 - Propiedades relacionadas al margin (FORMATO RESUMIDO)
El funcionamiento y sintaxis es similar al visto para el padding:

margin margin-top margin-right margin-bottom margin-left
si indicamos un nico valor se aplica a los cuatro lados: margin: 1px si indicamos dos valores,
el primero se aplica a la parte superior e inferior y el segundo valor a los lados izquierdo y
derecho.
Un ejemplo para ver la sintaxis:
<html>
<head>
</head>
<body>
<h1>Titulo Principal</h1>
</body>
</html>
Y la hoja de estilo:
h1 {
margin:70px 20px;
}
Problema:Esta regla de estilo inicializa los mrgenes de la marca h1.
pagina1.html
<html>
<head>
</head>
<body>
<h1>Titulo Principal</h1>
</body>
</html>
estilos.css
h1 {
margin:70px 20px;
}
Confeccionar una pgina con ttulos de nivel h1,h2 y h3. Definir distintos mrgenes del lado
izquierdo.
Tener en cuenta que podemos definir el mismo nombre de clase si se aplica a marcas HTML
distintas:
h1.margenizquierdo {
margin:0px 0px 0px 50px;
}
h2.margenizquierdo {
margin:0px 0px 0px 70px;
}
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
24 - Propiedades relacionadas al fondo (background)(FORMATO

RESUMIDO)
La propiedad background resume las propiedades vistas anteriormente:

background background-color background-image background-repeat
background-attachment
background-position
Un ejemplo que inicializa esta propiedad con algunos valores en forma simultnea:
<html>
<head>
</head>
<body>
</body>
</html>
La hoja de estilo es:
body {
background: #ffffee url('../fondo.jpg') repeat-x;
}
No es obligatorio inicializar todos los valores.
Problema:Inicializar la propiedad background con formato resumido.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
body {
background: #ffffee url('../fondo.jpg') repeat-x;
}
Confeccionar una pgina que inicialice el fondo de la marca h1 con una imagen.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
25 - El selector universal *
Si queremos inicializar las propiedades de todas las marcas HTML podemos utilizar el selector
universal. Veamos un ejemplo:
<html>
<head>
</head>
<body>
<p>Esto esta dentro de un prrafo</p>
</body>
</html>
Luego en la hoja de estilo definimos:
* {
color:#0000aa;
margin:0px;
padding:0px;
}
Esto significa que todas las marcas se imprimen de color verde con cero pixel de margin y
padding, salvo que otra regla lo cambie, Imaginemos si definimos h1 { color:#ff0000} significa
que tiene prioridad esta regla.
En realidad, en forma tcita lo hemos estado utilizando, cuando definimos una clase sin
indicar el tipo de marca HTML donde actuar:
.pregunta {
border-width:1px;
border-style:solid;
}
Podemos expresar la regla anterior perfectamente como:
*.pregunta {
border-width:1px;
border-style:solid;
}
Es decir que podemos asignar esta regla a cualquier marca HTML.

Esto nos permite comprender, cuando definimos una regla que slo se puede utilizar en un
slo tipo de marcas:
p.pregunta {
border-width:1px;
border-style:solid;
}
Esta regla slo se puede utilizar en las marcas de prrafo.
Problema:Definir la siguiente regla de estilo:
* {
color:#0000aa;
margin:0px;
padding:0px;
}
Es comn inicializar las propiedades margin y padding con cero y luego asignar estos valores
para todas las marcas que lo requieran, esto debido a que cada navegador define mrgenes
distintos.
pagina1.html
<html>
<head>
</head>
<body>
<p>Esto esta dentro de un prrafo</p>
</body>
</html>
estilos.css
*{
color:#0000aa;
margin:0px;
padding:0px;
}
Defina cuatro propiedades para el selector universal y luego implemente una pgina HTML
que pruebe su funcionamiento.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
26 - Pseudoclases
Las pseudoclases son unas clases especiales, que se refieren a algunos estados especiales del
elemento HTML, las que se utilizan fundamentalmente son las que se aplican a la marca <a>
(ancla).
La sintaxis vara con respecto al concepto de clase visto anteriormente:
a:pseudoclase {
propiedad: valor;
}
Es decir separamos el nombre de la marca HTML con dos puntos.
Para la marca HTML <a> tenemos 4 pseudoclases fundamentales:
link - Enlace sin ingresar
visited - Enlace presionado
hover - Enlace que tiene la flecha del mouse encima
active - Es la que tiene foco en ese momento (pruebe de tocar la tecla
tab)
Es importante hacer notar que el orden en que definimos las pseudoclases es fundamental
para su funcionamiento (debe respetarse el orden: link-visited-hover-active)
Este ejemplo es muy sencillo para ver el paso en los distintos estados que puede tener un
enlace:
<html>
<head>
</head>
<body>
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">Msn</a>
</body>
</html>
a:link{
background-color:#00ff00;
color:#ff0000;
}
a:visited{
background-color:#000000;
color:#ffffff;
}
a:hover{
background-color:#ff00ff;
color:#fffff;
}
a:active{
background-color:#ff0000;
color:#ffff00;
}
Apenas ejecute la pgina los tres enlaces deben aparecer de color rojo con fondo verde:
a:link{
color:#ff0000;
}
Si presionamos la tecla tab podremos ver que el enlace que tiene foco aparece de color
amarillo con fondo rojo:
a:active{
color:#ffff00;
}
Si pasamos la flecha del mouse sobre algn enlace veremos que aparece de color blanco con
fondo lila:
a:hover{
color:#fffff;
}
Por ltimo todos los enlaces que hayamos hecho click debern aparecer de color blanco con
fondo negro:
a:visited{
color:#ffffff;
}
Problema:Mostrar una serie de enlaces con distintos colores segn si el link est visitado, no
visitado, el mouse est sobre el link o el link tiene foco.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
a:link{
color:#ff0000;
}
a:visited{
color:#ffffff;
}
a:hover{
color:#fffff;
}
a:active{
color:#ffff00;
}
Definir la propiedad font-size con un valor distinto cuando la flecha del mouse est sobre el
link.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
27 - Eliminar el subrayado a un enlace por medio de las

pseudoclases
Otra actividad comn en algunos sitios es eliminar el subrayado a los enlaces. A esto lo
podemos hacer configurando una propiedad de las pseudoclases.
La solucin de este problema es:
<html>
<head>
</head>
<body>
</body>
</html>
a:link {
text-decoration: none;
}
a:visited {
}
Es decir, configuramos la propiedad text-decoration con el valor none, por defecto est
configurada con el valor underline.
Tener en cuenta que podemos agrupar la regla de esta forma:
a:link, a:visited {
}
Problema:Eliminar el subrayado de los enlaces.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
a:link {
}
a:visited {
}
Configurar los enlaces que aparezcan con una lnea tachada en lugar de subrayado.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
- Creacin de un men vertical configurando las pseudoclases.
Un recurso muy til es disponer un men en una pgina, si no requerimos uno muy elaborado
podemos resolverlo utilizando slo CSS y HTML (en otros casos se requiere adems de
JavaScript).
Vamos a implementar uno muy sencillo que requiere agrupar en un div una serie de prrafos
que contienen un hipervnculo cada uno. Cuando la flecha del mouse se encuentra sobre el
hipervnculo cambiamos el color del fondo y la letra del hipervnculo.
El problema resuelto es:
<html>
<head>
</head>
<body>
<div id="menu">
<p><a href="http://www.google.com">Google</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.msn.com">Msn</a></p>
<p><a href="http://www.altavista.com">Altavista</a></p>
</div>
</body>
</html>
La hoja de estilo asociada a esta pgina es:
#menu {
font-family: Arial;
}
#menu p {
margin:0px;
padding:0px;
}
#menu a {
display: block;
padding: 3px;
width: 160px;
background-color: #f7f8e8;
border-bottom: 1px solid #eeeeee;
text-align:center;
}
#menu a:link, #menu a:visited {
color: #ff0000;
}
#menu a:hover {
background-color: #336699;
color: #ffffff;
}
Podemos decir que definimos un estilo por medio de un Id llamado menu. Definimos una regla
para este Id:
#menu {
font-family: Arial;
}
La segunda regla:
#menu p {
margin:0px;
padding:0px;
}
Estamos indicando que todos los prrafos contenidos en el estilo #menu deben tener cero en
margin y padding.
Luego las anclas definidas dentro del estilo #menu definen las siguientes caractersticas:
#menu a {
display: block;
padding: 3px;
width: 160px;
text-align:center;
}
El valor block para la propiedad display permite que el ancla ocupe todo el espacio del
prrafo, indistintamente del largo del hipervnculo.
Otra propiedad nueva es width, esta fija el tamao mximo que puede tener el hipervnculo
antes de provocar un salto de lnea.
Por ltimo inicializamos las pseudoclases:
color: #ff0000;
}
#menu a:hover {
color: #ffffff;
}
Estamos definiendo el mismo color de texto para los vnculos seleccionados como aquellos
que no han sido seleccionados:
color: #ff0000;
Por ltimo cambiamos el color de fondo de la opcin que tiene la flecha del mouse encima:
#menu a:hover {

Problema:Hacer un men de hipervnculos que se muestren el forma vertical.
pagina1.html
<head>
</head>
<body>
<div id="menu">
<p><a href="http://www.google.com">Google</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.msn.com">Msn</a></p>
<p><a href="http://www.altavista.com">Altavista</a></p>
</div>
</body>
</html>
estilos.css
#menu {
font-family: Arial;
}
#menu p {
margin:0px;
padding:0px;
}
#menu a {
display: block;
padding: 3px;
width: 160px;
text-align:center;
}
color: #ff0000;
}
#menu a:hover {
color: #ffffff;
}
Modificar la hoja de estilo del men desarrollado anteriormente para que cada opcin
aparezca una lnea de color negro que la recuadre.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
29 - Creacin de un men horizontal con una lista.
Otro estilo de men muy comn es donde las opciones se encuentran una al lado de otra.
Veamos el cdigo para la implementacin de un men horizontal:
<html>
<head>
</head>
<body>
<ul id="menuhorizontal">
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.msn.com">Msn</a></li>
<li><a href="http://www.altavista.com">Altavista</a></li>
</ul>
</body>
</html>
El archivo de estilos es:
#menuhorizontal {
float:left;
width:100%;
padding:0px;
margin:0px;
}
#menuhorizontal a {
float:left;
width:100px;
text-decoration:none;
text-align:center;
color:#ff0000;
background-color:#f7f8e8;
padding:3px 5px;
border-right:1px solid white;
}
#menuhorizontal a:hover {
}
#menuhorizontal li {
display:inline;
}
Como queremos que se localice a la izquierda inicializamos la propiedad float con el valor
left, tanto para el id menuhorizontal como para la marca a que se encuentra en el id
menuhorizontal. Fijamos la propiedad width del id menuhorizontal con el valor de 100% para
que ocupe toda la lnea. El ancho de cada opcin es de 100px que lo indicamos en la
propiedad width de la marca a.

Cuando inicializamos la propiedad padding con:
padding:3px 5px;
estamos fijando una separacin de 3 pixeles en la parte superior e inferior y 5 pixeles a
izquierda y derecha.
Separamos cada opcin por una lnea blanca de un pixel:
Otra forma de expresar los colores es utilizar una serie de nombres predefinidos (white, red,
green, blue, etc.) de todos modos, lo ms seguro para que entiendan todos los navegadores,
es indicando los valores de rojo,verde y azul como hemos venido trabajando.
Luego con:
display:inline;
}
Indicamos que todos los list item (li) se muestren en la misma lnea, ya que por defecto este
tipo de marca indica que luego de mostrar un item de la lista el siguiente es abajo.
Fcilmente esta propiedad la podemos entender si inicializamos la marca p (prrafo) con el
siguiente valor:
p {
display:inline;
}
Luego si en la pgina HTML imprimimos dos prrafos, los mismos deberan aparecer en la
misma lnea.
Problema:Implementar un men horizontal con una lista.
pagina1.html
<html>
<head>
</head>
<body>
<ul id="menuhorizontal">
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.msn.com">Msn</a></li>
<li><a href="http://www.altavista.com">Altavista</a></li>
</ul>
</body>
</html>
estilos.css
#menuhorizontal {
float:left;
width:100%;
padding:0px;
margin:0px;
}
#menuhorizontal a {
float:left;
width:100px;
text-decoration:none;
text-align:center;
color:#ff0000;
background-color:#f7f8e8;
padding:3px 5px;
}
#menuhorizontal a:hover {
}
display:inline;
}
Implemente un men horizontal y un men vertical a la izquierda.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
30 - Propiedades relacionadas a la dimensin de un objeto en

la pgina.
Disponemos de dos propiedades fundamentales que nos permiten fijar el ancho y el alto de
una marca HTML.
width
height
Veamos un ejemplo:
<html>
<head>
</head>
<body>
<div id="cabecera">
Blog del Programador
</div>
</body>
</html>
Solamente hemos definido un div donde mostramos la cabecera de una pgina.
La hoja de estilo definida:
#cabecera {
width:100%;
height:100px;
background-color:#ffee00;
color:#0000aa;
text-align:center;
font-size:50px;
font-weight:bold;
}
La propiedad width la inicializamos con el valor 100%, lo que significa que ocupar todo el
ancho de la pgina (podemos inicializarlo en pixeles si lo necesitamos). Luego a la propiedad
height la inicializamos en 100 pxeles.
El resto de propiedades son las ya vistas en conceptos anteriores.
Es decir que las propiedades width y height nos permiten dar una dimensin a la marca HTML
ya sea con valores absolutos indicados en pixeles o relativos indicados por porcentajes.
Problema:Definir un div e inicializar las propiedades width y height.
pagina1.html
<html>
<head>
</head>
<body>
<div id="cabecera">
Blog del Programador
</div>
</body>
</html>
estilos.css
#cabecera {
width:100%;
height:100px;
background-color:#ffee00;
color:#0000aa;
text-align:center;
font-size:50px;
font-weight:bold;
}
Crear una pgina HTML que muestre dos prrafos, a uno de ellos aplicarle el siguiente estilo:
.parrafoestrecho {
width:200px;
text-align:justify;
}
Recordar que para aplicar esta clase a un prrafo debemos inicializar la propiedad class de la
marca p (ej. <p class="margenestrecho">bla bla</p>)
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
31 - Unidades de medida (px, cm, mm, em etc.)
Hasta ahora siempre que hemos especificado tamaos de letra, margin, padding, border etc.
lo hemos hecho a travs de pixeles. Esto debido a que la forma ms sencilla de imaginar un
tamao, por lo menos para los que estamos trabajando todo el da en una computadora, es el
tamao de un pixel del monitor. Veremos que hay varias unidades de medida para indicar
tamaos y que algunas son ms indicadas para algunas situaciones que otras.
Disponemos de las siguientes unidades de medida:
px (pixeles)
em (altura de la fuenta por defecto)
ex (altura de la letra x)
in (pulgadas)
cm (centmetros)
mm (milmetros)
pt (puntos, 1 punto es lo mismo que 1/72 pulgadas)
pc (picas, 1 pc es lo mismo que 12 puntos)
% (porcentaje)
Un ejemplo que muestra una serie de prrafos asignando la propiedad font-size con distintos
valores y unidades de medida:
<html>
<head>
</head>
<body>
<p class="pixel1">Este texto tiene 12 px<p>
<p class="pixel2">Este texto tiene 15 px</p>
<p class="em1">Este texto tiene 1 em</p>
<p class="em2">Este texto tiene 1.5 em</p>
<p class="ex1">Este texto tiene 1 ex</p>
<p class="ex2">Este texto tiene 1.5 ex</p>
<p class="in1">Este texto tiene 1 in</p>
<p class="in2">Este texto tiene 1.5 in</p>
<p class="cm1">Este texto tiene 1 cm</p>
<p class="cm2">Este texto tiene 1.5 cm</p>
<p class="mm1">Este texto tiene 10 mm</p>
<p class="pt1">Este texto tiene 10 pt</p>
<p class="pc1">Este texto tiene 1 pc</p>
<p class="pc2">Este texto tiene 1.5 pc</p>
<p class="porcentaje1">Este texto tiene 150%</p>
</body>
</html>
La hoja de estilo correspondiente es:
.pixel1 {
font-size:12px;
}
.pixel2 {
font-size:15px;
}
.em1{
font-size:1em;
}
.em2{
font-size:1.5em;
}
.ex1{
font-size:1ex;
}
.ex2{
font-size:1.5ex;
}
.in1{
font-size:1in;
}
.in2{
font-size:1.5in;
}
.cm1{
font-size:1cm;
}
.cm2{
font-size:1.5cm;
}
.mm1{
font-size:10mm;
}
.mm2{
font-size:15mm;
}
.pt1{
font-size:10pt;
}
.pt2{
font-size:15pt;
}
.pc1{
font-size:1pc;
}
.pc2{
font-size:1.5pc;
}
.porcentaje1{
font-size:150%;
}
.porcentaje2{
font-size:200%;
}
Los especialistas sobre el tema recomiendan utilizar em como medida cuando la salida es el
monitor. Si utilizamos pixeles hay navegadores que no permiten cambiar el tamao de texto.
Problema:Disponer dos prrafos por cada tipo de unidad de medida y asignar valores
distintos.
pagina1.html
<html>
<head>
</head>
<body>
<p class="pixel1">Este texto tiene 12 px<p>
<p class="pixel2">Este texto tiene 15 px</p>

<p class="em1">Este texto tiene 1 em</p>
<p class="em2">Este texto tiene 1.5 em</p>
<p class="ex1">Este texto tiene 1 ex</p>
<p class="ex2">Este texto tiene 1.5 ex</p>
<p class="in1">Este texto tiene 1 in</p>
<p class="in2">Este texto tiene 1.5 in</p>
<p class="cm1">Este texto tiene 1 cm</p>
<p class="cm2">Este texto tiene 1.5 cm</p>
<p class="pc1">Este texto tiene 1 pc</p>
<p class="pc2">Este texto tiene 1.5 pc</p>
</body>
</html>
estilos.css
.pixel1 {
font-size:12px;
}
.pixel2 {
font-size:15px;
}
.em1{
font-size:1em;
}
.em2{
font-size:1.5em;
}
.ex1{
font-size:1ex;
}
.ex2{
font-size:1.5ex;
}
.in1{
font-size:1in;
}
.in2{
font-size:1.5in;
}
.cm1{
font-size:1cm;
}
.cm2{
font-size:1.5cm;
}
.mm1{
font-size:10mm;
}
.mm2{
font-size:15mm;
}
.pt1{
font-size:10pt;
}
.pt2{
font-size:15pt;
}
.pc1{
font-size:1pc;
}
.pc2{
font-size:1.5pc;
}
.porcentaje1{
font-size:150%;
}
.porcentaje2{
font-size:200%;
}
Cree un div y disponga una serie de prrafos. Defina como padding 2em. Luego pruebe
distintos tamaos de fuente y vea como vara el padding del div.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
32 - Formas para indicar el color.
Hasta ahora hemos visto que para asignar el color utilizamos tres valores hexadecimales
(rojo,verde,azul) precedido por el caracter #:
Ahora veremos otras sintaxis para indicar el color:
background-color:rgb(255,0,0);
Utilizando la funcin rgb pasando como parmetro la cantidad de rojo,verde y azul en
formato decimal (un valor entre 0 y 255).
Tambin con la funcin rgb podemos indicar un porcentaje entre 0% y 100% para cada
componente:
background-color:rgb(100%,0%,0%)
Por ltimo en algunas situaciones podemos utilizar una sintaxis reducida para ciertos valores:
background-color:#ffaaff;
Lo podemos indicar con esta otra sintaxis:
background-color:#faf;
Es decir si cada valor hexadecimal est formado por el mismo caracter podemos utilizar esta
sintaxis simplificada indicando un caracter solamente. Es decir a este color no lo podemos
representar con la sintaxis indicada:
background-color:#ffaafa
Ya que los ltimos 2 caracteres, fa, son distintos.
Problema:Disponer tres prrafos pintando su fondo, utilizar distintas formas para inicializar el
color de la propiedad background-color.
pagina1.html
<html>
<head>
</head>
<body>
<p class="fondo1">Primer prrafo</p>
<p class="fondo2">Segundo prrafo</p>
<p class="fondo3">Tercer prrafo</p>
</body>
</html>
estilos.css
.fondo1 {
background-color:rgb(255,0,0);
}
.fondo2 {
background-color:rgb(100%,50%,50%);
}
.fondo3 {
background-color:#fab;
}
Utilizando la sintaxis simplificada para indicar las proporciones de rojo,verde y azul. pintar el
fondo de 16 prrafos. Comenzar por el valor #000 hasta el #fff.
Hacer que los prrafos estn sin margen entre si.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
33 - Definir un cursor para un control HTML.
Disponemos de una propiedad llamada cursor que tiene por objetivo definir el cursor a
mostrar cuando la flecha del mouse se encuentra sobre el control HTML.
Los valores que podemos asignarle a esta propiedad son:
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
auto
default
Veamos un ejemplo para configurar la propiedad cursor para la marca ancla:
<html>
<head>
</head>
<body>
<p>Este texto tiene por mostrar las anclas con un cursor distinto al
que
est definido por defecto:</p>
<a href="http://www.google.com">google.com</a><br>
<a href="http://www.yahoo.com">yahoo.com</a><br>
<a href="http://www.msn.com">msn.com</a>
</body>
</html>
a {
cursor:help;
}
Problema:Disponer tres hipervnculos y definir el cursor help para la marca tipo ancla.
pagina1.html
<html>
<head>
</head>
<body>
<p>Este texto tiene por mostrar las anclas con un cursor distinto al que est definido por
defecto:</p>
<a href="http://www.google.com">google.com</a><br>
<a href="http://www.yahoo.com">yahoo.com</a><br>
<a href="http://www.msn.com">msn.com</a>
</body>
</html>
estilos.css
a{
cursor:help;
}
Disponer los nombres de los valores que puede adoptar la propiedad cursor. Luego definir
dicho cursor para cada valor de propiedad.
Recordemos que la propiedad cursor puede adoptar los siguientes valores:
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
auto
default
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
34 - Aplicacin de hojas de estilo a un formulario.
Un formulario es el elemento esencial para el envo de datos al servidor por parte del
visitante del sitio.
Veamos un ejemplo donde implementamos un formulario y le aplicamos una serie de reglas de
estilo a las diferentes marcas HTML que intervienen:
<html>
<head>
</head>
<body>
<div id="contenedorform">
<form method="post" action="#">
<label>Ingrese nombre:</label>
<input type="text" name="nombre" size="30">
<br>
<label>Ingrese mail:</label>
<input type="text" name="mail" size="45">
<br>
<label>Comentarios:</label>
<textarea name="comentarios" cols="30" rows="5"></textarea>
<br>
<input class="botonsubmit" type="submit" value="confirmar">
</form>
</div>
</body>
</html>
La hoja de estilo que se aplica es:
#contenedorform {
width:500px;
margin-left:20px;
margin-top:10px;
background-color:#ffe;
border:1px solid #CCC;
padding:10px 0 10px 0;
}
#contenedorform form label {
width:120px;
float:left;
font-size:14px;
}
.botonsubmit {
color:#f00;
background-color:#bbb;
border: 1px solid #fff;
}
Podemos observar que definimos un div contenedor y dentro de este el formulario. Para que
los textos aparezcan a la izquierda, definimos una serie de label que las flotamos a izquieda,
por lo que los controles del formulario aparecern a derecha todos encolumnados.
Problema:Crear un formulario que solicite el ingreso del nombre, mail y comentarios de un
visitante.
pagina1.html
<html>
<head>
</head>
<body>
<div id="contenedorform">
<form method="post" action="#">
<label>Ingrese nombre:</label>
<input type="text" name="nombre" size="30">
<br>
<label>Ingrese mail:</label>
<input type="text" name="mail" size="45">
<br>
<label>Comentarios:</label>
<textarea name="comentarios" cols="30" rows="5"></textarea>
<br>
<input class="botonsubmit" type="submit" value="confirmar">
</form>
</div>
</body>
</html>
estilos.css
#contenedorform {
width:500px;
margin-left:20px;
margin-top:10px;
background-color:#ffe;
border:1px solid #CCC;
padding:10px 0 10px 0;
}
#contenedorform form label {
width:120px;
float:left;
font-size:14px;
}
.botonsubmit {
color:#f00;
background-color:#bbb;
border: 1px solid #fff;
}
Crear un formulario que solicite el ingreso del nombre de una persona y su edad. Aplicar el
estilo 'campo' a los dos controles de tipo text.
.campo {
color:#0a0;
}
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
- Definiendo reglas de estilo a una tabla.
Veamos con un ejemplo como podemos afectar una tabla HTML con CSS.
<html>
<head>
</head>
<body>
<table>
<caption>
cantidad de lluvia caida en mm.
</caption>
<thead>
<tr>
<th>Provincia</th><th>Enero</th><th>Febrero</th><th>Marzo</th>
</tr>
</thead>
<tbody>
<tr>
<th>Crdoba</th>
<td>210</td><td>170</td><td>120</td>
</tr>
<tr>
<th>Buenos Aires</th>
<td>250</td><td>190</td><td>140</td>
</tr>
<tr>
<th>Santa Fe</th>
<td>175</td><td>140</td><td>120</td>
</tr>
</tbody>
</table>
</body>
</html>
La hoja de estilo definida a esta tabla es:
caption
{
font-family:arial;
font-size:15px;
text-align: center;
margin: 0px;
font-weight: bold;
padding:10px;
}
table
{
border-collapse: collapse;
}
th
{
border-right: 1px solid #fff;

border-bottom: 1px solid #fff;
padding: 0.5em;
background-color:#6495ed;;
thead th
{
background-color: #6495ed;
color: #fff;
}
tbody th
{
font-family:arial;
font-weight: normal;
color:#ff0;
}
td {
border: 1px solid #000;
padding: .5em;
background-color:#ed8f63;
width:100px;
text-align:center;
}
La marca caption dentro de una tabla es el ttulo que debe aparecer arriba.
La propiedad border-collapse puede tomar dos valores: collapse o separate. Separate deja las
celdas con unos pixeles de separacin, no as collapse.
El resto es la definicin de una serie de reglas para las marcas th, th dentro de la marca
tbody, th dentro de la marca thead y por ltimo td.
Problema:Crear una tabla donde se deben mostrar las precipitaciones de 3 tres provincias
durante los meses de enero, febrero y marzo.
pagina1.html
<html>
<head>
</head>
<body>
<table>
<caption>
cantidad de lluvia caida en mm.
</caption>
<thead>
<tr>
<th>Provincia</th><th>Enero</th><th>Febrero</th><th>Marzo</th>
</tr>
</thead>
<tbody>
<tr>
<th>Crdoba</th>
<td>210</td><td>170</td><td>120</td>
</tr>
<tr>
<th>Buenos Aires</th>
<td>250</td><td>190</td><td>140</td>
</tr>
<tr>
<th>Santa Fe</th>
<td>175</td><td>140</td><td>120</td>
</tr>
</tbody>
</table>
</body>
</html>
estilos.css
caption
{
font-family:arial;
font-size:15px;
text-align: center;
margin: 0px;
font-weight: bold;
padding:10px;
}
table
{
border-collapse: collapse;
}
th
{
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 0.5em;
background-color:#6495ed;;
}
thead th
{
color: #fff;
}
tbody th
{
font-family:arial;
font-weight: normal;
color:#ff0;
}
td {
border: 1px solid #000;
padding: .5em;
background-color:#ed8f63;
width:100px;
text-align:center;
}
Definir una tabla de varias filas y columnas. Aplicar estilos a las marcas th y td.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
36 - Posicionamiento relativo.
La propiedad position determina el punto de referencia donde se debe localizar cada

elemento HTML. Por defecto esta propiedad se inicializa con el valor static.
Con el valor por defecto static, cada elemento HTML se localiza de izquierda a derecha y de
arriba hacia abajo.
El segundo valor posible para esta propiedad es relative. En caso de fijar la propiedad
position con el valor relative, podemos modificar la posicin por defecto del elemento HTML
modificando los valores left y top (con valores positivos o inclusive negativos)
Veamos un ejemplo con tres div, de los cuales el segundo lo desplazamos 20 pixeles a nivel de
columna y 5 pixeles a nivel de fila:
<html>
<head>
</head>
<body>
<div id="caja1">
<p>Esta es la primer caja.</p>
<p>No se desplaza.</p>
</div>
<div id="caja2">
<p>Esta es la segunda caja.</p>
<p>Se desplaza 15 pxeles a la derecha y 5 hacia abajo de su posicin
por defecto.</p>
</div>
<div id="caja3">
<p>Esta es la tercer caja.</p>
</div>
</body>
</html>
La hoja de estilo asociada es:
#caja1,#caja2,#caja3 {
background-color:#f99;
font-size:1.3em;
}
#caja2 {
position:relative;
left:15px;
top:5px;
}
Repasemos un poquito, recordemos que cuando un conjunto de elementos tienen los mismos
valores para una serie de propiedades los podemos agrupar separndolos por coma, esto
sucede para los tres Id #caja1,#caja2 y #caja3 que tienen los mismos valores para las
propiedades background-color, font-family y font-size:
font-size:1.3em;
}
Luego como debemos inicializar la propiedad position slo para el Id #caja3 lo hacemos en
forma separada:
#caja2 {
position:relative;
left:15px;
top:5px;
}
Ac es donde inicializamos la propiedad position con el valor relative y desplazamos el
elemento 15 pxeles a la derecha y 5 pxeles hacia abajo. Tengamos en cuenta que si asigno
un valor muy grande a la propiedad top se superpone este elemento con el contenido del
tercer div.
Problema:Definir 3 elementos de tipo div, luego mediante la propiedad position desplazar el
segundo div 15 pxeles a la derecha y 5 hacia abajo.
pagina1.html
<html>
<head>
</head>
<body>
<div id="caja1">
</div>
<div id="caja2">
<p>Se desplaza 15 pxeles a la derecha y 5 hacia abajo de su posicin por defecto.</p>
</div>
<div id="caja3">
</div>
</body>
</html>
estilos.css
font-size:1.3em;
}
#caja2 {
position:relative;
left:15px;
top:5px;
}
Disponer dos prrafos, desplazar el segundo prrafo hasta que quede casi superpuesto al
primer prrafo.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
Posicionamiento absoluto.
El posicionamiento absoluto dispone un elemento HTML completamente fuera del flujo de la

pgina. El valor que debemos asignar a la propiedad position es absolute.
Hay que tener en cuenta que no se reserva espacio en el flujo del documento como pasaba
con el posicionamiento relativo (recordemos que con este posicionamiento podemos desplazar
el elemento a cuarquier parte de la pgina, pero el espacio por defecto para dicho elemento
queda vaco).
El posicionamiento es siempre con respecto a la pgina.
Veamos un ejemplo para ver el funcionamiento del posicionamiento absoluto:
<html>
<head>
</head>
<body>
<div id="caja1">
</div>
<div id="caja2">
<p>Se desplaza a la coordenada de pantalla 40 en columna y 30 en fila
(en
pxeles).</p>
</div>
<div id="caja3">
</div>
</body>
</html>
La hoja de estilo definida:
#caja1,#caja3 {
font-size:1.3em;
}
#caja2 {
font-size:1.3em;
position:absolute;
left:40px;
top:30px;
}
Como vemos inicializamos la propiedad position con el valor absolute y fijamos como
coordenada para la caja la columna 40 y la fila 30 (en pxeles).
Problema:Disponer tres cajas de texto mediante div. Luego posicionar la segundo caja en la
coordenada de la pgina 40,30 (pxel 40 en columna y 30 en fila) en forma absoluta.
pagina1.html
<html>
<head>
</head>
<body>
<div id="caja1">
</div>
<div id="caja2">
<p>Se desplaza a la coordenada de pantalla 40 en columna y 30 en fila (en
pxeles).</p>
</div>
<div id="caja3">
</div>
</body>
</html>
estilos.css
font-size:1.3em;
}
#caja2 {
font-size:1.3em;
position:absolute;
left:40px;
top:30px;
}
Disponer dos div con coordenadas absolutas, uno que represente la cabecera de la pgina (50
pxeles de alto) y otro la primer columna de la izquierda.
pagina1.html
<html>
<head>

</head>
<body>
</body>
</html>
estilos.css
38 - Disposicin de 2 columnas.
Empezaremos a ver como componer una pgina sin utilizar las tablas (un medio muy utilizado
hasta hace muy poco, ya que es ampliamente soportado por navegadores antiguos).
Una solucin para crear una pgina con dos columnas es utilizar el posicionamiento absoluto:
<html>
<head>
</head>
<body>
<div id="columna1">
Aca va el contenido de la columna 1.
</div>
</body>
</html>
La hoja de estilo para esta pgina es:
* {
margin:0px;
padding:0px;
}
#columna1 {
position:absolute;
top:0px;
left:0px;
width:200px;
margin-top:10px;
}
#columna2 {
margin-left:220px;
margin-right:20px;
margin-top:10px;
background-color:#ffffbb;
}
La primera regla de disponer el selector universal, es decir afecta a todas las marcas HTML,
es sacar el margen y padding (generalmente dispondremos esta regla):
* {
margin:0px;
padding:0px;
}
Ahora la regla definida para la primer columna es:
#columna1 {
position:absolute;
top:0px;
left:0px;
width:200px;
margin-top:10px;
}
Es decir, inicializamos la propiedad position con el valor absolute, con lo que debemos indicar
la posicin del div en la pgina por medio de las propiedades top y left, en esta caso lo
posicionamos en la columna 0 y fila 0 y adems inicializamos la propiedad width, con lo cual
le estamos indicando que esta columna tendr siempre 200 pxeles de ancho.
Adems inicializamos la propiedad margin-top con 10 pxeles, recordemos que todos los
elementos tienen margin y padding cero.
Ahora veamos cmo inicializamos la segunda columna:
#columna2 {
margin-left:220px;
margin-right:20px;
margin-top:10px;
}
Esta regla no inicializa la propiedad position, por lo que el div ocupa la posicin que le
corresponde por defecto, es decir, empieza en la coordenada 0,0 de la pgina. El truco est
en inicializar la propiedad margin-left con un valor mayor a 200, que es el ancho de la
columna1.
El resto de propiedades que inicializamos son el margin-top, para que sea igual que la primera
columna y el margin-right, para que no quede el texto pegado a la derecha.
Problema:Crear una pgina con dos columnas.
pagina1.html
<html>
<head>
</head>
<body>
<div id="columna1">
Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el
contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de
la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna
1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el

1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.
</div>
<div id="columna2">
Aca va el contenido de la columna 2. Aca va el contenido de la columna 2.Aca va el
la columna 2.Aca va el contenido de la columna 2.
</div>
</body>
</html>
estilos.css
*{
margin:0px;
padding:0px;
}
#columna1 {
position:absolute;
top:0px;
left:0px;
width:200px;
margin-top:10px;
}
#columna2 {
margin-left:220px;
margin-right:20px;
margin-top:10px;
}
Crear una pgina con dos columnas y disponer en la primera columna un men de opciones
(como el visto en conceptos anteriores).
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
- Propiedad float aplicada a una imagen.
La propiedad float saca del flujo un elemento HTML. Esta propiedad admite tres valores:
left
right
none
Cuando aplicamos esta propiedad a la marca img, podemos hacer que el texto envuelva a la
imagen.
Veamos un ejemplo:
<html>
<head>
<link
</head>
<body>
<img src="../imagen1.png">
<p>El texto envuelve a la imagen. </p>
</body>
</html>
La hoja de estilo:
img {
float:right;
}
Es importante hacer notar que si no la flotamos a la imagen solo habr una lnea de texto a la
derecha de la imagen.
Problema:Disponer una imagen y flotarla a la derecha. Pruebe luego de modificar la

propiedad float con los otros dos valores posibles (left,none).
pagina1.html
<html>
<head>
<link
</head>
<body>
<img src="../imagen1.png">
<p>El texto envuelve a la imagen. El texto envuelve a la imagen.El texto envuelve a la
imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a
la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve
a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto
envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El
texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la
envuelve a la imagen.El texto envuelve a la imagen.</p>
</body>
</html>
estilos.css
img {
float:right;
}
Inicializar la siguiente regla:
span {
float:left;
font-size:300%;
}
Confeccionar una pgina en la que la primera letra de cada oracin aparezca con el triple de
tamao y adems el texto envuelva a la letra.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
40 - Disposicin de 2 columnas (propiedad float)
Una segunda forma de implementar una pgina con dos columnas es utilizar la propiedad
float. Disponemos dos div. Al primero lo flotamos hacia la izquierda con un width fijo y el
segundo se acomoda inmediatamente a la derecha.
Veamos un ejemplo:
<html>
<head>
</head>
<body>
<div id="columna1">
Aqu el contenido de la columna 1.
</div>
<div id="columna2">
Aqu el contenido de la columna 2.
</div>
</body>
</html>
La hoja de estilo:
* {
margin:0;
padding:0;
}
#columna1 {
float:left;
width:200px;
border:1px solid #555;
}
#columna2 {
margin-left:210px;
background-color:#ffb;
}
La columna1 tiene un ancho de 200 pixeles. Luego para evitar que la columna dos envuelva a
la columna uno en caso de ser ms larga inicializamos margin-left con 210 pixeles.
Problema:Crear una pgina con dos columnas. La primera flotarla a la izquierda con 200
pxeles de ancho.
pagina1.html
<html>
<head>
</head>
<body>
<div id="columna1">
Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido

de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna
1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el
contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la
columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu
el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la
columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.
</div>
<div id="columna2">
Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido
de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna
2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el
contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la



columna 2.Aqu el contenido de la columna 2.
</div>
</body>
</html>
estilos.css
*{
margin:0;
padding:0;
}
#columna1 {
float:left;
width:200px;
}
#columna2 {
margin-left:210px;
background-color:#ffb;
}
Disponga un men horizontal en la segunda columna del problema resuelto.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
41 - Disposicin de 2 columnas, cabecera y pie.
Una estructura muy comn en la web es la disposicin de una cabecera de pgina, seguida de
dos columnas y un pie de pgina. La implementacin de esta estructura de pgina es la
siguiente:
<html>
<head>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<h1>Aca el ttulo de la pgina</h1>
</div>
<div id="columna1">
<p>columna1. columna1. columna1.</p>

</div>
<div id="columna2">
<h2>Ttulo de la columna</h2>
<p>Contenido de la columna2. </p>
</div>
<div id="pie">
Pi de pgina.
</div>
</div>
</body>
</html>
La hoja de estilo definida para esta pgina es la siguiente:
* {
margin:0px;
padding:0px;
}
#contenedor
{
width:100%;
margin:0px;
line-height:130%;
background-color:#f2f2f2;
}
#cabecera
{
padding:10px;
color:#fff;
background-color:#becdfe;
clear:left;
}
#columna1
{
float:left;
width:200px;
margin:0;
padding:1em;
}
#columna2
{
margin-left:210px;
border-left:1px solid #aaa;
padding:1em;
}
#pie {
padding:10px;
color:#fff;
clear:left;
}
Hay algunas propiedades claves que debemos analizar en la regla #contenedor:
width:100%;
Con esto estamos indicando que siempre ocupe todo el espacio en ancho del navegador,
indistintamente de la resolucin de pantalla o el tamao de ventana del navegador.
Luego, tanto para la cabecera como para el pie, tenemos:
clear:left;
La propiedad clear hace que un elemento no tenga elementos flotantes a su lado. Eso es lo
que queremos para la cabecera y el pie.
Problema:Crear una pgina que tenga una cabecera, luego 2 columnas y finalmente un pie de
pgina.
pagina1.html
<html>
<head>
</head>
<body>
<div id="cabecera">
</div>
<div id="columna1">
<p>columna1. columna1. columna1. columna1. columna1. columna1. columna1.
columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1.
columna1. columna1. columna1. columna1. columna1. columna1. columna1.</p>
</div>
<div id="columna2">
<p>Contenido de la columna2. Contenido de la columna2. Contenido de la
columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la
columna2. Contenido de la columna2. Contenido de la columna2.</p>
</div>
<div id="pie">
Pi de pgina.
</div>
</div>
</body>
</html>
estilos.css
*{
margin:0px;
padding:0px;
}
#contenedor
{
width:100%;
margin:0px;
line-height:130%;
}
#cabecera
{
padding:10px;
color:#fff;
clear:left;
}
#columna1
{
float:left;
width:200px;
margin:0;
padding:1em;
}
#columna2
{
margin-left:210px;
padding:1em;
}
#pie {
padding:10px;
color:#fff;
clear:left;
}
Codifique el problema visto anteriormente para mostrar dos columnas, cabecera y pie de
pgina. Luego asigne a la propiedad width, de la regla contenedor, el valor:
width:780px;
Cul es el resultado?
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css
Una modificacin al concepto anterior nos permite agregar una tercera columna flotando a
derecha, lo nico que hay que tener cuidado es que dentro del HTML debemos disponer los
div de la columna 1 y 3 en primer lugar, ya que son los que se flotan, y por ltimo, la columna
2, que es la central:
<html>
<head>
</head>
<body>
<div id="cabecera">
</div>
<div id="columna1">
<p>columna1. </p>
</div>
<div id="columna3">
<p>columna3.</p>
</div>
<div id="columna2">
<p>Contenido de la columna2.</p>
</div>
<div id="pie">
Pi de pgina.
</div>
</div>
</body>
</html>
* {
margin:0px;
padding:0px;
}
#contenedor
{
width:100%;
margin:0px;
line-height:130%;
}
#cabecera
{
padding:10px;
color:#fff;
clear:left;
}
#columna1
{
float:left;
width:200px;
margin:0;
padding:1em;
}
#columna2
{
margin-left:210px;
margin-right:230px;
border-right:1px solid #aaa;
padding:1em;
}
#columna3
{
float:right;
width:200px;
margin:0;
padding:1em;
}
#pie {
padding:10px;
color:#fff;
clear:left;
}
Problema: Crear una pgina con tres columnas, cabecera y pie de pgina.
pagina1.html
<html>
<head>
</head>
<body>
<div id="cabecera">
</div>
<div id="columna1">
columna1. columna1. columna1. columna1. columna1. columna1. columna1.</p>
</div>
<div id="columna3">
columna3. columna3. columna3. columna3. columna3. columna3. columna3. </p>
</div>
<div id="columna2">
<p>Contenido de la columna2. Contenido de la columna2. Contenido de la

columna2. Contenido de la columna2. Contenido de la columna2.</p>
</div>
<div id="pie">
Pi de pgina.
</div>
</div>
</body>
</html>
estilos.css
*{
margin:0px;
padding:0px;
}
#contenedor
{
width:100%;
margin:0px;
line-height:130%;
}
#cabecera
{
padding:10px;
color:#fff;
clear:left;
}
#columna1
{
float:left;
width:200px;
margin:0;
padding:1em;
}
#columna2
{
margin-left:210px;
margin-right:230px;
border-right:1px solid #aaa;
padding:1em;
}
#columna3
{
float:right;
width:200px;
margin:0;
padding:1em;
}
#pie {
padding:10px;
color:#fff;
clear:left;
}
Codifique nuevamente la sintaxis para disponer tres columnas, cabecera y pie de pgina.
Luego defina la propiedad width del contenedor con 780px. Disponga un men en la columna
uno y otro en la columna tres.
pagina1.html
<html>
<head>
</head>
<body>
</body>
</html>
estilos.css

03 CSS Ya

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

03 CSS Ya

Cargado por

Copyright:

Formatos disponibles

Orden

Que son las hojas de estilo (CSS)?

Definicin de estilos a nivel de marca HTML.

Definicin de estilos a nivel de pgina.

Propiedades relacionadas a fuentes.

Agrupacin de varias marcas HTML con una misma

Definicin de varias reglas para una misma marca

Propiedades relacionadas al texto.

Ms propiedades relacionadas al texto.

Herencia de propiedades de estilo.

Definicin de un estilo en funcin del contexto.

Definicin de hojas de estilo en un archivo

Definicin de estilos por medio de clases.

Definicin de estilos por medio de Id.

Propiedades relacionadas al borde de una marca

Ms propiedades relacionadas al borde de una

Propiedades relacionadas al padding de una marca

Propiedades relacionadas al margen de una marca

Propiedades relacionadas a listas.

Propiedades relacionadas al fondo (background)

Propiedades relacionadas a fuentes (FORMATO

Propiedades relacionadas al border (FORMATO

Propiedades relacionadas al padding (FORMATO

Propiedades relacionadas al margin (FORMATO

Propiedades relacionadas al fondo (background)

Eliminar el subrayado a un enlace por medio de las

Creacin de un men vertical configurando las

Creacin de un men horizontal con una lista.

Propiedades relacionadas a la dimensin de un

Unidades de medida (px, cm, mm, em etc.)

Formas para indicar el color.

Definir un cursor para un control HTML.

Aplicacin de hojas de estilo a un formulario.

Definiendo reglas de estilo a una tabla.

Propiedad float aplicada a una imagen.

Disposicin de 2 columnas (propiedad float)

Disposicin de 2 columnas, cabecera y pie.

Disposicin de 3 columnas, cabecera y pie.

1 - Que son las hojas de estilo (CSS)?

2 - Definicin de estilos a nivel de marca HTML.

3 - Definicin de estilos a nivel de pgina.

Es la definicin de estilos en una seccin de la cabecera de la pgina HTML donde podemos

4 - Propiedades relacionadas a fuentes.

Contamos con una serie de propiedades relacionadas a fuentes:

5 - Agrupacin de varias marcas HTML con una misma regla de

<h1>Ttulo de nivel 1</h1>

6 - Definicin de varias reglas para una misma marca HTML.

En algunas circunstancias, es necesario desglosar la inicializacin de propiedades en distintas

7 - Propiedades relacionadas al texto.

8 - Ms propiedades relacionadas al texto.

Vimos en el concepto anterior las propiedades:

9 - Herencia de propiedades de estilo.

marca p y no lo hereda de la marca body.</p>

10 - Definicin de un estilo en funcin del contexto.

11 - Definicin de hojas de estilo en un archivo externo.

estilos que sern empleados solo por esa pgina.

12 - Definicin de estilos por medio de clases.

13 - Definicin de estilos por medio de Id.

La diferencia fundamental en la definicin de un estilo por medio de Id con respecto a las

14 - Propiedades relacionadas al borde de una marca HTML.

En sta hemos cambiado el estilo de borde.

15 - Ms propiedades relacionadas al borde de una marca

<link rel="StyleSheet" href="estilos.css" type="text/css">