[Indice]

Escribiendo hojas de estilo

Elementos modificables con CSS

O mejor dicho, atributos de elementos que pueden modificarse con CSS. Son muchos (casi todos) los aspectos que pueden modificarse con CSS. Dado el carácter general de esta guia, aquí veremos solamente los más utilizados.

Generalmente se actúa sobre los siguientes:

Como bloque puede entenderse todo lo comprendido dentro de elementos con cierre, como <p> </p>, <form>   </form>, <table> </table>, <td> </td>, <div> </div>, etc., y al aplicar estilos no es buena idea escribir nada fuera de estos elementos. En lugar de ser un nombre de elemento HTML, un bloque también puede tener un nombre definido por el programador, por ejemplo "menu", y generalmente son éstos los que contienen en su interior a los anteriores o a otros bloques definidos por el usuario. El número de bloques en una página puede ser muy elevado (varios miles), y dependerá del navegador utilizado.

Veamos cómo funciona cada cosa:

Los Márgenes de bloque son el espacio comprendido entre el bloque y el borde de la ventana activa del navegador. Se controla con el atributo margin.

Los Bordes de bloque, sin aplicar estilos, no son visibles, y es como un cuadro imaginario que envuelve todo el contenido del bloque. Su atributo de control es border.

Espaciado interno del bloque es la distancia entre el borde del bloque y su contenido. Es el atributo padding (en inglés significa algo así como "acolchado")

El Estilo y color de los bordes, son evidentes: son las líneas que delimitan el bloque, que pueden dibujarse de varias formas en cuanto a tipo de trazo, grosor y color. Estos dos atributos también pueden actuar sobre los bordes de otros elementos contenidos dentro de un bloque, como formularios, tablas, gráficos, etc.

El Color del fondo se controla con las mismas instrucciones que las de la página HTML: background. Los parámetros de color, al igual que en HTML, se pueden escribir con su nombre (en inglés) o con la notación RGB en hexadecimal.

El Tamaño son las dimensiones del bloque. Si no se indican dimensiones, por defecto, el bloque ocupará todo el ancho de la ventana, y de alto lo que su contenido precise. Se utilizan dos atributos para controlarlo: width para el ancho y height para el alto.

Estilo del texto

Veamos los parámetros disponibles para dar estilo al texto. Como ya sabes, las unidades de medida aplicables a todos ellos son varias, pero para mayor claridad, en todos los ejemplos utilizaremos solamente el píxel: px. Sea por ejemplo la siguiente página: 

<HTML>
<HEAD><TITLE>Estilos</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">
</HEAD>
<BODY>

Texto fuera de párrafo.<BR>
Segunda línea fuera de párrafo.

<P>texto de párrafo. <BR> segunda línea de párrafo.</P>

</BODY>
</HTML>
Y si escribimos la siguiente hoja de estilo estilo.css: 

BODY {color:green }

P {color:red; 
   font-size:20px;
   font-family:Courier;
   font-weight:bold;
   font-style:italic;
   line-height:30px;
   letter-spacing:5px;
   text-decoration:underline;
   text-transform:capitalize;
   text-align:left;
   text-indent:30px;
  }
Se obtiene:

Texto fuera de párrafo.
Segunda línea fuera de párrafo.

texto de párrafo.
segunda línea de párrafo

Fíjate en la gran diferencia de estilo que hay entre las dos primeras líneas y las dos siguientes. Analicemos como funciona: Las dos primeras líneas de texto, en color verde, tienen todos sus valores por defecto, excepto el color que lo reciben de la etiqueta BODY definida en la css. Las dos siguientes, en rojo, reciben todas sus características de la etiqueta P, también definida en la css. Como puedes ver, hay una gran cantidad de atributos que actúan sobre el estilo de ese texto.

color:red;    Este ya lo conocemos. Define el color del texto. El color deseado puede escribirse directamente, en inglés, o puede utilizarse el sistema RGB en hexadecimal. Por ejemplo, este mismo color rojo en RGB sería: #FF0000;     Otra forma de declarar el color es mediante la función rgb() que puede parametrizarse en decimal o en tantos por ciento. He aquí un ejemplo con las tres formas: 


color: #ff0000 
color: rgb(255,0,0) 
color: rgb(100%, 0%, 0%)

