Existen tres formas de aplicar los estilos a nuestro código HTML:
- Directamente sobre un elemento: podemos aplicar el estilo a un bloque concreto de HTML, utilizando el atributo style. Es decir, dentro de una etiqueta definir cómo será su aspecto. Obviamente no es la mejor manera de proceder porque tendríamos que definir bloque por bloque.
Ejemplo:
<p style="font-size: 12pt; color: #000000">. Aquí estamos definiendo sobre este párrafo en concreto que la letra sea de tamaño 12 y de color negro. Esto no se aplicará sobre ningún párrafo más. - En el propio documento: se pueden declarar los estilos en la cabecera del documento para poder utilizarlo en cualquier parte del HTML. Para ello se colocan entre las etiquetas
<style>..atributos..</style> - En un documento externo: creando una hoja de estilos ubicada en un fichero externo con extensión .css. En mi opinión es la forma más elegante puesto que hace que nuestra página HTML quede más simple al no incluir todas las líneas de estilo (sólo sería necesaria la declaración del lugar en el que se encuentra el .css). Además, con esta forma queda aún más clara la separación entre contenido y presentación.
Para hacer referencia a una hoja de estilos externa desde un documento HTML se pueden utilizar también dos métodos:
- El elemento
<link>. Una vez hecho link, se pueden utilizar los estilos de la misma manera que si estuviesen definidos en el propio documento. - El elemento @import. Por ejemplo:
@import «estilos.css»;
@import url(«/estilos/estilos.css»);
Ejemplo:
<head>
...
<link href="hoja_de_estilos.css" rel="stylesheet" type="text/css">
</head> - El elemento
Ejemplo:
<head>
...
<style type="text/css">
h1
{
border-width: 1;
text-align: center
}
</style>
</head>
Aquí hemos definido todas las cabeceras que se encuentre entre la etiqueta <h1>. Como vemos, la etiqueta <style> tiene un atributo denominado type donde se define el tipo de la hoja de estilo. Puede tomar los valores: «text/css» y «text/javascript».
10 respuestas a «¿Cómo aplicamos el CSS?»
me parece muy interesante todo lo que nos estas explicando. ¿Nos pondrás también ejercicios prácticos? 😀 Muchísimas grácias, no hay nada mejor que aprender mientras miramos tus blogs. El BOFH me encanta, trabajo de Help Desk, así que entiendo muy bién todo lo que explicais 😀
Bueno, que me voy que estamos en el curro 😉
Grácias de nuevo!!!
Pues sí que os tendré que poner deberes, y como nos los hagáis… 😀
Existe una variante del caso #3 muy interesante. Es la directiva @import.
Mejor explicado:
http://www.tierradenomadas.com/tw007.phtml
Por cierto muy bueno todo lo que llevas explicado. 😉
Saludos. 🙂
Como ya han dicho (corsaria), para enlazar a hojas de estilo externas, está @import. Es preferible el uso de @import antes que link en lograr una web semántica. En el caso que uses estilos alternativos, puedes utilizar link como enlazador.
Muchas gracias por el aporte corsaria y eyko. Ya he actualizado la entrada (así da gusto aprender de forma colectiva)
Andereño, andereño ;-)… ¿es cierto que si se usa un css externo los lectores de feeds no se enteran y no aplican el estilo que queremos?
@Mak: yo diría que no es cierto. De hecho, este blog tiene un css externo y sí se aplica. Sin embargo, te lo digo con la boca pequeñita ;-).
Pues Bloglines, por ejemplo, saca los titulos de los posts en azul, en lugar de en rojo…
@Mak: Pero es que de lo que se alimenta Bloglines es de los feeds y no estoy muy segura de que esos feeds carguen css o los mismos css que el blog normal.
[…] es que no hace mucho Loretahur escribió un post sobre las diversas formas de añadir los estilos a una página web, a partir del cual, entre los […]