iMeil - Tutorial HTML Intermedio - Implementación de CSS en HTML

Tutorial HTML Nivel Intermedio del Bicentenario Capítulo 1 - Implementación de CSS en HTML

En el Tutorial Básico hemos utilizado un código HTML incrustado. Es decir, el código se implementaba directamente en cada una de las etiquetas, por lo que se veía algo como lo siguiente:

<font-family="arial,verdana" font-color="#ffffff" font-size="13">Mi primera página ASP</font>

y algo como:

Al realizar un uso combinado de HTML con CSS, evitaremos este tipo de presentación en el código, pues lo que veremos será algo como lo siguiente:

<span class="titulo">Mi primera página ASP</span>

La diferencia, como bien has observado, es class="titulo", que es un estilo de CSS para asignar atributos al texto presentado.

En algunos sitios web, CSS es implementado dentro de la misma página, entre las etiquetas <HEAD> del documento. Considerando el ejemplo arriba mencionado, este tipo de implementación luce como lo siguiente:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-Mx" lang="es-Mx" />
<head>
<title>Mi primera página ASP</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.titulo {
font: bold 16px arial,verdana;
color: #333;
}
</style>
</head>
<body>
<span class="titulo">Mi primera página ASP</span>
</body>
</html>

El inconveniente para este tipo de implementación incrustada de CSS, es que deberás escribir el código en cada página que lo requiera y, cuando desees realizar cambios a todas tus páginas para una clase (class, normalmente llamada estilo) de CSS, se convertirá en todo un infierno si tu sitio se integra por muchas páginas.

Para solucionar este problema, la forma más recomendada y profesional para utilizar CSS es en forma "externa". Es decir, se genera un archivo CSS separado para, en el mismo, implementar todo el código CSS y realizar cambios, de ser requeridos, en forma rápida y sencilla.

Este tipo de archivo se incluye en la forma siguiente, tal cual indicamos en el tema anterior que haríamos durante el desarrollo de este tutorial:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-Mx" lang="es-Mx" />
<head>
<title>Mi primera página ASP</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">@import url(prueba.css);</style>
</head>
<body>
<span class="titulo">Mi primera página ASP</span>
</body>
</html>

Por lo cual el estilo para la clase "titulo" se encuentra dentro de la página CSS creada. La representación del código ahí es en la forma siguiente:

.titulo {
font: bold 16px arial,verdana;
color: #333;
}

Lo que este estilo significa es lo siguiente:

En "font: bold 16px arial,verdana;" se indica al navegador que asigne al texto, incluído dentro de las etiquetas <SPAN>, una fuente en negrita, de 16 pixeles en tamaño y con arial o verdana, de no encontrarse presente la primera.

En "color: #333;" se indica que el color del texto deberá ser un tono de gris con el valor hexadecimal 333333, el cual es muy cercano al color negro. Cuando tenemos colores cuyo valor hexadecimal representa los mismos números o tres pares de uno mismo, se puede realizar una simplificación del mismo tomando un tres de cada par. Es por esta razón que vemos #333 y no #333333.

Veamos ahora la definición de estilos en CSS.

Registro al Newsletter
Mantente al día con tutoriales más cortos sobre desarrollo de sitios web. Políticas de Privacidad
Términos de uso