Apuntes Web
ApuntesWeb.net > Manuales >Manual CSS

II. Agregando CSS al (X)HTML

CSS mediante LINK

Es la forma recomendada de agregar css, de este modo, puedes modificar la apariencia de un sitio web con miles de páginas, solamente editando un pequeño archivo css, además al utilizar esta técnica los exploradores cachean el archivo css (guardan en su memoria temporal) Siginifica carga más rapida de tus páginas y ahorro en ancho de banda.

¿Como enlazar CSS al HTML?

Para enlazar una hoja de estilo utilizaremos la siguiente linea de código:
<link rel="stylesheet" type="text/css" href="archivo.css" />

El mismo que debera estar ubicado dentro de las etiquetas <head> ... </head> del código HTML de la página web.

Entre los principales atributos y valores del link tenemos:

Mediante este método se pueden enlazar a una página web, tantos archivos CSS como se necesite y un archivo css puede ser compartido por muchas páginas web.

Agregando el atributo LINK al HTML

Primero generamos una estructura (x)HTML (podemos utilizar el bloc de notas u otro editor de texto plano) con la siguiente estructura:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es"
xml:lang="es">
<head>
<title>Enlazando a un archivo .css</title>
<link rel="stylesheet" type="text/css" href="general.css" />
</head>
<body>
<h1>Titulo Principal</h1>
</body>
</html>

y lo guardamos con un nombre por ejemplo (ejercicio.html) es muy importante agregar la extensión .html

Creando el archivo CSS

Ahora generamos un archivo CSS en el bloc de notas u otro editor de texto plano en el cual escribimos:

body{background:blue;color:white;}

Luego guardamos asignando un nombre, para nuestro ejemplo se llamara (general.css) no olvides agregar la extensión .css y guardarlo en el directorio donde está el documento (ejercicio.html).

Finalmente abrimos con nuestro explorador web la página (ejercicio.html) y vemos el resultado donde la pagina tiene un color de fondo azul y texto de color blanco.

Ejercicio:
Abra y edite el archivo (general.css) y cambie el valor de background "blue" por "red"
body{background:red;color:white;}
Guarde los cambios efectuados y actualize o abra de nuevo la página(ejercicio.html)

MANUAL CSS

CSS, HTML, XHTML, Recursos y mucho más, Prohibida su reproducción total o parcial.
© 2009 - 2012 ApuntesWeb.net