You are on page 1of 14

El estilo

Las hojas de estilo permiten controlar la presentación de una página web determinando el espacio entre las líneas de texto, el tipo y tamaño de las fuentes, el grosor de los márgenes, los colores usados y, además, el fomateo individual de cualquier etiqueta. Como veremos más adelante, se pueden definir variaciones de diseño por medio de las "clases". Si necesitáramo varios estilos de párrafos diferentes, se pueden definir clases para la etiqueta P, por ejemplo: P.normal, P.subrayado, P.tablas, etc. Las hojas de estilo en cascada (CSS) permiten definir las reglas que utiliza el navegador para presentar una página web y esto lo podemos hacer de tres maneras diferentes:
  

Añadiendo instrucciones de estilo a etiquetas concretas Incluyendo las instrucciones en el documento HTML de una página concreta Enlazando todos los documentos con un archivo de definición del estilo

Para agregar estilo a una etiqueta concreta, debemos añadirle el atributo STYLE que contendrá una serie de propiedades:
<P> Texto normal. </P> <P STYLE="margin-left: 30px; color:red"> Texto en color rojo y con sangría. </P>

Texto normal. Texto en color rojo y con sangría. De esta manera, variando la forma en que se comporta habitualmente la etiqueta P. Todo el contenido del atributo STYLE se pone entre comillas, en cada propiedad, el valor se asigna mediante dos puntos (:) y las distintas propiedades se separan con un punto y coma (;). Hay dos etiquetas que se usan junto con las hojas de estilo. <DIV> </DIV> y <SPAN> </SPAN> permiten agrupar un conjunto de elementos (párrafos, encabezados, listas, tablas, divisiones, etc) y declarar reglas de estilo para todas. Por ejemplo, el color de fondo de un conjunto de párrafos o el borde de una imagen. DIV es un elemento en bloque, por ejemplo:
<DIV> [... etiquetas varias ...] </DIV>

El estilo dentro de una etiqueta tiene precedencia sobre el estilo del bloque. color: red"> <P>Establecemos el color de la sección como rojo.</P> <P>La fuente tendrá 16 pixeles de alto. y definimos el estilo globalmente: <DIV STYLE="font-size: 16px. podemos establecer un estilo particular para esa etiqueta: <DIV STYLE="font-size: 16px. Es este orden de prioridades lo que le da el nombre de estilo en cascada (hay una cascada de métodos para aplicar los estilos. permite agrupar varios elementos en línea seguidos dentro de un mismo bloque para después darles formato con la hoja de estilo. utilizamo la etiqueta DIV. teniendo un orden de precedencia riguroso de unos sobre otros). la etiqueta SPAN se emplea para asignar clases a porciones de texto... aunque generalmente se usa para cambiar elementos más pequeños (palabras o letras). Para modificar una de las etiquetas dentro del DIV y darle un estilo diferente. en lugar de bloques enteros. Por ejemplo: . color: red"> <P>Establecemos el color de la sección como rojo. La fuente tendrá 16 pixeles de alto. A menudo.</P> <P STYLE="font-size: 14px.SPAN es un elemento en línea. <SPAN> [. Y este será igual que los otros.</P> <P>La fuente tendrá 16 pixeles de alto. </P> </DIV> Establecemos el color de la sección como rojo.</P> <P>Y este será igual que los otros.</P> </DIV> Que se verá así: Establecemos el color de la sección como rojo La fuente tendrá 16 pixeles de alto. Pero esta será diferente. Algo similar podemos hacer mediante la etiqueta SPAN. color: black"> Pero esta será diferente..] </SPAN> Si queremos cambiar la apariencia de una sección entera (que agrupe un conjunto de etiquetas).. contenido .

