El Guru Programador
Usuario DESCONOCIDO | Registrate Gratis | Usuarios Registrados

Primeros pasos con CSS

Autor Hernán Funes de 9 Styles
 

Porqué Usar CSS?

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.

Ventajas de 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 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>

Nota: Las diferentes maneras deben ir dentro del tag <head> en el cuerpo del html.

 
Suscribite al boletin y recibi las novedades del sito en tu Email!
Tu Email

 

Contactos myStudio Network