3 septiembre 2009 in Otras Cosas by dacho

css11Veremos las distintas formas de insertar CSS en un HTML. Existen basicamente dos formas:

  • En el mismisimo HTML
  • Llamando a un archivo externo desde el HTML

¿Cual es mas conveniente y porque? Pues Entra y Mira el Artículo.

En el mismisimo HTML

Para Colocar un CSS en una pagina web en el mismo html, se debera seguir la sintaxis que se coloca en el proximo Cuadro, Es recomendable siempre colocarlo entre las etiquedas <Head>.

<style type="text/css">
  body {
  color: purple;
  background-color: #d8da3d }
</style>

Una cosa importante a tener en cuenta es que todo lo que esta entre <style> y </style> NO ES HTML sino que es CSS

Dentro de ese lugar usted podra colocar las instrucciones CSS que necesite para su web.

Otra forma de incluirlo en el html

Es incluirlo directamente en el elemento html, en general hay que tratar de evitar esto, lo mejor es que el html este lo mas limpio posible, ya que brinda mayor flexibilidad! Pero tambien se puede hacer asi.

Por ejemplo esto hace que el parrafo sea de color rojo:

  <p style="color: red;"> 
       Era un Triste perro que iba caminando y pensando sobre su vida.
  </p>

Esto se puede insertar en toda clase de elementos HTML, por ejemplo esto hace que una imagen tenga un borde de un pixel gris:

<img src="mi_imagen.jpg" style="border: 1px solid silver;">

Bueno estas formas son las de insertar el CSS en el HTML

Ventajas

  • Entre las pocas ventajas se encuentra que es mas rapido que crear dos documentos y andar pensando como se llamaba el elemento, colocas las propiedades directamente en el elemento
  • Tenes todo en un solo archivo, lo cual para algunos puede llegar a ser una ventaja, aunque yo no lo veo asi.

Desventajas

  • Las desventajas mas importantes son que al declarar el CSS en los elementos (2da forma) es un lio de aquellos rediseñar la web, el codigo es desprolijo y mezclan cosas que podrian estar totalmente separadas perdiendo una de las potencias del CSS que es poder cambiar el diseño de la pagina simplemente tocando la configuracion del mismo.
  • El Archivo HTML sera mucho mas pesado que si lo dividis en una HTML y un CSS, Si el HTML es excesivamente grande puede llegar a afectar el posicionamiento de tu pagina.

Para llamar al CSS desde HTML

Esta es la forma recomendable de inlcuir los CSS, porque permite:

  • colocar toda la configuracion de la pagina: como los colores, Posiciones, Margenes, decoraciones en un archivo externo. Esto nos brinda la flexibilidad de cambiar el diseño sin tocar nada de la pagina Web!. Este es el mayor logro del CSS
  • Ademas por un lado tendran el HTML completamente prolijo, cuando necesiten modificar el HTML estara mucho mas facil, y cuando tenog que modificar el CSS tambien. La famosa y real frase Divide y Reinaras 100% aplicable a todo lo de computacion.
  • Ademas el tamaño del documente HTML sera muy pequeño, aunque hay que tener en cuenta el tamaño del CSS.

La forma de insertar un Archivo CSS en una web es:

<link rel="stylesheet" type="text/css" href="mi_estilo.css">

Esto deberia ser incluido en el <head>. Ademas se pueden cargar muchos estilos diferentes en la misma pagina, es decir:

<link rel="stylesheet" type="text/css" href="mi_estilo.css">
<link rel="stylesheet" type="text/css" href="mi_estilo_2.css">
<link rel="stylesheet" type="text/css" href="mi_estilo_3.css">

Se tomaran todos los estilos que se incluyeron y en caso de que haya propiedades de elementos repetidos en alguno de ellos, se tomara por defecto el estilo que se coloca ultimo a menos que se use la instruccion !important.

Espero les Haya Servido y cualquier duda ya saben que pueden postear!

Entradas Relacionadas: