Ahora aprenderemos a aplicar CSS en HTML. Hay varias maneras de incorporar estilos CSS a nuestros elementos creados con código HTML, y en esta lección abordaremos todo ello. Además, estableceremos cuándo, por qué y dónde usar cada una de estas formas.
Cómo se puede utilizar CSS
Existen tres formas bastante conocidas de emplear CSS para maquetar una página HTML y son las siguientes:
- Aplicar CSS en línea HTML mediante atributos.
- Incrustar el código CSS en una etiqueta <style> dentro del documento HTML.
- Crear un documento CSS externo.
CSS en línea empleando un atributo
Esta forma de utilizar CSS es la más básica y ampliamente conocida; de hecho, ya la habíamos empleado de alguna manera en el curso de HTML. Básicamente, consiste en especificar los estilos de un elemento HTML directamente dentro de su etiqueta de apertura, utilizando un atributo HTML.
El atributo style es la mejor opción para agregar estilos, y dentro de su valor se incluirán las propiedades y sus respectivos valores CSS.
Ejemplo de CSS aplicado en línea HTML.
<p style="color: red;"> este es un párrafo </p>
De esta manera se aplica un estilo determinado solo al elemento de la etiqueta, en este caso color de letra para el párrafo será rojo.
CSS incrustado en el documento HTML
Otra forma excelente de utilizar CSS en un documento HTML es incrustar el código CSS dentro de él. De esta manera, los estilos que deseamos aplicar afectarán no solo a un elemento, como en el caso anterior, sino que se aplicarán a toda la página.
Si en el caso anterior el style funcionaba como un atributo, ahora funcionará como una etiqueta HTML, con su correspondiente etiqueta de apertura y cierre, de la siguiente manera:
<style> /* Aquí irá todo el código CSS*/ </style>
Indicaciones:
- La etiqueta <style> contiene el código CSS que desea aplicar al documento HTML.
- <style> Será incrustado dentro de la etiqueta del documento para que funcione correctamente.
Ejemplo de código CSS incrustado en HTML
<html>
<head>
<title> TITULO</title>
<style>
p {color:red;}
a {}
#cabecera {}
</style>
</head>
<body>
</body>
</html>
CSS en un documento CSS externo
Esta es sin duda la forma más recomendable de aplicar estilos a documentos HTML, consiste en crear un documento CSS muy aparte y guardarlo con la extensión. CSS, por ejemplo: midocumento.css
- En el documento CSS se encuentren todos los códigos CSS que determinarán el estilo de todos los elementos HTML apuntados.
- Desde un documento HTML llamaremos al documento CSS para que se haga presente y aplique los estilos que hemos escrito en dicho documento CSS.
- Para realizar la invocación, emplearemos la etiqueta dentro de la etiqueta del documento HTML y mediante el atributo rel y href invocamos al documento CSS mediante su nombre. Veamos la sintaxis:
<html> <head> <title> TITULO</title> <link rel="stylesheet" href="midocumento.css"> </head> <body> </body> </html>
El atributo rel define la relación entre el documento HTML y el documento CSS vinculado. El valor stylesheet indica que se trata de un estilo preferido, mientras que rel="alternate stylesheet" define un estilo alternativo.
El atributo href se utiliza para invocar el documento CSS. Si el archivo está guardado en la misma carpeta que el documento HTML, simplemente debes colocar el nombre del archivo junto con su respectiva extensión, como en el ejemplo href="midocumento.css". Si el archivo CSS se encuentra en otra carpeta, será necesario especificar la dirección URL donde está ubicado.
Conclusión sobre las formas de emplear CSS en HTML
La elección de la forma de utilizar CSS en HTML dependerá de nuestros objetivos. Si queremos aplicar un estilo breve, específico y a un elemento HTML particular, podemos optar por CSS en línea.
El código CSS interno o incrustado, utilizando la etiqueta <style>, afectará únicamente el documento HTML en el que esté incrustado. Si contamos con pocos elementos y estilos, este método puede ser el más adecuado.
Por otro lado, los estilos CSS en un documento externo son los más recomendables para proyectos que abarcan varias páginas, e incluso miles. Este enfoque permite gestionar el estilo de todas las páginas desde un único documento CSS.