Normas básicas de CSS (2)

Vamos a añadir algo más:

<STYLE>
.enlaces { FONT-SIZE: 11px; COLOR: #003399; FONT-FAMILY: Arial;TEXT-DECORATION: none }

a:hover { COLOR: #cc3333; TEXT-DECORATION: underline }

H1 { font-family: Verdana; font-size: 16px; color: #CC0000; font-weight: bold}

H2 { font-family: Arial; font-size: 13px; font-weight: bold; color: #000099}

</SYTLE>

Aquí tenemos ya 4 clases:
- Una clase personalizada : .enlaces (o "custom class" en Dreamweaver. ¡no olvidar el punto!)
- 2 etiquetas redefinidas: H1 y H2 (en Dreamweaver: "Redefine HTML tag")
- 1 Pseudo-clase: a. hover, de la que hablaremos más adelante (y que en Dreamweaver aparece como "Use CSS Selector")

Ya se empieza a ver la verdadera fuerza de las clases: Todas las etiquetas H1 de tu sitio tendrían 16 píxeles y serían de color rojo, sin añadir nada de código en el cuerpo del documento. Conseguirías que en vez de tener que escribir:

<H1><font face="Verdana"color="#CC0000" size="2">El texto iría aquí</font></H1>

Usando CSS, quedaría en:

<H1>El texto iría aquí</H1>

Esto reduciría el tamaño de tus páginas, haría más fácil realizar cambios, y tus páginas cargarían más rápido. Si en vez de rojo quisiera que mis encabezados <H1> fueran azules, sólo tendría que modificar el archivo .css, en vez de tener que ir abriendo página por página y cambiando la etiquta <FONT>

Recuerda que cualquier etiqueta HTML puede ser redefinida. Esto significa que podrías cambiar el tamaño de tus textos en negrita (redefiniendo la etiqueta <B>). También podrías hacer que tus listas utilizaran una fuente diferente que el resto del texto simplemente redefiniendo la etiqueta <LI>. Lo que se te ocurra.

E incluso puedes definir varias etiquetas a la vez. Si quieres que todos tus encabezados sean rojos, sólo tendrías que poner:

<STYLE>
...
H1, H2, H3, H4, H5 { COLOR: #CC0000 }
...
</STYLE>

Usuarios que han visto este tema también han visto...

- La importancia de !important en CSS
- Personalizando las barras de scroll del navegador en CSS
- Textos con gradiente usando CSS
- Personalizar Mozilla para saber el tipo de enlace que pulsas con CSS
- Espacios en blanco con CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento