Primeros pasos con CSS
Escrito por Hernán Funes el Jueves 06 de Octubre de 2005 a las 00:00hs
CSS (Cascading Styles sheets) también conocido como hojas de estilo, es una nueva forma de organizar nuestros sitios webs, pero ¿porqué?, CSS atrae a una nueva metodología por necesidad, la necesidad de separar el contenido de la apariencia.
Cómo desarrollador esto significa que la información de nuestro sitio web debe ir dentro de los archivos HTML, pero estos HTML no deben contener información acerca de cómo se muestra la información. La información de cómo se deberían mostrar los HTML se ubica en archivos CSS.
Qué logramos usando CSS?
- Separar el contenido de la apariencia.
- Modelos de Diseños Flexibles. (pocos límites de personalización del html)
- Alta Velocidad de Carga (Usando CSS se aminora la cantidad de código)
- Fácil y Sencillo para el Mantenimiento
- Fácil de Transportar
- Avanzadas Posibilidades de Diseño
- Innovar en el uso del Cliente
- Fácil Acceso
Bueno pasamos un poco a lo que és el código, acá tenés un simple ejemplo de uso de estilos en un paragraph (parrafo) para lograr un color azul:
<p style=’color:blue;’>esto es una prueba</p>
Cómo escribimos para CSS
En CSS nosotros escribimos de la siguiente manera:
nombre : valor ;
Pero primero debemos tener en claro, como adjuntamos una hoja de estilos a nuestros archivos para poder empezar a escribir.
Maneras de Adjuntar una hoja de estilos
Existen 3 maneras de adjuntar estilos a nuestras hojas de contenidos...
La primera es usar el tag <style>:
<style type=”text/css”>
p { color: blue; }
</style>
La segunda, la más recomendada, es la de linkear a una hoja de estilos externa (un archivo externo llamese style.css que contiene los códigos del diseño de nuestros htmls) como se muestra a continuación:
<link type=”text/css” href=”style.css” />
Y la tercera, la más vieja de todas:
<style type=”text/css”>
@import “style.css”;
</style>
Es aconsejable que las diferentes maneras de adjuntar una hoja de estilo vayan dentro del tag <head> aunque tampoco es obligatorio solo por una simple cuestion de organizacion.
comentarios
-
muy clara la explicacion del CSS.
-
Alguien sabe como crear un menu en css con hover
o sea que al pasar el mouse la tabla td aparesca de un color y al quitarla quede con el mismo color de antes no se como aplicar a mi web si puedes ayudarme porfa. -
LA INFORMACION ESTA MUY EXPLICITA. GRACIAS