¿Cómo llamamos al CSS desde el HTML?

ENTRADA_07Llegamos al punto en el que ya conocemos las bases del HTML y del CSS y tenemos claro que debemos referenciarlos para poder tener nuestra página web con estilo.

Podemos hacerlo de tres formas diferentes. La más recomendada  es a partir de un archivo externo. Esto lo hacemos dentro de las etiquetas <head> </head>, escribiendo una etiqueta link con el atributo href indicando el nombre de la hoja de estilo o la ruta, es decir la dirección absoluta (http:// etc…) o puede ser local si referenciamos a un archivo que tenemos en una misma carpeta o subdirectorio del proyecto. Con esto vamos a poder diferenciar el archivo HTML del CSS. Por ejemplo:

<html>
<head>
<meta charset=”utf-8″>
<title>Mi Proyecto Web</title>
<link href=”estilo.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
</body>
</html>

Esta es la mejor práctica por razones de orden y comodidad, dado que podemos referenciar varios documentos HTML al mismo tiempo.

Las otras dos formas de referenciar serán desde el mismo documento HTML.

La segunda será también dentro de la etiqueta <head> </head>, creando una etiqueta <style> </style> e incluyendo dentro los estilos sin referenciar a un archivo externo. Por ejemplo:

<html>
<head>
<meta charset=”utf-8″>
<title>Mi Proyecto Web</title>
<style type=”text/css”>
.clase1 {color: #FFF; font-size:1em}</style></head>
<body>
</body>
</html>

La tercera forma, es referenciar desde el elemento mismo a partir de la propiedad en línea de la etiqueta <style>. Directamente aplicamos una propiedad y un valor CSS en línea separando con ; (punto y coma), si incluimos más de un estilo.  Ejemplo:

<html>
<head>
<meta charset=”utf-8″>
<title>Mi Proyecto Web</title>
</head>
<body>
<div style=”color: #FFF; background-color: #000;”>
</div>
</body>
</html>

Con este tema más los posteos anteriores, completamos lo básico necesario para empezar a trabajar en la diagramación de nuestra página web desde cero. En la próxima entrada ya empezaremos a hablar del texto y la tipografía.

Los comentarios están cerrados.