Introducción Al CSS

Introduccin al CSS
Comienza a etudiar CSS hoy mismo con mucha informacin y muchos ejemplos.
Qu es CSS?
CSS (Cascading Style Sheets - Hojas de Estilo en Cascada), son un mecanismo simple que describe como se va a presentar un documento en la pantalla, en un dispositivo de sonido,como se va a imprimir, en un dispositivo braille, aparatos moviles, etc. CSS nos permite posicionar el contenido, disear tablas, definir caratersticas para sitios en diferentes idiomas y propiedades relacionadas con la comunicacin del usuario. CSS nos ayuda a separar el contenido de la presentacin. CSS nos permite controlar el estilo y el formato de mltiples pginas Web a la vez.
Conocimientos previos que debes poseer.

Antes de comenzar con este tutorial es recomendable tener conocimientos bsicos de HTML/XHTML. Si deseas estudiar HTML, dirjete al tutorial de HTML.
Por qu trabajar con Hojas de Estilo?

Las hojas de estilo nos ahorran mucho trabajo. La manera correcta de trabajar es separando el contenido de cada pgina, del diseo de la misma. Normalmente los estilos son guardados en un archivo externo con la extensin ".css". Este archivo le permite hacer los cambios de apariencia y disposicin de los elementos en todas las pginas de su sitio Web, con tan solo editar un solo documento CSS.
La sintaxis de CSS
Comenzamos con la sintaxis bsica de CSS y como agregar un comentario.
La estructura de CSS
CSS funciona a base de reglas. Cada regla est compuesta por un selector y la declaracin. La declaracin a su vez esta compuesta por una propiedad y su valor. La declaracin debe estar definida entre llaves({...})
Sintaxis
selector{propiedad:valor}
Veamos un ejemplo donde el selector p indica que todos los elementos p del documento HTML sern afectados por la declaracin cuya propiedad es color y su valor es blue. p{color:blue}
Si el valor est compuesto por varias palabras, debemos definirlo entre comillas. p{font-family:"Times New Roman"}
Si deseas especificar ms de una propiedad, debers separarlas con un punto y coma(;). h1{color:red; text-align:center}
Para definir los estilos de forma ms clara y fcil de leer, puedes describir cada propiedad en diferentes lneas. p { color:red; text-align:center; }
Si deseas definir una misma propiedad para varios selectores, solo debe agruparlos separndolos con una coma(,) p, h1, h2, h3 { color:blue; font-family:Arial; }
El selector class
Con el selector class se pueden definir diferentes estilos para un mismo elemento HTML. Por ejemplo el elemento p puede ser de color azul o de color rojo. El valor del selector class debe ir antepuesto por un punto ( .)
Sintaxis
p.azul {color:blue} p.rojo {color:red}
Ejemplo
Y as se vera en el documento HTML.
Cdigo
<head> <style type="text/css"> p.azul {color:blue} p.rojo {color:red} </style> </head> <body> <p class="azul">Este texto es de color azul</p> <p class="rojo">Este texto es de color rojo</p> </body>
Resultado
Este texto es de color azul Este texto es de color rojo
Con el selector class tambin podemos definir diferentes estilos para cualquier elemento HTML. Por ejemplo definimos un class rojo y uno azul.
Sintaxis
.azul {color:blue} .rojo {color:red}
Ejemplo
Por ejemplo definimos un class rojo y lo utilizamos en dos ocasiones.
Cdigo
<head> <style type="text/css"> .azul {color:blue} .rojo {color:red} </style>
Resultado
Este ttulo es de color rojo

Este texto es de color azul
</head> <body> <h3 class="rojo">Este ttulo es de color rojo</h3> <p class="azul">Este texto es de color azul</p> <p class="rojo">Y este texto es de color rojo</p> </body>
Y este texto es de color rojo
El selector ID
El selector id se utiliza para definir un atributo el cual tiene un valor nico en todo el documento. Hacemos referencia a l anteponiendo el smbolo " #".
Sintaxis
#centrado {text-align:center} /* afecta a cualquier elemento que lo use */ h3#subrayado {text-decoration:underline} /* afecta solo al elemento h3 */
Ejemplo
Definimos un id general y uno para un selector en particular.
Cdigo
<head> <style type="text/css"> #centrado {text-align:center} h3#subrayado {text-decoration:underline} </style> </head>
Resultado
Ttulo centrado Ttulo subrayado

Texto centrado
El selector id no afecta al elemento p ya que el <body> mismo no ha sido definido como texto <h3 id="centrado">Ttulo centrado</h3> subrayado <h3 id="subrayado">Ttulo subrayado</h3> <p id="centrado">Texto centrado</p> <p id="subrayado">El selector id no afecta al elemento p ya que el mismo no ha sido definido como texto subrayado</p> </body>
Comentarios en CSS
Para agregar un comentario que ayude a ser ms legible el documento utilizamos "/* comentario */". p { text-align:right; /* texto alineado a la derecha */
color:blue; /* color de texto: azul */ font-family:Verdana; /* tipo de fuente:Verdana */ }
Cmo se usan los estilos?

Dnde debemos utilizar CSS y cmo funciona en cada lugar?
Dnde usar los estilos?

Cuando un navegador lee una hoja de estilos, este formatea el documento de acuerdo a la misma.
Hay 3 formas de insertar una hoja de estilos: 1. Entre lneas 2. Dentro de la seccin Head 3. Hojas de estilo externas
1. Entre lneas
Definimos el estilo directamente dentro del cdigo HTML.
Sintaxis
<selector style="propiedad: valor;propiedad: valor;"> Debemos usar esta forma cuando un nico estilo es aplicado a un solo elemento. Su uso est dado por el atributo style.
Ejemplo
Vamos a aplicar un estilo "solo" al elemento p de esta lnea.
Cdigo
<p style="color:red; margin-left:30px;"> Este prrafo es de color rojo y se encuentra a 30 pixels del margen izquierdo. </p>
Resultado
Este prrafo es de color rojo y se encuentra a 30 pixels del margen izquierdo.
2. Dentro de la seccin Head