Recuerda que en el índice tienes unas tablas con los nombres y códigos de los colores.

font-size:20px;    También muy conocido: define el tamaño de los caracteres. Además del tamaño definido por el usuario, expresado en cualquiera de las unidades de medida conocidas, puede tener alguno de los siguientes valores absolutos: xx-large   x-large   large   medium   small   x-small   xx-small.

font-family:Courier;    Indica el nombre (o nombres) del tipo de letra que se va a emplear. En el ejemplo se ha utilizado el tipo "Courier", pero pueden escribirse varios separados por comas, lo que indica al navegador que si no existe en la máquina el primer tipo, utilice el segundo, y si tampoco, el tercero, etc. Por ejemplo: font-family:Courier,Verdana,Arial;   
Cuando definas tipos de letra, recuerda que muchos programas y algunos drivers de impresora instalan sus propias fuentes en el sistema sin avisarte, y puede que en tu máquina haya tipos que no son estándar en Windows. No se deben utilizar tipos extraños que difícilmente se encontrarán en las máquinas de los clientes.

font-weight:bold;    Aquí se especifica el peso o grosor de la fuente. Pueden emplearse literales como lighter, normal (por defecto) o bold. También se pueden utilizar números entre 100 y 900, escritos de 100 en 100 (no sirve 190, pero sí 200). Los pesos no tienen los mismos resultados en todas las máquinas, ya que depende mucho de la calidad de su pantalla, de su resolución, del navegador que emplea... En cualquier caso, no deben hacerse combinaciones extrañas, como definir un size muy pequeño y darle peso 900, ya que lo único que conseguirás es un borrón perfectamente ilegible.

font-style:italic;    Solamente tiene dos posibilidades: normal (por defecto) o italic que es el empleado en el ejemplo que estamos analizando, y que hace que el texto tenga cierta inclinación.

line-height:30px;    Sirve para establecer la distancia entre líneas consecutivas de un mismo párrafo. Además de en píxels o alguna de las unidades de medida que ya conocemos, puede indicarse con un simple número que viene a indicar, aproximadamente, cuantas anchuras de línea se tomarán como unidad de medida para separar una línea de otra. Así, por ejemplo, si pones 0 la segunda línea se suporpone a la primera.

letter-spacing:5px;    Establece la separación entre los caracteres de la línea.

word-spacing:5px;    Establece la separación entre las palabras de la línea.

text-decoration:underline;    Con este parámetro, que no influye en el tamaño, puedes acompañar al texto de una delgada línea decorativa que puede estar en tres posiciones distintas, como underline (el típico subrayado debajo de la línea), through (en el centro de la línea -tachado-) o overline (encima del texto). Para que no aparezca se utiliza none (por defecto). El valor none se puede utilizar para eliminar el efecto de subrayado que ponen otros elementos, como ocurre en los links.

text-transform:capitalize;    Curioso efecto que provee de cuatro posibilidades: capitalize que convierte en mayúscula la primera letra de cada palabra del texto, como puedes ver en el ejemplo, donde el texto original no es así. uppercase para convertir todas las letras a mayúsculas y lowercase para lo contrario, es decir, convertir todas las letras a minúsculas. El valor por defecto es none, que como ya habrás supuesto, deja el texto tal como está escrito.

text-align:left;    Alinea el texto según convenga. Con left a la izquierda (por defecto), right a la derecha, center centrado, y justify justificado, es decir, igualando todas las líneas en longitud a izquierda o derecha.

text-indent:30px    Produce que la primera línea del párrafo se escriba adentrada (indentada) un cierto espacio hacia la derecha o hacia la izquierda, dependiendo de la alineación activa.

Este sería un resumen sobre la declaración font:

Declaración font-size font-family font-weight font-style
Valor por defecto medium Definido por el usuario normal normal
Valores posibles Absoluto, relativo, porcentaje,
unidad de tamaño		 Familia de fuente Windows normal, lighter, bolder,
un valor entre 100 y 900		 normal, bold, italic
Valor porcentual Se calcula respecto al padre No aplicable No aplicable No aplicable
Se aplica a Todos Todos Todos Todos
Se hereda? Sí Sí Sí Sí

