You are on page 1of 32

CSS Ya

Curso Enlaces Acerca de...

CSS desde CERO . El tutorial está pensado para que pueda ser desarrollado por una persona que conoce solo HTML. El objetivo de este sitio es poder aprender CSS en forma sencilla viendo un concepto teórico, luego algunos ejercicios resueltos y por último y lo más importante efectuar una serie de ejercicios. Puede desarrollar los ejercicios en el sitio, probarlos y ver los resultados. Se recomienda primero ver el detalle del tema, pasar posteriormente a los problemas ya resueltos del tema tratado (podemos hacer modificaciones sobre dicho problema) y finalmente resolver los ejercicios propuestos.

Orden del concepto 1 2 3 4 5 6 7 8 9 10

Concepto Que son las hojas de estilo (CSS)? Definición de estilos a nivel de marca HTML. Definición de estilos a nivel de página. Propiedades relacionadas a fuentes. Agrupación de varias marcas HTML con una misma regla de estilo. Definición de varias reglas para una misma marca HTML. Propiedades relacionadas al texto. Más propiedades relacionadas al texto. Herencia de propiedades de estilo. Definición de un estilo en función del contexto.

Detalle Problema Problema del a resolver resuelto concepto

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). 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 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 fo rma, 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. El curso brinda un concepto teórico corto, luego un problema resuelto que invito a e jecutar, modificar y jugar con el mismo. Por último, y lo más importante, un ejercicio propuesto que nos permitirá saber si podemos aplicar el concepto.

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 marc a 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: <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 style="color:#ff0000;background-color:#ffff00"> Este mensaje es de color rojo sobre fondo amarillo. </h1> Veremos más adelante que hay muchas propiedades en CSS. En este primer ejemplo inici alizamos 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 a 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:#ff0000;background-color:#ffff00"> Segundo título </h1> Como podemos observar, más alla que los dos estilos son exactamente iguales, estamos obligados a definirlos para cada marca HTML.

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 po demos 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. Problema: Mostrar dos títulos con texto de color rojo sobre fondo amarillo. <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: <style type="text/css"> h1 {color:#ff0000;background-color:#ffff00} </style> 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. Podemos definir estilos para muchas marcas en la sección style: <html> <head> <title>Problema</title> <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>

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 ejemp lo: <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. La primera regla definida para la marca h1 es: h1 { font-family:times new roman; 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 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 defec to 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 t amañ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

separamos por coma todas las marcas a las que se aplicará la misma regla de estilo: h1. } </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> .h5.Definición de varias reglas para una misma marca HTML.h3 { font-family:verdana.h2. es necesario desglosar la inicialización de propiedades en distintas reglas. color:#0000ff. En algunas circunstancias. 5 . } h1 { font-size:40px.h2. Supongamos que queremos todas las cabeceras con la misma fuente pero tamaños de fuen te distinta. } Las propiedades que no se inicializan quedan como responsabilidad al navegador. } h4 { font-size:20px. Esta característica nos permite ahorrar la escritura de reglas duplicadas para difer entes marcas HTML.h2.h6 { font-family:Verdana. } 6 . } h6 { font-size:10px. color:#0000ff.h2 y h3 luego podemos implementarlo de la siguiente manera: <html> <head> <title>Problema</title> <style type="text/css"> h1.Agrupación de varias marcas HTML con una misma regla de estilo. font-size:20px. } h5 { font-size:15px.Esta propiedad indica el peso de la fuente (mientras tenga un valor mayor los caracteres serán más rellenos).h3. quie n elegirá los valores correspondientes.h3 { font-family:verdana. luego podemos implementarlo de la siguiente manera: <html> <head> <title>Problema</title> <style type="text/css"> h1. } </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> Es decir. Supongamos que queremos la misma fuente y color para las marcas h1. La segunda regla define sólo dos propiedades relacionadas a la fuente: h2 { font-family:verdana. } h2 { font-size:30px.h4. } h3 { font-size:25px.

text-align:left. } h3 { color:#aa0000. } Es decir. La segunda propiedad relacionada al texto es text-align. 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 v alor en las proporciones de rojo. verde y azul en formato decimal. A una de estas propiedades ya la vimos cuando comenzamos con los primeros conceptos: color. indicamos la cantidad de rojo. emplearemos el valor right y si queremos a la izquierda. text-align:center.<h2> <h3>Título de nivel 3.0. por medio de la función rgb (red. text-decoration:underline. Si queremos justificar a derecha.h2. 7 .h2 y h3: <head> <title>Problema</title> <style type="text/css"> h1 { color:#ff0000. es por medio de la siguiente sintaxis: color:rgb(255.0).<h1> <h2>Título de nivel 2.Es decir.h3. Luego agregamos en forma individual las propiedades no comunes a dichas marcas: h1.<h3> </body> </html> .Propiedades relacionadas al texto. Otra forma de indicar el color. La tercera propiedad relacionada al texto que podemos emplear es text-decoration que nos permite entre otras cosas que aparezca subrayado el texto. Es decir.h6 { font-family:Verdana. a la marca h1 realmente le hemos definido 2 propiedades: font-family y font-size. lo podemos indicar por medio de tres valores hexadecimales que indican la mezcla de rojo. verde y azul. tachado o una línea en la parte superior. text-decoration:underline. definiremos estilos relacionados al texto para las marcas de cabecera h1. el valor será left. } </style> </head> <body> <h1>Título de nivel 1.blue). } h2 { color:#dd0000. si tenemos los valores en decimal. Por ejemplo si queremos rojo puro debemos indicar: color:#ff0000.h5. nos permite definir el color del texto. El texto aparecerá centrado. podemos inicializar un conjunto de marcas HTML con una serie de propiedades de estilo comunes.h4.green. } h1 { font-size:40px. que puede tomar alguno de e stos cuatro valores: left right center justify Si especificamos: text-align:center. los valores posibles de esta propiedad son : none underline overline line-through Como ejemplo. text-decoration:underline. Lo mismo para las otras marcas HTML. text-align:right.verde y azul.

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 habe r entre los caracteres y entre las palabras. alineado a derecha y subrayado.Es decir. A partir de la segun da línea. } </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. para los títulos de nivel 1 tenemos la regla: h1 { color:#ff0000.capitalize . el texto aparece sin indentación. text-decoration:underline. 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. } El color sigue siendo rojo pero un poco más oscuro. Luego para la marca h2 tenemos: h2 { color:#dd0000. none: No provoca cambios en el texto. text-decoration:underline.lowercase . el texto es rojo más oscuro. word-spacing:30px. lowercase: Convierte a minúsculas todas las letras del texto. text-align:right.uppercase Cada uno de estos valores transforman el texto como sigue: capitalize: Dispone en mayúsculas el primer caracter de cada palabra. text-transform:capitalize. Por último. El siguiente ejemplo define reglas para las marcas h1 y p: <html> <head> <title>Problema</title> <style type="text/css"> h1 { letter-spacing:10px. </p> </body> </html> La cabecera de nivel uno. } . 8 . } Es decir. } p { text-indent:20px. text-decoration:underline. word-spacing:30px. la propiedad text-transform puede inicializarse con alguno de los siguie ntes valores: none . el texto debe aparecer centrado y subrayado. La propiedad text-indent. color de texto rojo intenso. text-transform:capitalize.Más propiedades relacionadas al texto. Podemos indicar un valor negativo con lo que la indentación es hacia la izquierda. La propiedad text-indent podemos inicializarla con un valor positivo. Y por último: h3 { color:#aa0000. text-align:center. text-align:left. el texto debe aparecer de izquierda a derecha y subrayado. } Para los títulos de nivel tres. tiene la siguiente regla: h1 { letter-spacing:10px. uppercase: Convierte a mayúsculas todas las letras del texto. indenta la primera linea de un texto.

} </style> </head> <body> </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. } Inicializamos la propiedad color con el valor de azul y la fuente de tipo verdana. Ahora veremos con ejemplos que hay muchos estilos que se heredan (todos los vistos hasta el momento se heredan). luego si dicha marca incorpora un texto con la marca b (bold) en su interior. el párrafo y el hipervínculo tienen como color el azul y la fuente es de tipo verdana. font-family:verdana. C on esto todas las marcas contenidas en el body que no redefinan estas dos propiedades recibirán los valores aquí definidos. como podrían ser las marcas h1. Ahora bien en muchas situaciones podemos redefinir propiedades para marcas contenida s. } . font-family:verdana. font-family:verdana. font-family:verdana. } em { color:#008800.Es decir que las letras deben tener una separación de 10 pixeles.h5. } p { color:#999999. 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.Herencia de propiedades de estilo.pre etc.html">Siguiente ejemplo</a> </body> </html> En este ejemplo hemos definido la siguiente regla para la marca body: body { color:#0000ff.</p> </html> Ahora hemos definido tres reglas.</p> <a href="pagina2.b.p.div luego estas en su interior contienen otras marcas HTML como podrían ser em. 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.h3. En este ejemplo la cabecera de primer nivel es decir h1. las palabras deben estar separadas por 30 pixeles y por último deben disponerse en mayúsculas la primera letra de cada palabra. } Es decir.h4. } </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.h2. Ahora veremos que el conjunto de marcas HTML forman en sí un árbol que en su raiz po demos identificar la marca body del cual se desprenden otras marcas contenidas en esta sección. 9 . Para la marca p tenemos la siguiente regla: p { text-indent:20px.h6.i. define la propiedad color en azul y la fuente de tipo verdana para la marca body: body { color:#0000ff. es decir si definimos la propiedad color para la marca h1. la primera igual que el problema anterior. la primera línea del párrafo deberá imprimirse 20 píxeles a la derecha don de normalmente debería aparecer.

Definición de un estilo en función del contexto. Tenemos: p b{ color:#0000ff. ya que tenemos: h1 b{ color:#ff0000. Se pueden definir estilos en función del contexto. } Pero podemos ver que todas las marcas heredan la fuente verdana ya que ninguna marca la sobreescribe. siempre y cuando se encuentre contenido por la marca h1. Si bien hay dos bloques en la página que están encerrados por la marca b. 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> Es importante analizar la sintaxis para la definción de estilos en función del contexto. con mayor precisión. con esto no he redará el color azul de la marca body (que es la marca padre): em { color:#008800. } </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> . Pero si la marca b está contenida por la marca h1 el color debe ser rojo. } Es decir que el texto contenido por las marcas h1 y b deben aparecer de color rojo. } Es decir. 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. } </style> </head> <body> <h1>Acá tenemos un título de nivel uno.b{ color:#ff0000. Sólo en ese caso el estilo para dicha marca se activará. La página completa queda codificada de la siguiente forma: <html> <head> <title>Problema</title> <style type="text/css"> div h1 em { color:#ff0000. solo uno se pinta de color azul. Este otro recurso que provee las css es la definición de un estilo para una marca HT ML siempre y cuando la misma esté contenida por otra marca determinada. } Algo similar hacemos con la marca p para indicar que sea de color gris: p { color:#999999. No confundir con la sintaxis para definir reglas de estilo a dos marcas que se hace separando por coma las marcas HTML: h1. 10 . } h1 b{ color:#ff0000. luego la sintaxis del problema es: <html> <head> <title>Problema</title> <style type="text/css"> p b{ color:#0000ff. activar el color rojo para el contenido encerrado por la marca b. como por ejemplo: div h1 em { color:#ff0000.La segunda regla define la propiedad color en verde para la marca em. } Estamos diciendo que todas los bloques de la página que contengan la marca b (bold) y que estén contenidas por la marca p (párrafo) se pinten de azul. } 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. el otro bloque se pinta de color verde.

</p> </body> </html> El archivo que tiene las reglas de estilo es (estilos. Propiedades relacionadas a listas. debemos agregar en la cabecera (head) del archivo HTML la siguiente marca: <link rel="StyleSheet" href="estilos. Ahora veremos la primera página HTML que tiene asociada una hoja de estilo en un arc hivo externo. De ahora en más nos acostumbraremos a trabajar con hojas de estilo definidas en un a rchivo externo. . Más propiedades relacionadas al borde de una marca HTML Propiedades relacionadas al padding de una marca HTML. Tambien tiene como ventaja que al programador le resulta más ordenado tener lo refer ente a HTML en un archivo y las reglas de estilo en un archivo aparte. 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.El atributo rel se usa para definir la relación entre el archivo enlazado y el documento HTML. text-align:justify. que es en definitiva la forma más común de desarrollar un sitio web aplicando CSS. font-family:times new roman.css" type="text/css"> </head> <body> <h1>Definición de hojas de estilo en un archivo externo. se le envía el archivo HTML y el archivo CSS. para indicar el archivo de estilos externo. Definición de estilos por medio de Id. ese mismo archivo se rescata de la caché y no requiere que el servidor web se lo reenvíe (ahorrando tiempo de transferencia). Otra ventaja es que cuando un navegador solicita una página. font-family:verdana.css): body { background-color:#eafadd. con lo cual. El archivo HTML es (pagina1. quedando guardado este último archivo en la caché de la computadora. } p { color:#555555.css" type="text/css"> La propiedad href hace referencia al archivo externo que afectará la presentación de esta página. Propiedades relacionadas al margen de una marca HTML.html): <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.Orden del concepto 11 12 13 14 15 16 17 18 19 20 Concepto Definición de hojas de estilo en un archivo externo. Definición de estilos por medio de clases. text-decoration:underline. indica al navegador cual es el formato de archivo. 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). } Como podemos observar. 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. Propiedades relacionadas al borde de una marca HTML. } h1 { color:#0000cc. font-size:25px. Sólo queda probar esta página desde la sección de "Problema Resuelto". en las sucesivas páginas que requieran e l mismo archivo de estilos. 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.Definición de hojas de estilo en un archivo externo. Propiedades relacionadas al fondo (background) Propiedades relacionadas a fuentes (FORMATO RESUMIDO) Detalle del concepto Problema resuelto Problema a resolver 11 . En la propiedad type. 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.</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. text-align:center. 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.

La diferencia fundamental en la definición de un estilo por medio de Id con respecto a las clases.resaltado en la última <span class="resaltado">palabra.resaltado{ color:#000000. background-color:#bbbbbb.html es: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. Para conocer la sintaxis para la definición de clases veamos un ejemplo. utilizamos el caracter numeral (#) para indicar que se trata de un estilo de tipo Id.css) es: body { background-color:#eeeeee. font-size:30px. text-align:center.</span> </p> Aca definimos la propiedad class a la marca span y le asignamos la misma clase aplicada anteriormente a la marca h1. } La sintaxis para definir una clase aplicable a cualquier marca HTML es: . 13 . } Es decir. } . En muchas situaciones una regla de estilo puede ser igual para un conjunto de marcas HTML.Definición de estilos por medio de Id.css" type="text/css"> </head> <body> <h1 class="resaltado">Titulo de nivel 1</h1> <p> Este parrafo muestra el resultado de aplicar la clase . Luego.12 . la pagina1. background-color:#ffff00. background-color:#ffff00. font-style:italic.resaltado{ color:#000000. Luego. font-style:italic. La sintaxis para definir un estilo por medio de Id es: #cabecera { font-family:Times New Roman. la inicializamos con el caracter punto y seguidamente un nombre de clase. color:#0000ff. } Es decir. .resaltado en la última <span class="resaltado">palabra. 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 indicar que una marca sea afectada por esta regla: <h1 class="resaltado">Titulo de nivel 1</h1> Es decir. El nombre de la clase no puede comenzar con un número. Dentro definimos las reglas de estilo como hemos venido trabajando normalmente.Definición de estilos por medio de clases. Podemos inicializar tantas marcas HTML con esta regla como necesitemos: <p> Este parrafo muestra el resultado de aplicar la clase . 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 valo r de cabecera. agregamos la propiedad class y le asignamos el nombre de la clase (sin el punto).</span> </p> </body> </html> La hoja de estilo externa (estilos. es que sólo podremos aplicar dicho estilo a una sola marca dentro de la página HTML.

.Propiedades relacionadas al borde de una marca HTML.em. color:#0000ff.html): <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. 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: pagina1. Luego recordar que para indicar que una marca tenga este estilo debemos inicializar la propiedad class de la marca HTML: <p class="pregunta">Quién descubrió América y en que año fue?</p> Al segundo estilo definido lo hemos hecho con la clase . font-size:30px. background-color:#bbbbbb. border-style:dashed.p. Debemos ahora hacernos la idea que todo elemento que se crea dentro de una página HT ML genera una caja. Imaginemos los controles que hemos creado h1. border-color:#000000. border-style:solid.css) es: #cabecera { font-family:Times New Roman. border-style:dashed. border-color:#000000. si fijamos la propiedad background-color veremos que el contenido se encuentra dentro de un rectángulo.respuesta .html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. } . } 14 .pregunta que inicializa el color de fon do en amarillo y luego define el ancho del borde en un pixel.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 .respuesta { border-width:1px. el estilo es sólido y el color de la línea de borde es negro.h2. etc. text-align:center.respuesta { border-width:1px. hemos definido dos clases .Los dos archivos completos del ejemplo entonces quedan (pagina1. } .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> estilos. border-color:#000000.h3. border-width:1px. } Como podemos ver.pregunta { background-color:#ffff00.

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. } Es decir. border-bottom-color:#ff0000. font-size:40px. border-right-color:#ff0000. estilo o color. 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 . tiene utilidad si los mismos varían en grosor. border-left-color:#ffaa00. border-right-width:3px.Más propiedades relacionadas al borde de una marca HTML Como vimos en el concepto anterior tenemos propiedades que nos permiten fijar el gro sor. 16 . border-bottom-width:3px. border-left-style:dotted.En ésta hemos cambiado el estilo de borde. las CSS nos permiten modificar independientemente cada uno de los cuatro bordes del rectángulo. estilo y color del borde de una marca HTML. esta metodología de inicializar el borde de un control HTML.titulopagina { background-color:#ffffcc.Propiedades relacionadas al padding de una marca HTML. pero no son las más adecuadas cuando uno está comenzando a estudiar CSS.css" type="text/css"> </head> <body> <h1 class="titulopagina">El blog del pensador</h1> </body> </html> y el archivo de estilos: . border-top-style:dotted. border-top-width:1px. Pero podemos ir un paso más allá. Disponemos de los siguientes estilos de borde: none hidden dotted dashed solid double groove ridge inset outset 15 . border-left-width:1px. text-align:center. font-family:verdana. border-bottom-style:solid. border-right-style:solid. border-top-color:#ffaa00. Veremos más adelante que hay otras formas de inicializar los bordes de las marcas que reducen el texto a tipear.

boolean relleno. font-size:12px. 17 . border-width:1px. int al){ ancho=an.css es: . padding:20px. border-color:#ffaa00. } }//fin clase Rectangulo </pre> </body> </html> El archivo estilos. se respetan los espacios y retornos de carro que hayamos puesto en el texto fuente. relleno=false. Veamos un ejemplo.css" type="text/css"> </head> <body> <pre class="codigofuente"> public class Rectangulo{ //atributos int alto. } . background-color:#ffffcc. ancho=10.html: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.Veamos un ejemplo. int ancho. } Con la marca HTML pre. 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. margin:0px. } public void rellenar(boolean r){ relleno=r.codigofuente { font-family:Courier. //métodos public int devolverArea(){ return alto*ancho. la página HTML muestra dos párrafos con cero pixeles de margen: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. border-style:dotted.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. } public void cambiarTamano(int an. la pagina1. } public Rectangulo() {// constructor alto=20. Este estilo de texto es muy adecuado cuando queremos mostrar el código fuente de un programa. alto=al.Propiedades relacionadas al margen de una marca HTML.

se utiliza la marca HTM L ul (Unordered List).Propiedades relacionadas a listas. Las listas se utilizan para enumerar una serie de elementos. y cada item de la lista con la marca HTML li (List Item).Pruebe modificar el valor para la propiedad margin y vea el resultado de la página. 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> . El modelo final de caja se puede resumir con esta imagen: 18 .

<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./ La imagen se repite en x e y hasta llenar la página por completo. } ul. h2./fondo. Como se encuentra en la carpeta inmediatamente superior debemos indicar con . } Luego con: body { background-image:url(. } Lo que podemos ver es que cuando definimos las clases. le antecedemos al punto. background-repeat:repeat-x.jpg). } ul.romanomayuscula{ list-style-type:upper-roman.romanominuscula{ list-style-type:lower-roman. } ul. entre otras cosas.vacio{ list-style-type:none.. h1. } La única propiedad que hemos inicializado es background-image indicando el nombre de l archivo de imagen a mostrar.. } ul.cuadrado{ list-style-type:square.letrasminusculas{ list-style-type:lower-alpha. } ul.. background-repeat:repeat-y./fondo./fondo.jpg). } ul. es decir que esta clase sólo tiene sentido aplicarla a dicha marca). etc.circulovacio{ list-style-type:circle. Hay otras propiedades relacionadas al fondo que nos permiten.)..jpg). probar de modificar el estilo primero con: body { background-image:url(. 19 . } ul. 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 página: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. ya que por defecto background-repeat está inicializada con el valor repeat.decimal{ list-style-type:decimal. } . disponer un archivo de imagen.Propiedades relacionadas al fondo (background) Hasta ahora hemos probado y utilizado la propiedad background-color para fijar el co lor de fondo del contenido de una marca HTML (body.circulorelleno{ list-style-type:disc. el n ombre de la marca donde se aplica dicha clase (en este caso ul. p.css" type="text/css"> </head> <body> </body> </html> La hoja de estilo queda: body { background-image:url(.letrasmayusculas{ list-style-type:upper-alpha. } ul.

/fondo. Por ejemplo: body { background-image:url(. background-position:top right. background-repeat:no-repeat. 20 ./fondo. font-style./fondo. La siguiente regla: body { background-image:url(. } Dispone la imagen en la parte superior a la derecha.. background-position:400px 10px... background-position:20% 50%. . No debemos separar por coma. } Tener en cuenta que podemos aplicar una imagen a otras marcas HTML (h1. Como ejemplo tenemos: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. } Dispone la imagen 20% avanzando desde la izquierda y 50% avanzando desde arriba.css" type="text/css"> </head> <body> <p>Hola Mundo</p> </body> </html> Luego el archivo de estilos: p { font:bold italic 25px verdana.Y por último: body { background-image:url(. background-repeat:no-repeat.jpg).. font-variant y luego los valores obligatorios font-size y font-family en ese orden. background-repeat:no-repeat. } Es importante recordar que font-size y font-family deben ser los últimos valores ini cializados y en ese orden.jpg).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 per mite utilizar una propiedad que engloba a todas estas: font Podemos indicar en cualquier orden font-weight. } Dispone la imagen 400 pixeles desde la derecha y 10 píxeles desde arriba.jpg).)./fondo.jpg). etc.p. 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-re peat con el valor no-repeat.h2.h3. La regla: body { background-image:url(. background-repeat:no-repeat.

tituloprincipal estamos indicando que dicha clase sálo se puede aplicar a dichas marcas. Detalle Problema Problema del a resolver resuelto concepto 21 . .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. border-right:1px none #ffff00. Propiedades relacionadas a la dimensión de un objeto en la página.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. 22 . Creación de un menú horizontal con una lista. si le sacamos el nombre de la marc a HTML funciona igual.tituloprincipal{ border:5px solid #ff0000.comentarios{ border-top:1px solid #ffff00.css" type="text/css"> </head> <body> <p class="comentarios">Esto es una prueba para ver el funcionamiento de la propiedad padding. 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> <title>Problema</title> <link rel="StyleSheet" href="estilos.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. border-bottom:1px solid #ffff00. De todos modos. 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.Orden del concepto 21 22 23 24 25 26 27 28 29 30 Concepto Propiedades relacionadas al border (FORMATO RESUMIDO) Propiedades relacionadas al padding (FORMATO RESUMIDO) Propiedades relacionadas al margin (FORMATO RESUMIDO) Propiedades relacionadas al fondo (background)(FORMATO RESUMIDO) El selector universal * Pseudoclases Eliminar el subrayado a un enlace por medio de las pseudoclases Creación de un menú vertical configurando las pseudoclases. } Tener en cuenta que cuando le antecedemos el nombre de la marca HTML al nombre de la clase: h1. } p. border-left:1px none #ffff00.

25 .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. Un ejemplo para ver la sintaxis: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. } Con este ejemplo. } No es obligatorio inicializar todos los valores.css" type="text/css"> </head> <body> <h1>Titulo Principal</h1> </body> </html> Y la hoja de estilo: h1 { margin:70px 20px.. la propiedad padding. el primero se aplica a la parte superior e inferior y el segundo valor a los lados izquierdo y derecho.css" type="text/css"> </head> <body> </body> </html> La hoja de estilo es: body { background: #ffffee url('. y a la izquierda y derecha tiene 30 píxeles. la propiedad padding. 23 .comentarios { background-color:#dddddd. la propiedad padding./fondo. la propiedad padding.Esto es Esto es Esto es Esto es Esto es Esto es </p> </body> </html> una una una una una una prueba prueba prueba prueba prueba prueba para para para para para para ver ver ver ver ver ver el el el el el el funcionamiento funcionamiento funcionamiento funcionamiento funcionamiento funcionamiento de de de de de de la propiedad padding. Luego el archivo CSS: p.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. la propiedad padding.El selector universal * Si queremos inicializar las propiedades de todas las marcas HTML podemos utilizar el selector universal.jpg') repeat-x. padding:5px 30px.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> . el párrafo tiene 5 píxeles de separación con el borde en la parte inferior y superior. Veamos un ejemplo: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. } 24 .

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-visitedhover-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. salvo que otra regla lo cambie.Enlace sin ingresar visited . border-width:1px.msn. cuando definimos una clase sin indicar el tipo de marca HTML donde actuará: . } Es decir separamos el nombre de la marca HTML con dos puntos. border-color:#000000.pregunta { background-color:#ffff00. border-style:solid. } . Esto nos permite comprender. color:#ffffff. que se refieren a algunos estados espec iales del elemento HTML. } Esta regla sólo se puede utilizar en las marcas de párrafo. margin:0px.pregunta { background-color:#ffff00. border-style:solid.com">Msn</a> </body> </html> La hoja de estilo es: a:link{ background-color:#00ff00. Para la marca HTML <a> tenemos 4 pseudoclases fundamentales: link .css" type="text/css"> </head> <body> <a href="http://www. border-width:1px. color:#fffff. border-color:#000000.Pseudoclases Las pseudoclases son unas clases especiales. } Esto significa que todas las marcas se imprimen de color verde con cero pixel de mar gin y padding. } Es decir que podemos asignar esta regla a cualquier marca HTML. border-style:solid. las que se utilizan fundamentalmente son las que se aplican a la marca <a> (ancla).yahoo.com">Google</a> <a href="http://www.pregunta { background-color:#ffff00. en forma tácita lo hemos estado utilizando. Imaginemos si definimos h1 { color:#ff0000} significa que tiene prioridad esta regla. En realidad.google.Enlace presionado hover . La sintaxis varía con respecto al concepto de clase visto anteriormente: a:pseudoclase { propiedad: valor.com">Yahoo</a> <a href="http://www. } a:hover{ background-color:#ff00ff. } Podemos expresar la regla anterior perfectamente como: *. color:#ff0000. 26 . border-width:1px.Luego en la hoja de estilo definimos: * { color:#0000aa. } a:visited{ background-color:#000000. cuando definimos una regla que sólo se puede utilizar e n un sólo tipo de marcas: p. padding:0px. border-color:#000000.

a:visited { text-decoration: none. por defecto está configurada con el valor underline.msn.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.com">Yahoo</a> <a href="http://www. } a:visited { text-decoration: none. configuramos la propiedad text-decoration con el valor none.com">Google</a> <a href="http://www. Un recurso muy útil es disponer un menú en una página. } Por último todos los enlaces que hayamos hecho click deberán aparecer de color blanc o con fondo negro: a:visited{ background-color:#000000.com">Yahoo</a></p> <p><a href="http://www.com">Altavista</a></p> </div> </body> </html> .com">Msn</a> </body> </html> La hoja de estilo es: a:link { text-decoration: none.css" type="text/css"> </head> <body> <div id="menu"> <p><a href="http://www. Vamos a implementar uno muy sencillo que requiere agrupar en un div una serie de pár rafos que contienen un hipervínculo cada uno. Cuando la flecha del mouse se encuentra sobre el hipervínculo cambiamos el color del fondo y l a letra del hipervínculo.Creación de un menú vertical configurando las pseudoclases. color:#ffff00.com">Msn</a></p> <p><a href="http://www. } 28 . La solución de este problema es: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.yahoo.com">Google</a></p> <p><a href="http://www.altavista. color:#ffffff. El problema resuelto es: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.google. } Si presionamos la tecla tab podremos ver que el enlace que tiene foco aparece de col or amarillo con fondo rojo: a:active{ background-color:#ff0000. } Apenas ejecute la página los tres enlaces deben aparecer de color rojo con fondo ver de: a:link{ background-color:#00ff00.yahoo. } Es decir.css" type="text/css"> </head> <body> <a href="http://www. color:#fffff.msn.google. color:#ffff00. } 27 . } Si pasamos la flecha del mouse sobre algún enlace veremos que aparece de color blanco con fondo lila: a:hover{ background-color:#ff00ff. si no requerimos uno muy elaborado podemos resolverlo utilizando sólo CSS y HTML (en otros casos se requiere además de JavaScript). color:#ff0000.a:active{ background-color:#ff0000. A esto lo podemos hacer configurando una propiedad de las pseudoclases. Tener en cuenta que podemos agrupar la regla de esta forma: a:link.

#menu a:visited { color: #ff0000. Por último cambiamos el color de fondo de la opción que tiene la flecha del mouse en cima: #menu a:hover { background-color: #336699. } Podemos decir que definimos un estilo por medio de un Id llamado menu. Luego las anclas definidas dentro del estilo #menu definen las siguientes características: #menu a { display: block. Veamos el código para la implementación de un menú horizontal: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. border-bottom: 1px solid #eeeeee. text-decoration: none. padding: 3px. padding:0px. color: #ffffff. 29 . } Estamos definiendo el mismo color de texto para los vínculos seleccionados como aquellos que no han sido seleccionados: #menu a:link.La hoja de estilo asociada a esta página es: #menu { font-family: Arial. Por último inicializamos las pseudoclases: #menu a:link. background-color: #f7f8e8. width: 160px. Otra propiedad nueva es width. } #menu a:link. } La segunda regla: #menu p { margin:0px. padding:0px. } El valor block para la propiedad display permite que el ancla ocupe todo el espacio del párrafo. text-align:center. border-bottom: 1px solid #eeeeee. } #menu a { display: block. padding: 3px. #menu a:visited { color: #ff0000.Creación de un menú horizontal con una lista. text-decoration: none. Definimos una regla para este Id: #menu { font-family: Arial. #menu a:visited { color: #ff0000. } Estamos indicando que todos los párrafos contenidos en el estilo #menu deben tener c ero en margin y padding. } #menu a:hover { background-color: #336699. esta fija el tamaño máximo que puede tener el hipervínculo antes de provocar un salto de línea. color: #ffffff.css" type="text/css"> </head> <body> . } #menu a:hover { background-color: #336699. background-color: #f7f8e8. Otro estilo de menú muy común es donde las opciones se encuentran una al lado de otr a. indistintamente del largo del hipervínculo. } #menu p { margin:0px. width: 160px. text-align:center.

es indicando los valores de rojo. .Propiedades relacionadas a la dimensión de un objeto en la página. padding:0px.msn. Cuando inicializamos la propiedad padding con: padding:3px 5px. list-style-type:none. tanto para el id menuhorizontal como para la marca a que se encuentra en el id menuhorizontal. ya que por defecto este tipo de marca indica que luego de mostrar un item de la lista el siguiente es abajo.com">Altavista</a></li> </ul> </body> </html> El archivo de estilos es: #menuhorizontal { float:left.altavista. background-color:#f7f8e8.) de todos modos. } #menuhorizontal li { display:inline.com">Google</a></li> <li><a href="http://www.yahoo.com">Yahoo</a></li> <li><a href="http://www. green. } #menuhorizontal a { float:left. text-align:center. los mismos deberían aparecer en la misma línea. Separamos cada opción por una línea blanca de un pixel: border-right:1px solid white. 30 .google.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. El ancho de cada opción es de 100px que lo indicamos en la propiedad width de la marca a. } Indicamos que todos los list item (li) se muestren en la misma línea. Otra forma de expresar los colores es utilizar una serie de nombres predefinidos (white. Luego con: #menuhorizontal li { display:inline. blue. lo más seguro para que entiendan todos los navegadores.<ul id="menuhorizontal"> <li><a href="http://www. padding:3px 5px. red.verde y azul como hemos venido trabajando. margin:0px. Fácilmente esta propiedad la podemos entender si inicializamo s la marca p (párrafo) con el siguiente valor: p { display:inline. } Como queremos que se localice a la izquierda inicializamos la propiedad float con el valor left. width:100px. etc. width height Veamos un ejemplo: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. text-decoration:none. border-right:1px solid white. } #menuhorizontal a:hover { background-color:#336699. Fijamos la propiedad width del id menuhorizont al con el valor de 100% para que ocupe toda la línea. width:100%. } Luego si en la página HTML imprimimos dos párrafos. color:#ff0000.com">Msn</a></li> <li><a href="http://www. Disponemos de dos propiedades fundamentales que nos permiten fijar el ancho y el alto de una marca HTML. estamos fijando una separación de 3 pixeles en la parte superior e inferior y 5 pixe les a izquierda y derecha.

font-size:50px. font-family:Times New Roman. lo que significa que ocupará todo el ancho de la página (podemos inicializarlo en pixeles si lo necesitamos). . height:100px.La hoja de estilo definida: #cabecera { width:100%. Luego a la propiedad height la inicializamos en 100 píxeles. text-align:center. Es decir que las propiedades width y height nos permiten dar una dimensión a la marc a HTML ya sea con valores absolutos indicados en pixeles o relativos indicados por porcentajes. El resto de propiedades son las ya vistas en conceptos anteriores. } La propiedad width la inicializamos con el valor 100%. background-color:#ffee00. font-weight:bold. color:#0000aa.

Veremos que hay varias unidades de medida para indicar tamaños y que al gunas son más indicadas para algunas situaciones que otras. Esto debido a que la forma más sencilla de imaginar un tamaño. Disposición de 2 columnas (propiedad float) Detalle del concepto Problema resuelto Problema a resolver 31 . border etc.em1{ font-size:1em.) Hasta ahora siempre que hemos especificado tamaños de letra. em etc.5 ex</p> <p class="in1">Este texto tiene 1 in</p> <p class="in2">Este texto tiene 1. 1 punto es lo mismo que 1/72 pulgadas) pc (picas.pixel1 { font-size:12px. mm.5em. por lo menos para los que estamos trabajan do todo el día en una computadora. 1 pc es lo mismo que 12 puntos) % (porcentaje) Un ejemplo que muestra una serie de párrafos asignando la propiedad font-size con di stintos valores y unidades de medida: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. Orden del concepto 31 32 33 34 35 36 37 38 39 40 Concepto Unidades de medida (px. lo hemos hecho a través de pixeles. cm. 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.pixel2 { font-size:15px.) Formas para indicar el color. Definir un cursor para un control HTML. Propiedad float aplicada a una imagen.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: .5 in</p> <p class="cm1">Este texto tiene 1 cm</p> <p class="cm2">Este texto tiene 1. Posicionamiento absoluto. } .Unidades de medida (px. } . Aplicación de hojas de estilo a un formulario. } .ex1{ font-size:1ex.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.. } . Disposición de 2 columnas. Posicionamiento relativo. padding. cm.em2{ font-size: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. margin. Definiendo reglas de estilo a una tabla. mm. em etc. es el tamaño de un pixel del monitor. } .

verde y azul en formato decimal (un valor entre 0 y 255).5ex.cm1{ font-size:1cm. } .0%.. Ahora veremos otras sintaxis para indicar el color: background-color:rgb(255. Hasta ahora hemos visto que para asignar el color utilizamos tres valores hexadecima les (rojo. Es decir a este color no lo podemos representar con la sintaxis indicada: background-color:#ffaafa Ya que los últimos 2 caracteres.verde. } . } . fa. Utilizando la función rgb pasando como parámetro la cantidad de rojo.porcentaje1{ font-size:150%. } . Si utilizamos pixeles hay navegadores que no permiten cambiar el tamaño de texto.0). 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.pc2{ font-size:1.5pc.5cm. } .in1{ font-size:1in.pt1{ font-size:10pt.porcentaje2{ font-size:200%.cm2{ font-size:1.ex2{ font-size:1. Lo podemos indicar con esta otra sintaxis: background-color:#faf. } .mm1{ font-size:10mm.Definir un cursor para un control HTML. } .mm2{ font-size:15mm.0%) Por último en algunas situaciones podemos utilizar una sintaxis reducida para cierto s valores: background-color:#ffaaff. son distintos. También con la función rgb podemos indicar un porcentaje entre 0% y 100% para cada componente: background-color:rgb(100%. } . } .in2{ font-size:1. } .0.pt2{ font-size:15pt. Es decir si cada valor hexadecimal está formado por el mismo caracter podemos utiliz ar esta sintaxis simplificada indicando un caracter solamente.pc1{ font-size:1pc. } . 32 . } . 33 . Los valores que podemos asignarle a esta propiedad son: crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize .5in. } Los especialistas sobre el tema recomiendan utilizar como medida cuando la salida es el monitor.azul) precedido por el caracter #: background-color:#ff0000.Formas para indicar el color.

border: 1px solid #fff. Para que los textos aparezcan a la izquierda.msn. } #contenedorform form label { width:120px. por lo que los controles del formulario aparecerá n a derecha todos encolumnados.com">google. } Podemos observar que definimos un div contenedor y dentro de este el formulario.botonsubmit { color:#f00. padding:10px 0 10px 0. background-color:#ffe. } . margin-top:10px. Un formulario es el elemento esencial para el envío de datos al servidor por parte del visitante del sitio.com</a><br> <a href="http://www. background-color:#bbb. border:1px solid #CCC.google. margin-left:20px. font-family:verdana.com</a><br> <a href="http://www.css" type="text/css"> </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.yahoo.Aplicación de hojas de estilo a un formulario. font-size:14px. definimos una serie de label que las flotamos a izquierda.com</a> </body> </html> La hoja de estilo es: a { cursor:help.com">msn. } 34 .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.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> <title>Problema</title> <link rel="StyleSheet" href="estilos. Veamos un ejemplo donde implementamos un formulario y le aplicamos una serie de regl as de estilo a las diferentes marcas HTML que intervienen: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. float:left.com">yahoo. .

width:100px. } table { border-collapse: collapse.5em.5em. background-color:#6495ed. <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. color: #fff. </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. La propiedad border-collapse puede tomar dos valores: collapse o separate.css" type="text/css"> </head> <body> <table> <caption> cantidad de lluvia caida en mm. color:#ff0.35 .Definiendo reglas de estilo a una tabla. padding: 0. font-size:15px. th dentro de la marca tbody. padding:10px. fontweight: normal. background-color:#ed8f63. } thead th { background-color: #6495ed.. } La marca caption dentro de una tabla es el título que debe aparecer arriba. Veamos con un ejemplo como podemos afectar una tabla HTML con CSS. text-align: center. background-color: #6495ed. margin: 0px. . } th { border-right: 1px solid #fff. no así collapse. font-weight: bold. Separate deja las celdas con unos pixeles de separación. border-bottom: 1px solid #fff. El resto es la definición de una serie de reglas para las marcas th. } td { border: 1px solid #000. } tbody th { font-family:arial. text-align:center. th dentro de la marca thead y por último td. padding: .

El valor que debemos asignar a la propiedad position es absolute. } Luego como debemos inicializar la propiedad position sólo para el Id #caja3 lo hacem os en forma separada: #caja2 { position:relative.#caja2.#caja3 { background-color:#f99. podemos modificar la posición por defecto del elemento HTML modificando los valores left y top (con valores positi vos o inclusive negativos) Veamos un ejemplo con tres div.</p> <p>Se desplaza 15 píxeles a la derecha y 5 hacia abajo de su posición por defecto.css" type="text/css"> </head> <body> <div id="caja1"> <p>Esta es la primer caja.</p> .</p> </div> </body> </html> La hoja de estilo asociada es: #caja1. top:5px. } #caja2 { position:relative. Veamos un ejemplo para ver el funcionamiento del posicionamiento absoluto: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. } 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.</p> <p>No se desplaza. left:15px. font-size:1. font-family y font-size: #caja1.</p> </div> <div id="caja3"> <p>Esta es la tercer caja.#caja2. 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. El posicionamiento es siempre con respecto a la página.36 . recordemos que cuando un conjunto de elementos tienen los mism os valores para una serie de propiedades los podemos agrupar separándolos por coma. En caso de fijar la propie dad position con el valor relative. El posicionamiento absoluto dispone un elemento HTML completamente fuera del flujo de la página.</p> <p>No se desplaza.3em. pero e l espacio por defecto para dicho elemento queda vacío).Posicionamiento relativo. top:5px. font-family:verdana. cada elemento HTML se localiza de izquierda a derec ha y de arriba hacia abajo. Con el valor por defecto static. Tengamos en cuenta que si asigno un valor muy grande a la propiedad top se superpone este elemento con el contenido del tercer div.css" type="text/css"> </head> <body> <div id="caja1"> <p>Esta es la primer caja. font-size:1.Posicionamiento absoluto. Por defecto esta propiedad se inicializa con el valor static.#caja2 y #caja3 que tienen los mismos valores para las propiedades background-color. 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. esto sucede para los tres Id #caja1. 37 .</p> <p>Se desplaza a la coordenada de pantalla 40 en columna y 30 en fila (en píxeles).#caja3 { background-color:#f99. left:15px. La propiedad position determina el punto de referencia donde se debe localizar cada elemento HTML.</p> </div> <div id="caja2"> <p>Esta es la segunda caja. El segundo valor posible para esta propiedad es relative.3em.</p> </div> <div id="caja2"> <p>Esta es la segunda caja. font-family:verdana.</p> <p>No se desplaza. } Repasemos un poquito.

3em. font-family:verdana. margin-top:10px. Empezaremos a ver como componer una página sin utilizar las tablas (un medio muy uti lizado hasta hace muy poco. left:40px. width:200px. } Es decir. padding:0px. } 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). top:0px. } #columna1 { position:absolute. con lo cual le estamos indicando que esta columna tendrá siempre 200 píxeles de ancho.</div> <div id="caja3"> <p>Esta es la tercer caja. position:absolute. margin-top:10px. font-size:1.Disposición de 2 columnas. top:0px. es decir afecta a todas las marc as HTML. margin-right:20px. background-color:#ffffbb.</p> <p>No se desplaza. padding:0px.3em.#caja3 { background-color:#f99. . </div> </body> </html> La hoja de estilo para esta página es: * { margin:0px. es sacar el margen y padding (generalmente dispondremos esta regla): * { margin:0px. background-color:#ffff55. } Ahora la regla definida para la primer columna es: #columna1 { position:absolute. background-color:#ffff55. left:0px. 38 . inicializamos la propiedad position con el valor absolute. } #columna2 { margin-left:220px.css" type="text/css"> </head> <body> <div id="columna1"> Aca va el contenido de la columna 1.</p> </div> </body> </html> La hoja de estilo definida: #caja1. ya que es ampliamente soportado por navegadores antiguos). en esta caso lo posicionamos en la columna 0 y fila 0 y adem ás inicializamos la propiedad width. left:0px. Además inicializamos la propiedad margin-top con 10 píxeles. con lo que debe mos indicar la posición del div en la página por medio de las propiedades top y left. width:200px. font-size:1. recordemos que todos lo s elementos tienen margin y padding cero. top:30px. } #caja2 { background-color:#ff0. } La primera regla de disponer el selector universal. margin-top:10px. Una solución para crear una página con dos columnas es utilizar el posicionamiento a bsoluto: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.

} 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. border:1px solid #555. que es el ancho de la columna1. margin-top:10px.css" type="text/css"> <link </head> <body> <img src=". Veamos un ejemplo: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.. Esta propiedad admite tres valores: left right none Cuando aplicamos esta propiedad a la marca img. para que no quede el texto pegado a la derecha. background-color:#ff5.Propiedad float aplicada a una imagen. width:200px. Al primero lo flotamos hacia la izquierda con un width fijo y el segundo se acomoda inmediatamente a la derecha.Ahora veamos cómo inicializamos la segunda columna: #columna2 { margin-left:220px. por lo que el div ocupa la posición que le corresponde por defecto. es decir. . </div> </body> </html> La hoja de estilo: * { margin:0. El resto de propiedades que inicializamos son el margin-top. El truco está en inicializar la propiedad margin-left con un valor may or a 200.Disposición de 2 columnas (propiedad float) Una segunda forma de implementar una página con dos columnas es utilizar la propieda d float.0 de la página. Veamos un ejemplo: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos./imagen1. } La columna1 tiene un ancho de 200 pixeles. background-color:#ffffbb.png"> <p>El texto envuelve a la imagen.css" type="text/css"> </head> <body> <div id="columna1"> Aquí el contenido de la columna 1. La propiedad float saca del flujo un elemento HTML. border:1px solid #555. 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. empieza en la coordenada 0. } #columna2 { margin-left:210px. padding:0. Disponemos dos div. } #columna1 { float:left. </div> <div id="columna2"> Aquí el contenido de la columna 2. para que sea igual que la primera columna y el margin-right. 40 . podemos hacer que el texto envuelva a la imagen. } Esta regla no inicializa la propiedad position. 39 . margin-right:20px. background-color:#ffb. </p> </body> </html> La hoja de estilo: img { float:right.

border-left:1px solid #aaa. line-height:130%. clear:left.</p> </div> <div id="columna2"> <h2>Título de la columna</h2> <p>Contenido de la columna2. padding:1em. </div> </div> </body> </html> La hoja de estilo definida para esta página es la siguiente: * { margin:0px. Una estructura muy común en la web es la disposición de una cabecera de página. cabecera y pie. } #cabecera { padding:10px. color:#fff. color:#fff. Disposición de 3 columnas. background-color:#becdfe.Disposición de 2 columnas. . } Hay algunas propiedades claves que debemos analizar en la regla #contenedor: width:100%. } #pie { padding:10px. clear:left.Orden del concepto 41 42 Concepto Disposición de 2 columnas.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. background-color:#becdfe. padding:1em. } #columna2 { margin-left:210px. margin:0px. </p> </div> <div id="pie"> Pié de página. background-color:#f2f2f2. margin:0. } #columna1 { float:left. cabecera y pie. segu ida de dos columnas y un pie de página. width:200px. } #contenedor { width:100%. La implementación de esta estructura de página es la siguiente: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. Con esto estamos indicando que siempre ocupe todo el espacio en ancho del navegador. columna1. Detalle del concepto Problema resuelto Problema a resolver 41 . columna1. cabecera y pie. padding:0px. indistintamente de la resolución de pantalla o el tamaño de ventana del navegador. border:1px solid #000.

padding:1em. padding:0px. 42 . clear:left. Una modificación al concepto anterior nos permite agregar una tercera columna flotan do a derecha. border-left:1px solid #aaa. } #columna3 { float:right. background-color:#becdfe. line-height:130%. } . } #cabecera { padding:10px. } #pie { padding:10px. background-color:#f2f2f2.</p> </div> <div id="pie"> Pié de página. border:1px solid #000. width:200px. margin-right:230px. </div> </div> </body> </html> La hoja de estilo es: * { margin:0px. } #columna1 { float:left. y por último. margin:0. } #columna2 { margin-left:210px.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="columna2"> <h2>Título de la columna</h2> <p>Contenido de la columna2. background-color:#becdfe. margin:0. } #contenedor { width:100%.Disposición de 3 columnas. 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. padding:1em. tenemos: clear:left. color:#fff. cabecera y pie. que es la central: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. tanto para la cabecera como para el pie. margin:0px. width:200px. la columna 2. ya que son los que se flotan. 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. color:#fff. </p> </div> <div id="columna3"> <p>columna3.Luego. clear:left. padding:1em. border-right:1px solid #aaa.