ago
14
2009

Como vincular un html con Css

An article by miguelortega

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.

Etiquetas: Como vincular un html con Css, CSS, Html, miguel ortega, rel="stylesheet", type="text/css"

About the Author: Miguel Angel Ortega Acosta

2 Comments + Add Comment

Alex Aguiar 30 agosto 2009 a las 20:58

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
tony_gt 30 agosto 2009 a las 20:14

Buena info!
saludos!
esta buenisimo el blog!

Como vincular un html con Css

Separando el CSS del HTML

Ejemplo 1:

Ejemplo 2:

Related Posts

About the Author: Miguel Angel Ortega Acosta

2 Comments + Add Comment

Leave a comment

Patrocinador

Siguenos

Suscribete

Correo @zoneartcss.com

Enlaces

Comentarios