Y este sobre el resto:

Declaración line-height text-decoration text-transform text-align text-indent
Valor por defecto normal none none left 0
Valores posibles número, longitud, porcentaje, normal none, underline, line-through, blink capitalize, uppercase, lowercase left, right, center, justify, none longitud, porcentaje
Valor porcentual Se calcula respecto al tamaño de la fuente No aplicable No aplicable No aplicable Se calcula respecto al ancho del elemento padre
Aplica a Elementos a nivel de bloque Todos Todos Elementos a nivel de bloque Elementos a nivel de bloque
Se hereda? Sí No Sí Sí Sí

Bordes de un bloque

Con css se pueden definir los bordes de un bloque, que por defecto son invisibles. Por tanto, lo primero que hay que definir es el estilo del borde. Además del estilo, se puede definir su color y grosor, y todo ello puede hacerse globalmente, sobre los cuatro lados del bloque, o cada uno por separado. Las unidades de medida y los nombres o códigos de colores que pueden utilizarse, son los mismos que ya se han visto anteriormente para los textos. Para definir el grosor de los bordes tenemos: Donde unidad es una de las ya conocidas, por ejemplo 1px. También pueden utilizarse constantes tales como thin para fino (2px), medium para medio (4px), y thick para grueso (6px).

Ningun estilo de bordes (excepto solid) se lleva bien con el parámetro de grosor, que implícitamente establece su dimensionado más conveniente. Tenemos:

Donde estilo puede ser: Por último, los parámetros de color de los bordes: Donde color puede ser un nombre de color, en inglés, o su código RGB en hexadecimal, como ya sabes.

Las combinaciones de todos estos parámetros son infinitas, y lo mejor es ir haciendo pruebas. Recuerda que cada nevegador interpreta todo esto a su manera, y algunos no lo interpretan en absoluto. He aquí aplicado al ejemplo anterior sobre texto:

Si escribimos la siguiente hoja de estilo estilo.css: 

BODY {color:green }

P {color:red; 
   font-size:20px;
   font-family:Courier;
   font-weight:bold;
   font-style:italic;
   line-height:30px;
   letter-spacing:5px;
   text-decoration:underline;
   text-transform:capitalize;
   text-align:left;
   text-indent:30px;
   
   border-width:2px;
   border-color:blue;
   border-style:solid;
  }
Se obtiene:

Texto fuera de párrafo.
Segunda línea fuera de párrafo.

texto de párrafo.
segunda línea de párrafo

Y este sería un resumen de su utilización:
Declaración border-left-width
border-right-width
border-top-width
border-bottom-width
border-width		 border-style border-color
border-left-color
border-right-color
border-top-color
border-bottom-color
Valor por defecto 0 none none
Valores posibles Unidad de longitud,
thin, medium, thick		 none, solid, double, inset,
outset, groove, ridge		 none, color
Valor porcentual No aplicable No aplicable No aplicable
Se aplica a Todos Todos Todos
Se hereda? No No No

Márgenes de los bloques

Los bloques, por defecto, se escriben en la ventana activa comenzando en el ángulo superior izquierdo de la misma, y su contenido, en el interior del bloque, comienza en el mismo sitio. Esto es posible modificarlo:

Para los márgenes del bloque respecto a la ventana activa:

Donde unidad es una de las ya conocidas.

Para los márgenes dentro del bloque, es decir, respecto al borde del bloque:

En resumen:
Declaración margin
margin-left
margin-right
margin-top
margin-bottom		 padding
padding-left
padding-right
padding-top
padding-bottom
Valor por defecto 0 0
Valores posibles Longitud, porcentaje, auto Longitud, porcentaje
Valor porcentual Se calcula respecto al ancho del padre Se calcula respecto al ancho del padre
Se aplica a Todos Todos
Se hereda? No No

Dimensiones de los bloques

Como ya se ha dicho más arriba, por defecto, y en función de su contenido, el bloque ocupará todo el ancho de la ventana y el alto que precise. Al componer la página puede que esto no interese y se quiera limitar el espacio ocupado por el bloque. Para ello disponemos de dos parámetros cuyo valor por defecto es none: Sea, por ejemplo, la siguiente hoja de estilo estilo.css: 

