MANUAL CSS

  1. Que son las hojas de estilo (CSS)?
  2. Definición de estilos a nivel de marca HTML.
  3. Definición de estilos a nivel de página.
  4. Propiedades relacionadas a fuentes.
  5. Agrupación de varias marcas HTML con una misma regla de estilo.
  6. Definición de varias reglas para una misma marca HTML.
  7. Propiedades relacionadas al texto.
  8. Elementos HTML <div> y <span>
  9. Herencia de propiedades de estilo.
  10. Definición de un estilo en función del contexto.
  11. Definición de hojas de estilo en un archivo externo.
  12. Definición de estilos por medio de clases.
  13. Definición de estilos por medio de Id.
  14. Propiedades relacionadas al borde de una marca HTML.
  15. Propiedades relacionadas al padding de una marca HTML.
  16. Propiedades relacionadas al margen de una marca HTML.
  17. Propiedades relacionadas a listas.
  18. Propiedades relacionadas al fondo (background)
  19. Propiedades relacionadas a fuentes (FORMATO RESUMIDO)
  20. Propiedades relacionadas al border (FORMATO RESUMIDO)
  21. Propiedades relacionadas al padding (FORMATO RESUMIDO)
  22. Propiedades relacionadas al margin (FORMATO RESUMIDO)
  23. Propiedades relacionadas al fondo (background)(FORMATO RESUMIDO)
  24. El selector universal *
  25. Pseudoclases
  26. Eliminar el subrayado a un enlace por medio de las pseudoclases
  27. Creación de un menú vertical configurando las pseudoclases.
  28. Creación de un menú horizontal con una lista.
  29. Propiedades relacionadas a la dimensión de un objeto en la página.
  30. Unidades de medida (px, cm, mm, em etc.)
  31. Formas para indicar el color
  32. Definir un cursor para un control HTML.
  33. Aplicación de hojas de estilo a un formulario.
  34. Definiendo reglas de estilo a una tabla.
  35. Posicionamiento relativo.
  36. Posicionamiento absoluto.
  37. Disposición de 2 columnas.
  38. Propiedad float aplicada a una imagen
  39. Disposición de 2 columnas (propiedad float)
  40. Disposición de 2 columnas, cabecera y pie.
  41. Disposición de 3 columnas, cabecera y pie.

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 tecnología que nos permite controlar la apariencia de una página web. En un principio, los sitos web se concentraban más en su contenido que en su presentación.

HTML no pone mucha atención en la apariencia del documento. CSS describe como los elementos dispuestos en la página 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 tamaño, fuentes, color, espaciado entre textos y recuadros así como el lugar donde disponer texto e imagenes en la página.

El lenguaje de las Hojas de Estilo está definido en la Especificaciones CSS1 y CSS2 del World Wide Web Consortium (W3C), es un estándar 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).

Veremos que podemos asociar las reglas de estilo a las marcas HTML de tres maneras: directamente a la marca, en el head de la página o agrupar las reglas de estilo en un archivo independiente con extensión *.css

En este curso veremos las tres metodologías, pero pondremos énfasis en la tercera forma, que es la más adecuada para separar el contenido de la página y la forma como se debe representar la misma por medio de la hoja de estilo.

Volver al inicio

2 - Definición de estilos a nivel de marca HTML.

Es la forma más fácil pero menos recomendada para aplicación de un estilo a una marca HTML. Se define en la propiedad style los estilos a definir para dicha marca. Es común definir estilos directamente en las marcas HTML cuando estamos diseñando la página y posteriormente trasladar el estilo creado a una hoja de estilos. La sintaxis para definir un estilo a una marca HTML es la siguiente:

<h1 style="color:#ff0000;background-color:#ffff00"> Este mensaje es de color rojo sobre fondo amarillo.</h1>

Este mensaje es de color rojo sobre fondo amarillo.

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. Veremos más 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: 

<h1 style="color:#ff0000;background-color:#ffff00">Primer título</h1>
<h1 style="color:#00ff00;background-color:#ffffff">Segundo título</h1>

Primer título

Segundo título

