¿Cómo Inserto Hojas de estilo CSS?

No me voy a poner a dar clases de Diseño de Hojas de Estilo en Cascada Cascade Style Sheet(CSS), Simplemente se ejemplifícara como insertar una Hoja de Estilos y como mandarla llamar desde Nuestra pagina HTML o XTHML.

Primeramente debemos tener Nuestra hoja de estilos, en este caso debemos utilizar una hoja llamada: miestilo.css

La cual tiene el siguiente codigo:

body {
 color:             #FFF;
 font-size:         10pt;
 font-family:       Arial, serif, sans-serif;
 text-align:        justify;
 background-color:  #000;
 margin-top:        0px;
 margin-left:       0px;
 margin-right:      0px;
 margin-bottom:     0px;
}

.titulo {
 color:            rgb(128,128,128);
 font-weight:      bold;
 margin:           3px;
 padding-top:      3px;
 padding-bottom:   3px;  
 padding-left:     50px;
 font-variant:     small-caps; 
}


Despues de que ya tenemos nuestra hoja de estilos la insertaremos en nuestra(s) pagina(s) donde utilizaremos estos estilos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml\" xml:lang="es" 
lang="es">
<head>
<title>Blog :: maniaticKo :: Lzc, Mich</title>
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" />
<link rel="StyleSheet" title="Estilo Blog" type="text/css" 
href="http://mipagina.net/estilo.css"></link>
</head>
<body>
<!-- Codigo del Cuerpo o Body! -->
</body>
</html>


Es necesario comentar, que se puede reemplazar:
<link rel="StyleSheet" title="Mis Estilos" type="text/css"
href="http://mipagina.net/estilo.css"></link>

Por:
<link rel="StyleSheet" title="Mis Estilos" type="text/css"
href="estilo.css"></link>


Esto va a depender, si nuestro archivo HTML está en el mismo directorio o carpeta(Folder) o no lo está.

Si contamos con los archivos: index.html y miestilo.css en el mismo directorio el navegador manda llamar desde nuestro index.html a nuestra hoja de estilos: miestilo.css ya que da por entendido que se encuentran en el mismo folder, aunque para asegurar la inclusión del archivo se podria mandar llamar de la manera siguiente: http://hostgratuito.net/micuenta/miestilo.css

es necesario remarcar y dejar en claro que esta última manera indispensable cuando tenemos nuestra hoja de estilos en un host separado, ejemplo:

tengo mi pagina en: http://mx.geocities.com/micuenta/index.html

y mi hoja de estilos en: http://usuarios.lycos.es/micuenta/miestilo.css

Aqui no funcionaria mi codigo de la siguiente manera:
<link rel="StyleSheet" title="Estilo Blog" type="text/css"
href="estilo.css"></link>


Esto a pesar de que nuestra hoja de estilos esté ubicada en una carpeta con el mismo nombre: /micuenta/

En este caso es, cuando es necesario llamar la hoja de estilos de la forma:
<link rel="StyleSheet" title="Estilo Blog" type="text/css"
href="http://mipagina.net/estilo.css"></link>


La manera de utilizar los estilos, está de más... es solo cuestion de utilizar, un id="nombre_estilo" ó class="nombre_clase", tal vez más adelante escriba como se utiliza cada estilo, aunque esto no es algo muy importante, puesto que utilizando cualquier buscador vienen cientos de ejemplos de como implementar un estilo predeterminado.
Nota extra
Utilizar:
<link> y </link>
Es necesario cuando se implementa XHTML, si utilizas HTML puro, no es necesaria la etiqueta de cierre: </link>

4 comentarios:

P@bLo™ dijo...

orale esa no me la sabia... y como cuanto cobras wei? jeje

siento ke la seriedad del blog limita tanta cochinada ke se me ocurre pero un poco de censura esta bien de vez en cuando jeje

Alfredo dijo...

mendigo ocioso
este blog no es como el anterior :P ve a ver a yanoveogentemuerta.blogspot.com :P el si necesita ese tipo de atenciones

ramon 1.609n dijo...

ke paso peloon... aki leyendo tus katedas... ahi las wz poer en practica despues

Anónimo dijo...

hola yo no se mucho de esta materia de programacion la tomo pero no les hagas caso tu solo ayudas y burno al menos a mi si me sirve de algo gracias cuidate y olvida sus comentarios tontos.