This article is currently in the process of being translated into Spanish (~99% done).
Linking CSS to HTML
Como ya se ha explicado, CSS contiene información acerca de cómo se deben presentar documentos de etiquetas de hipertexto (usualmente HTML) al usuario final. Esto significa que los dos lenguajes se tienen que enlazar juntos - el navegador necesita saber que quieres combinar una porción de HTML con una porción de código CSS. Para obtener el más alto nivel de flexibilidad, hay varias maneras de conseguir esto.
CSS integrado a través del atributo Style
Casi todos las etiquetas HTML incluyen el atributo Style, y usando este atributo, puedes especificar código CSS directamente para el elemento. Esto desaprovecha una de las principales ventajas de CSS, que es la re-usabilidad, ya que el código CSS aplicado con esta técnica solamente se aplica a cada elemento y no se puede re-usar para otros elementos.
Sin embargo, es una forma buena de realizar pruebas o de especificar reglas que se espera no sean reutilizadas nunca. Aquí se muestra como se puede usar:
<span style="color: Blue; text-decoration: underline;">Hello, CSS!</span>Nota que puedo definir varias propiedades para el mismo elemento, en este caso, reglas para definir el color del texto o para decorarlo. Esta es de lejos la forma más fácil de usar CSS ya que no involucra etiquetas o archivos adicionales, solo CSS definido localmente. Sin embargo, por razones ya establecidas, esta no es la forma preferida de usar CSS.
Otra desventaja, es el hecho de que el código asociado al estilo tendrá que descargarse cada vez que la página sea solicitada. Esto realmente no representa un problema para un elemento con un par de reglas de estilo, pero si la especificación de estilo está dentro de una estructura repetiviva el documento html se llenará de múltiples marcas innecesariamente y en lugar de ser tomadas por el navegador y descargadas una sola vez por visitante, éstas se descargarán una y otra vez.
CSS para todo el documento usando bloques de estilo
La segunda forma más sencilla de aplicar CSS a los elementos en tu documento es mediante el uso de un bloque de estilos. HTML incluye una etiqueta llamada "style" capaz de albergar código CSS. Allí puedes definir reglas que luego pueden ser usadas por todo el documento. Aquí hay un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<style type="text/css">
.highlight {
color: Blue;
text-decoration: underline;
}
</style>
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>Nota como ahora puedo definir la regla solo en un lugar y luego re-usarla múltiples veces en el documento. Puedes definir múltiples bloques de estilos si lo deseas y ponerlos donde quieras en el documento si te place. Sin embargo se considera una buena práctica incluir el (los) bloques de estilos al principio del documento, en la sección "head" (<head>).
CSS Global a través de documentos CSS externos
De esta manera el bloque de estilo (style block) como descrito anteriormente, permite re-usar tu código CSS en todo el documento, pero aún debes incluirlo en todas las paginas de tu sitio, lo cual requiere que el navegador la descargue en cada solicitud de pagina, en vez de descargar un solo archivo CSS externo, una sola vez y dejarlo en la memoria cache. Esta es la mayor desventaja del enfoque de bloque de estilo y por lo se debería usar la tercera opción en su lugar: un archivo CSS externo.
Un archivo CSS es simplemente un archivo de texto plano guardado con la extensión .css, para después referenciarse en el/los archivo(s) donde se deseen aplicar las reglas. Si usamos el ejemplo ubicado en la parte de bloques de estilo, podemos mover la regla "highlight" a un nuevo archivo (omitiendo la parte de HTML) y guardarlo bajo un nombre apropiado, como por ejemplo: style.css:
.highlight {
color: Blue;
text-decoration: underline;
}Entonces podriamos referenciarla en nuestro documento HTML, usando el elemento link:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>Este ejemplo requiere que tanto el archivo HTML como el CSS estén en el mismo directorio. Si no es así, tienes que modificar el atributo "href" para que la ruta concuerde.
Ahora definimos todo nuestro código CSS en su propio archivo y lo llamamos dentro de todas nuestras subpaginas para aprovecharnos de las reglas definidas. Si usted desea, puede dividir su código CSS en diversos archivos externos y solo incluir los que necesita. Todo esto depende de que tan grande sea su pagina y como prefiera organizar su código.
En resumen
Hemos hablado de diferentes maneras en la que su pagina puede utilizar CSS en este capitulo.
Lo primero fue el atributo de estilo en línea. Su mayor ventaja es que es muy fácil de usar, pero como desventaja, perdemos algunos de los mayores beneficios de CSS: la reutilización del código y la capacidad de realizar cambios de diseño en un solo lugar y que se aplique en todo su sitio web.
En segundo lugar se utilizó el bloque de estilo . Es un poco menos engorroso de usar que el atributo de estilo en línea, y permite reutilizar tu código CSS. La mayor desventaja es que el código en un bloque de estilo es global en toda la página, pero no en varias páginas, lo que significa que tendrá que incluirlo en cada subpágina de su sitio web.
El tercer punto es el que se ve con mayor frecuencia en los sitios web: archivos CSS externos . Solo tiene la desventaja de ser ligeramente más difícil trabajar con él, ya que debe colocar el CSS en un archivo separado que tendrá que abrir para realizar cambios, un precio muy pequeño a pagar a cambio de reutilizar su CSS en todo su sitio web!
Tenga en cuenta que a lo largo de este tutorial, utilizará principalmente el segundo y el primer punto, pero sólo porque los ejemplos presentados en este tutorial son todos pequeños y separados y no un gran sitio web. Simplemente es mucho más fácil demostrar las diversas propiedades CSS de esta manera, en lugar de tener que separar el marcado y CSS en archivos distintos y explicar este hecho cada vez. Usted es libre de usar el enfoque que prefiera, pero para cualquier otra cosa que no sean pequeños ejemplos y sitios web muy simples, el tercer punto suele ser la mejor manera.