3 Formas de incluir css en html
La primera es escribir css directamente en html, mientras que la segunda forma es insertando un archivo css en html para separar el código y tener un poco más de orden, la tercera es colocar pequeños fragmentos de css en cada etiqueta.
Forma 1: CSS interno
Cuando hablamos de «css interno» nos referimos a incluir directamente css en html mediante la etiqueta <style> que va dentro de la etiqueta <head>.
Ejemplo:
<head>
<style>
body {
background: gray;
}
p {
color: blue;
margin: 10px 10px;
}
</style>
</head>
Forma 2: CSS externo
El CSS externo es cuando el «css» esta en su propio archivo (ej. style.css), el cual está enlazado o vinculado a un documento html.
¿Cómo insertar un archivo css en html?
Dentro de la etiqueta <head> añadimos la etiqueta <link>.
Ejemplo:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
Donde:
link: La etiqueta <link> es usada para enlazar hojas de estilo, iconos entre otros.
rel: El atributo «rel» describe la relación entre el documento actual y un recurso externo.
type: Este atributo especifica que tipo de archivo será vinculado, algunos de los valores que toma este atributo son: «text/html», «text/css», «image/x-icon» etc.
href: El atributo «href» especifica la ubicación del documento vinculado.
Nota: Si no se añade el atributo type, el navegador buscará en el atributo rel para saber que archivo se esta incluyendo.
Forma 3: CSS en línea
Es cuando le damos estilo a una etiqueta de html en específico, la sintaxis es diferente ya que el estilo va escrito como valor del atributo «style».
<!DOCTYPE html>
<html>
<body style="background:black;">
<h1 style="color:fuchsia;padding:30px;">Título</h1>
<p style="color:#CDDC39;">Esto es un párrafo.</p>
</body>
</html>