Como podemos observar, más alla que los dos estilos son exactamente iguales, estamos obligados a definirlos para cada marca HTML.

Volver al inicio

3 - Definición de estilos a nivel de página.

Es la definición de estilos en una sección de la cabecera de la página HTML donde podemos definir estilos que se aplican a las distintas marcas HTML de la página.

El problema del concepto anterior donde debíamos crear un estilo similar para la marca h1 se puede resolver en forma más adecuada empleando la definición de estilos a nivel de página.

<html>
<head><title>Problema</title>
<style type="text/css">
	h1 {color:#ff0000;background-color:#ffff00}
</style>
</head>
<body>
<h1>Primer título</h1>
<h1>Segundo título</h1>
</body>
</html>

Podemos observar que en la cabecera de la página definimos la sección.

Debe estar encerrada por la marca style. En este ejemplo indicamos al navegador que en todos los lugares de esta página 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 más eficiente que definir los estilos directamente sobre las marcas HTML.

Volver al inicio

4 - Propiedades relacionadas a fuentes.

Contamos con una serie de propiedades relacionadas a fuentes:
font-family
font-size
font-style
font-weight
font-variant 

<html>
<head><title>Problema</title>
<style type="text/css">
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>
<h2>Titulo de nivel 2</h2>
</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 página que se utilicen dichas marcas HTML.

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 paréntesis, todas las propiedades y sus valores separados por punto y coma.
La primera propiedad inicializada es font-family, algunas de las fuentes más 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 tamaño de la fuente (veremos más adelante otros sistemas de medida), en nuestro caso indicamos en píxeles:

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 serán más rellenos).

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 mayúsculas tipo normal o pequeñas.

Volver al inicio

5 - Agrupación de varias marcas HTML con una misma regla de estilo.