P {color:red; 
   font-size:20px;
   font-family:Courier;
   border:2px;
   border-color:blue;
   border-style:solid;
   
   width:100px; 
   height:100px;
  }
Y este texto:

<P>Esto es un ejemplo de bloque de reducidas dimensiones que ocupa solamente 100 x 100 pixels</P>

Dependiendo del navegador utilizado, esta sintaxis provocará varios resultados:

Internet ExplorerOperaNetscape/Mocilla

Como puedes ver, los tres navegadores dan preferencia al texto, y luego... hacen lo que pueden. Es evidente que la instrucción que se les ha dado no es muy coherente, y para intentar solucionar el fiasco, se puede recurrir a un nuevo atributo: overflow que tiene cuatro parámetros:

Veamos un ejemplo utilizando scroll: 

P {color:red; 
   font-size:20px;
   font-family:Courier;
   border:2px;
   border-color:blue;
   border-style:solid;
   
   width:100px; 
   height:100px;
   
   overflow: scroll
  }

Se obtiene:

Esto es un ejemplo de bloque de reducidas dimensiones que ocupa solamente 100 x 100 pixels

De esto se deduce, una vez más, que hay que probar siempre el código escrito en cuantos navegadores sea posible.

Color o gráficos de fondo del bloque

Veamos por último cómo cambiar el color de fondo de los bloques. Sea, por ejemplo: estilo.css: 

P {color:red; 
   font-size:10px;
   font-family:Courier;
   border:2px;
   border-color:blue;
   border-style:solid;
   width:200px; 
   height:100px;
   
   background: yellow;   
  }

Esto es un ejemplo de bloque de reducidas dimensiones que ocupa solamente 200 x 100 pixels con fondo de color.

Como es habitual en HTML, los colores pueden definirse con su nombre en inglés o con la notación RGB en hexadecimal. En este caso, el color amarillo del ejemplo puede obtenerse también con background: #FFFF00;

Si en lugar de un color le quieres poner un gráfico la sintaxis será:

background-image: url(../imgenes/fondo.gif);

Esta opción tiene tres parámetros:

Estos tres parámetros adicionales (si se utilizan) hay que escribirlos después de haber indicado la imagen a emplear como fondo. Por ejemplo: 

P {color:red; 
   font-size:10px;
   font-family:Courier;
   border:2px;
   border-color:blue;
   border-style:solid;
   width:200px; 
   height:100px;
   
   background-image: url(fondo.jpg);  
   background-attachment: fixed;
   background-repeat: repeat;
   background-attachment: fixed;
  }

Esto es un ejemplo de bloque de reducidas dimensiones que ocupa solamente 200 x 100 pixels con fondo gráfico.

Gráficos y bloques flotantes

Dentro de un bloque, además de texto, pueden ir gráficos u otros bloques. Para conseguir que estos objetos se alineen respecto al texto que ya exista en el bloque, o para que se alineen varios bloques entre sí, se utiliza la instrucción float que puede tener tres parámetros: left   right   none (por defecto). Por ejemplo: 

p {color:red; 
   font-size:10px;
   font-family:Verdana;
   border:2px;
   border-color:blue;
   border-style:solid;
   width:200px; 
   height:100px;
  }

img {float: right;}
Se obtiene:

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

Después de haber utilizado una instrucción float en un bloque, para cerrar su efecto sobre la alineación de los objetos hay que escribir otra en el siguiente bloque: clear que también tiene un parámetro con tres posibles valores: left   right   both Evidentemente, habrá que utilizar left o right según se haya definido el float anterior, y si se han incluido los dos, se utilizará both (ambos).

Estilo de las listas

Es posible definir el tipo de las listas con CSS. Por ejemplo: 
ul {list-style-type:square;}
ol {list-style-type:upper-roman;}
El parámetro list-style-type puede tener los siguientes valores: Como puedes ver, aunque denominados de otra forma, coinciden con los definidos en la sección de las listas vistas en HTML.

Estilos en los links

