Hojas de Estilos - CSS (Cascade Style Sheet)


Enlace a una hoja de estilo

<link rel="stylesheet" href="style.css">
Donde el fichero style.css contiene las reglas de estilo. La otra opcion es indicar las reglas en la propia cabecera de la pagina utilizando las etiquetas:
<style type="text/css"> reglas de estilo </style>
De esta manera estan realizados los ejemplos de este fichero.

Sobre Espaciados

Indicar los margenes de la pagina
<style type="text/css" >  
    body { margin-left: 10%; margin-right: 10%; font-family: Garramond}
</style>
Especificar la identaciones en el lado izquierdo y en el lado derecho
<style type="text/css">
	body { margin-left: 10%; margin-right: 10%; }
	h1 { margin-left: -8%;}  
	h2,h3,h4,h5,h6 { margin-left: -3%; }
</style>
Controlar los espacios en blanco inferior y superior
h2 { margin-top: 8em; margin-bottom: 3em; }

Especificar los valores mediante la unidad em es muy util, ya que escala con el tamaño de la fuente. De esta forma podemos preservar el aspecto general de la Web, independientemente del tamaño de fuente que seleccione el usuario en el navegador. Otras unidades como pixeles o puntos, son las que nos pueden dar problemas de redimensionado.


Para especificar un espaciado inferior para una cabecera cualquiera, deberemos crear un estilo con nombre, para luego poder utilizarlo como valor para el atributo class dentro de dicha cabecera.


La regla de estilo para el espaciado inferior deberia escribirse como:

h2.subsection { margin-top: 8em; margin-bottom: 3em; }

Ejemplo de <h2 class=subsection>

Sangria francesa (primera linea identada)
p { text-indent: 2em; margin-top: 0; margin-bottom: 0; }

Controlando las fuentes

Estilo/Familia

Lo usual consiste en modificar el estilo de texto a negrita o cursiva, pero podriamos ser un poco mas originales ampliando las funciones de las etiquetas. Por ejemplo, hagamos que em muestre texto en negrita cursiva y strong sea negrita mayusculas.

em { font-style: italic; font-weight: bold; }
strong { text-transform: uppercase;  font-weight: bold; }

Asi queda texto en em y ahora texto en strong. En este otro ejemplo, la cabecera de nivel tres aparecera siempre en minuscula.

h3 { text-transform: lowercase; }

... y AQUI lo Estamos ProBando escriBIENDO A DreDE en MAYUSCULAS

Tamaño de la fuente

Todos los navegadores usan un tamaño por defecto para los encabezados. Si personalizas y cambias dicho tamaño corres el riesgo de que el texto quede demasiado pequeño como para ser legible, sobre todo si utilizas puntos como unidad. La recomendacion dada desde aqui es utilizar siempre unidades relativas (porcentajes).


Ejemplo:
h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 100%; }
Cambios en el tipo de letra

Seguramente tu tipo de letra favorito no esta disponible en todos los navegadores. Para que nuestra Web sea todo-terreno y este preparada para todos los casos, podemos indicar varios tipos de letras en orden de preferencia de forma que podamos garantizar que al menos una existira y conoceremos el aspecto de nuestra web.
Las fuentes mas comunes son: serif, sans-serif, cursive, fantasy, o monospace, por citar algunas:

body { font-family: Verdana, sans-serif; }
h1,h2 { font-family: Garamond, "Times New Roman", serif; }

En este ejemplo se le da preferencia a Verdana sobre Sans-Serif y a Garramond sobre Times New Roman. Los segundos seran utilizados en caso de que los primeros no esten disponibles.
Primera Regla de oro: No escribas nada que no quede dentro de alguna etiqueta, de otra forma no podras asegurar el aspecto de la pagina a ciencia cierta.
Segunda regla de oro: Indica siempre los parametros de la fuente para la etiqueta pre, ya que algunos navegadores no muestran correctamente los valore de preformato (texto tal y como esta escrito).

