Conceptos Bsicos

INTRODUCCIN A CSS

Conceptos Bsicos

Qu es CSS?

CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) ,es la tecnologa desarrollada por el World Wide Web Consortium (W3C).

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentacin de los documentos electrnicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentacin y es imprescindible para crear pginas web complejas.

Conceptos Bsicos

Al crear una pgina web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la funcin de cada elemento dentro de la pgina: prrafo, titular, texto destacado, tabla, lista de elementos, etc. Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamao y tipo de letra del texto, separacin horizontal y vertical entre elementos, posicin de cada elemento dentro de la pgina, etc.

Funcionamiento
Una hoja de estilo es un conjunto de reglas que se aplican a una o ms etiquetas HTML y definen qu apariencia tendr el contenido de esa hoja al enviarla a pantalla, al imprimirla, o con cualquier dispositivo que se use para ver una pgina web. CSS hace que el trabajo sea muy simple y claro, facilitando (y mucho) la tarea de disear pginas web atractivas y vistosas.

Beneficios

Mantenimiento: una pgina diseada exclusivamente con CSS es mucho ms fcil de mantener que una pgina diseada con tablas. Cambiar el aspecto de una pgina creada con CSS es tan fcil como modificar unas pocas reglas en las hojas de estilos. Accesibilidad: las pginas creadas con CSS son ms accesibles que las paginas diseadas con tablas. Velocidad de carga: el cdigo HTML de una pgina diseada con tablas es mayor que el cdigo de la misma pgina diseada exclusivamente con CSS. Semntica: aunque resulta obvio, las tablas HTML solo se deben utilizar para mostrar datos cuya informacin solo se entiende en forma de filas y columnas. Utilizar tablas para crear la estructura completa de una pgina es tan absurdo como utilizar por ejemplo la etiqueta <ul> para crear prrafos de texto.

Estndares (W3C)
Es el "World Wide Web Consortium".- Este consorcio es la unidad de control ms importante para las normas en Internet y posee filiales en Estados Unidos y Europa. Se ocupa de definir el estndar del lenguaje HTML para conseguir una normalizacin mundial.

Conceptos Bsicos

Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener infinitos selectores y cada declaracin puede estar formada por un nmero infinito de pares propiedad/ valor. p { color: black; font-family: Verdana; }

Conceptos Bsicos

Tipos de Estilos
CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una pgina Web: Un estilo en lnea (inline) es un mtodo para insertar el lenguaje de estilo de pgina directamente dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar la descripcin del formateo dentro del documento de la pgina Web, a nivel de cdigo, se convierte en una manera larga, tediosa y poco elegante de resolver el problema de la programacin de la pgina. Este modo de trabajo se podra usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro o estructurado que debera ser, pero funciona. ste es el mtodo recomendado para maquetar correos electrnicos en HTML.

Aplicacin esttica
La primera forma de aplicar un estilo a un elemento de tu pgina Web es por medio del atributo STYLE, que se puede aplicar a casi cualquier etiqueta de HTML. Por ejemplo, la siguiente lnea:

<P STYLE="background-color: #FFFF00;">Hola, amigos, esto solamente es un texto experimental.</P>

Hara que el fondo del prrafo se viera con el color amarillo que le hemos asignado, de este modo:
Hola, amigos, esto solamente es un texto experimental.

Desventaja del mtodo anterior

Suponga que en una pgina web hay 200 prrafos que deben conservar el mismo estilo, con el mtodo mostrado anterior mente, deberamos escribir 200 lneas de cdigo con la misma instruccin, lo cual no es nada rentable por las siguientes razones:
1. 2.

Dificultades en la actualizacin del sitio. Exceso de cdigo fuente en la pgina.

Conceptos Bsicos

Una hoja de estilo interna, que es una hoja de estilo que est incrustada dentro de un documento HTML. (Va a la derecha dentro del elemento <head>.) De esta manera se obtiene el beneficio de separar la informacin del estilo del cdigo HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una pgina a otra (esta posibilidad es difcil de ejecutar si se desea para guardar las copias sincronizadas). En general, la nica vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna caracterstica a una pgina Web en un simple fichero, por ejemplo, si se est enviando algo a la pgina Web.

Solucin 1 (Crear estilos en el archivo html).

