En esta ocasión, te voy a enseñar las tres formas que tienes para añadir estilos CSS a las páginas html.
Estilos CSS en etiquetas html
El primer sitio donde puedes escribir CSS, es directamente sobre la mayoría de las etiquetas html mediante el atributo style.
Esta es la forma menos recomendable, puesto que para cambiar algo en todas las páginas de un sitio web, tendremos que editar cada página, estilo por estilo. Aquí tienes un ejemplo de uso:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Página HTML básica</title>
</head>
<body style="background-color: rgb(0, 132, 255);">
</body>
</html>Este estilo cambiará el color de fondo de la página. Afecta a la etiqueta a la que se le aplica. Puesto que el <body>, es todo lo que se le muestra al usuario en la página, se aplica ese estilo a toda la página.
Estilos CSS en las etiquetas <style> de html
El segundo lugar, es en una hoja html, dentro de unas etiquetas html llamadas <style>.
Gracias a <style> de html, podemos crear una zona en cada página html donde ir colocando los estilos para todo el documento.
Sin embargo, esta práctica también, presenta problemas de edición, puesto que si queremos modificar estilos en todo el sitio web, tendremos que editar página por página y modificarlos. Aquí tienes el mismo estilo de antes aplicado al fondo de la página:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Página HTML básica</title>
<style>
body {
background-color: rgb(0, 132, 255);
}
</style>
</head>
<body>
</body>
</html>Estilos CSS en una hoja externa
Finalmente, se puede utilizar una hoja externa con extensión .css. Esta es la forma más recomendable, dado que los estilos que escribamos en ella, se podrán aplicar a todas las páginas donde la enlaces.
Vamos a crear la hoja CSS. Para no liarte con las rutas de los archivos, crea el archivo test.css (o el nombre que quieras con extensión .css) en la raíz del proyecto junto al archivo .html.
En esta hoja, escribe lo siguiente. No hace falta que entiendas esta sintaxis todavía.
body {
background-color: rgb(0, 132, 255);
}Deja la página html así, sin estilos:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Página HTML básica</title>
</head>
<body>
</body>
</html>Ahora, solo queda enlazar esta hoja de estilos a la página html, para que sus estilos la modifiquen. En este caso, solo será un estilo para el color de fondo, pero pueden ser miles de estilos en páginas muy complejas.
Enlazar una hoja de estilos CSS
Para enlazar una hoja de estilo CSS en una página html, solo tienes añadir la siguiente etiqueta en el <head>:
<link rel="stylesheet" type="text/css" href="test.css">
Te quedará así:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Página HTML básica</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
</body>
</html>Lo único que tienes que modificar según donde tengas la hoja CSS, es el atributo "href". Ahí se indica la ruta donde está ubicado.
Puesto que tengo el archivo test.css en la misma carpeta que el archivo html, no hay que indicar más que su nombre.
El resultado es que sin tener estilos directos en la página html, estamos modificándola gracias a CSS.
