Ahora que ya sabes qué es el CSS y conoces sus conceptos básicos, es hora de profundizar un poco más en la estructura del lenguaje en sí. Ya hemos visto muchos de los conceptos que aparecen en este artículo; puedes volver para recapitular si más adelante encuentras conceptos confusos.
Aplicar CSS al HTML
Lo primero que veremos son los tres métodos para aplicar CSS a un documento. En Empezar con el CSS, vinculamos una hoja de estilo externa a nuestra página. Este es el método más común y útil para adjuntar CSS a un documento, porque puedes vincular el CSS a varias páginas y dar estilo a todas ellas con la misma hoja de estilo. En la mayoría de los casos, las diferentes páginas de un sitio web se verán más o menos iguales, de modo que puedes usar el mismo conjunto de reglas para el aspecto y la interacción básicos. Una hoja de estilo externa significa que el CSS está escrito en un archivo independiente con una extensión .css y que lo vinculas desde un elemento <link> de HTML:
<html><head>
<metacharset="utf-8" />
<title>Mi experimento CSStitle>
<linkrel="stylesheet"href="styles.css" />
head>
<body><h1>¡Hola, mundo!h1>
<p>Este es mi primer ejemplo de CSSp>
body>
html>
El archivo CSS podría parecerse a esto:
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
El atributo href del elemento <link> tiene que hacer referencia a un archivo de tu sistema de archivos.
En el ejemplo anterior, el archivo CSS está en la misma carpeta que el documento HTML, pero puedes colocarlo en otro lugar y especificar la ruta adecuada. Por ejemplo:
<!-- Dentro de un subdirectorio llamado styles dentro del directorio de trabajo --><linkrel="stylesheet"href="styles/style.css" /><!-- Dentro de un subdirectorio llamado general, que está en un subdirectorio llamado styles, dentro del directorio de trabajo --><linkrel="stylesheet"href="styles/general/style.css" /><!-- Sube un nivel de directorio, y luego dentro de un subdirectorio llamado styles --><linkrel="stylesheet"href="../styles/style.css" />Esto puede ser útil en algunas circunstancias (tal vez estés trabajando con un sistema de administración de contenido donde no sea posible modificar los archivos CSS directamente), pero no es tan eficiente como las hojas de estilo externas: en una página web, deberías repetir el CSS en cada página y actualizarlo en varios lugares en caso de que hubiera que hacer cambios.
Estilos en línea
Los estilos en línea son declaraciones CSS que afectan a un solo elemento, contenido dentro de un atributo de style:
¡No hagas esto a menos que realmente tengas que hacerlo! Es realmente malo a la hora de realizar el mantenimiento (puede que tengas que actualizar la misma información varias veces en un mismo documento), y además mezcla tu información CSS para la presentación con tu información HTML para la estructura, lo que dificulta la lectura y la comprensión del código. Mantener los diferentes tipos de código separados facilita trabajar con ellos.