Podemos crear estilos en una pgina web de manera interna dentro de las etiquetas <head></head> , por ejemplo.
<head> <STYLE TYPE="text/css MEDIA=screen> p { background-color: #FFFF00; } </STYLE> </head> La instruccin anterior hace que todos los prrafos incluidos en la pgina hereden la propiedad de fondo de color amarillo. AHORA RESULTA OTRO PROBLEMA CUL ES?

Creando clases
El problema generado anteriormente se resuelve estableciendo clases en las reglas CSS.
<style type="text/css"> .parrafo{ background-color:#063; } </style> Para que los prrafos puedan adquirir el atributo creado anteriormente debemos utilizar lo siguiente: <P class="parrafo">hola pp</P>

Solucin 2 (Crear un archivo CSS externo)

Una de las principales caractersticas de CSS es su flexibilidad y las diferentes opciones que ofrece para realizar una misma tarea. Podemos crear un archivo de CSS y enlazarlo a nuestro archivo html, esto garantiza un mejor control y organizacin del cdigo fuente. En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las pginas HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es ms que un archivo simple de texto cuya extensin es .css Se pueden crear todos los archivos CSS que sean necesarios y cada pgina HTML puede enlazar tantos archivos CSS como necesite.

Conceptos Bsicos

Tipos de Estilos

Una hoja de estilo externa, es una hoja de estilo que est almacenada en un
archivo diferente al archivo donde se almacena el cdigo HTML de la pgina Web. Esta es la manera de programar ms potente, porque separa completamente las reglas de formateo para la pgina HTML de la estructura bsica de la pgina.

En el siguiente ejemplo, se crea un archivo de texto, se cambia su nombre a estilos.css y se incluye el siguiente contenido:

A continuacin, en la pgina HTML se utiliza la etiqueta <link> para enlazar el archivo CSS externo que tiene los estilos que va a utilizar la pgina:

Ejemplo de enlace de un archivo CSS

<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
RECUERDE QUE LA INSTRUCCIN ANTERIOR DEBE ESTAR INCLUIDA DENTRO DE LAS ETIQUETAS <HEAD></HEAD> En el archivo CSS podramos escribir lo siguiente: .parrafo{ background-color:#063; } De todas las formas de incluir CSS en las pginas HTML, esta es la ms utilizada con mucha diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en multitud de pginas HTML, por lo que se garantiza la aplicacin homognea de los mismos estilos a todas las pginas que forman un sitio web.

Conceptos Bsicos

Estructura Bsica CSS?

CSS define una serie de trminos que permiten describir cada una de las partes que componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy bsico:

Componentes de una regla CSS bsico

Selectores descendentes Selectores de etiquetas Selectores de id Selectores de clases

p ul { ..} a { ..} #hola { ..} .p {}

Conceptos Bsicos

Los diferentes trminos se definen a continuacin: Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla est compuesta de una parte de "selectores", un smbolo de "llave de apertura" ({), otra parte denominada "declaraciones" y por ltimo, un smbolo de "llave de cierre" (}).

Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS. Declaracin: la declaracin especifica los estilos que se aplicarn a los elementos. Est compuesta por una o ms propiedades CSS. Propiedad: permite modificar el aspecto de una caracterstica del elemento. Valor: indica el nuevo valor de la caracterstica modificada en el elemento.

Conceptos Bsicos

Ventajas de usar las hojas de estilo

Las ventajas de utilizar CSS (u otro lenguaje de estilo) son:

Control centralizado de la presentacin de un sitio web completo con lo que se agiliza de forma considerable la actualizacin del mismo. Los navegadores permiten a los usuarios especificar su propia hoja de estilo local, que ser aplicada a un sitio web, con lo que aumenta considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamao del texto o remarcar ms los enlaces. Una pgina puede disponer de diferentes hojas de estilo segn el dispositivo que la muestre o, incluso, a eleccin del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo mvil o ser "leda" por un sintetizador de voz. El documento HTML en s mismo es ms claro de entender y se consigue reducir considerablemente su tamao (siempre y cuando no se utilice estilo en lnea).

Ejercicios bsicos
Crear reglas CSS para conseguir los siguientes resultados:
Hola mundo Hola mundo Hola mundo Lista de productos Caf Tortilla Pan de hamburguesa Tabla de valores c3 c5 C4 c6