TOC

This article is currently in the process of being translated into Spanish (~63% done).

Introduction:

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.

Now we define all of our CSS code in its own file and then just reference it inside all of our sub pages to take advantage of the defined rules! If you want to, you can divide your CSS code into several external files and only include the ones you need - it all depends on how big your website is and how you prefer to organize your code.

En resumen

We have talked about different ways for your webpage to consume CSS code in this chapter.

The first approach was the inline style attribute. Its biggest advantage is the fact that its so easy to use, but as a disadvantage, it cuts you off from some of the biggest benefits of CSS: Code re-usability and the ability to make layout changes in a single place and have it applied across your entire website.

The second approach uses the style block. It's only slightly less cumbersome to use than the inline style attribute, and allows re-using your CSS code. The biggest disadvantage is that code in a style block is global across the page, but not across multiple pages, meaning that you will have to include it on each subpage of your website.

The third approach is the one you most commonly see on websites: External CSS file(s). It only has the disadvantage of being slightly harder to work with, because you have to place the CSS in a separate file which you will have to open to make changes - a very small price to pay for the ability to re-use your CSS across your entire website!

Please be aware that throughout this tutorial, I will mainly be using the second and the first approach, but only because the examples presented in this tutorial are all small, separate entities and not a big website. It's simply a lot easier to demonstrate the various CSS properties this way, instead of having to separate markup and CSS into distinct files and explaining this fact each time. You are free to use the approach you prefer, but for anything other than small examples and very simple websites, the third approach is usually the superior way!

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!