¿Cómo incluir los Css en Html?

Existen dos formas para incluir los estilos Css. Una forma es incluirlo dentro de la misma hoja de Html y la otra es realizando un documento externo con la extensión “.css”

Dentro de html tiene que ir especificado dentro de la etiqueta <head> y se utiliza una etiqueta de apertura <style> y cierre </style>

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Dentro de html</title>
	<style>
		h1{color: red;}
	</style>
</head>
<body>
	<h1>Me cambiaron a color Rojo con Css</h1>
</body>
</html>

La otra forma es “llamando” a una hoja externa de Css (esta es la forma políticamente correcta)

Tienes que llamar a una hoja Css también entre las etiquetas <head>

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Css Externo</title>
	<link rel="stylesheet" href="hoja-externa.css" type="text/css">
</head>
<body>
	<h1>Me cambiaron a color Rojo con Css</h1>
</body>
</html>

rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet

type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css

href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.

La “hoja-externa.css” tendría el siguiente aspecto para cambiar el color de los títulos h1 (al igual que vimos en el ejemplo de los estilos dentro de la hoja html).

h1{
	color:red;
}