Integrando CSS con HTML

Mar, Oct 26, 2010

Existen diversas maneras de integrar las hojas de estilo (CSS) en los archivos HTML.

A continuación mencionaremos las más utilizadas para integrar CSS y HTML:

- CSS en línea (Inline CSS)
- CSS incrustado
- CSS externo
- Utilizando “@import” en los documentos .css

CSS en Línea
Permite definir los estilos directamente dentro de los tags HTML.

Ejemplo:

<p style=”color: #FF0000;”>Esto es un texto de prueba</p>
Esto es un texto de prueba

CSS Incrustado

El CSS incrustado, especifica las propiedades del css en la etiqueta HTML <head></head>, dentro de una etiqueta <style>

Ejemplo:
Codigo HTML:

<!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="EN" dir="ltr">
<head>
<title>Embedded CSS Styles</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
p{color:#FF0000;}
</style>
</head>
<body>
</body>
</html>

CSS Externo
El CSS Externo es llamado con las etiquetas <link>, dentro de la etiqueta <head></head>
Los documentos de las hojas de estilos se especifican con la extension “.css” por ejemplo “miestilo.css”

Ejemplo:
Codigo HTML:

<!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="EN" dir="ltr">
<head>
<title>External CSS Styles</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="default.css" type="text/css" />
</head>
<body>
</body>
</html>

Sintaxis CSS

body{color:#FFFFFF; background-color:#000000;}
/* This is a comment */
p{font-family:Verdana, Arial, Helvetica, sans-serif;}
h1{font-size:16px;}

Utilizando “@import” en los documentos .css

Otra forma de utilizar los css externos, es utilizando “@import” dentro del documento .css

Ejemplo:

Sintaxis CSS:

@import url("estilo1.css");

body{color:#FFFFFF; background-color:#000000;}
/* This is a comment */
p{font-family:Verdana, Arial, Helvetica, sans-serif;}
h1{font-size:16px;}

Integrando CSS con HTML

Existen diversas maneras de integrar las hojas de estilo (CSS) en los archivos HTML

A continuación mencionaremos las tres maneras más tradicionales de integrar CSS y HTML:}

- CSS en línea (Inline CSS)
- CSS incrutado
- CSS Externo
- Utilizando “import”

CSS en Linea
Permite definir los estilos directamente dentro de los tags HTML
Ejemplo:
<p style=”color: #FF0000;”>Esto es un texto de prueba</p>

CSS Incrustado

El CSS incrustado, especifica las propiedades del css en la etiqueta HTML <head></head>, dentro de una etiqueta <style>
Ejemplo:
Codigo HTML:
<!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=”EN” dir=”ltr”>
<head>
<title>Embedded CSS Styles</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<style type=”text/css”>
p{color:#FF0000;}
</style>
</head>
<body>
</body>
</html>

CSS Externo
El CSS Externo es llamado con las etiquetas <link>, dentro de la etiqueta <head></head>
Los documentos de las hojas de estilos se especifican con la extension “.css” por ejemplo “miestilo.css”

Ejemplo:
Codigo HTML:
<!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=”EN” dir=”ltr”>
<head>
<title>External CSS Styles</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” href=”default.css” type=”text/css” />
</head>
<body>
</body>
</html>

Sintaxis CSS
body{color:#FFFFFF; background-color:#000000;}
/* This is a comment */
p{font-family:Verdana, Arial, Helvetica, sans-serif;}
h1{font-size:16px;}
Integrando CSS con HTML

Existen diversas maneras de integrar las hojas de estilo (CSS) en los archivos HTML

A continuación mencionaremos las tres maneras más tradicionales de integrar CSS y HTML:}

- CSS en línea (Inline CSS)
- CSS incrutado
- CSS Externo
- Utilizando “import”

CSS en Linea
Permite definir los estilos directamente dentro de los tags HTML
Ejemplo:
<p style=”color: #FF0000;”>Esto es un texto de prueba</p>

CSS Incrustado

Sintaxis CSS
body{color:#FFFFFF; background-color:#000000;}
/* This is a comment */
p{font-family:Verdana, Arial, Helvetica, sans-serif;}
h1{font-size:16px;}