Las hojas de estilo CSS, son una novedad del lenguaje HTML 4.0. Las mismas permiten definir una serie de estilos para luego aplicarlos a una página o, incluso, a un grupo determinado.
Con las hojas de estilo CSS se puede, tanto modificar etiquetas (o TAGS) de HTML, como crear nuevos estilos. Por ejemplo, podríamos hacer que todas las tablas tengan color de fondo celeste y texto en color blanco, simplemente redefiniendo la etiqueta <table>.
Los estilos se definen de la siguiente manera:
<style type="text/css">
selector1,selector2{propiedad1:valor1;propiedad2:valor2}
</style>
Por ejemplo:
<style type="text/css">
A:link,A:visited{font-style:bold;color:yellow}
</style>
En este ejemplo todos los hipervínculos no visitados (A:link) y los visitados (A:visited) aparecerán en negrita (bold) y en amarillo (yellow)
Dónde definir las hojas de estilo
Los estilos se pueden definir en el encabezado de la página HTML (entre las etiquetas <head> y </head>) o en un archivo externo que llevará la extensión .css.
La ventaja de utilizar un archivo externo nos permitirá el uso de las definiciones de estilo en todas las páginas de nuestro sitio. De esta forma si queremos hacer algún cambio en el estilo de nuestras páginas, lo tendríamos que hacer en un único archivo (el CSS).
Cabe destacar que las hojas de estilo CSS no solo funcionan para dar formato al texto, sino también a las tablas, listas, párrafos y capas, entre otros.
Formas de definir los estilos
Existen varias maneras de definir estilos CSS ya sea tanto para redefinir las etiquetas standard, como para crear nuevos estilos.
• Definiéndolos y aplicándolos para determinadas etiquetas en todo el documento:
<style type="text/css">
H1{color:orange;font-style:italic}
</style>
En este caso H1 es la etiqueta del Titular de mayor tamaño y cada vez que se lo defina aparecerá en color naranja y en cursiva.
• Estilos "in line", que solo se utilizarán una vez y por esta razón se los define como valores de la propiedad style.
<p style="color:blue;background:lightblue;font-weight:bold">
Aca va un parrafo en azul, resaltado y en negrita
</p>
En este caso, el estilo se aplica a un párrafo.
• Como clases de estilos: podemos crear clases de estilos propios que usaremos, a voluntad, en las etiquetas que queramos. Para crear una clase, el nombre debe comenzar con un punto y no puede contener caracteres como acentos o eñes.
<stile type="text/css">
.textoarial{font-face:arial;color:#ffffff;font-style:bold;background:#000000}
</style>
Usuarios que han visto este tema también han visto...
- Evitar que una página se imprima en CSS
- Superposición de imágenes con CSS
- 70 ideas para crear mejores CSS
- Bordes Punteados con CSS
- Clases, pseudoclases y pseudoelementos en css
- Versión imprimible de este documento
- Enviar por e-mail este documentoInformación legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.