Tema 2Agregar CSS a Nuestro HTML
Ahora que conocemos el formato de CSS, ¿cómo podemos añadirlos a un documento HTML? Existen varias maneras de hacerlo, pero la más conveniente es creando un archivo .css y ligarlo a nuestro documento HTML. Esto se realiza de la siguiente manera:
-
Crea un documento .css: en VS Code haz crea un nuevo archivo desde el explorador de archivos (presionando este botón
), y
dale un nombre con la extensión css. -
En tu documento HTML, dentro del elemento <head> agrega una etiqueta <link rel="stylesheet" href="nombre-de-tu-archivo.css">
En el atributo href deberá contener la ruta a tu archivo .css. ¡Listo! Ahora tu documento CSS se aplicará a tu documento HTML.
Otras Formas de Usar CSS
Otra manera de agregar CSS a nuestro documento HTML es utilizando la etiqueta <style>. Esta etiqueta se coloca dentro de nuestra sección <head>, y dentro de ella se coloca nuestro código CSS. Si tienes múltiples documentos HTML, tendrás que copiar y pegar este elemento en cada una.
<head>
<style>
body{
background-color: blue;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
color: white;
margin-left: 100px;
}
</style>
</head>
La última forma es utilizando el atributo style dentro del elemento al que quieres modificarle su estilo.
<body
style="background-color: blue; font-size: 18px; font-family:
Arial, Helvetica, sans-serif; color: white; margin-left:
100px;>
La manera más conveniente es la primera, ya que podemos utilizar un mismo archivo para estilizar múltiples documentos HTML, y nuestro código se encuentra ordenado y separado. En el ejemplo anterior resulta un poco difícil de leer nuestro CSS en medio de nuestro código HTML. Para el segundo método, habría que copiar y pegar el contenido de la etiqueta <style> en cada documento nuevo, lo cual agrega líneas innecesarias a los documentos cuando queremos aplicar un estilo uniforme a múltiples páginas del sitio.