[Indice]

Escribiendo hojas de estilo

Elementos modificables con CSS

O mejor dicho, atributos de elementos que pueden modificarse con CSS. 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>, etc., y al aplicar estilos, no es buena idea escribir nada fuera de estos elementos. Veamos en qué zona de la pantalla actúa 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.

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

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.

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í. uppercae 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.

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

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:

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]