Como vincular un html con Css

Obtén una cuenta de @zoneartcss.com gratuita

Ver correo

Ago 14

Separando CSS de XHTML

Separando el CSS del HTML

Hay veces que te dan dudas de como poder agregar estilos a tu página Web. Hay varias maneras de poderlos agregar y aqui en este pequeño tutorial basico te enseñaremos como.

La primera Forma es agregando el css directo desde tu página html, normalmente los editores domo Adobe Dreamweaver asi lo agregan, veamos el ejemplo siguiente:

Ejemplo 1:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #000000;
}
body {
	background-color: #FFFFFF;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style></head>
 
<body>
ZoneArtCss - www.zoneartcss.com
</body>
</html>

Pero el problema esta cuando ese mismo estilo lo vas a utilizar en varias paginas, tendrias que copiar y pegar varias veces el codigo css y por lo tanto pesará mas tu web. La solucion seria que crees un archivo llamado por ejemplo “style.css” en donde scribiras tus estilos y acontinuacion en tu condigo html lo vinculas con el siguiente codigo:

Ejemplo 2:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
 
<link rel="stylesheet" href="style.css"  type="text/css" />
 
</head>
 
<body>
</body>
</html>

Con este ejemplo podras cargar todos tus estilos en un solo archivo sin ningun problema, es mas facil buscar los estilos cuando tienes un proyecto grande y sabes que en un solo archivo se encuentran los estilos.

Espero que les sea util.

Posted in CSS. on Viernes, Agosto 14th, 2009 by miguelortega Tags: Como vincular un html con Css, CSS, html, miguel ortega, rel="stylesheet", type="text/css"

2 Comments

tony_gt on Agosto 30th, 2009

Buena info!
saludos!
esta buenisimo el blog!
Alex Aguiar on Agosto 30th, 2009

tony_gt que bueno que te guste… solo no olvides dejar la fuente si deseas colgar algun post en algun otro sitio… ya que las imagenes de los post son exclusivas para este blog… no son muy buenas pero por eso incrustamos el logo, para reconocer nuestro poco esfuerzo