color: red. podríamos crear un vínculo a un archivo de texto que contenga las definiciones. englobadas por los signos "{" y "}" van las distintas propiedades con sus respectivos valores. Si STYLE se coloca en el HEAD. todas las etiquetas definidas tendrán el estilo indicado. La fuente tendrá 16 pixeles de alto. Por regla general.jpg)} </STYLE> Se colocan las distintas etiquetas a las que se quiere dar un estilo y a continuación. <STYLE TYPE="text/css"> [lista de propiedades] </STYLE> Este es un ejemplo de cómo se escribe un bloque de instrucciones de estilo: <STYLE TYPE="text/css"> BODY {background: yellow. Pero esta será MUY diferente. está ubicada en el HEAD del documento. Este archivo. sólo tendrá las propiedades pero no las etiquetas STYLE de inicio y ciere.">Pero esta será <SPAN style="font-size: 18px. color: black.</P> </DIV> Establecemos el color de la sección como rojo. color: red} H2 {font-size: 14px. margin-left: 30px. pero también puede ser incluida en el BODY."> <P>Establecemos el color de la sección como rojo. font-size: 12px.</P> <P>La fuente tendrá 16 pixeles de alto. que generalmente tiene la extensión CSS. Si tuvieramos muchas páginas y quisiéramos darles a todas el mismo estilo.">MUY</SPAN> diferente. color: red} DIV {background: URL(fondo.<DIV STYLE="font-size: 16px. font-weight: bold. Para definir estilos globales en un documento HTML utilizamos la etiqueta <STYLE> </STYLE> dentro de la cual escribimos las propiedades. en este caso será "text/css". Esta etiqueta tiene un atributo TYPE que indica el tipo de medio en que va a ser publicado. font-size: 16px. font-weight: bold. . separadas por un punto y coma. color: green.} H1 {background: blue. font-family: Arial. Introducir el estilo en etiquetas concretas es sencillo de aplicar y es adecuado si sólo se desea hacer algúnn cambio puntual pero no es práctico ya que debemos examinar todo el documento en busca de etiquetas cuando queremos hacer algún cambio.</P> <P STYLE="font-size: 14px.

bolsanegra.php .css" TYPE="text/css"> Todos los métodos pueden aplicarse a la vez en una misma página Podemos tener un archivo externo genérico. cuál regla prevalecerá sobre la otra si dan definiciones contradictorias. El orden de precedencia de mayor a menor es el siguiente:    los estilos definidos dentro de una etiqueta con el atributo STYLE los estilos definidos por la etiqueta STYLE los estilos contenidos en los archivos externos http://vagabundia. es decir. una o varias etiquetas STYLE y usar el atributo style en etiquetas individuales.net/tutorialhtml/index.Para incluirlo en la página utilizamos la etiqueta <LINK />: <LINK REL=stylesheet HREF="URL_archivo. Para evitar conflictos entre los distintos métodos. existe un orden de precedencia.

color: yellow. margin: 20px. esta se mostraría con fondo negro. SELECTOR {propiedad: valor} Los selectores pueden ser aún más complejos. la regla se aplicaría a los elementos STRONG que estén incluidos (hijos) en un elemento UL (padre): UL STRONG {color: red} Todos los elementos STRONG que no estén contenidos dentro de un elemento UL no serán afectados por la regla. Por ejemplo: BODY {background-color: #000000. donde hay elementos contenidos en otros hay una cierta jerarquía. En este ejemplo. el elemento definido con la etiqueta HTML. Esto mismo puede hacerse mucho más específico. En este tipo de estructura. pero no al revés.Crear estilos Para poder utilizar hojas de estilo y sacarles el máximo provecho es indispensable entender cuál es la estructura de un documento HTML. se llama selector (en este caso BODY). todos los elementos que estén dentro de la página heredarán este estilo. siendo la m�s grande. En este ejemplo se aplicará la regla sólo . } Si coloc�ramos esa definición dentro de una etiqueta STYLE en el HEAD de nuestra página. Como la etiqueta BODY engloba a las demás. Podemos imaginarnos que una página web es un conjunto de cajas (bloques) metidas una dentro de la otra. si le asignamos un estilo determinado. y es lo que utilizamos para definir a que parte del documento vamos a aplicar las propiedades que están entre las llaves. la que contiene a todas. Muchas de las propiedades de estilo de los elementos padre son heredadas por los elementos hijo. los selectores contextuales permiten aplicar reglas de estilo a elementos insertados dentro de otros. los elementos padre son los contenedores y los elementos hijos los contenidos: <DIV> elemento padre <Algún texto cualquiera> elemento hijo <IMG SRC="imagen" /> elemento hijo </DIV> Una parte fundamental de las hojas de estilo es lo que se llama herencia. letras amarillas y márgenes en los cuatro lados. Lo que está entre las llaves ({}).

Para esto. simplemente escribimos su nombre anteponi�ndole un punto. Para crear una regla de estilo de este tipo. Las clases permiten que apliquemos las mismas propiedades a diferentes elementos. agregamos un punto al selector y un nombre único.</p> <P>Pero este texto no. muchas veces.clase {propiedad: valor} Por ejemplo. en la página. agregando el atributo CLASS a la etiqueta: <H2 CLASS=rojo> Encabezado de color rojo. Para ello recurrimos a las clases.rojo {color: red} H2. de tanto en tanto. necesitamos que algunas tengan ciertas características diferentes.clase {propiedad: valor} Supongamos que definimos H2 con un color y una fuente determinada pero. Luego.</p> Algo similar se logra por medio del atributo ID (identificar). debemos utilizar el carácter # y luego el nombre del identificador: .rojo {color: red} Y utilizar con cualquier etiqueta: <P CLASS="rojo">Este texto será rojo. podemos utilizar cualquiera de ellas. SELECTOR. ID. necesitamos utilizar la misma etiqueta pero con otras caracter�sticas: H2.azul {color: blue} Para crear una clase. le da un nombre (identificador) único a un elemento de la página y de esta manera. lo diferencia del resto.si el elemento STRONG se encuentra en una lista de tipo UL en una celda (TD) de una tabla: TD UL STRONG {color: green} La inclusión global de estilo a las distintas etiquetas puede no ser suficiente ya que. </H2> Las clases pueden no estar asociadas a una etiqueta sino que pueden ser independientes. . en cambio.verde {color: green} H2. </H2> <H2 CLASS=verde> Encabezado de color verde. podemos definir una clase genérica para textos en color rojo con esta clase: .

podríamos agruparlos. lo razonable es reservarlos para identificar áreas importantes de la página (el footer. } Es igual que esta: P {margin: 20px 10px 50px 30px.} . el texto se vería en blanco y de 16 pixeles de alto . nos permite agrupar varias propiedades en una sola instrucción: P {font: bold italic 12px Times} En estos casos. así que esta definición: P {margin-top: 20px. font-weight: bold.. la barra de navegación.} Para simplificar.. font-family: Times. el encabezado. font-weight: bold.#algoespecial {color : white. font-weight: bold. afecta sólo a un tipo: P {font-weight: bold. font-weight: bold.] </div> Aunque los identificadores pueden utilizarse en cualquier momento. H2.} Algunas propiedades admiten dos tipos de sintaxis.} H3 {font-size: 16px. font-style: italic.. el orden de los atributos es importante y depende de cada propiedad..} H2 {font-size: 16px. } La segunda. separando cada selector con una coma: H1. margin-left: 30px. etc) Supongamos que atribuimos los mismos atributos a diferentes etiquetas: H1 {font-size: 16px. H3 {font-size: 16px. font-size: 16px. margin-bottom: 50px. Por ejemplo. derecha. font-size: 12px. la primera. el orden de la propiedad margin es arriba. margin-right: 10px.} Y la usaríamos así: <div id="algoespecial"> [. arriba. abajo.

). el elemento A. podemos controlar la forma en que se verán los vínculos de acuerdo a cómo se act�e sobre ellos. Entre el borde y el contenido hay un área de relleno (padding) y entre el borde opcional y el borde real hay un área de margen (margin) que separa los elementos en bloque entre si. Estos se aplican a la primera línea y a la primera letra de un párrafo: p:first-letter {font-size: 200%. A veces es útil seleccionar elementos no por su tipo sino por su presentación. Las pseudo-clases se especifican anteponiendo el carácter dos puntos a su nombre: SELECTOR:pseudoclase {propiedad: valor} Hay otra pseudo-clase muy utilizada y es hover. Por ejemplo. un borde. tenemos los selectores llamados pseudo-elementos cuya sintaxis es similar a las pseudo-clases pero se aplican a otro tipo de etiquetas. admite tres pseudo-clases que son link (no visitados). Por último. y que debe ponerse justo antes de A:active: A:link {color: white} A:visited {color: red} A:hover {color: yellow} A:active {color: green} De esta manera.} p:first-line {text-transform: uppercase} Para entender las hojas de estilo debemos comprender que los elementos en bloque y elementos en línea son rectángulos y que cada rectángulo o cuadro tiene un área donde se ubica el contenido y opcionalmente.Otro tipo de selectores son las llamadas pseudo-clases. visited (visitados) y active (activos. que se activa cuando se pasa el puntero del ratón pasa por encima del vínculo. .

} 5cm. DIV. OL PRE DL. por ahora. OBJECT. pulgadas (in). TEXTAREA. SAMP KBD. H5. BDO INPUT. seguramente. H6 UL. SUB. H3. DFN. serán parte de algún otro tutorial. BIG. BR. H4. Los elementos en bloque poseen propiedades para establecer ancho (width) y alto (height). bordes y rellenos. LABEL. ADDRESS Elementos en bloque En cualquier sitio de las hojas de estilo se pueden añadir comentarios siempre que se encuentren escritos entre los caracteres /* y */: /* color verde cabeceras de nivel 1 */ H1 {font: 20px bold. font-size establece el tamaño del texto en puntos (pt). SPAN. H2. Lo mismo ocurre con la altura. no se puede especificar su tamaño pero si sus márgenes. HR.} . VAR. Los elementos en línea ocupan una o varias líneas del texto de un elemento en bloque. Q. I. STRONG. el borde y el margen. SCRIPT MAP.El ancho de un elemento es igual al ancho del área de su contenido y el ancho del rectángulo es la suma de los anchos del elemento. ABBR. FIELDSET. o pixeles (px) {font-size: {font-size: {font-size: {font-size: 12pt.} 24px. Elementos en línea Datos de caracteres Entidades de caracteres TT.} 1in. color=#00FF00} Las propiedades CSS Las hojas de estilo requieren un estudio más profundo y. en general. centímetros (cm). CITE. BUTTON P H1. IMG. veamos un resumen de las propiedades que podemos incluir. ACRONYM A. TABLE. CODE. En una misma línea puede haber varios elementos en línea y. SMALL EM. NOSCRIPT. el relleno. BLOCKQUOTE FORM. B. SELECT. SUP.

pulgadas (in).} line-height establece la separación entre líneas. pixels (px) o porcentaje (%): {line-height: 20pt} {line-height: 150%} color establece el color del texto de acuerdo con su valor hexadecimal o usando los nombres de colores: {color: #33CC00} {color: red} background destaca secciones de una página.} "Courier New".} {background-image: none. sans-serif. pero más pequeñas): {font-style: small-caps.} background-image especifica la imagen de fondo o none (ninguna): {background-image: url(URLimagen). demi-bold. Se pueden especificar una o varias fuentes alternativas: {font-family: {font-family: {font-family: {font-family: Arial. light. estableciendo un color o una imagen de fondo: {background: red. centímetros (cm).} Arial.} {background: #6633FF.} font-style establece la fuente como cursiva: {font-style: italic. y extra-bold) y dependen en las fuentes: {font-weight: medium. demi-light.font-family establece la fuente del texto. Helvetica. Helvetica. medium.} font-variant establece una variante de la fuente. que se puede expresar en puntos (pt).} {font-weight: bold.} background-color color del fondo en formato hexadecimal o transparent (sin valor): {background-color: #FF00000. Puede ser normal y small-caps (letras minúsculas similares a mayúsculas.} font-weight establece el espesor de la fuente (extra-light.} . bold.} {background: URL(URLimagen).} Arial.

} background-position indica la posición inicial de la imagen de fondo: {background-position: left. Puede ser un valor negativo: {word-spacing: 1em. pulgadas. none (ninguno) e italic (cursiva): {text-decoration: underline} {text-decoration: line-through} text-align permite justificar los elementos HTML a la izquierda.} background-attachment indica si la imagen de fondo está fija (fixed) o no (scroll): {background-attachment: fixed. Puede tomar el valor normal o una longitud que se añade al valor normal. Los valores soportados son underline (subrayado).5cm. repeat-y y no-repeat: {background-repeat: no-repeat.} text-decoration permite remarcar el texto. centímetros o pixels: {text-indent: 0. lowercase (todo en minúsculas) y none (neutraliza todo): {text-transform: uppercase. un número.2em.} . al centro o a la derecha: {text-align: left} {text-align: center} {text-align: right} text-indent provoca una indentación del texto. Los valores pueden ser repeat. uppercase (todo en mayúsculas). Se puede expresar en puntos. line-through (tachado).} word-spacing establece la separación entre caracteres. una longitud o un porcentaje del tamaño de la fuente del elemento: {line-height: 1. repeat-x.background-repeat indica si la imagen de fondo se repite y cómo lo hace. Puede ser normal.} letter-spacing igual que el caso anterior: {letter-spacing: 1cm.} line-height establece la distancia entre las líneas de base de dos líneas sucesivas.} text-transform puede ser capitalize (la primera letra de cada palabra en mayúsculas).

color. bottom. medium (mediano).} border-color establece el color del borde: {border-color: red.} {border-bottom : 3px #000 dashed. groove (canal).} border-style indica el estilo de los cuatro bordes y ser none (ninguno). Con margin se engloban las cuatro propiedades con cuatro valores (top. text-bottom.5in. o un porcentaje: {vertical-align: middle.5in. centímetros o pixeles (se pueden usar valores negativos). Con border-width se especifican los cuatro simultánemante: {border-width: 1px 2px.5in.} {padding-top: 1in. thick (grueso) o una longitud.} {margin-right: 0. middle.} {padding-right: 0.} border-width border-top-width border-right-width border-bottom-width border-leftwidth establece el ancho del borde y puede ser thin (delgado).} margin margin-left margin-right margin-botton margin-top establecen los márgenes. bottom. solid (continuo).} {border-right : 3px #000 double.vertical-align establece la alineación vertical de un elemento en línea y puede ser baseline. sub.} border es un resumen de todas las propiedades para los cuatro bordes (ancho. dashed (a trazos). color. right. Se pueden especificar en puntos. ridge (cresta). estilo): {border-top : 3px #000 dashed. top. super. inset (bajorrelieve).} border-top border-right border-bottom border-left establece las propiedades de cada borde (ancho. text-top. double (doble). dotted (punteado).} {margin-top: 1in} padding padding-top padding-right padding-bottom padding-left establecen el relleno y sus valores son similares a margin excepto que no pueden tomar valores negativos: {padding: 10px 20px 5px 15px. pulgadas (inches). estilo): .} {margin-left: 0.} {padding-left: 0.} {border-left : 3px #000 double. o outset (altorrelieve): {border-style : inset.5in. left): {margin: 10px 20px 5px 15px.

o un porcentaje del elemento padre: {height: 100px.} white-space establece cómo tratar a los espacios contenidos en un elemento en bloque. lower-alpha (letras minúsculas).} list-style-image es una variante de list-style-type que se utiliza cuando se quiere tener una imagen personalizada: {list-style-image: url(URLimagen). en línea (inline). upper-roman (números romanos en mayúscula). Con clear:both no se permite que haya un objeto flotante a ningún lado y con clear:none se permiten objetos flotantes a ambos lados: {clear: both.} height especifica el alto. Con el valor pre se comportan como si utilizarámos la etiqueta PRE (se conservan los espacios). varios espacios seguidos se convierten en uno solo. Puede ser: disc (un círculo relleno).{border: 3px black double} width especifica el ancho.} . Con el valor normal. square (un cuadrado). o un porcentaje del elemento padre: {width: 100px. una longitud. Con el valor nowrap sólo se producen saltos de línea donde haya etiquetas BR: {white-space: nowrap. a la derecha (right) o que no es un objeto flotante (none): {float: right.} list-style-type establece el estilo de numeración de la lista. una longitud. circle (un círculo hueco). Puede ser auto. upper-alpha (letras mayúsculas) o none (ningún marcador): {list-style-type: disk.} display indica si un elemento es en bloque (block). Puede ser auto.} clear indica si un elemento puede tener objetos flotantes a sus lados. lowerroman (números romanos en minúscula).} float indica que un elemento flota a la izquierda (left). si es un objeto de lista (list-item) o si no debe ser representado (none): {display: block. decimal (números). Con clear el elemento se mueve hacia abajo hasta quedar debajo del objeto que flota.

list-style-position indica dónde se coloca el marcador y puede tomar los valores inside (interior) y outside (exterior): {list-style-position: inside.} list-style resume todas las anteriores (tipo.} . margen): {list-style: url(URLimagen) circle. posición.