Para poder crear y usar correctamente las hojas de estilo debe conocerse la sintaxis de un documento HTML, la cual esta bien detallada en la sección HTML. Básicamente se representa de dos partes, el head y el body, mostradas a continuación:
<!DOCTYPE html> <html lang=”es"> <head> <title>Ejemplo de estructura html</title> </head> <body> <h1>Titular de la páginah1> <p>Un párrafo </p> </body> </html>El head contiene información para el explorador mientras que el body es donde se escribirán las diversas etiquetas HTML para crear el contenido.
Creando una hoja de estilo en casaca externa:
En este caso se escriben las reglas en un archivo aparte, puede hacerse usando el bloc de notas o cualquier editor de texto plano, se escriben las reglas en el, no es necesario escribir nada adicional a las reglas, se hace como en el siguiente código:
body { margin:0; padding:0; font-family:verdana, Arial, Helvetica, sans-serif; font-size:13px; color:#D8D7D3; background-color:#353535; text-align:center; } img{ border:0; padding:0; margin:0; }Este archivo de texto plano lo guardo con un nombre cualquiera, pero siempre debe ponerse con extensión .CSS.
Hecho el archivo CSS, este debe ser “llamado” por la página en la que se desea que actúe, para ello se introduce el siguiente código dentro del head de la página:
<link rel="stylesheet" type="text/css" href="nombredemihoja.css" media="screen" />
Puede ligarse a nuestra página todas las hojas CSS que queramos.
En este caso se le están asignando 4 atributos a la etiqueta link;
rel: señala la relación que existen entre la pagina que enlaza y el archivo enlazado, en este caso es nuestra hoja de estilo, por lo que se coloca stylesheet, esto es un estándar por lo que sierre se debe colocar así.
type: se le asigna otro valor estándar para las hojas de estilo, este es “text/css”, esta etiqueta muestra el tipo de recurso al que se esta enlazando.
href: indica la ubicación del archivo CSS, esta dirección puede ser relativa o absoluta (ver tipo de enlaces), por lo que es posible utilizar hojas de estilo ubicadas dentro de un sitio Web o que sean externas al sitio.
*imagine que quiere dar la dirección de su casa a un vecino suyo, usted le dice, mi casa esta a tres casas de la suya. Esto es una dirección relativa, pues esta en relación a la casa del vecino. En cambio si lo que necesita es dar su dirección para que le envíen un paquete desde otro país, usted tiene que especificar su país, estado, provincia calle, etc., esto es una dirección absoluta. Igualmente pasa con los enlaces, estos pueden hacerse en relación a la página que enlaza (diciendo por ejemplo que esta en el mismo directorio, o que esta en el directorio imágenes a su ves esta en el mismo directorio) o puede poner una dirección absoluta como por ejemplo http://foro.mipaginaweb.net/index.php/topic,77881.85/wap2.html*
**para ubicar una dirección relativa, que será la que mas usara para enlazar hojas de estilo, solo debe poner el nombre de la hoja de estilo href="nombredemihoja.css" si esta está en el mismo directorio, si esta en un directorio que a su vez esta dentro del directorio en el que se ubica la pagina debe poner href="nombredirectorio/nombredemihoja.css", para un directorio dentro del directorio; href="primerdirectorio/nombredirectorio/nombredemihoja.css" así sucesivamente, recuerde que el nivel mas alto es el directorio de en la que se encuentra la pagina que enlaza**
media: señala cual será el medio de aplicación de las hojas de estilo, si se desea que la hoja se aplique cuando alguien ve la pagina en una PC, entones se pone display, si se desea que se aplique siempre la misma hoja de estilo, se puede omitir este atributo, se pueden poner otros valores para que la hoja aplique cuando la pagina se visualice en un dispositivo Mobil por ejemplo, esto se explicará en otro apartado. Por el momento pueden omitir este atributo.
Creando una hoja de estilo en casaca interna:
Esto se hace mediante la etiqueta <style>, se coloca en el head de la página y las reglas se escriben dentro de ella, del siguiente modo:
<style type="text/css">
p { color: black; font-family: Verdana; }
</style>
Nótese que se define un type, cuyo valor estándar ya se expuso, y siempre es “text/css”, todo lo que se encuentra entre estas etiquetas será definido e interpretado como código CSS.
La tercera y menos recomendada forma de añadir reglas CSS a una página es dentro del código HTML mismo, esto es, dentro del body de la página, especificándose en cada etiqueta HTML que se quiera modificar.
<!DOCTYPE html"> <html lang=”es”> <head>
<title>Ejemplo de estilos CSS en el codigo html</title>
</head> <body>
<p style="color: black; font-family: Verdana;">Un párrafo de texto.</p>
</body> </html>
Como se puede ver en el código anterior, dentro de la etiqueta a la cual queramos imponerle estilo CSS, se coloca el atributo style=””, dentro de las comillas se ponen las declaraciones que queramos, sierre separándolas por “;”.
Como notaran, los sitios Web utilizan una especie de “tema” común entre sus paginas, es decir, casi todas las paginas de un mismo sitio tienen un aspecto muy similar, es por esta razón que el uso de CSS externo facilita el trabajo, pues en el caso de que se desee hacer una modificación a todo el sitio, cambiar el color de fondo por ejemplo, solo debe hacerse en una hoja de estilo, si el sitio es muy grande, entonces otra manera de hacer esto podría ser muy laboriosa.
