La Hoja de Estilos CSS

Para crear la Hoja de Estilos vamos a utilizar el NotePad o Block de notas de Windows. De esta manera comprenderemos su funcionamiento mejor que si nos la hace el FrontPage, DreamWeaver, etc. y nos ayudará a familiarizarnos con los Estilos CSS aún más. No temas, no muerden ;=)

Quizás esta sección sea la más laboriosa, no por su dificultad, sino por la cantidad de opciones que hay. Por supuesto, antes de empezar a crear tipos y tipos de estilos, hemos de saber que estilos son los que nos van a hacer falta. Normalmente te definen conforme los necesitamos e incluso una vez definidos se van modificando hasta dar con las características que más nos agradan. Ya verás, son algo vivo!

Por ello, es necesario que antes de ponerse con esto, apaguéis la luz de la habitación, cerreis la puerta y los ojos, os sentéis comodamente y os imagineis como queréis estructurar la web. Cuantos tipos distintos de estilos vais a necesitar. No obstante, más adelante podéis añadir más tipos e incluso (y esta es la gran ventaja) reformarlos fácil y rápidamente.

Os pongo el ejemplo que mejor conozco, el de ComoCrearTuweb. En esta web hay unos cuantos tipos de estilos distintos que os paso a comentar (algunos habrán cambiado con el tiempo,claro).

  • Tipo Titulo: Para mostrar los títulos de algunas secciones he utilizado el estilo predeterminado H1, pero lo he variado un poco, pues lo quería de color azul y con un tamaño algo mayor.
  • Tipo Parrafo: Uso también el predeterinado pero reformado, pues deseaba que la letra tuviera otro tamaño, unos margenes a mi gusto y una sangría en la primera línea (la sangría es que la primera línea esté un poco metida dentro del parrafo, tal y como véis en los parrafos de arriba.).
  • Tipo Subtítulo: Este no es predeterminado, sino que lo he definido por completo. Lo quería azul, en negrita y subrayado entre otras cosas. Este tipo es el que uso en estas líneas.
  • Tipo enlace: Los uso para que aparezcan siempre de color azul y en negrita, y para que cuando pongáis el ratón sobre ellos se vuelvan rojos y verdes cuando pinchais sobre ellos. Estas dos últimas cosas no funcionan en el Netscape, o en versiones antiguas, pero la página se ve correctamente a pesar de eso.
  • Tipo Código: Esta basado en el tipo predeterminado "code", pero ligeramente variado a mi gusto. Ya lo conocéis, es con el que suelo mostrar los códigos html.
  • Tipo Lista: es el usado en esta lista de tipos. Es también predeterminado pero reformado por mi para darle unos margenes más estrechos, un tamaño de letra algo menor, etc.
  • Tipo Cuerpo o body: Lo uso más que nada para dejar definido el fondo de pantalla, así me ahorro de especificarlo en cada una de las páginas. Solo pongo BODY y ella ya sabe que tiene que meterle el fondo de pantalla que le especifico en la Hoja de Estilo.
  • Tipo resaltado: Lo utilizo cuando quiero resaltar una palabra, como por ejemplo, esta palabra.

Por supuesto hay un montón de posibilidades más, pero dependen de la imaginación que le echeis cada uno. Por ejemplo, podeis crear un estilo que haga que al aplicarlo a un parrafo, este se muestre en la página con un color de fondo determinado, como por ejemplo este:

Hola amiguetes de CreaTuWeb. Esto es muy rápido de hacer con estilos. Sin ellos se puede hacer también, pero creando una tabla, poniendole color de fondo, metiendo el texto, etc, etc. En fin, un rollo que os podéis ahorrar muy facilmente con los Estilos.

Como este estilo solo lo uso en esta página en concreto, en lugar de definirlo en la Hoja de Estilos, lo he definido en la cabecera de esta página tal y como os he comentado anteriormente.

En las siguientes páginas os muestro como crear nuevos estilos y como retocar los ya predeterminados. Ahora si que queda menos!!!