Esta característica 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><title>Problema</title>
<style type="text/css">
	h1,h2,h3 { font-family:verdana; color:#0000ff;}
</style>
</head>
<body>
<h1>Título de nivel 1</h1>
<h2>Título de nivel 2</h2>
<h3>Título de nivel 3</h3>
</body>
</html>

Volver al inicio

6 - Definición de varias reglas para una misma marca HTML.

En algunas circunstancias, es necesario desglosar la inicialización de propiedades en distintas reglas. Supongamos que queremos todas las cabeceras con la misma fuente pero tamaños de fuente distinta, luego podemos implementarlo de la siguiente manera:

<html>
<head><title>Problema</title>
<style type="text/css">
	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>
<h1>Título de nivel 1</h1>
<h2>Título de nivel 2</h2>
<h3>Título de nivel 3</h3>
<h4>Título de nivel 4</h4>
<h5>Título de nivel 5</h5>
<h6>Título de nivel 6</h6>
</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.

Volver al inicio

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 función 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 línea en la parte superior, los valores posibles de esta propiedad son:
none
underline
overline
line-through 

<html>
<head><title>Problema</title>
<style type="text/css">
	h1 { color:#ff0000; text-align:left; text-decoration:underline;}
	h2 { color:#dd0000; text-align:center; text-decoration:underline;}
	h3 { color:#aa0000; text-align:right; text-decoration:underline;}
</style>
</head>
<body>
	<h1>Título de nivel 1.</h1>
	<h2>Título de nivel 2.</h2>
	<h3>Título de nivel 3.</h3>
</body>
</html>

Título de nivel 1.

Título de nivel 2.

Título de nivel 3.

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 línea, el texto aparece sin indentación. Podemos indicar un valor negativo con lo que la indentación 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 mayúsculas el primer caracter de cada palabra.
lowercase: Convierte a minúsculas todas las letras del texto.
uppercase: Convierte a mayúsculas todas las letras del texto.
none: No provoca cambios en el texto.

<html>
<head><title>Problema</title>
<style type="text/css">
	h1 { letter-spacing:10px; word-spacing:30px; text-transform:capitalize;}
	p { text-indent:20px;}
</style>
</head>
<body>
<h1>Este es un título de nivel 1</h1>
<p>Todo el texto siguiente se encuentra encerrada en la marca de párrafo 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 línea del párrafo comience en una columna inferior al de todo 
el bloque. </p>
</body>
</html>

Este es un título de nivel 1

Todo el texto siguiente se encuentra encerrada en la marca de párrafo 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 línea del párrafo comience en una columna inferior al de todo el bloque.

Es decir que las letras deben tener una separación de 10 pixeles, las palabras deben estar separadas por 30 pixeles y por último deben disponerse en mayúsculas la primera letra de cada palabra, la primera línea del párrafo deberá imprimirse 20 píxeles a la derecha donde normalmente debería aparecer.

Volver al inicio

8 - Elementos HTML <div> y <span>

Estas marcas se utilizan en conjunción con las hojas de estilo. Sin estas tiene poco sentido el empleo de estos elementos HTML.

Estos elementos "div" y "span" nos permiten agrupar un conjunto de elementos y aplicar reglas de estilo.

La diferencia entre estos dos elementos es que cuando utilizamos el elemento div produce un salto de línea previo y uno al final, es decir es una marca de bloque como lo son h1,h2,p etc. En cambio el elemento span no produce un salto de línea porque se trata de un elemento en línea como lo son a,em,strong,input etc.

Veamos un ejemplo creando una división (div) y la aplicación de algunas reglas de estilo, como así un elemento span.

Listar una serie de nombres y un bloque de comentarios para cada nombre. Indentar la primer linea de cada párrafo. Hacer que algunas palabras del párrafo aparezcan resaltadas en otro color. Disponer todos los comentarios con un color gris de fondo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>título página</title>
</head>
<body>
<div style="background-color:#eeeeee">
	<h3>Luis Barrionuevo</h3>
	<p style="color:#888888;text-indent:20px">
	Aquí <span style="background-color:#eeee00">comentarios.</span> 
		Aquí comentarios. 
		Aquí comentarios. 
	</p>
	<h3>Ana Rodriguez</h3>
	<p style="color:#888888;text-indent:20px">
	<span style="background-color:#eeee00">Aquí comentarios.</span> 
		Aquí comentarios. 
		Aquí comentarios. 
	</p>
</div>
</body>
</html>

El div agrupa todos los títulos y párrafos y define la propiedad background-color que es heredado por todos los elementos contendidos por el div.

Volver al inicio

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 sección, como podrían ser las marcas h1,h2,h3,h4,h5,h6,p,div luego estas en su interior contienen otras marcas HTML como podrían 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>
<title>Problema</title>
<style type="text/css">
	body { color:#0000ff; font-family:verdana;}
</style>
</head>
<body>
<h1>Este es un título de nivel 1 y con la marca 'em' la palabra: <em>Hola</em></h1>
<p>Todo este párrafo debe ser de color azul ya que lo hereda de la marca body.</p>
<a href="pagina2.html">Siguiente ejemplo</a>
</body>
</html>

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 recibirán los valores aquí definidos. En este ejemplo la cabecera de primer nivel es decir h1, el párrafo y el hipervínculo 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><title>Problema</title>
<style type="text/css">
	body { color:#0000ff; font-family:verdana;}
	em { color:#008800;}
	p { color:#999999;}
</style>
</head>
<body>
<h1>Este es un título de nivel 1 y con la marca 'em' la palabra: <em>Hola</em></h1>
<p>Todo este párrafo debe ser de color gris ya que lo redefine la marca p y no lo hereda de la marca body.</p>
</body>
</html>

Volver al inicio

10 - Definición de un estilo en función del contexto.

Este otro recurso que provee las css es la definición de un estilo para una marca HTML siempre y cuando la misma esté contenida por otra marca determinada. Sólo 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 párrafo 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><title>Problema</title>
<style type="text/css">
	p b{ color:#00ff00;}
	h1 b{ color:#ff0000;}
</style>
</head>
<body>
	<h1>Acá tenemos un título de nivel uno, luego un bloque con la marca bold debe aparecer <b>así</b></h1>
<p>Luego si escribimos un párrafo y encerramos un bloque con la marca bold debe aparecer <b>así</b></p>
</body>
</html>

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 función del contexto, con mayor precisión, 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.

Volver al inicio

11 - Definición de hojas de estilo en un archivo externo.

Hasta ahora hemos visto la definición de estilos a nivel de marca HTML y la definición de estilos a nivel de página. Dijimos que la primera forma es muy poco recomendada y la segunda es utilizada cuando queremos definir estilos que serán empleados sólo por esa página.

Ahora veremos que la metodología más empleada es la definición de una hoja de estilo en un archivo separado que deberá tener la extensión css. Este archivo contendrá las reglas de estilo (igual como las hemos visto hasta ahora) pero estarán separadas del archivo HTML.

La ventaja fundamental es que con esto podemos aplicar las mismas reglas de estilo a parte o a todas las páginas 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 múltiples páginas del sitio).

Tambien tiene como ventaja que al programador le resulta más 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 página, se le envía el archivo HTML y el archivo CSS, quedando guardado este último archivo en la caché de la computadora, con lo cual, en las sucesivas páginas que requieran el mismo archivo de estilos, ese mismo archivo se rescata de la caché y no requiere que el servidor web se lo reenvíe (ahorrando tiempo de transferencia).

Ahora veremos la primera página HTML que tiene asociada una hoja de estilo en un archivo externo. El archivo HTML es (prueba.html): 

<html>
        <head><title>Problema</title>
        <link rel="StyleSheet" href="estilos.css" type="text/css">
        </head>
        <body>
        <h1>Definición de hojas de estilo en un archivo externo.</h1>
        <p> Hasta ahora hemos visto la definición de estilos a nivel de marca HTML y la definición de estilos a nivel de página. 
	Dijimos que la primera forma es muy poco recomendada y la segunda es utilizada cuando queremos definir estilos 
	que serán empleados solo por esa página. Ahora veremos que la metodología más empleada es la definición de una 
	hoja de estilo en un archivo separado que deberá tener la extensión css.
        </p>
        </body>
</html>

El archivo que tiene las reglas de estilo es (estilos.css): 
body { background-color:#eafadd;}
h1 { color:#0000cc; font-family:times new roman; font-size:25px; text-align:center; text-decoration:underline;}
p { color:#555555; font-family:verdana; 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: <link rel="StyleSheet" href="estilos.css" type="text/css">

La propiedad href hace referencia al archivo externo que afectará la presentación de esta página. En la propiedad type, indica al navegador cual es el formato de archivo.El atributo rel se usa para definir la relación entre el archivo enlazado y el documento HTML.

Volver al inicio

12 - Definición 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 genérico que posteriormente se puede aplicar a varias marcas de HTML.
Para conocer la sintaxis para la definición de clases veamos un ejemplo, la pagina1.html es:

<html>
<head><title>Problema</title>
<link rel="StyleSheet" href="estilos1.css" type="text/css">
</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;}

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 número.

Luego, para indicar que una marca sea afectada por esta regla:
<h1 class="resaltado">Titulo de nivel 1</h1>
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.

Volver al inicio

13 - Definición de estilos por medio de Id.

La diferencia fundamental en la definición de un estilo por medio de Id con respecto a las clases, es que sólo podremos aplicar dicho estilo a una sola marca dentro de la página 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, sólo una marca HTML dentro de una página puede definir un estilo de este tipo:
<div id="cabecera">

Hay que tener en cuenta que sólo una marca puede definir la propiedad id con el valor de cabecera.
Los dos archivos completos del ejemplo entonces quedan (pagina1.html):

<html>
<head><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
	<div id="cabecera">
	<h1>Título de la cabecera</h1>
	</div>
</body>
</html>
Y el archivo de estilos (estilos.css) es: 
#cabecera { font-family:Times New Roman; font-size:30px; text-align:center; color:#0000ff; background-color:#bbbbbb;}

Volver al inicio

14 - Propiedades relacionadas al borde de una marca HTML.

Debemos ahora hacernos la idea que todo elemento que se crea dentro de una página 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 rectángulo.

Podemos acceder a las propiedades del borde de ese rectángulo mediante las CSS; las propiedades más importantes a las que tenemos acceso son:
border-width
border-style
border-color
Veamos un ejemplo que inicialice estas propiedades:

<html>
<head><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css"> 
</head>
<body>
	<p class="pregunta">Quién descubrió América y en que año fue?</p>
	<p class="respuesta">Colón en 1492</p>
</body>
</html>
estilos3.css 
.pregunta { background-color:#ffff00; border-width:1px; border-style:solid; border-color:#000000;}
.respuesta { border-width:1px; border-style:dashed; border-color:#000000;}

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 sólido y el color de la línea de borde es negro.

Luego recordar que para indicar que una marca tenga este estilo debemos inicializar la propiedad class de la marca HTML.

Disponemos de los siguientes estilos de borde:
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

las CSS nos permiten modificar independientemente cada uno de los cuatro bordes del rectángulo.
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><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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-family:verdana; 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 metodología de inicializar el borde de un control HTML, tiene utilidad si los mismos varian en grosor, estilo o color.

Volver al inicio

15 - 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

<html>
<head><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<pre class="codigofuente">
	public class Rectangulo{
  	//atributos
  	int alto;
  	int ancho;
  	boolean relleno;
  	//métodos
  	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; background-color:#ffffcc; 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 código fuente de un programa.

Volver al inicio

16 - 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á después del borde.
Veamos un ejemplo, la página HTML muestra dos párrafos con cero pixeles de margen:

<html>
<head><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
	<p>Primer párrafo</p>
	<p>Segundo párrafo</p>
</body>
</html>
La hoja de estilo: 
p { background-color:#ffffaa; margin:0px;}

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

Volver al inicio

 

 

 

 

 

 

17 - 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 asignársele 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 list-style-type: 

<html>
<head><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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 sólo tiene sentido aplicarla a dicha marca).

Volver al inicio

18 - 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

<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 página por completo, ya que por defecto background-repeat está inicializada con el valor repeat, probar de modificar el estilo primero con:

body { background-image:url(../fondo.jpg); background-repeat:repeat-x;}
Luego con: 
body { background-image:url(../fondo.jpg); background-repeat:repeat-y;}
Y por último: 
body { background-image:url(../fondo.jpg); 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 posición de la imagen según 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-image:url(../fondo.jpg); background-repeat:no-repeat; background-position:20% 50%; }

Dispone la imagen 20% avanzando desde la izquierda y 50% avanzando desde arriba.
La siguiente regla:

body { background-image:url(../fondo.jpg); background-repeat:no-repeat; background-position:400px 10px; }

Dispone la imagen 400 pixeles desde la derecha y 10 píxeles desde arriba.
La regla:

body { background-image:url(../fondo.jpg); background-repeat:no-repeat; background-position:top right; }

Dispone la imagen en la parte superior a la derecha.

Volver al inicio

19 - 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><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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.

Volver al inicio

20 - 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

<html>
<head><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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 página 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 sálo se puede aplicar a dichas marcas. De todos modos, si le sacamos el nombre de la marca HTML funciona igual.

Volver al inicio

21 - 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><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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.
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 párrafo tiene 5 píxeles de separación con el borde en la parte inferior y superior, y a la izquierda y derecha tiene 30 píxeles.

Volver al inicio

22 - 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><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
	<h1>Titulo Principal</h1>
</body>
</html>
Y la hoja de estilo: 
h1 { margin:70px 20px;}
Volver al inicio

23 - 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 simultánea:

<html>
<head><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
</body>
</html>
La hoja de estilo es: 
body { background: #ffffee url('../fondo.jpg') repeat-x; }

No es obligatorio inicializar todos los valores.

Volver al inicio

24 - El selector universal *

Si queremos inicializar las propiedades de todas las marcas HTML podemos utilizar el selector universal. Veamos un ejemplo:

<html>
<head><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
	<h1>Título de nivel 1</h1>
	<h2>Título de nivel 2</h2>
	<p>Esto esta dentro de un párrafo</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 tácita lo hemos estado utilizando, cuando definimos una clase sin indicar el tipo de marca HTML donde actuará:

.pregunta { background-color:#ffff00; border-width:1px; border-style:solid; border-color:#000000;}
Podemos expresar la regla anterior perfectamente como: 
*.pregunta { background-color:#ffff00; border-width:1px; border-style:solid; border-color:#000000;}

Es decir que podemos asignar esta regla a cualquier marca HTML.
Esto nos permite comprender, cuando definimos una regla que sólo se puede utilizar en un sólo tipo de marcas:

p.pregunta { background-color:#ffff00; border-width:1px; border-style:solid; border-color:#000000;}

Esta regla sólo se puede utilizar en las marcas de párrafo.

Volver al inicio

25 - 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 varía 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><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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>
La hoja de estilo es: 
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 página los tres enlaces deben aparecer de color rojo con fondo verde.

Si presionamos la tecla tab podremos ver que el enlace que tiene foco aparece de color amarillo con fondo rojo.

Si pasamos la flecha del mouse sobre algún enlace veremos que aparece de color blanco con fondo lila.

Por último todos los enlaces que hayamos hecho click deberán aparecer de color blanco con fondo negro.

Volver al inicio

26 - Eliminar el subrayado a un enlace por medio de las pseudoclases

Otra actividad común en algunos sitios es eliminar el subrayado a los enlaces. A esto lo podemos hacer configurando una propiedad de las pseudoclases. La solución de este problema es:

<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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>
La hoja de estilo es: 
a:link { text-decoration: none;}
a:visited { text-decoration: none;}

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 { text-decoration: none; }

Volver al inicio

27 - Creación de un menú vertical configurando las pseudoclases.

Un recurso muy útil es disponer un menú en una página, si no requerimos uno muy elaborado podemos resolverlo utilizando sólo CSS y HTML (en otros casos se requiere además de JavaScript).

Vamos a implementar uno muy sencillo que requiere agrupar en un div una serie de párrafos que contienen un hipervínculo cada uno. Cuando la flecha del mouse se encuentra sobre el hipervínculo cambiamos el color del fondo y la letra del hipervínculo.

El problema resuelto es:

<html>
<head><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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 página 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; text-decoration: none;}

#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.

Estamos indicando que todos los párrafos contenidos en el estilo #menu deben tener cero en margin y padding.

El valor block para la propiedad display permite que el ancla ocupe todo el espacio del párrafo, indistintamente del largo del hipervínculo.

Otra propiedad nueva es width, esta fija el tamaño máximo que puede tener el hipervínculo antes de provocar un salto de línea. Por último inicializamos las pseudoclases

Estamos definiendo el mismo color de texto para los vínculos seleccionados como aquellos que no han sido seleccionados.

Por último cambiamos el color de fondo de la opción que tiene la flecha del mouse encima.

Volver al inicio

28 - Creación de un menú horizontal con una lista.

Otro estilo de menú muy común es donde las opciones se encuentran una al lado de otra. Veamos el código para la implementación de un menú horizontal:

<html>
<head><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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; list-style-type:none;}

#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 { background-color:#336699;}

#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 línea. El ancho de cada opción 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 separación de 3 pixeles en la parte superior e inferior y 5 pixeles a izquierda y derecha.

Separamos cada opción por una línea blanca de un pixel: border-right:1px solid white;

Otra forma de expresar los colores es utilizar una serie de nombres predefinidos (white, red, green, blue, etc.) de todos modos, lo más seguro para que entiendan todos los navegadores, es indicando los valores de rojo,verde y azul como hemos venido trabajando.

Luego con: #menuhorizontal li {display:inline; }

Indicamos que todos los list item (li) se muestren en la misma línea, ya que por defecto este tipo de marca indica que luego de mostrar un item de la lista el siguiente es abajo. Fácilmente esta propiedad la podemos entender si inicializamos la marca p (párrafo) con el siguiente valor:

p {display:inline; }

Luego si en la página HTML imprimimos dos párrafos, los mismos deberían aparecer en la misma línea.

Volver al inicio

29 - Propiedades relacionadas a la dimensión de un objeto en la página.

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><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
	<div id="cabecera">Blog del Programador</div>
</body>
</html>
Solamente hemos definido un div donde mostramos la cabecera de una página.
La hoja de estilo definida: 
#cabecera { width:100%; height:100px; background-color:#ffee00; color:#0000aa; text-align:center; font-family:Times New Roman;
  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 página (podemos inicializarlo en pixeles si lo necesitamos).

Luego a la propiedad height la inicializamos en 100 píxeles.

El resto de propiedades son las ya vistas en conceptos anteriores.

Es decir que las propiedades width y height nos permiten dar una dimensión a la marca HTML ya sea con valores absolutos indicados en pixeles o relativos indicados por porcentajes.

Volver al inicio

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

Hasta ahora siempre que hemos especificado tamaños de letra, margin, padding, border etc. lo hemos hecho a través de pixeles. Esto debido a que la forma más sencilla de imaginar un tamaño, por lo menos para los que estamos trabajando todo el día en una computadora, es el tamaño de un pixel del monitor. Veremos que hay varias unidades de medida para indicar tamaños y que algunas son más 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 (centímetros)
mm (milímetros)
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 párrafos asignando la propiedad font-size con distintos valores y unidades de medida:

<html>
<head><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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="mm2">Este texto tiene 15 mm</p>
	<p class="pt1">Este texto tiene 10 pt</p>
	<p class="pt2">Este texto tiene 15 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>
	<p class="porcentaje2">Este texto tiene 200%</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 tamaño de texto.

Volver al inicio

31 - 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 #: background-color:#ff0000;

Ahora veremos otras sintaxis para indicar el color: background-color:rgb(255,0,0);

Utilizando la función rgb pasando como parámetro la cantidad de rojo,verde y azul en formato decimal (un valor entre 0 y 255).

También con la función 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.

Volver al inicio

32 - 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:

La hoja de estilo es: a { cursor:help; }

www.google.com
www.yahoo.com
www.msn.com

Volver al inicio

33 - Aplicación de hojas de estilo a un formulario.

Un formulario es el elemento esencial para el envío 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><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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-family:verdana; 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 aparecerán a derecha todos encolumnados.

Volver al inicio

34 - Definiendo reglas de estilo a una tabla.

Veamos con un ejemplo como podemos afectar una tabla HTML con CSS.

<html>
<head><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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>Córdoba</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; background-color: #6495ed; 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 título que debe aparecer arriba.

La propiedad border-collapse puede tomar dos valores: collapse o separate. Separate deja las celdas con unos pixeles de separación, no así collapse.

El resto es la definición 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.

Volver al inicio

35 - 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 posición 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><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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 píxeles a la derecha y 5 hacia abajo de su posición por defecto.</p>
	</div>
	<div id="caja3">
	<p>Esta es la tercer caja.</p>
	<p>No se desplaza.</p>
	</div>
</body>
</html>
La hoja de estilo asociada es: 
#caja1,#caja2,#caja3 { background-color:#f99; font-family:verdana; 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 separándolos 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.

Luego como debemos inicializar la propiedad position sólo para el Id #caja3 lo hacemos en forma separada. Acá es donde inicializamos la propiedad position con el valor relative y desplazamos el elemento 15 píxeles a la derecha y 5 píxeles 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.

Volver al inicio

36 - Posicionamiento absoluto.

El posicionamiento absoluto dispone un elemento HTML completamente fuera del flujo de la página. 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 página, pero el espacio por defecto para dicho elemento queda vacío).

El posicionamiento es siempre con respecto a la página.

Veamos un ejemplo para ver el funcionamiento del posicionamiento absoluto:

<html>
<head><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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 a la coordenada de pantalla 40 en columna y 30 en fila (en píxeles).</p>
	</div>
	<div id="caja3">
	<p>Esta es la tercer caja.</p>
	<p>No se desplaza.</p>
	</div>
</body>
</html>
La hoja de estilo definida: 
#caja1,#caja3 { background-color:#f99; font-family:verdana; font-size:1.3em;}

#caja2 { background-color:#ff0; 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 píxeles).

Volver al inicio

37 - Disposición de 2 columnas.

Empezaremos a ver como componer una página sin utilizar las tablas (un medio muy utilizado hasta hace muy poco, ya que es ampliamente soportado por navegadores antiguos).

Una solución para crear una página con dos columnas es utilizar el posicionamiento absoluto:

<html>
<head><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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 
	</div>
	<div id="columna2">Aca va el contenido de la columna 2. Aca va el contenido de la columna 2.Aca va el contenido de la columna 2
	</div>
</body>
</html>
La hoja de estilo para esta página es: 
* { margin:0px; padding:0px;}

#columna1 { position:absolute; top:0px; left:0px; width:200px; margin-top:10px; background-color:#ffff55;}

#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;background-color:#ffff55; }

Es decir, inicializamos la propiedad position con el valor absolute, con lo que debemos indicar la posición del div en la página por medio de las propiedades top y left, en esta caso lo posicionamos en la columna 0 y fila 0 y además inicializamos la propiedad width, con lo cual le estamos indicando que esta columna tendrá siempre 200 píxeles de ancho.
Además inicializamos la propiedad margin-top con 10 píxeles, recordemos que todos los elementos tienen margin y padding cero.

Ahora veamos cómo inicializamos la segunda columna:
#columna2 { margin-left:220px;margin-right:20px;margin-top:10px; background-color:#ffffbb; }

Esta regla no inicializa la propiedad position, por lo que el div ocupa la posición que le corresponde por defecto, es decir, empieza en la coordenada 0,0 de la página. 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.

Volver al inicio

38 - 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><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
	<img src="final1.jpg">
	<p>El texto envuelve a la imagen. El texto envuelve a la imagen. 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 línea de texto a la derecha de la imagen.

Volver al inicio

39 - Disposición de 2 columnas (propiedad float)

Una segunda forma de implementar una página 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><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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.</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.</div>
	</body>
</html>
La hoja de estilo: 
* { margin:0; padding:0;}

#columna1 { float:left; width:200px; background-color:#ff5; border:1px solid #555;}

#columna2 { margin-left:210px; background-color:#ffb; border:1px solid #555;}

La columna1 tiene un ancho de 200 pixeles. Luego para evitar que la columna dos envuelva a la columna uno en caso de ser más larga inicializamos margin-left con 210 pixeles.

Volver al inicio

40 - Disposición de 2 columnas, cabecera y pie.

Una estructura muy común en la web es la disposición de una cabecera de página, seguida de dos columnas y un pie de página. La implementación de esta estructura de página es la siguiente:

<html>
<head><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
	<div id="contenedor">
		<div id="cabecera"><h1>Aca el título de la página</h1></div>
		<div id="columna1"><p>columna1. columna1. columna1.</p></div>
		<div id="columna2"><h2>Título de la columna</h2><p>Contenido de la columna2. </p></div>
		<div id="pie">Pié de página.</div>
	</div>
</body>
</html>
La hoja de estilo definida para esta página es la siguiente: 
* { margin:0px; padding:0px;}
#contenedor { width:100%; margin:0px; border:1px solid #000; 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; background-color:#becdfe; 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 resolución de pantalla o el tamaño 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.

Volver al inicio

41 - Disposición de 3 columnas, cabecera y pie.

Una modificación 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><title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
	<div id="contenedor">
		<div id="cabecera"><h1>Aca el título de la página</h1></div>
		<div id="columna1"><p>columna1. </p></div>
		<div id="columna3"><p>columna3.</p></div>
		<div id="columna2"><h2>Título de la columna</h2><p>Contenido de la columna2.</p></div>
		<div id="pie">Pié de página.</div>
	</div>
</body>
</html>
La hoja de estilo es: 
* { margin:0px; padding:0px;}
#contenedor { width:100%; margin:0px; border:1px solid #000; 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; margin-right:230px; border-left:1px solid #aaa; border-right:1px solid #aaa; padding:1em; }
#columna3 { float:right; width:200px; margin:0; padding:1em; }
#pie { padding:10px; color:#fff; background-color:#becdfe; clear:left; }
Volver al inicio