Hay un elemento HTML que genera un estilo propio por defecto: <A>. Como ya sabes, los enlaces aparecen por defecto de otro color y subrayados, y cambian de color según hayan sido visitados o no. Estos efectos de estilo no definidos por el usuario se llaman pseudoclases. Hay dos posibles modificaciones de estilo para este elemento; el color del enlace en sus distintos estados y si aparece subrayado o no. Teóricamente no debiera influir el orden en que se escriban los distintos estados en la CSS, pero es mejor escribir las declaraciones en el siguiente orden (por supuesto, los colores son libres): 

a {text-decoration: none;}

a:link {color: #FF0000;}
a:visited {color: #00FF00;}
a:hover {color: #FF00FF;}
a:active {color: #0000FF;}
Donde link indica que el enlace no ha sido visitado, visited que el enlace ha sido visitado, active que el enlace está siendo pulsado, y hover que el ratón está pasando sobre él (sin pulsar).

Estilos en los formularios

Todo lo visto sobre los estilos, también es aplicable a los elementos de un formulario, bien desde las hojas CSS o en el código HTML del propio formulario. Por ejemplo el formulario:

Se escribe así: 

<FORM METHOD="GET" ACTION="">

   <INPUT TYPE="text" STYLE="background:yellow;color:red" NAME="campo1" 
       VALUE="Borde simple">

   <INPUT TYPE="text" STYLE="border:double;background:yellow;color:blue" NAME="campo2" 
       VALUE="Borde doble">

   <INPUT TYPE="text" STYLE="border:0;background:yellow;color:blue" readonly NAME="campo3" 
       VALUE="Solo lectura sin borde">

   <INPUT TYPE="button" STYLE="background:transparent;color:red" 
       VALUE="Botón transparente">

</FORM>
Este formulario tiene las instrucciones de estilo embebidas en el código html. Su equivalente utilizando hoja css sería: 
<FORM METHOD="GET" ACTION="">

   <INPUT CLASS="controles1"  TYPE="text" NAME="campo1"  VALUE="Borde simple" >

   <INPUT CLASS="controles2"  TYPE="text" NAME="campo2"VALUE="Borde doble">

   <INPUT CLASS="controles3" TYPE="text" readonly NAME="campo3" VALUE="Solo lectura sin borde">

   <INPUT CLASS="botones"  TYPE="button" VALUE="Botón transparente">

</FORM>
Y esta sería la hoja de estilo correspondiente: 
/* Hoja de estilo del formulario */
.controles1 {background:yellow;color:red;}
.controles2 {border:double;background:yellow;color:blue}
.controles3 {border:0;background:yellow;color:blue}
.botones {background:transparent;color:red}

En general..

En los formularios se puede cambiar el estilo de los bordes de los controles, pero no el grosor como se hace en los bloques de texto. Un formulario se puede considerar un bloque, por lo que también es posible cambiar el color del fondo, definir bordes, etc. Por supuesto, todo esto también es aplicable a las tablas, imágenes y al resto de elementos html.

Otro ejemplo de estilos

Algunas veces habrás visto páginas con textos que parecen gráficos. Algunos tipos, en efecto, solamente se pueden conseguir con editores gráficos, pero algunas veces son simples efectos de estilo. Veamos un ejemplo: 
all.texto {
  margin-top:-24px;
  color:yellow;
  font-size:20px;
  font-family:Verdana;
}
all.sombra {
  margin-top:2px;
  margin-left:2px;
  color:black;
  font-size:20px;
  font-family:Verdana;
}

<DIV ALIGN="CENTER" CLASS="sombra">Prueba de texto sombreado</DIV>
<DIV ALIGN="CENTER" CLASS="texto">Prueba de texto sombreado</DIV>
Se obtiene:
Prueba de texto sombreado
Prueba de texto sombreado

Y si en lugar de escribir una hoja css prefieres hacerlo con estilo embebido en el HTML, este es el código:

<DIV ALIGN="CENTER" STYLE="margin-top:2px; margin-left:2px; color:black;
font-size:20px; font-family:Verdana;">Prueba de texto sombreado</DIV>

<DIV ALIGN="CENTER" STYLE="margin-top:-24px; color:yellow; font-size:20px;
font-family:Verdana;">Prueba de texto sombreado</DIV>

[Indice]



Alojamiento con 500GB de espacio y 5000GB de ancho de banda por 4 euros al mes
Cómo contratar servicios de hosting con Dreamhost
Descuento, promocode para dreamhost de $50