Las hojas de estilo interna deben usarse cuando una pgina tiene un estilo nico.
Sintaxis
<head> <style type="text/css">
selector 1 {propiedad: valor;} selector 2 {propiedad: valor;} </style> </head> <body> <etiqueta 1>Bla, bla, bla</etiqueta 1> <etiqueta 2>Texto, texto, texto</etiqueta 2> </body> La etiqueta <style type="text/css"> en la cabecera del documento entre las etiquetas <head> y </head> se usa para definir los estilos correspondientes a esta pgina solamente.
Ejemplo
Vamos a aplicar estilos a aquellos elementos definidos en la seccin Head solo de "esta" hoja.
Cdigo
<head> <style type="text/css"> body {background-color:#008080} p {color:white} </style> </head> <body> <p> Este texto es de color blanco y el color de fondo de la pgina es #008080. </p> </body>
Resultado
Este texto es de color blanco y el color de fondo de la pgina es #008080.
En este ejemplo se muestra que la etiqueta <style> con su atributo type define una hoja de estilo. Entre las etiquetas style definimos al selector body con un color de fondo #008080 y al selector p de color blanco.
3. Hojas de estilo externas

Esta es la forma ideal para cuando una misma hoja de estilos es aplicada a varias pginas. Con realizar los cambios en un solo archivo, podemos cambiar el aspecto de todo el sitio web. Los archivos de hojas de estilo deben llevar la terminacin .css.
Sintaxis
Contenido del archivo de los estilos
selector { propiedad:valor; /* No olvidar el (;) al final de cada valor */ propiedad:valor; propiedad:valor; }
Sintaxis
Esta es la forma de llamar al archivo ".css" desde un documento HTML <head> <link rel="stylesheet" type="text/css" href="/archivo.css"> </head> Cada pgina del sitio debe vincularse con la hoja de estilos usando la etiqueta <link>ubicada en la cabecera del documento. rel="stylesheet" nos indica que la relacin es una hoja de estilo. type="text/css" nos dice que el tipo es texto y css. href="/fuentes.css" es el nombre del documento que contiene el cdigo css.
Ejemplo
As se vera por ejemplo, un archivo CSS externo que llamaremos "estilos.css". Nota: el cdigo, en los archivos de hojas de estilos externos, comienza directamente con el selector.
Cdigo CSS
p { font-family:Arial; font-size:12px; font-weight:bold; } As se vera el documento HTML que llama al archivo "estilos.css".
Cdigo HTML
<head> <link rel="stylesheet" type="text/css" href="/estilos.css"> </head> <body> <p>Caractersticas de este texto: Arial, de 12 pixels, bold </p> </body>
Resultado
Caractersticas de este texto: Arial, de 12 pixels, bold
CSS Background - Fondo
Decora el fondo de pantalla de tu sitio con colores o imgenes.
El fondo con CSS

Las propiedades de fondo(en ingls background) en CSS, nos permiten controlar el color de fondo de un elemento. Colocar una imagen de fondo, la ubicacin de la misma en la pantalla (centrada, a la izquierda, en alguna coordenada de x-y, etc.) y la cantidad de veces que la misma se repetir. En trminos del modelo de cajas la propiedad background afecta tanto al fondo del elemento, al relleno del mismo (padding) y a los bordes (border). Las propiedades de background se aplican a todos los elementos
La propiedad de los fondos o backgrounds

La propiedad background es la forma comprimida en la cual podemos definir todos los valores de los fondo de una sola vez.
Sintaxis
Establecer diferentes caractersticas del fondo a la ves. <head> <style="type:text/css"> selector {background: valor 1 valor 2} </style> </head> Nota: debemos dejar un espacio en blanco entre los valores Los posibles valores para definir los fondos color | transparent | URL | none | repeat | repeat-x | repeat-y | no-repeat | norepeat | fixed | % | longitud | left | center | right | top | bottom
Ejemplo
Vamos a aplicar un fondo rojo al elemento h2 de esta pgina.
Cdigo
<head> <style type="text/css"> h2{background:red} </style> </head> <body> <h2>El fondo del ttulo es rojo.</h2>
Resultado
El fondo del ttulo es rojo.
</body>
Aplicar color al fondo

La propiedad background-color especifica el color de fondo del elemento.
Sintaxis
Establecer el color de fondo. <head> <style="type:text/css"> etiqueta HTML {background-color: valor} </style> </head> Los posibles valores para definir los colores del fondo color | transparent
Ejemplo
Vamos a aplicar un color de fondo a la pgina.
Cdigo
<head> <style type="text/css"> body{background-color:orange} </style> </head> <body> <p>El fondo de la pgina es naranja.</p> </body>
Resultado
El fondo de la pgina es naranja.
Decorar el fondo con una imagen

La propiedad background-image inserta una imagen como fondo del elemento.
Sintaxis
Insertar una imagen de fondo. <head> <style="type:text/css"> etiqueta HTML {background-image: url("nombre-de-la-imagen")} </style> </head>
Los posibles valores para la insercin de imgenes de fondo url | none
Ejemplo
Vamos a usar una imagen de fondo en nuestra pgina.
Cdigo
<head> <style type="text/css"> body{background-image:url("fondo3.jpg")} </style> </head> <body> <p>Ejemplo de una imagen de fondo</p> </body>
Resultado
Ejemplo de una imagen de fondo
Imagen ms pequea que el tamao del fondo

Si la imagen que elegimos de fondo es ms pequea que este, podemos repetir la imagen horizontalmente o verticalmente hasta cubrir todo el fondo. Para ello utilizamos la propiedadbackground-repeat.
Sintaxis
Repetir una imagen de fondo. <head> <style="type:text/css"> etiqueta HTML { background-image: url('/nombre-de-la-imagen'); background-repeat: valor; } </style> </head> Los posibles valores para la repeticin de una imagen en el fondo repeat | repeat-x | repeat-y | no-repeat
Ejemplo
Vamos a usar esta imagen de fondo en nuestro ejemplo.
Cdigo
<head> <style type="text/css"> body { background-image:url("images/fondo.png"); background-repeat:repeat; } </style> </head> <body> <h4>Repeticin de una imagen de fondo</h4> </body>
Resultado
Repeticin de una imagen de fondo
Imagen de fondo esttica o dinmica

La propiedad background-attachment nos permite fijar o liberar una imagen de fondo, es decir que al movernos por la pgina con la barra de desplazamiento, la imagen de fondo quede anclada en el lugar o se desplaze con la misma.
Sintaxis
Imagen de fondo esttica o dinmica. <head> <style="type:text/css"> etiqueta HTML { background-image: url('/nombre-de-la-imagen'); background-attachment: valor; } </style> </head> Los posibles valores para esta propiedad fixed | scroll
Elije el lugar exacto para ubicar la imagen de fondo

La propiedad background-position nos permite ubicar una imagen en un lugar especfico dentro del fondo.
Sintaxis
<head> <style="type:text/css"> etiqueta HTML { background-image: url('/nombre-de-la-imagen'); background-position: valor; }
</style> </head> Los posibles valores para la ubicacin exacta de la imagen en el fondo % | coordinadas x-y | left | center | right | top | bottom
Ejemplo
Vamos a usar una imagen y la ubicaremos en alguna coordenada dentro del fondo.
Cdigo
<head> <style type="text/css"> body { background-image: url("images/fondo.jpg"); background-repeat: no-repeat; background-position: 60px 100px; } </style> </head> <body> <p>Imagen en las coordenadas x=60px y=100px</p> </body>
Resultado
Imagen en las coordenadas x=60px y=100px
Propiedades del fondo

Propiedad background Descripcin Propiedades individuales relacionadas con el fondo. Valores background-color background-image background-repeat backgroundattachment background-position background-color Color de fondo. color transparent background-image Imagen de fondo. URL none Detalles Color de fondo Imagen de fondo Repeticin del fondo Acoplamiento del fondo Posicin del fondo Color Transparente Direccin URL Nada Ej.
background-repeat
Repeticin de la imagen de fondo.
repeat repeat-x
Repite Repite horizontalmente Repite verticalmente No se repite Desplaza Fija Porcentaje Longitud Izquierda Centro Derecha Superior Inferior
repeat-y no-repeat backgroundattachment Desplazamiento de la imagen de fondo. scroll fixed background-position Posicin de la imagen % de fondo. longitud left center right top bottom
CSS Textos
Transforma, decora y alnea los textos de tu sitio para hacerlos ms claros para la lectura.
Los textos con CSS

Las propiedades de los textos nos permiten controlar la apariencia de los mismos. Entre los ajustes que podemos aplicar a los textos, tenemos: 1. 2. 3. 4. 5. 6. 7. La sangra El alineado La decoracin Espacio entre letras Espacio entre palabras Maysculas y minsculas Espacios en blando
Sangra de los textos - text-indent

La propiedad text-indent se utiliza para generar sangra en la primera lnea de un texto.
Sintaxis
<head> <style="type:text/css"> selector {text-indent: valor} </style> </head> Los posibles valores para definir la sangra longitud | %
Ejemplo
Vamos a ver como se comporta un texto con sangra.
Cdigo
<head> <style type="text/css"> p{text-indent:2cm} </style> </head> <body> <p>En la primera lnea de este prrafo observamos una sangra de 2 centmetros de distancia del borde.</p> </body>
Resultado
En la primera lnea de este prrafo observamos una sangra de 2 centmetros de distancia del borde.
Alineado de los textos - text-align

La propiedad text-align se utiliza para alinear un texto a la derecha, izquierda o centro del bloque que lo contiene.
Sintaxis
<head> <style="type:text/css"> selector {text-align: valor} </style> </head> Los posibles valores para alinear los textos left | right | center | justify
Ejemplo
Alineamos un texto a la derecha y otro en el centro.
Cdigo
<head> <style type="text/css"> p.der{text-align:right} p.cen{text-align:center} </style> </head> <body> <p class="der">Texto a la derecha</p> <p class="cen">Texto en el centro</p> </body>
Resultado
Texto a la derecha Texto en el centro
La decoracin de los textos - text-decoration

La propiedad text-decoration se utiliza para subrayar, tachar, remarcar con una lnea superior o parpadear un texto.
Sintaxis
<head> <style="type:text/css"> selector {text-decoration: valor} </style> </head> Los posibles valores para decorar los textos none | underline | overline | line-through | blink
Ejemplo
Definimos un texto parpadeante y un enlace sin subrayar.
Cdigo
<head> <style type="text/css"> p.parpadeo{text-decoratio:blink} a.sin_linea{text-decoration:none} </style> </head> <body> <p class="parpadeo">Texto parpadeando</p> <a class="sin_linea" href="/www.virtualnauta.com"> Ir a la home de Virtualnauta</a>
Resultado
Texto parpadeando Ir a la home de Virtualnauta
</body>
Separacin entre letras - letter-spacing

La propiedad letter-spacing se utiliza para definir la distancia que queremos dejar entre letra y letra de un mismo texto.
Sintaxis
<head> <style="type:text/css"> selector {letter-spacing: valor} </style> </head> Los posibles valores para esta propiedad normal | distancia
Ejemplo
Vamos definir una distancia entre letras de 5 pxeles.
Cdigo
<head> <style type="text/css"> p{letter-spacing:5px} </style> </head> <body> <p>La distancia entre letras es de 5 pxeles</p> </body> La de
Resultado
distancia 5 pxeles entre letras es
Separacin entre palabras - word-spacing

La propiedad word-spacing se utiliza para definir la distancia que queremos dejar entre palabras.
Sintaxis
<head> <style="type:text/css"> selector {word-spacing: valor} </style> </head> Los posibles valores para esta propiedad normal | distancia
Ejemplo
Vamos definir una distancia entre palabras de 2 centmetros.
Cdigo
<head> <style type="text/css"> p{word-spacing:2cm} </style> </head> <body> <p>La distancia entre palabras es de 2 centmetros</p> </body>
Resultado
La distancia entre palabras es de 2 centmetros
Transformar los textos a maysculas o minsculas text-transform

La propiedad text-transform se utiliza para convertir un texto a maysculas o minsculas.
Sintaxis
<head> <style="type:text/css"> selector {text-transform: valor} </style> </head> Los posibles valores para convertir los textos capitalize | uppercase | lowercase | none
Ejemplo
Vamos definir la primera letra de cada palabra en maysculas.
Cdigo
<head> <style type="text/css"> p{text-transform:capitalize} </style> </head> <body> <p>La primera letra de cada palabra se a convertido a maysculas</p> </body>
Resultado
La Primera Letra De Cada Palabra Se A Convertido A Maysculas
Espacios en blanco - white-space

La propiedad white-space se utiliza para manipular el comportamiento de los espacios en blanco dentro de cada elemento.
Sintaxis
<head> <style="type:text/css"> selector {white-space: valor} </style> </head> Los posibles valores para esta propiedad normal | pre | nowrap | pre-wrap | pre-line
Ejemplo
Vamos ver el comportamiento de los espacios en blanco dentro de un texto.
Cdigo
<head> <style type="text/css"> p.pre{white-space:pre-wrap} p.normal{white-space:normal} </style> </head> <body> <p class="pre">Dejo varios espacios en blanco entre palabra y palabra.</p> <p class="normal">Aca tambin dejo varios espacios en blanco entre palabra y palabra pero los comprime a uno solo.</p> </body>
Resultado
Dejo varios espacios en blanco entre palabra y palabra. Aca tambin dejo varios espacios en blanco entre palabra y palabra pero los comprime a uno solo.
Propiedades de los textos

Propiedad text-indent Descripcin Desplazamiento de la primera lnea del texto. Valores longitud % text-align Alineamiento del texto. left Longitud Porcentaje Izquierda Detalles Ej.
right center justify text-decoration Efectos de subrayado, tachado, parpadeo. none underline overline line-through blink text-transform Transformaciones del texto a capitalize maysculas/minsculas.
Derecha Centro Justificar Sin efectos Subrayado Lnea por encima Tachado Parpadeo Convierte en mayscula el primer carcter de cada palabra Convierte en mayscula todas las letras del elemento Convierte en minscula todas las letras del elemento Neutraliza el valor heredado Normal Longitud Normal Longitud Normal Preformateado Los cambios de lnea solo ocurren con el elementobr
uppercase
lowercase
none
letter-spacing
Espacio entre caracteres.
normal longitud
word-spacing
Espacio entre palabras.
normal longitud
white-space
Comportamiento de los espacios dentro de los elementos.
normal pre nowrap
pre-wrap
pre-line direction Sentido direccional de la escritura. ltr rtl unicode-bidi Sentido direccional de la escritura. normal embed Izquierda a derecha Derecha a izquierda Normal Abre un nivel adicional de incrustacin con respecto al algoritmo bidireccional Si el elemento es a nivel de lnea o es un elemento a nivel de bloque, crea una sustitucin
bidi-override
CSS Fonts - Fuentes

Elige la familia, el estilo, el peso y el tamao de las fuentes de tu sitio.
Las fuentes
Las propiedades de las fuentes nos permiten controlar la apariencia de las mismas. Posiblemente la definicin de las fuentes sea el uso ms comn de CSS. Entre los ajustes que podemos aplicar a las fuentes, tenemos: 1. 2. 3. 4. 5. 6. La familia La intensidad El estilo El tamao La variante La definicin general
Familia de fuentes - font-family

Para definir el tipo de fuente usamos la propiedad font-family. Es recomendable usar un tipo de fuente comn, que todos los navegadores reconozcan (ej.:Arial, Verdana, Helvetica, sans serif, etc.).
Sintaxis
<head> <style="type:text/css"> selector {font-family: familia de fuente, familia de fuente genrico} </style> </head> Nota: debemos utilizar comas entre los valores.
Los posibles valores para definir las familias de fuentes Las ms comunes | arial | Verdana | Helvetica | "Times New Roman" | Courier | Univers Los posibles valores para definir las familias de fuentes genrico serif | sans-serif | cursive | fantasy | monospace
Ejemplo
Vamos a definir una familia para una fuente.
Cdigo
<head> <style type="text/css"> p{font-family:"Times New Roman", serif} </style> </head> <body> <p>La familia de esta fuente es Times New Roman.</p> </body>
Resultado
La familia de esta fuente es Times New Roman.
Intensidad de las fuentes - font-weight

Una caracterstica muy til es el control de la intensidad de las fuentes. Para ello utilizamos la propiedad font-weight.
Sintaxis
<head> <style="type:text/css"> selector {font-weight: valor} </style> </head> Los posibles valores para definir los fondos normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Ejemplo
Vamos a aplicar intensidad a las fuentes del elemento h2 de esta pgina.
Cdigo
<head> <style type="text/css"> h2{font-weight:lighter}
Resultado
La intensidad de este
</style> </head> <body> <h2>La intensidad de este texto es lighter. </h2> </body>
texto es lighter.
Estilo de las fuentes - font-style

La propiedad font-style nos sirve para definir un estilo normal, oblicuo o italic.
Sintaxis
<head> <style="type:text/css"> selector {font-style: valor1} </style> </head> Los posibles valores para definir los estilos normal | italic | oblique
Ejemplo
Vamos a definir el estilo del elemento h3 de este ejemplo.
Cdigo
<head> <style type="text/css"> h3{font-style:oblique} </style> </head> <body> <h3>El estilo de este ttulo es oblique.</h3> </body>
Resultado
El estilo de este ttulo es oblique.
Tamao de las fuentes - font-size

Controlar el tamao de las fuentes suele ser de mucha utilidad. La propiedad encargada de eso es font-size.
Sintaxis
<head> <style="type:text/css"> selector {font-size: valor} </style> </head>
Los posibles valores para definir el tamao de las fuentes xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | tamao | %
Ejemplo
Vamos a ver como se comporta cada uno de los valores de la propiedad font-size.
Cdigo
<body> <p style="font-size:xx-small">Tamao:xx-small</p> <p style="font-size:x-small">Tamao:x-small</p> <p style="font-size:small">Tamao:small</p> <p style="font-size:medium">Tamao:medium</p> <p style="font-size:large">Tamao:large</p> <p style="font-size:x-large">Tamao:x-large</p> <p style="font-size:xx-large">Tamao:xx-large</p> <p style="font-size:larger">Tamao:larger</p> <p style="font-size:smaller">Tamao:smaller</p> </body>
Tamao:xx-small
Resultado
Tamao:x-small
Tamao:small
Tamao:medium
Tamao:large
Tamao:x-large
Tamao:xxlarge
Tamao:larger
Tamao:smaller
Variante de las fuentes - font-variant

Una variacin que se le puede dar a las fuentes es el de usar pequeas maysculas, para eso usamos de la propiedad font-variant.
Sintaxis
<head> <style="type:text/css"> selector {font-variant: valor} </style> </head> Los posibles valores para definir las variantes de las fuentes normal | small-caps
Ejemplo
Vamos a variar las fuentes de este ttulo h2.
Cdigo
<head> <style type="text/css"> h2{font-variant:small-caps} </style> </head> <body> <h2>El texto esta escrito en minscula.</h2> </body>
Resultado
EL TEXTO ESTA ESCRITO EN MINSCULA.
La propiedad de las fuentes - font

La propiedad font es la forma comprimida en la cual podemos definir todos los valores de las fuentes de una sola vez. Esta propiedad se aplica a todos los elementos.
Sintaxis
<head> <style="type:text/css"> selector {font: valor1 valor2 valor n} </style> </head> Nota: debemos dejar un espacio en blanco entre los valores. Los posibles valores para definir las fuentes Todos los valores de font-family | font-style | font-variant | font-weight | font-size | caption | icon | menu | message-box| small-caption | status-bar
Ejemplo
Vamos a definir un tipo de fuente para p.
Cdigo
<head> <style type="text/css"> p{font:large Palatino bold italic} </style> </head> <body> <p>El tipo de fuente es Palatino large bold en italic.</p>
Resultado
El tipo de fuente es Palatino large bold en italic.
</body>
Propiedades de las fuentes

Propiedad font Descripcin Valores Detalles Estilo de fuente Variante de fuente Peso de la fuente Tamao de la fuente Familia de fuentes Fuente a utilizar en los botones, mens desplegables, etc. cono Fuente de los mens desplegables Fuente de las caja de mensajes Pequea leyenda Fuentes de la barra de estado Nombre de la familia de fuentes Familia genrica Estilo normal Itlica Oblicua Normal Ej.
Atajo para establecer el resto de font-style propiedades sobre las fuentes a font-variant la vez. font-weight font-size
font-family caption
icon menu
message-box
small-caption status-bar
font-family
Familias de fuentes.
nombre-familia
familia-genrica font-style Estilo de la fuente. normal italic oblique font-variant Convierte las minsculas a normal
maysculas pero mantienen un tamao inferior a las maysculas. font-weight Intensidad de la fuente.
small-caps
Maysculas pequeas
normal bold bolder lighter 100 200 300 400 500 600 700 800 900
Normal Negrita Negrita mas fuerte Suave Valor 100 Valor 200 Valor 300 Valor 400 Valor 500 Valor 600 Valor 700 Valor 800 Valor 900 XX-Pequea X-Pequea Pequea Mediana Grande X-Grande XX-Grande Mxima Mnima Tamao
font-size
Tamao de la fuente.
xx-small x-small small medium large x-large xx-large larger smaller tamao
Porcentaje
CSS Contornos
Agrega un contorno a los textos para resaltarlos, decora botones y formularios.
Contornos con CSS

Los contornos o outlines son lneas que se encuentran alrededor de objetos visuales tales como botones, formularios activos o mapeado de imgenes. Los contornos se diferencian de los bordes en: Los contornos no ocupan espacio Los contornos no necesariamente son rectangulares Un contorno definido con la propiedad outline es dibujado "fuera" de la caja y siempre se encuentra por encima del elemento y no afecta a las cajas anexas a este.
El espesor de los contornos

La propiedad outline-width especifica el espesor del contorno. Esta propiedad se puede aplicar a todos los elementos.
Sintaxis
<head> <style="type:text/css"> selector {outline-width: valor} </style> </head> Los posibles valores para definir el espesor de los contornos thin | medium | thick | tamao (px, pc, pt, mm, cm, in)
Ejemplo
Vamos a aplicar un espesor determinado para el contorno de un botn.
Cdigo
<head> <style type="text/css"> button { outline-width: 3px; outline-style: solid; Enviar
Resultado
} </style> </head> <body> <button>Enviar</button> </body> Nota: para poder visualizar el contorno, debemos usar valores de la propiedad outline-style
El estilo de los contornos

La propiedad outline-style especifica el estilo del contorno. Esta propiedad se puede aplicar a todos los elementos.
Sintaxis
<head> <style="type:text/css"> selector {outline-style: valor} </style> </head> Los posibles valores para definir el estilo de los contornos none | dotted | dashed | solid | double | groove | ridge | inset | outset
Ejemplo
Vamos a aplicar un estilo determinado para el contorno de un botn.
Cdigo
<head> <style type="text/css"> button { outline-style: dotted; } </style> </head> <body> <button>Enviar</button> </body> Enviar
Resultado
El color de los contornos

La propiedad outline-color especifica el color del contorno. Esta propiedad se puede aplicar a todos los elementos.
Sintaxis
<head> <style="type:text/css"> selector {outline-color: valor} </style> </head> Los posibles valores para definir el estilo de los contornos color | invert
Ejemplo
Vamos a definir un color determinado para el contorno de un texto.
Cdigo
<head> <style type="text/css"> p { outline-color: blue; outline-style: solid; } </style> </head> <body> <p>Texto rodeado de un contorno de color azul</p> </body>
Resultado
Texto rodeado de un contorno de color azul
Nota: para poder visualizar el contorno, debemos usar valores de la propiedad outline-style
La propiedad general de los contornos

La propiedad outline especifica todas las propiedades de los contornos de una sola vez.
Sintaxis
<head> <style="type:text/css"> selector {outline: valor-1 valor-2 valor-n} </style> </head> Los posibles valores para la propiedad outline thin | medium | thick | tamao (px, pc, pt, mm, cm, in) | none | dotted | dashed | solid | double | groove | ridge | inset | outset | color | invert
Ejemplo
Vamos a aplicar todos los valores al contorno de un botn.
Cdigo
<head> <style type="text/css"> button{outline: groove red thick} </style> </head> <body> <button>Enviar</button> </body> Enviar
Resultado
Propiedad outline
Descripcin Propiedades individuales de los contornos. No funciona en IE 5, 6 y 7 Ancho del contorno. No funciona en IE 5, 6 y 7
Valores outline-color outline-style outline-width thin medium thick longitud
Detalles Color de la lnea Estilo de la lnea Ancho de la lnea Fino Medio Grueso Longitud Nada Oculta Punteada Lneas de rayas Solida Doble Acanalado En relieve Recuadro
Ej.
outline-width
outline-style
Estilo del contorno. No funciona en IE 5, 6 y 7
none hidden dotted dashed solid double groove ridge inset
outset outline-color Color del contorno. No funciona en IE 5, 6 y 7 color invert
Resalte Color Color inverso al color de fondo
CSS Listas
Define que aspecto le quieres dar a las listas de tu sitio: numerado, con letras, nmeros romanos, un pequeo grfico, etc.
Listas con CSS

Las propiedades de las listas nos permiten establecer el estilo de las mismas, la imagen, nmero o letra de los diferentes Items y la posicin de la misma.
El tipo de estilo de las listas

La propiedad list-style-type especifica el formato visual de la lista. Esta propiedad se aplica a todo elemento con "display: list-item".
Sintaxis
selector {list-style-type: valor} Los posibles valores para definir el estilo de las listas disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none
Ejemplo
Vamos a aplicar un estilo a una lista.
Cdigo
<head> <style type="text/css"> ol{list-style-type: lower-latin} </style> </head> <body> <ol> <li>HTML</li> 1. HTML 2. CSS 3. JavaScript
Resultado
<li>CSS</li> <li>JavaScript</li> </ol> </body>
Listas con imgenes

La propiedad list-style-image define la imagen que va a ser usada como marca de cada tem. Esta propiedad se aplica a todo elemento con "display: list-item".
Sintaxis
selector {list-style-image: valor} Los posibles valores para definir las imgenes de las listas URL | none
Ejemplo
Vamos a aplicar una imagen a una lista.
Cdigo
<head> <style type="text/css"> ul{list-style-image: url("punto.gif")} </style> </head> <body> <ul> <li>XML</li> <li>VBScript</li> <li>AJAX</li> </ul> </body> XML VBScript AJAX
Resultado
La posicin de la marca en la lista

La propiedad list-style-position especifica la posicin del marcador de los tems con respecto a la caja de la lista. Esta propiedad se aplica a todo elemento con "display: list-item".
Sintaxis
selector {list-style-position: valor} Los posibles valores para definir la posicin de los marcadores inside | outside
Ejemplo
Vamos a ubicar los marcadores en diferentes posiciones.
Cdigo
<head> <style type="text/css"> ul.dentro{list-style-position: inside} ul.fuera{list-style-position: outside} </style> </head> <body> <ul class="dentro"> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> </ul> <ul class="fuera"> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> </ul> </body>
Resultado
Primer elemento de la lista Segundo elemento de la lista Tercer elemento de la lista
Primer elemento de la lista Segundo elemento de la lista Tercer elemento de la lista
Todas las propiedades de las listas

La propiedad list-style se usa para definir todos los valores de las listas a la vez.
Sintaxis
selector {list-style: valor1 valor2 valor-n } Los posibles valores para definir las imgenes de las listas disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | URL | none | inside | outside
Ejemplo
Vamos a aplicar diferentes propiedades a una lista.
Cdigo
<head> <style type="text/css"> ul{list-style: square inside} </style> </head> XML VBScript AJAX
Resultado
<body> <ul> <li>XML</li> <li>VBScript</li> <li>AJAX</li> </ul> </body>
Tabla de las propiedades de las listas

Propiedad list-style Descripcin Valores Detalles Tipos de listas Posicin de la lista Imagen de la lista Disco Crculo Cuadrado Nro.decimal Nro.decimal comenzando de 0 No funciona en IE 5, 6 y 7 Nro.romano minscula Nro.romano mayscula Letra griega minscula No funciona en IE 5, 6 y 7 Letra latina minscula No funciona en IE 5, 6 y 7 Letra latina mayscula No funciona en IE Ej.
Permite establecer el estilo de la list-style-type lista, la imagen y/o la posicin. list-style-position list-style-image
list-style-type
Estilo aplicable a los marcadores disc visuales de las listas. circle square decimal decimal-leadingzero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
5, 6 y 7 armenian Letra armenia No funciona en IE 5, 6 y 7 Letra gregoriana No funciona en IE 5, 6 y 7 Letra alfabeto en minscula Letra alfabeto en mayscula Nada URL Nada Dentro Fuera
georgian
lower-alpha
upper-alpha
none list-style-image Imagen aplicable a los elementos URL de las listas. none Posicin dentro de la lista de los elementos marcadores de las listas. inside outside
list-style-position
Tablas CSS
Aprenda como definir el tamao de las tablas, espacio entre celdas, o la ubicacin del ttulo con CSS.
Tablas con CSS

Las propiedades de las tablas nos permiten definir el comportamiento, el diseo y la ubicacin de los elementos que componen cada tabla. Los temas que estudiaremos: 1. 2. 3. 4. 5. La ubicacin del ttulo El formato de las tablas El modelo de los bordes El espacio entre celdas El comportamiento de las celdas vacas
Ubicacin del ttulo
La propiedad caption-side nos permite ubicar el ttulo de la tabla por encima o por debajo de la misma. La alineacin horizontal del mismo se puede establecer con la propiedad text-align.
Sintaxis
selector {caption-side: valor} Los posibles valores para definir la ubicacin del ttulo top | bottom | inherit
Ejemplo
Vamos a ubicar el ttulo de la tabla por debajo de la misma.
Cdigo
<head> <style type="text/css"> caption{caption-side: bottom} </style> </head> <body> <table border="1"> <caption>Precio de los lcteos</caption> <tr> <th>Producto</th> <th>Precio</th> </tr> <tr> <td>Manteca</td> <td>4.00</td> </tr> <tr> <td>Leche</td> <td>1.50</td> </tr> </table> </body>
Resultado
Precio de los lcteos Producto Manteca Leche Precio 4.00 1.50
Nota: Internet Explorer ubica el ttulo siempre por encima de la tabla.
Formato de las tablas

La propiedad table-layout se usa para disear las filas, columnas o celdas de una tabla. Entre las posibilidades de diseo podemos definir si las mismas van a tener el tamao fijo que estipulemos (fixed) o se adecuarn al contenido sin importar la medida que hayamos establecido (auto).
Sintaxis
selector {table-layout: valor} Los posibles valores para definir el formato de las tablas auto | fixed | inherit
Ejemplo
Vamos a comparar las 2 propiedades de una tabla.
Cdigo
<head> <style type="text/css"> table.auto{table-layout: auto} table.fija{table-layout: fixed} </style> </head> <body> <table class="auto" style="border: solid; width: 100%" > <caption>Tabla con formato automtico</caption> <tr> <td width="10%">111111111111111111111111111111</td> <td width="40%">222222222222</td> <td width="50%">33333</td> </tr> </table> <table class="fija" style="border: solid; width: 100%"> <caption>Tabla con formato fijo</caption> <tr> <td width="10%">111111111111111111111111111111</td> <td width="40%">222222222222</td> <td width="50%">33333</td> </tr> </table> </body>
Resultado
Tabla con tamao automtico
11111111111111111111111 22222222222 3333
Tabla con tamao fijo
11111111111111111111111 22222222222 3333
Modelo de los bordes

La propiedad border-collapse nos permite seleccionar la apariencia de los bordes de cada celda de la tabla. Existen 2 modelos diferentes de bordes: separados y continuos.
Sintaxis
selector {border-collapse: valor}
Los posibles valores para los diferentes modelos de bordes collapse | separate | inherit
Ejemplo
Vamos a comparar los dos modelos de bordes.
Cdigo
<head> <style type="text/css"> table.plegado{border-collapse: collapse} table.separado{border-collapse: separate} </style> </head> <body> <table class="plegado" style="border:solid 1px"> <caption>Tabla con los bordes plegados</caption> <tr> <th>Nombre</th> <th>Edad</th> </tr> <tr> <td>Luis</td> <td>23</td> </tr> </table> <table class="separado" style="border:solid 1px"> <caption>Tabla con los bordes separados</caption> <tr> <th>Nombre</th> <th>Edad</th> </tr> <tr> <td>Roberto</td> <td>19</td> </tr> </table> </body>
Resultado
Tabla con los bordes plegados Nombre Luis 23 Edad
Tabla con los bordes separados Nombre Roberto 19 Edad
Espacio entre celdas

La propiedad border-spacing especifica la separacin entre celdas adyacentes. Si especificamos un solo valor, este acta sobre toda la tabla. Si especificamos 2 valores el primero define la separacin horizontal y el segundo la vertical.
Sintaxis
selector {border-spacing: valor} Los posibles valores para definir la separacin entre celdas
distancia(horizontal) distancia(vertical) | inherit
Ejemplo
Vamos a definir la separacin de las celdas.
Cdigo
<head> <style type="text/css"> table{border-spacing: 10px 20px; border-collapse: separate} </style> </head> <body> <table style="border: solid 1px"> <tr> <th>Marca del automobil</th> <th>Modelo</th> </tr> <tr> <td>Ford</td> <td>Mustang</td> </tr> <tr> <td>Toyota</td> <td>Corolla</td> </tr> </table> </body>
Resultado
Marca del automobil Ford Toyota
Modelo Mustang Corolla
Comportamiento de las celdas vacas

La propiedad empty-cells nos permite controlar la visualizacin de los bordes y fondos de una celda vaca.
Sintaxis
selector {empty-cells: valor} Los posibles valores para controlar las celdas vacas show | hide | inherit
Ejemplo
Vamos a comparar el comportamiento de los dos valores.
Cdigo
<head>
Resultado
<style type="text/css"> td.muestra{empty-cells: show} td.oculta{empty-cells: hide} </style> </head> <body> <table style="border-collapse: separate; border solid 1px"> <tr> <th>Nombre</th> <th>Edad</th> <th>Estado civil</th> </tr> <tr> <td>Carlos</td> <td class="oculta"></td> <td>casado</td> </tr> <tr> <td>Julieta</td> <td>27</td> <td class="muestra"></td> </tr> </table> </body>
Nombre Carlos Julieta
Edad
Estado civil casado
27
Propiedades de las tablas

Propiedad caption-side Descripcin Posicin del ttulo respecto de la tabla. top Valores Detalles Superior No funciona en IE 5, 6 y 7 Inferior No funciona en IE 5, 6 y 7 Automtico Fijo Plegado Separado Longitud No funciona en IE Ej.
bottom
table-layout
Control del algoritmo usado para auto el formato de las celdas, filas y fixed columnas. Seleccin del modelo de los bordes. collapse separate
border-collapse
border-spacing
Espaciado entre los bordes de celdas adyacentes.
longitud
5, 6 y 7 empty-cells Visibilidad de los bordes de celdas sin contenido. show Muestra No funciona en IE 5, 6 y 7 Oculta No funciona en IE 5, 6 y 7
hide
CSS Relleno
Deja un espacio entre el elemento y los bordes del mismo.
Relleno con CSS

El relleno se comporta exactamente igual que los mrgenes con la excepcin que deja el espacio blanco entre el elemento y los bordes, o en caso que no posea bordes, con el margen.
Las propiedades del relleno padding nos permiten definir el ancho de los mismos.
El relleno - padding
La propiedad padding se utiliza para definir el ancho del espacio que se encuentra entre el elemento y el borde del mismo. Esta propiedad define el ancho para los cuatro lados de la caja.
Sintaxis
<head> <style="type:text/css"> selector {padding: valor} </style> </head> Los posibles valores para definir los anchos de padding
longitud | %
Ejemplo
Vamos a ver como se comporta un texto con un relleno de 10% alrededor.
Cdigo
<head> <style type="text/css"> p.relleno{padding:10%} </style> </head> <body> <p>En este ejemplo podemos observar que el relleno se aleja de los borde un 10% en base al tamao de la caja que lo contiene.Al no haber definido los bordes o los margenes, el ancho del relleno es la distancia definida.</p> </body>
Resultado
En este ejemplo podemos observar que el relleno se aleja de los borde un 10% en base al tamao de la caja que lo contiene. Al no haber definido los bordes o los margenes, el ancho del relleno es la distancia definida.
El relleno de cada lado - padding-top, padding-right, padding-bottom, padding-left

Las propiedades padding-top, padding-right, padding-bottom, paddingleft se utilizan para definir los anchos de los rellenos de cada uno de los bordes por separado. Puedes definir los 4 lados o solo aquellos que necesites.
Sintaxis
<head> <style="type:text/css"> selector { padding-top: valor padding-right: valor padding-bottom: valor padding-left: valor } </style> </head> Los posibles valores para definir los anchos de padding longitud | %
Ejemplo
Vamos a definir el ancho de cada lado por separado.
Cdigo
<head> <style type="text/css"> p{ padding-top:30px padding-right:10px padding-bottom:20px padding-left:50% } </style> </head> <body> <p>Este texto tiene definido un ancho distinto para cada lado del elemento.</p> </body>
Resultado
Este texto tiene definido un ancho distinto para cada lado del elemento.
Tabla de las propiedades de padding (relleno)

Propiedad padding Descripcin Tamaos para varios padding individuales. padding-top: ancho del padding superior. padding-right: ancho del padding derecho. padding-bottom: ancho del padding inferior. padding-left: ancho del padding derecho. Valores longitud % Detalles Longitud Porcentaje Ej.
Bordes CSS
Usa color, estilo y espesor en los bordes de todos los elementos.
Bordes con CSS

Los bordes nos sirven para decorar todos los elementos con lneas de diferentes espesores, colores y formas. Esta propiedad se aplica al rea de bordes de la caja.
La propiedad de los bordes

La propiedad border especifica el espesor, color y estilo de los bordes. Es la forma abreviada para definir los bordes y puede comprender en ella todas las propiedades de los bordes juntas.
Sintaxis
selector {border: valor-1 valor-2 valor-n} Nota: debemos dejar un espacio en blanco entre los valores Los posibles valores para definir los espesores de los bordes thin | medium | thick | tamao (px, pc, pt, mm, cm, in) | nombre del color(ingls) | #xxxxxx | transparent | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Ejemplo
Vamos a decorar los bordes de una tabla.
Cdigo
<head> <style type="text/css"> table{border: blue double medium} td{border: green dotted medium} </style> </head> <body> <table> <tr> <td>Esta tabla</td> <td>tiene los bordes</td> </tr> <tr> <td>decorados con</td> <td>diferentes propiedades</td> </tr> </table> </body> Esta tabla
Resultado
tiene los bordes
decorados con diferentes propiedades
Nota: para poder visualizar el borde debemos usar valores de la propiedad border-style
Espesor de los bordes

La propiedad border-width especifica el espesor del borde
Sintaxis
Establecer el mismo espesor para todos los bordes del selector. selector {border-width: valor} Establecer el espesor de cada borde del selector por separado. selector { border-top-width: valor; border-right-width: valor; border-bottom-width: valor; border-left-width: valor; } Nota: no olvides poner (;) al final de cada lnea Los posibles valores para definir los espesores de los bordes thin fino | medium medio | thick grueso | tamao (px, pc, pt, mm, cm, in)
Ejemplo
Vamos a aplicar un espesor a un borde sobre un texto.
Cdigo
<head> <style type="text/css"> p { border-width: 5px; border-style: solid; } </style> </head> <body> <p>Texto con un borde de 5 pixels</p> </body>
Resultado
Texto con un borde de 5 pixels
Nota: para poder visualizar el borde debemos usar valores de la propiedad border-style
Color de los bordes

La propiedad border-color especifica el color del borde
Sintaxis
Establecer el color de todos los bordes a la ves. selector {border-color: valor} Establecer el color de cada borde por separado. selector { border-top-color: valor; border-right-color: valor; border-bottom-color: valor; border-left-color: valor; } Los posibles valores para colorear los bordes nombre del color(ingls) | #xxxxxx | transparent
Ejemplo
Vamos a aplicar un color a un borde sobre un ttulo.
Cdigo
<head> <style type="text/css"> h2{ border-color: red; border-style: solid; } </style> </head> <body> <h2>Ttulo con un borde rojo</h2> </body>
Resultado
Ttulo con un borde rojo
Nota: para poder visualizar el borde debemos usar la propiedad border-style
Estilo de los bordes

La propiedad border-style especifica el estilo del borde
Sintaxis
Establecer el estilo de todos los bordes a la ves. selector {border-style: valor} Establecer el estylo de cada borde por separado. selector { border-top-style: valor; border-right-style: valor;
border-bottom-style: valor; border-left-style: valor; } Los posibles valores para dar estilo a los bordes none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Ejemplo
Vamos a aplicar un estilo a cada uno de los bordes de una lista.
Cdigo
<head> <style type="text/css"> h3{ border-top-style: dotted; border-right-style: double; border-bottom-style: dashed; border-left-style: groove; } </style> </head> <body> <h3>Diferentes estilos de bordes</h3> </body>
Resultado
Diferentes estilos de bordes
Tabla de las propiedades de los bordes

Propiedad border Descripcin Define ancho, color y estilo general para los 4 bordes. border-top: define ancho, color y estilo para el borde superior border-right: define ancho, color y estilo para el borde derecho thin medium thick longitud color Valores Detalles Fino Mediano Grueso Longitud Color Transparente Nada Oculto Punteado Ej.
border-bottom: define ancho, color y transparent estilo para el borde inferior border-left: define ancho, color y estilo para el borde izquierdo none hidden dotted
dashed solid double groove ridge inset outset border-width Ancho general de los 4 bordes. border-top-width: ancho del borde superior. thin medium
Lnea de rayas Solido Doble Acanalado En relieve Recuadro Resalte Fino Mediano Grueso Longitud
thick border-right-width: ancho del borde longitud derecho. border-bottom-width: ancho del borde inferior. border-left-width: ancho del borde izquierdo. border-color Color general de los 4 bordes. border-top-color:color del borde superior border-right-color:color del borde derecho border-bottom-color:color del borde inferior border-left-color:color del borde izquierdo border-style Estilo general de los 4 bordes. border-top-style:estilo del borde superior none hidden dotted color transparent
Color Transparente
Nada Oculto Punteado
border-right-style:estilo del borde derecho
dashed
Lnea de rayas Solido Doble Acanalado En relieve Recuadro Resalte
solid border-bottom-style:estilo del borde inferior double border-left-style:estilo del borde izquierdo groove ridge inset outset
CSS Mrgenes
Mantn distancia entre elementos utilizando mrgenes alrededor de los mismos.
Mrgenes con CSS

El margen es un espacio invisible alrededor del elemento, que le permite al mismo mantener distancia de otros elementos.
Las propiedades de los margenes margin nos permiten definir el ancho de los mismos.
El margen - margin
La propiedad margin se utiliza para definir el ancho del espacio que se encuentra entre el borde de un elemento y el elemento cercano a el. Esta propiedad define el ancho del margen para los cuatro lados de la caja.
Sintaxis
<head> <style="type:text/css">
selector {margin: valor} </style> </head> Los posibles valores para definir el ancho de los mrgenes longitud | % | auto
Ejemplo
Vamos a ver como se comporta un texto con un margen de 30px alrededor.
Cdigo
<head> <style type="text/css"> p.margen{margin:30px} </style> </head> <body> <p>En este ejemplo podemos observar que el margen aleja al elemento de los borde 30 pixels en base al tamao de la caja que lo contiene.</p> </body>
Resultado
En este ejemplo podemos observar que el margen aleja al elemento de los borde 30 pixels en base al tamao de la caja que lo contiene.
Los mrgenes de un elemento por separado margin-top, margin-right, margin-bottom, margin-left

Las propiedades margin-top, margin-right, margin-bottom, margin-left se utilizan para definir el ancho de los mrgenes de cada uno de los lados del elemento por separado. Puedes definir los 4 lados o solo aquellos que necesites.
Sintaxis
<head> <style="type:text/css"> selector { margin-top: valor margin-right: valor margin-bottom: valor margin-left: valor } </style> </head> Los posibles valores para definir los anchos de margin longitud | % | auto
Ejemplo
Vamos a definir el ancho de cada lado por separado.
Cdigo
<head> <style type="text/css"> p{ margin-top:5% margin-right:30px margin-bottom:20px margin-left:50% } </style> </head> <body> <p>Este texto tiene definido un ancho de margen distinto para cada lado del elemento.</p> </body>
Resultado
Este texto tiene definido un ancho de margen distinto para cada lado del elemento.
Tabla de las propiedades de los mrgenes

Propiedad margin Descripcin Ancho para varios mrgenes individuales. Valores longitud Detalles Longitud Porcentaje Automtico Ej.
margin-top: Define el ancho del margen superior. % margin-right: Define el ancho del margen derecho. margin-bottom: Define el ancho del margen inferior. margin-left: Define el ancho del margen izquierdo. auto
CSS Dimensiones
Defina el ancho, alto y distancia entre lneas.
Dimensiones con CSS
Las propiedades de las dimensiones nos permiten definir al ancho y la altura de los elementos, como as tambin controlar el espacio en blanco que dejamos entre lneas.
Ancho
La propiedad width define el ancho del elemento.
Ejemplo
Vamos a definir el ancho de un texto.
Cdigo
<head> <style type="text/css"> .ancho{width: 200px; border: 1px solid #00FFFF; padding: 5px } </style> </head> <body> <p class="ancho">Prrafo con un ancho de 200 pixels.</p> </body>
Resultado
Prrafo con un ancho de 200 pixels.
Altura
La propiedad height define la altura del elemento.
Ejemplo
Vamos a definir la altura de un elemento.
Cdigo
<head> <style type="text/css"> .altura{height: 100px; border: 1px solid #00FFFF; padding: 5px } </style> </head> <body> <p class="altura">Prrafo definido con una altura de 100 px.</p> </body>
Resultado
Prrafo definido con una altura de 100 px.
Separacin entre lneas

La propiedad line-height define la distancia que dejaremos entre lneas de un texto.
Ejemplo
Vamos a ver como establecer la distancia entre lneas.
Cdigo
<head> <style type="text/css"> .separa{line-height: 40px; width: 150px border: 1px solid #00FFFF; padding: 5px } </style> </head> <body> <p class="separa">Prrafo con una separacin entre lneas de 40 px.</p> </body>
Resultado
Prrafo con una separacin entre lneas de 40 px.
Propiedades de las dimensiones

Propiedad width Ancho. Descripcin Valores longitud % auto min-width Ancho mnimo. longitud % max-width Ancho mximo. longitud % none height Altura. longitud % auto Detalles Longitud Porcentaje Automtico Longitud Porcentaje Longitud Porcentaje Sin mximo Longitud Porcentaje Automtico Ej.
min-height
Alto mnimo.
longitud %
Longitud Porcentaje Longitud Porcentaje Sin mximo Normal Nmero Longitud Porcentaje
max-height
Alto mximo.
longitud % none
line-height
Altura entre las bases del texto.
normal nmero longitud %
CSS Efectos visuales

Corte, unin, visibilidad e invisibilidad de los elementos.
Efectos visuales con CSS

Los efectos visuales se utilizan entre otras cosas para definir la visibilidad de los elementos y tambin para establecer el comportamiento del contenedor de los mismos.
La propiedad overflow
Overflow nos permite controlar el comportamiento de una caja en caso que su contenido la desborde.
Ejemplo
Vamos a ver el comportamiento de la propiedad overflow.
Cdigo
<head> <style type="text/css"> p{ background-color: #FFFFD9; width: 100px; height: 100 px;
Resultado
Utilice overflow para controlar la disposicin de los elementos dentro de la caja.
overflow: scroll } </style> </head> <body> <p>Utilice overflow para controlar la disposicin de los elementos dentro de la caja.</p> </body> En este ejemplo, definimos el tamao de la caja en 100x100 pxeles y le agregamos una barra de desplazamiento. Nota: el valor por defecto de la propiedad overflow es "visible".
La propiedad clip
Usamos clip cuando queremos recortar una imagen a una medida determinada. Los valores de rect son en este orden (superior derecha inferior izquierda)
Ejemplo
Ac vemos como podemos cortar una imagen a nuestro gusto.
Cdigo
<head> <style type="text/css"> img.recortada { position:absolute; clip: rect(0px 50px 100px 0px) } </style> </head> <body> <img class="recortada" src="/foto3.jpg" style="border:0; width: 100px; height: 150px" > <img src="/foto3.jpg" style="border:0; width: 100px; height: 150px"> </body>
Resultado
Imagen completa En el ejemplo, el tamao real de la imagen es de 100x150 pxeles y con la propiedad clip la cortamos a la medida deseada.
La propiedad display
Con display se puede definir el comportamiento del elemento.
Ejemplo
Veamos un ejemplo de como manipular textos.
Cdigo
<head> <style type="text/css"> p{display:inline} </style> </head> <body> <p>En este ejemplo</p> <p>la propiedad display une dos prrafos en una misma lnea.</p> </body> En este ejemplo
Resultado
la propiedad display une dos prrafos en una misma lnea.
La propiedad visibility
Visibility nos define si un elemento ser visible o invisible.
Ejemplo
Vamos a comparar entre las 2 propiedades.
Cdigo
<head> <style type="text/css"> h3.se_ve{visibility:visible} h3.no_se_ve{visibility:hidden} </style> </head> <body> <h3 class="se_ve">Este texto es visible.</h3> <h3 class="no_se_ve">Este texto es invisible.</h3>
Resultado
Este texto es visible.
Propiedades de los efectos visuales

Propiedad overflow Descripcin Comportamiento del contenido si se desborda en la caja. Valores visible hidden Visible Oculto Detalles Ej.
scroll auto clip Especifica la regin visible del elemento. rect
Barra de desplazamiento Automtico Longitud Longitud Longitud Longitud superior derecha inferior izquierda
auto display Comportamiento del contenedor. inline block list-item
Automtico Se muestra en la misma lnea. Se muestra tal cual es. Convierte diferentes elementos en tems de una lista Palabra insertada No funciona en IE 5, 6, 7 y 8 Firefox Lmite del bloque Est incompleto para IE 5, 6, 7 y 8 - No funciona en Firefox Tabla No funciona en IE 5, 6, 7 y 8 Lmite de la tabla No funciona en IE 5, 6, 7 y 8 No se visualiza Visible Oculto Ocultar una parte No funciona en IE 5, 6, 7 y 8
run-in
inline-block
table
inline-table
none visibility Visibilidad de las cajas. visible hidden collapse
CSS Ubicacin
Ubica todo o parte del contenido de tu pgina en el lugar que desees.
La propiedad position
Esta propiedad nos permite posicionar un elemento dentro de la pgina. Por lo general va acompaado de las propiedades: top, right, bottom y left. Sus posibles valores son: static (esttico) siempre tiene la ubicacin que la pgina da por defecto. relative (relativa) mueve el elemento ralativamente de su posicin normal. absolute (absoluta) posiciona al elemento con coordinadas relativas al bloque que lo contiene. fixed (fija) posiciona al elemento con coordinadas relativas a la ventana del navegador.
La propiedad float
La propiedad float define donde ubicar un texto o una imagen dentro de otro elemento. Solo puede ubicarlo a la derecha o a la izquierda del elemento.
Ejemplo
Vamos a posicionar una imagen a la derecha del texto.
Cdigo
<head> <style type="text/css"> img {float: right} </style> </head> <body> <p>En este ejemplo podemos observar como la imagen se sita a la derecha del texto. A pesar de la extensin del mismo, este rodear a la imagen, tanto por el costado como por debajo de la misma.<img src="/v.gif" /> Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.</p> </body>
Resultado
En este ejemplo podemos observar como la imagen se sita a la derecha del texto. A pesar de la extensin del mismo, este rodear a la imagen, tanto por el costado como por debajo de la misma. Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.
La propiedad clear
La propiedad clear no permite ubicar a los lados de una foto o texto, ningn otro elemento flotante.
Ejemplo
Vamos a ver el comportamiento de esta propiedad.
Cdigo
<head> <style type="text/css"> img{float: left; clear: both} </style> </head> <body> <img src="/v.gif" /> <img src="/v.gif" /> </body>
Resultado
La propiedad vertical-align
La propiedad vertical-align se usa para alinear verticalmente los elementos.
Ejemplo
Vamos a aplicar un estilo a una lista.
Cdigo
<table border="1" with="100%"> <tr> <td>Texto<br>texto<br>texto<br>texto<br>texto<br> texto<br>texto<br></td> <td style="vertical-align:bottom"><img src="/v.gif"></td> </tr> </table> Texto texto texto texto texto texto texto
Resultado
Nota: en este ejemplo alineamos verticalmente el grfico en la parte inferior(bottom) de la tabla.
Propiedades de la ubicacin
Propiedad position Descripcin Permite posicionar un elemento Valores static Detalles Esttica Ej.
dentro de una pgina por medio de estos 4 mtodos.
relative absolute fixed
Relativa Absoluta Fija Longitud Porcentaje Automtico Izquierda Derecha Nada Nada Izquierda Derecha Ambas Lnea de referencia Por debajo Super Por encima Texto superior Medio Inferior Texto inferior Longitud Porcentaje
top right bottom left
Desplazamiento de la caja(respecto al lmite superior, derecho, inferior o izquierdo del contenedor).
longitud % auto
float
Posicionamiento flotante.
left right none
clear
Control de cajas adyacentes a los none float. left right both
vertical-align
Alineacin vertical del texto.
baseline
sub super top text-top middle bottom text-bottom longitud %
z-index
Solapamiento de niveles de capas.
entero con signo auto
Entero con signo Automtico
CSS Pseudo Clases

Efectos especiales para los enlaces de tu sitio.
Las pseudo-clases
Las pseudo-clases clasifican elementos con caractersticas distintas del nombre, atributo o contenido. Las pseudo-clases pueden ser dinmicas, en el sentido que un elemento puede adquirir o perder una pseudo clase cuando el usuario interacta en la pgina web. Contamos con las siguientes pseudo-clases: 1. 2. 3. 4. :first-child Para enlaces :link y :visited Dinmicas :hover, :active y :focus Lenguaje :lang
La pseudo-clase :first-child
La pseudo-clase :first-child combina un elemento que es el primer elemento hijo con otro elemento
Sintaxis
Esta regla nos indica que el selector es el primer hijo del elemento padre y que cumplir con la propiedad incluida entre llaves <head> <style="type:text/css"> elemento padre > selector:first-child {propiedad: valor} </style> </head>
Ejemplo
Vamos a ver como acta first-child.
Cdigo
<head> <style type="text/css"> div > p:first-child {color: red} </style> </head>
Resultado
La propiedad definida anteriormente se cumplir solamente para el primer elemento p que desciende del elemento div En este caso, la propiedad no tendr efecto por no ser el primer elemento p del elemento div
<body> <div> <p>La propiedad definida anteriormente se cumplir solamente para el primer elemento p que desciende del elemento div</p> <p>En este caso, la propiedad no tendr efecto por no ser el primer elemento p del elemento div sino el segundo</p> </div> </body>
sino el segundo
En este caso la propiedad se cumple para el elemento que es descendiente del selector. <head> <style="type:text/css"> selector:first-child elemento {propiedad: valor} </style> </head>
Ejemplo
Otro ejemplo de first-child.
Cdigo
<head> <style type="text/css"> h4:first-child em {color: red} </style> </head> <body> <h4>La propiedad definida anteriormente se cumplir <em>solamente con el elemento em dentro del elemento h4</em></h4> <p>En este caso, la propiedad <em> no tendr efecto</em> ya que el elemento em no desciende del elemento h4 sino del elemento p</p> </div> </body>
Resultado
La propiedad definida anteriormente se cumplir solamente con el elemento em dentro del elemento h4
En este caso, la propiedad no tendr efecto ya que el elemento em no desciende del elemento h4 sino del elemento p
Los enlaces y las pseudo-clases :link y :visited

Las pseudo-clases :link y :visited se usan generalmente para diferenciar entre un enlace que an no ha sido visitado por otro que ya fue activado. Para ello definimos 2 colores distintos para cada caso.
Sintaxis
selector:link {text-align: valor} selector:visited {text-align: valor} </style> </head>
Ejemplo
Veamos como se comporta el enlace.
Cdigo
<head> <style type="text/css"> a:link {color:red} a:visited {color:green} </style> </head> <body> <a href="/fin.html">Si presiona el enlace cambiar al color verde</a>. </body>
Resultado
Si presiona el enlace cambiar al color verde
Las pseudo-clases dinmicas :hover, :active y :focus

A veces necesitamos cambiar la forma de visualizar o interpretar algn objeto en respuesta a una accin del usuario. La pseudo-clase :hover se aplica generalmente cuando el cursor se desplaza por encima de un enlace. La pseudo-clase :active se aplica cuando el elemento est siendo activado por el usuario, como por ejemplo cuando el usuario presiona un boton. La pseudo-clase :focus se aplica cuando el elemento tiene el foco
Sintaxis
<head> <style="type:text/css"> a:link { color: red } a:visited { color: blue } selector:hover {propiedadvalor} selector:active {propiedadvalor} selector:focus {propiedadvalor} </style> </head> Nota: la pseudo-clase :hover debe ser ubicada posteriormente a :link y :visited y anteriormente a :active.
Ejemplo
Vamos a aplicar un comportamiento dinmico a un enlace.
Cdigo
<head> <style type="text/css"> a:link { color: red } a:visited { color: green} a:hover {color:blue} a:active {color:black} a:focus {background-color:yellow} </style> </head> <body> <a href="/fin.html">Enlace dinmico</a> </body> Enlace dinmico
Resultado
La pseudo-clase del idioma :lang

La pseudo-clase :lang nos permite combinar el idioma de los elementos del documento con el idioma del usuario
Sintaxis
<head> <style="type:text/css"> selector:lang(idioma) {propiedadvalor} O :lang(idioma) {propiedadvalor} </style> </head> Nota: el idioma es obligatorio.
Ejemplo
Vamos a comparar las comillas entre dos idiomas.
Cdigo
<head> <style type="text/css"> :lang(es) {quotes:'"' '"'} :lang(fr) {quotes:"<<" ">>"} </style> </head> <body> <p>...<q lang="es">Comillas en espaol</q>...</p> <p>...<q lang="fr">Comillas en francs</q>...</p> </body>
Resultado
...Comillas en espaol... ...Comillas en francs...
Propiedades de las pseudo clases

Propiedad :first-child :link :visited :active Descripcin Cuando es el primer hijo de un elemento padre. Enlaces no visitados. Enlaces visitados. Cuando es activado(tiempo entre que se pulsa un botn sobre l y se suelta). Cuando se posiciona el cursor sobre l pero no se activa. Cuando tiene el foco posicionado sobre l. Especifica el lenguaje usado en el elemento. Ej.
:hover :focus :lang
CSS Pseudo Elementos

Agrega propiedades especiales a la primera letra o a la primera lnea de un texto. Tambin agrega contenido delante o detrs de un elemento.
Pseudo Elementos con CSS

Los Pseudo Elementos nos permiten agregar alguna propiedad a un selector. CSS cuenta con un total de 4 pseudo elementos. :first-line :first-letter :before :after
Su sintaxis es muy simple. selector:pseudo-elemento {propiedad:valor}
El Pseudo Elemento :first-line

El pseudo-elemento :first-line nos permite agregar una propiedad especial solo a la primera lnea de un texto.
Sintaxis
selector:first-line {propiedad: valor} </style> </head> Las posibles propiedades para el pseudo-elemento :first-line background | clear | color | font | letter-spacing | line-height | text-decoration | text-transform | vertical-align | word-spacing
Ejemplo
Vamos a ver como acta el pseudo-elemento :first-line.
Cdigo
<head> <style type="text/css"> p:first-line {color: red} </style> </head> <body> <p>La propiedad aplicada sobre el elemento p se cumplir solo en la primera lnea del prrafo, dejando el resto del mismo de color negro.</p> </body>
Resultado
La propiedad aplicada sobre el elemento p se cumplir solo en la primera lnea del prrafo, dejando el resto del mismo de color negro.
El Pseudo-Elemento :first-letter.
El pseudo-elemento :first-letter es usado para agregar una propiedad especial solo a la primera letra de un texto.
Sintaxis
<head> <style="type:text/css"> selector:first-letter {propiedad: valor} </style> </head> Las posibles propiedades que podemos utilizar con :first-letter background | border | clear | color | float | font | line-height | margin | padding | text-decoration | text-transform | vertical-align
Ejemplo
Vamos a ver un ejemplo del pseudo-elemento :first-letter.
Cdigo
<head>
Resultado
La propiedad aplicada sobre el elemento p se
<style type="text/css"> p:first-letter {font-style: italic; font-size: xx-large} </style> </head> <body> <p>La propiedad aplicada sobre el elemento p se cumplir solo en la primera letra del prrafo.</p> </body>
cumplir solo en la primera letra del prrafo.
Pseudo Elemento :before

Usamos :before cuando queremos poner algn contenido antes que un elemento.
Sintaxis
<head> <style="type:text/css"> selector:before {propiedad: valor} </style> </head>
Ejemplo
Vamos a ver un ejemplo del pseudo-elemento :before.
Cdigo
<head> <style type="text/css"> p:before {content: url(logo.gif)} </style> </head> <body> <p>Virtualnauta es un sitio dedicado a tutoriales Web.</p> </body>
Resultado
Virtualnauta es un sitio dedicado a tutoriales Web.
Pseudo Elemento :after

Al igual que :before , :after es usado para ingresar contenidos pero en este caso despus del elemento.
Sintaxis
<head> <style="type:text/css"> selector:after {propiedad: valor}
</style> </head>
Ejemplo
Vamos a ver un ejemplo del pseudo-elemento :before.
Cdigo
<head> <style type="text/css"> p:after {content: url(logo.gif)} </style> </head> <body> <p>Virtualnauta es un sitio dedicado a tutoriales Web.</p> </body>
Resultado
Virtualnauta es un sitio dedicado a tutoriales Web.
Uso de varios pseudo-elementos juntos

Podemos usar varios pseudo elementos para un mismo selector.
Ejemplo
Cdigo
<head> <style type="text/css"> p:first-line {color: #006699} p:first-letter {font-size: xx-large} </style> </head> <body> <p>Virtualnauta es un sitio dedicado a tutoriales Web. En este tutorial mostramos los diferentes usos de los pseudo elementos.</p> </body> En este ejemplo, observamos que tanto la primera lnea del texto como la primera letra de la lnea han sido afectadas por los pseudo elementos.
Resultado
Virtualnauta es un sitio dedicado a tutoriales Web. En este tutorial mostramos los diferentes usos de los pseudo elementos.
Combinacin de pseudo elementos con clases

Los pseudo elementos pueden ser combinados con clases, como en este ejemplo.
Ejemplo
Cdigo
<head> <style type="text/css"> h2.logo:before {content: url(logo.gif)} </style> </head> <body> <h2 class="logo">irtualnauta</h2> </body> En este ejemplo, utilizamos una clase que denominamos "logo" para sealar en que ttulo vamos a anteponer el logo de Virtualnauta.
Resultado
irtualnauta
Propiedades de los pseudo elementos

Propiedad :first-line :first-letter :before :after Primera lnea de un texto. Primera letra de un texto. Inserta un contenido antes del elemento. No funciona en IE Inserta un contenido despus del elemento. No funciona en IE Descripcin Ej.
CSS Contenido Generado

Agrega contenido a su pgina mediante CSS o genera una numeracin automtica dentro de la misma.
Cont. Generado y Numeracin automtica

Cuando se desea que las aplicaciones del usuario procesen contenidos que no vienen en el documento fuente.
La propiedad 'content' (contenido)
Esta propiedad se usa con los pseudo-elementos :before y :after para generar contenido en un documento. La propiedad content, junto con estos pseudo-elementos, especifican lo que se inserta.
Sintaxis
selector.clase:before {content:valor} Los posibles valores para la propiedad content normal | none | texto | URL | counter() | attr(X) | open-quote | close-quote | noopen-quote | no-close-quote
Ejemplo
Veamos el comportamiento de la propiedad content
Cdigo
<head> <style type="text/css"> h3.cap:before {content: Captulo: } </style> </head> <body> <h3 class="cap">16</h3> </body>
Resultado
Captulo: 16
La propiedad 'quotes' (comillas)

Esta propiedad especifica como las aplicaciones deben procesar las comillas
Ejemplo
Vamos a definir la hoja de estilos.
Cdigo CSS
/* Definimos comillas en diferentes idiomas */ i:lang(es) {quotes:'"' '"'} i:lang(no) {quotes:"" ""}
/* Inserta las comillas antes y despus del contenido del elemento i */ i:before {content:open-quote} i:after {content:close-quote} Primer ejemplo con comillas en espaol
Cdigo 1 HTML
<html lang="es"> <head> <title>Comillas</title> </head> <body> <i>Texto entre comillas</i> </body> </html> Segundo ejemplo con comillas en noruego
Resultado 1
"Texto entre comillas"
Cdigo 2 HTML
<html lang="no"> <head> <title>Comillas</title> </head> <body> <i>Texto entre comillas</i> </body> </html>
Resultado 2
<Texto entre comillas>
Numeracin automtica
La numeracin automtica es controlada con dos propiedades, counterincrement y counter-reset. Los contadores definidos por estas propiedades se usan con las funciones counter()de la propiedad content. La propiedad counter-increment acepta uno o ms nombres de contadores, cada uno seguido de manera opcional por un entero que indica en cuanto se incrementar el contador con cada aparicin del elemento. El incremento predeterminado es 1. La propiedad counter-reset tambin contiene una lista de uno o ms nombres de contadores, cada uno seguido de manera opcional por un entero que da el valor en que el contador es colocado con cada aparicin del elemento. El valor por defecto es 0. En este ejemplo podemos ver como se enumeran captulos y secciones de la forma 1, 1.1, 1.2, 1.3, 2, 2.1, etc. h2:before { content: "Captulo " counter(captulo) ". "; counter-increment: captulo; /* Agrega 1 a captulo */ counter-reset: seccion; /* Pone la seccin a 0 */ } h3:before { content: counter(captulo) "." counter(seccion) " "; counter-increment: seccion; /* Agrega 1 a seccin */ }
Propiedades de los Contenidos Generados y Numeracin Automtica

Propiedad content Descripcin Agregador de contenido para los pseudo elementos ":after y :before". Valores normal none texto url counter Detalles Normal Nada Texto URL Contador No funciona en IE Inserta un atributo Apertura de comillas No funciona en IE Cierre de comillas No funciona en IE Sin apertura de comillas No funciona en IE Sin cierre de comillas No funciona en IE Texto Nada No funciona en IE Identificador entero No funciona en Ej.
attr(x)
open-quote
close-quote
no-open-quote
no-close-quote
quotes
Especifica las marcas para indicar las citas. No funciona en IE
texto none
counter-reset
Inicializa un contador.
identificador entero
IE none counter-increment Incrementa un contador. identificador entero Nada Identificador entero No funciona en IE Nada
none
Examen de CSS
1. Qu entiendes por CSS? Creative Style System Class Style Sheets Cascading Style Sheets Cascading Style System
2. Cul es la sintaxis correcta en CSS? {p=color:red} {p:color=red} p{color=red} p{color:red}
3. Qu atributo de HTML se usa para definir un estilo entre lneas? code style name value
4. Cul es la sintaxis correcta en HTML para referirse a una hoja de estilo externa?
<css rel="estilos.css"> <style src="/estilos.css"> <link src="/stylesheet" name="text/css" href="/estilos.css"> <link rel="stylesheet" type="text/css" href="/estilos.css">
5. Qu propiedad usamos para establecer el color de fondo? background-color: color: bgcolor: style-color:
6. Qu propiedad usamos para darle a un texto el efecto de subrayado? text-transform:lowercase text-decoration:line-through text-decoration:underline text-transform:underline
7. Cul es la sintaxis correcta a utilizar para dejar 10 pxels entre palabras? p{word-spacing:10px} p{letter-spacing:10px} p{white-space:10px} Ninguna de las anteriores.
8. Qu propiedad utilizamos para definir el tipo de fuente? font-family: font-style: font-type: font-variant:
9. Cmo definimos en CSS que el elemento <p> este en negrita?
p{bold} p{font-family:bold} p{font-weight:bold} p{text:bold}
10. Qu propiedad utilizamos para definir el color de los bordes? border-color: color-border: border-bgcolor: border-style:
11. Cmo mostrara los enlaces sin que estn subrayados? a{text-decoration:no underline} a{font-decoration:no underline} a{underline:none} Ninguna de las anteriores.
12. Cmo definimos los tems de una lista para que muestre nmeros romanos en mayscula? ol{list-style-type:lower-roman} ol{list-style-type:roman} ol{list-style-type:upper-roman} ol{list-type:upper-roman}
13. Qu propiedad utilizamos para definir el margen derecho en CSS? padding-right: border-right: margin-right: La 1 y la 3.
14. Qu propiedad utilizamos para definir que una tabla ajuste sus medidas al contenido de la misma?
table:collapse table-layout:collapse table-layout:auto table:fixed
15. Para alinear un elemento verticalmente usamos la propiedad: align: valign: align-vertical: vertical-align:
16. Cmo definira mrgenes con estos anchos? El margen izuierdo: 1cm El margen derecho: 3 cm El margen superior: 2 cm El margen inferior: 4 cm margin:2cm 3cm 4cm 1cm margin:1cm 2cm 3cm 4cm margin:1cm 3cm 2cm 4cm margin:4cm 3cm 2cm 1cm
17. Qu propiedad utilizamos para definir una imagen como fondo? background-attachment: background-img: background-src: Ninguna de las anteriores
18. Cmo definimos un comentario en CSS? <--Comentario--> //Comentario// /*Comentario*/ /-Comentario-/
19. Cul es la sintaxis correcta en CSS? p{font-family:"Times New Roman"} p{font-family:Times-New-Roman} p{font-family:TimesNewRoman} p{font-family:(Times New Roman)}
20. Cmo definimos en mayscula la primera letra de cada palabra? text-decoration:uppercase text-transform:capitalize text-transform:uppercase text-decoration:capitalize 1. Qu entiende por CSS? Cascading Style Sheets 2. Cul es la sintaxis correcta en CSS? p{color:red} 3. Qu atributo de HTML se usa para definir un estilo entre lneas? style 4. Cul es la sintaxis correcta en HTML para referirse a una hoja de estilo externa? <link rel="stylesheet" type="text/css" href="estilos.css"> 5. Qu propiedad usamos para establecer el color de fondo? background-color: 6. Qu propiedad usamos para darle a un texto el efecto de subrayado? text-decoration:underline 7. Cul es la sintaxis correcta a utilizar para dejar 10 pxels entre palabras? p{word-spacing:10px} 8. Qu propiedad utilizamos para definir el tipo de fuente? font-family: 9. Cmo definimos en CSS que el elemento <p> este en negrita?
p{font-weight:bold} 10. Qu propiedad utilizamos para definir el color de los bordes? border-color: 11. Cmo mostrara los enlaces sin que estn subrayados? Ninguna de las anteriores. 12. Cmo definimos los tems de una lista para que muestre nmeros romanos en mayscula? ol{list-style-type:upper-roman} 13. Qu propiedad utilizamos para definir el margen derecho en CSS? margin-right: 14. Qu propiedad utilizamos para definir que una tabla ajuste sus medidas al contenido de la misma? table-layout:auto 15. Para alinear un elemento verticalmente usamos la propiedad: vertical-align: 16. Cmo definira mrgenes con estos anchos? El margen izuierdo: 1cm El margen derecho: 3 cm El margen superior: 2 cm El margen inferior: 4 cm margin:2cm 3cm 4cm 1cm 17. Qu propiedad utilizamos para definir una imagen como fondo? Ninguna de las anteriores 18. Cmo definimos un comentario en CSS? /*Comentario*/ 19. Cul es la sintaxis correcta en CSS? p{font-family:"Times New Roman"} 20. Cmo definimos en mayscula la primera letra de cada palabra? text-transform:capitalize
Gua de Referencia de CSS

Listado de todas las propiedades de CSS.
Gua de las Propiedades de CSS

Esta pgina comprende un resumen de cada una de las propiedades de CSS, con sus respectiva descripcin y los posibles valores de las mismas. Todas las propiedades estn agrupadas de acuerdo al tipo de propiedad y ordenadas como lo estuvieron a lo largo de todo el tutorial. Bordes Contenido Generado Dimensiones Efectos Visuales Fondo Fuentes Contornos Listas Mrgenes Ubicacin Relleno Tablas Texto Pseudo-Clases Pseudo-Elementos
Bordes
Propiedad border border-top border-right border-bottom border-left Descripcin Ancho, color y estilo para los 4 bordes. Ancho, color y estilo para los bordes superior, derecho, inferior, izquierdo. Valores thin medium thick longitud color transparent none hidden dotted dashed solid double groove ridge inset outset thin medium thick longitud
border-width border-top-width border-right-width border-bottom-width border-left-width border-color border-top-color border-right-color border-bottom-color border-left-color border-style
Ancho de los 4 bordes. Ancho del borde superior, derecho, inferior, izquierdo.
Color de los 4 bordes. Color del borde superior, derecho, inferior, izquierdo.
color transparent
Estilo de los 4 bordes.
none
border-top-style border-right-style border-bottom-style border-left-style
Estilo del borde superior, derecho, inferior, izquierdo.
hidden dotted dashed solid double groove ridge inset outset
Contenido Generado
Propiedad content Descripcin Agregador de contenido para los pseudo elementos ":after y :before". Valores normal none texto URL contador attr(x) open-quote close-quote no-open-quote no-close-quote texto none identificador entero none identificador entero none
quotes
Especifica las marcas para indicar las citas.
counter-reset
Inicializa un contador.
counter-increment
Incrementa un contador.
Dimensiones
Propiedad width Ancho. Descripcin Valores longitud % auto longitud % longitud % none longitud
min-width max-width
Ancho mnimo. Ancho mximo.
height
Alto.
% auto min-height max-height Alto mnimo. Alto mximo. longitud % longitud % none normal nmero longitud %
line-height
Altura entre las bases del texto.
Efectos Visuales
Propiedad overflow Descripcin Comportamiento del contenido si se desborda en la caja. visible hidden scroll auto rect(long.superior, long.derecha, long.inferior, long.izquierda) auto inline block list-item run-in inline-block table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption none visible hidden collapse Valores
clip
Especifica la regin visible del elemento.
display
Comportamiento del contenedor.
visibility
Visibilidad de las cajas.
Fondo
Propiedad background Descripcin Propiedades individuales relacionadas con el fondo. Valores background-color background-image background-repeat background-attachment background-position color transparent URL none repeat repeat-x repeat-y no -repeat scroll fixed % longitud left center right top bottom
background-color background-image background-repeat
Color de fondo. Imagen de fondo. Repeticin de la imagen de fondo.
background-attachment Desplazamiento de la imagen de fondo. background-position Posicin de la imagen de fondo.
Fuentes
Propiedad font Descripcin Atajo para establecer el resto de propiedades sobre las fuentes a la vez. Valores font-style font-variant font-weight font-size font-family line height caption icon menu message-box small-caption status-bar nombre-familia familia-genrica normal italic
font-family font-style
Familias de fuentes. Estilo de la fuente.
oblique font-variant font-weight Convierte las minsculas a maysculas pero normal mantienen un tamao inferior a las maysculas. small-caps Intensidad de la fuente. normal bold bolder lighter 100 200 300 400 500 600 700 800 900 xx-small x-small small medium large x-large xx-large larger smaller longitud %
font-size
Tamao de la fuente.
Contornos
Propiedad outline Descripcin Propiedades individuales del contorno. Valores outline-color outline-style outline-width thin medium thick longitud none hidden dotted dashed solid double groove ridge
outline-width
Ancho del contorno.
outline-style
Estilo del contorno.
inset outset outline-color Color del contorno. color invert
Listas
Propiedad list-style Descripcin Permite establecer el estilo de la lista, la imagen y/o la posicin. Valores list-style-type list-style-position list-style-image
list-style-type
Estilo aplicable a los marcadores visuales de las disc listas. circle square decimal decimal-leading-zero lower-roman upper-roman lower-greek lower-latin upper-latin armenian georgian lower-alpha upper-alpha none Imagen aplicable a los elementos de las listas. Posicin dentro de la lista de los elementos marcadores de las listas. URL none inside outside
list-style-image list-style-position
Mrgenes
Propiedad margin Descripcin Ancho para varios mrgenes individuales. Valores longitud % auto longitud % auto
margin-top margin-right margin-bottom margin-left
Tamao del margen superior, derecho, inferior e izquierdo.
Ubicacin
Propiedad position Descripcin Esquema de posicionamiento. Valores static relative absolute fixed longitud % auto left right none none left right both baseline sub super top text-top middle bottom text-bottom longitud % entero con signo auto
top right bottom left float
Desplazamiento de la caja(respecto al lmite superior, derecho, inferior o izquierdo del contenedor). Posicionamiento flotante.
clear
Control de cajas adyacentes a los float.
vertical-align
Alineacin vertical del texto.
z-index
Solapamiento de niveles de capas.
Relleno
Propiedad padding padding-top padding-right padding-bottom padding-left Descripcin Tamaos para varios rellenos individuales. Ancho del relleno superior, derecho, inferior e izquierdo. Valores longitud % longitud %
Tablas
Propiedad Descripcin Valores
caption-side table-layout border-collapse border-spacing empty-cells
Posicin del ttulo respecto de la tabla. Control del algoritmo usado para el formato de las celdas, filas y columnas. Seleccin del modelo de los bordes. Espaciado entre los bordes de celdas adyacentes. Visibilidad de los bordes de celdas sin contenido.
top bottom auto fixed collapse separate longitud show hide
Texto
Propiedad text-indent text-align Descripcin Desplazamiento de la primera lnea del texto. Alineamiento del texto. Valores longitud % left right center justify none underline overline line-through blink capitalize uppercase lowercase none normal longitud normal longitud normal pre nowrap pre-wrap pre-line color ltr rtl normal embed
text-decoration
Efectos de subrayado, tachado, parpadeo.
text-transform
Transformaciones del texto a maysculas/minsculas.
letter-spacing word-spacing white-space
Espacio entre caracteres. Espacio entre palabras. Comportamiento de los espacios dentro de los elementos.
color direction unicode-bidi
Color del primer plano. Sentido direccional de la escritura. Sentido direccional de la escritura.
bidi-override
Pseudo Clases
Propiedad :link :visited :active :hover :focus :lang :first-child Enlaces no visitados. Enlaces visitados. Cuando es activado(tiempo entre que se pulsa un botn sobre l y se suelta). Cuando se posiciona el cursor sobre l pero no se activa. Cuando tiene el foco posicionado sobre l. Especifica el lenguaje usado en el elemento. Cuando es el primer hijo de un elemento padre. Descripcin
Pseudo Elementos
Propiedad :first-line :first-letter :before :after Primera lnea de un texto. Pimera letra de un texto. Inserta un contenido antes del elemento. Inserta un contenido despus del elemento. Descripcin
CSS Tipos de Medios

Especifica si el documento esta diseado para el monitor, para ser impreso o para un sintetizador de voz.
Tipos de medios con CSS

Una de las caracterticas ms importantes de las hojas de estilo es que especifican como se debe presentar un documento para los diferentes tipos de medios: En la Pantalla Sobre el papel Con un sintetizador de voz En un dispositivo braille Etc.
Especificaciones de los tipos de medios
Hay dos maneras de especificar las hojas de estilos dependientes de los medios:
Sintaxis
Desde una hoja de estilo con las reglas: @import o @media @import url("archivo.css" ) tipo de medio; @media tipo de medio{/* la hoja de estilo para el tipo de medio va aqu */}
Sintaxis
Especificando el medio de destino dentro del lenguaje del documento <html> <head> <title>Vnculo a un tipo de medio</title> <link rel="stylesheet" type="text/css" media= "tipo_medio1, tipo_medio2"href="archivo.css"> </head> <body> <p>Texto, texto, texto</p> </body> </html> Los posibles valores para tipos de medios all | brille | embossed | handheld | print | projection | screen | speech | tty | tv
La regla @media
Una regla @media especifica los tipos de medios.
Ejemplo
Veamos unos ejemplos del uso de la regla @media @media print{body { font-size: 10pt }} @media screen{body { font-size: 12px }} @media screen, print{body { line-height: 1.2 }}
Tipos de medios reconocidos

Tipos all braille Todos los dispositivos. Dispositivos tctiles braille. Descripcin
embossed handheld print projection screen speech tty tv
Impresoras braille. Dispositivos de mano(pantallas pequeas, ancho de banda reducidos, etc.). Para documentos paginados y mostrados en vista de impresin. Dispositivos de proyeccin de presentaciones. Pantallas a color de equipos informticos. Para sintetizadores de voz. Dispositivos de visualizacin con capacidades limitadas. Televisores.
Colores
Tutorial sobre colores, composicin y los colores ms comunes.
RGB
La paleta de colores RGB(Red - Green - Blue, en espaol: Rojo Verde - Azul) est representada por tres pares hexadecimales segn el siguiente formato: #RRGGBB Los valores, para cada uno de los pares, van desde 00(0 decimal) a FF(255 decimal). Cuanto mayor sea el valor del par, tanto mayor ser la intensidad de color de ese par. La escala cromtica de intensidad de color es:
mnima (nulo = 00) media (mediano = 80) mxima (saturado = FF)
Tabla simplificadora de colores

Primarios aditivos saturados (absolutos)
Nombre Rojo Verde #FF0000 #00FF00 Valor hexadecimal Descripcin
Azul Blanco
#0000FF #FFFFFF
Primarios sustractivos nulos (absolutos)

Nombre Cyan Magenta Amarillo Negro #00FFFF #FF00FF #FFFF00 #000000 Valor hexadecimal Descripcin
Secundarios y terciarios (medianos)

Nombre Gris Rosa Violeta Celeste Marrn Naranja Lavanda Turquesa Oro viejo #808080 #FF8080 #800080 #80FFFF #800000 #FF8000 #8000FF #00FF80 #BBBB20 Valor hexadecimal Descripcin
Los colores estndard El consorcio W3C (World Wide Web Consortium) tiene una lista de 16 colores que pueden ser validados con el validador de HTML.
Nombre Cyan Gray Navy Silver Black Green Olive Valor hexadecimal #00FFFF #808080 #000080 #C0C0C0 #000000 #008000 #808000 Descripcin
Teal Blue Lime Purple White Fuchsia Maroon Red
#008080 #0000FF #00FF00 #800080 #FFFFFF #FF00FF #800000 #FF0000 #FFFF00
Yellow

Introducción Al CSS

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introducción Al CSS

Cargado por

Copyright:

Formatos disponibles

Introduccin al CSS

Conocimientos previos que debes poseer.

Por qu trabajar con Hojas de Estilo?

Este ttulo es de color rojo

Y este texto es de color rojo

Ttulo centrado Ttulo subrayado

color:blue; /* color de texto: azul */ font-family:Verdana; /* tipo de fuente:Verdana */ }

Cmo se usan los estilos?

Dnde usar los estilos?

2. Dentro de la seccin Head

3. Hojas de estilo externas

selector { propiedad:valor; /* No olvidar el (;) al final de cada valor */ propiedad:valor; propiedad:valor; }

Caractersticas de este texto: Arial, de 12 pixels, bold

CSS Background - Fondo

Decora el fondo de pantalla de tu sitio con colores o imgenes.

El fondo con CSS

La propiedad de los fondos o backgrounds

El fondo del ttulo es rojo.

Aplicar color al fondo

Decorar el fondo con una imagen

Los posibles valores para la insercin de imgenes de fondo url | none

Imagen ms pequea que el tamao del fondo

Repeticin de una imagen de fondo

Imagen de fondo esttica o dinmica

Elije el lugar exacto para ubicar la imagen de fondo

Propiedades del fondo

Repeticin de la imagen de fondo.

Los textos con CSS

Sangra de los textos - text-indent

Alineado de los textos - text-align

La decoracin de los textos - text-decoration

Separacin entre letras - letter-spacing

Separacin entre palabras - word-spacing

Transformar los textos a maysculas o minsculas text-transform

Espacios en blanco - white-space

Propiedades de los textos

Espacio entre caracteres.

Espacio entre palabras.

Comportamiento de los espacios dentro de los elementos.

normal pre nowrap

CSS Fonts - Fuentes

Familia de fuentes - font-family

Intensidad de las fuentes - font-weight

Estilo de las fuentes - font-style

El estilo de este ttulo es oblique.

Tamao de las fuentes - font-size

Variante de las fuentes - font-variant

EL TEXTO ESTA ESCRITO EN MINSCULA.

La propiedad de las fuentes - font

El tipo de fuente es Palatino large bold en italic.

Propiedades de las fuentes

Contornos con CSS

El espesor de los contornos

El estilo de los contornos

El color de los contornos

La propiedad general de los contornos

Valores outline-color outline-style outline-width thin medium thick longitud

Estilo del contorno. No funciona en IE 5, 6 y 7

none hidden dotted dashed solid double groove ridge inset

outset outline-color Color del contorno. No funciona en IE 5, 6 y 7 color invert

Resalte Color Color inverso al color de fondo

Listas con CSS

color:blue; /* color de texto: azul / font-family:Verdana; / tipo de fuente:Verdana */ }