pre { font-family: monospace; }
Tercera Regla de oro: No olvides tampoco establecer el tipo de letra para encabezados, parrafos y elementos de lista. Esto es importante sobre todo si piensas incluir bordes o fondos del estilo a div, ya que en algunos casos el navegador no utiliza correctamente el tipo de letra heredada y utiliza la existente por defecto. Es un bug o error solucionado en las versiones recientes.
h1,h2,h3,h4,h5,p,ul { font-family: sans-serif; }

Bordes al texto

Es posible añadir bordes a las cabeceras, listas, parrafos o cualquier grupo de texto que quede encerrado en la etiqueta div. Por ejemplo:
div.box { border: solid; border-width: thin; width: 100% }
El contenido del elemento DIV se visualizara rodeado de un borde, como en una caja

Los tipos de bordes existentes son: dotted, dashed, solid, double, groove, ridge, inset y outset. Intenta probarlos.
Otro ejemplo para hacer una caja con color de fondo y sin bordes:

  div.color {
    background: rgb(204,204,255);
    padding: 0.5em;
    border: none;
  }
Esto si que queda chulo

Las propiedades de cada borde se pueden tratar de forma independiente usando los atributos border-left, border-top, border-right y border-bottom junto al sufijo apropiado para cada propiedad en cuestion: style, width o color.
Por ejemplo:
  p.cambiado {
    padding-left: 0.2em;
    border-left: solid;
    border-right: none;
    border-top: none;
    border-bottom: groove;
    border-left-width: thin;
    border-color: red;
  }

Es muy interesante lo que se puede hacer con CSS

Colores

Los colores se pueden especificar en los atributos color y background, pudiendo dar su valor en RGB en un rango de 0 a 255 (ej. rgb(255, 0, 0) para rojo), hexadecimal (ej. #FF0000 para rojo) y tambien mediante su nombre en ingles (ej. red).
  body {
    color: black;
    background: white;
  }
  strong { color: red }
Los colores son a su vez parametros de los enlaces:
  :link { color: rgb(0, 0, 153) }      /* para enlaces no visitados */
  :visited { color: rgb(153, 0, 153) } /* para enlaces visitados */
  :active { color: rgb(255, 0, 102) }  /* en el momento de pinchar */
  :hover { color: rgb(0, 96, 255) }    /* cuando el raton esta sobre el enlace */
Vamos a añadir dos tipos de enlaces internos aqui para probar los estilos anteriores. Intenta probar los cuatro estados anteriores
Con lo anterior has podido comprobar que la distintion de varios colores para un enlace proporciona un bonito efecto. En todo el tema de la decoracion del texto, cada uno tiene su estilo y podemos plantearnos tener enlaces sin subrayados. Esto se haria con la siguiente regla:
a.plain { text-decoration: none }
Lo que nos daria un enlace a ningun sitio sin subrayado.

A continuacion se muestra una tabla que muestra los 16 colores que podemos nombrar en HTML.

Nombres de los colores y sus valores en RGB
black = "#000000" green = "#008000"
silver = "#C0C0C0" lime = "#00FF00"
gray = "#808080" olive = "#808000"
white = "#FFFFFF" yellow = "#FFFF00"
maroon = "#800000" navy = "#000080"
red = "#FF0000" blue = "#0000FF"
purple = "#800080" teal = "#008080"
fuchsia = "#FF00FF" aqua = "#00FFFF"

Tablas

La tabla anterior se ha construido utilizando la siguiente regla:
  table {
    margin-left: -4%
    font-family: sans-serif;
    font-size: 80%;
    border-width: 2;
    border-color: white;
  }
Podemos diferenciar distintos estilos de tablas gracias a las clases.
  table.guay {
    margin-left: 44%
    font-family: comic sans ms;
    font-size: 80%;
    background: lightblue;
    border-width: 3;
    border-color: navy;
  }
  td { font-family: sans-serif; font-size: 80%; color: green; font-weight: bold; }
  td.shaded { background: rgb(255, 255, 153) }
  th.shaded { background: rgb(204, 204, 153) }
Aqui tenemos una muestra de una tabla class=guay:

Titulo 1 Titulo 2 Shaded
Tabla con estilo "guay" sg
Celda con estilo "shaded" sg
Tabla con estilo "guay" sg