Para aplicar los estilos que nosotros queramos a los elementos HTML de nuestra página, hay que crear un sistema para que la página sepa a que elementos aplicar cada una de la reglas. Hay tres técnicas para aplicar nuestros estilos CSS a los elementos HTML.
Tabla de contenidos
Estilos en linea o embebido
La forma más sencilla es incluir dentro de cada uno de los elementos HTML un atributo llamado style.
<p style='background: blue; color: white; padding:5px;'>Esto es una etiqueta de párrafo</p>
En esta declaración, que se hace en el mismo documento HTML, indicamos al navegador que la etiqueta párrafo ha de tener un fondo de color azul, un texto de color blanco y un espacio interior desde el borde de la etiqueta al texto de 5 píxeles por todos lados.
Es la manera más fácil y rápida, pero es la más desaconsejada. Porque la mayor utilizada que podría tener es que sirve para hacer pruebas rápidas sobre los mismos elementos, pero hoy en día hay herramientas en línea que pueden cubrir esas necesidades. El peor de los efectos de trabajar así es que tendría que repetir esta operación para cada uno de los elementos, y eso podría hacer augmentar mucho tu código, además de ser muy poco reutilizable y difícil de mantener.
Estilos incrustados
Esta forma de implementar los estilos consiste en declararlos dentro de la etiqueta <head> del documento HTML. Se declaran los estilos dentro de una etiqueta <style>. Tiene la ventaja sobre los estilos en línea en que no hace falta añadir un atributo a cada elemento y los estilos se pueden aplicar a todos los elementos con una única definición:
<head>
...
...
<style>
p {
background: blue;
color: white;
padding: 5px;
}
</head>
Como podemos ver, en esta ocasión hemos hecho la misma declaración anterior, pero se aplicará a todos los elementos de tipo <p>, por lo que hemos ahorrado bastantes líneas.
Este forma también está desaconsejada, ya que el objetivo es hacer los archivos HTML y CSS totalmente independientes, además de poder aplicar estilos a varias páginas HTML diferentes.
Hojas de estilo externas
Las hojas de estilo externas nos permiten poner todas las definiciones del CSS en un archivo independiente. La forma de vincular el CSS con el documento HTML es mediante una declaración dentro del <head> mediante la etiqueta <link>.
<head>
...
...
<link rel='stylesheet" href='styles.css' type='text/css'>
</head>
Con el atributo rel='stylesheet' indicamos el tipo de relación que tiene el archivo externo con el HTML, es decir, es una hoja de estilos. En el atributo href='stles.css' indicamos el nombre del archivo que vinculamos. Y en el atributo type='text/css' indicamos el lenguaje en el que está escrito el archivo vinculado. Este atributo es opcional, ya que actualmente no hace falta indicar al navegador el lenguaje porque siempre es el mismo.
Es este caso, hemos declarado el vinculo con el archivo externo llamado styles.css en el cual tenemos la siguiente declaración:
p {
background: blue;
color: white;
padding: 5px;
}
Como podemos ver, son exactamente los mismos estilos declarados en las dos versiones anteriores, pero esta vez sólo pondremos la declaración del estilo. Que se aplicará a todos las etiquetas <p> de todas las páginas HTML que apunten a él.
Los archivos externos son la manera más utilizada y la más idónea, ya que cambiando un solo archivo podemos cambiar de una vez muchas páginas de nuestra Web. Además, para su mantenimiento es mucho más sencillo y el navegador carga el archivo una vez, almacenándolo en la memoria cache. Con lo que queda preparado para aplicar los estilos a otras páginas a las que hace referencia y además más rápido.
Deja una respuesta