CSS Hojas de Estilo

1. Qu es CSS?
Es una tecnologa que nos permite controlar la apariencia de una pgina web.

En un principio, los sitios web se concentraban ms en su contenido que en su presentacin. CSS describe como los elementos dispuestos en la pgina son presentados al usuario.

Con CSS podemos especificar estilos como el tamao, fuentes, color, as como el lugar donde disponer texto e imgenes en la pgina.

Combinacin con HTML

Est definido en la Especificaciones CSS1, CSS2 y CSS3 del World Wide Web Consortium (W3C), es un estndar aceptado por toda la industria relacionada con la Web.

Podemos asociar las reglas de estilo directamente en el cdigo HTML o en un archivo independiente con extensin *.css

2. Estilos en medio del HTML

Es la forma ms fcil pero menos recomendada. Se define con la propiedad style los estilos a definir. Es comn definir estilos directamente en HTML cuando estamos creando la pgina y posteriormente trasladar el estilo creado a una hoja de estilos. <h1 style=color:red;background-color:yellow> Este mensaje es de color rojo sobre fondo amarillo. </h1>

2. Estilos en medio del HTML

<h1 style=color:red;background-color:yellow> Este mensaje es de color rojo sobre fondo amarillo.</h1>

3. Estilos en la cabecera de la pgina (header)

En la cabecera de la pgina HTML, podemos definir estilos que se aplican a las distintas marcas HTML de la pgina. El problema del concepto anterior donde debamos crear un estilo similar para la marca h1 se puede resolver en forma ms adecuada empleando la definicin de estilos a nivel de pgina.

3. Estilos en la cabecera de la pgina (header)

<style type=text/css>h1 {color:red;backgroundcolor:yellow} </style><h1>Primero</h1><h1>Segundo</h1>

3. Estilos en la cabecera de la pgina (header)

<style type=text/css> h1 {color:red;background-color:yellow} </style> En este ejemplo indicamos que en todos los lugares donde se utilice h1 debe aplicar color de texto rojo y fondo amarillo. Podemos observar que es mucho ms eficiente que el modelo del punto 2.

4. Muchos estilos
<style type=text/css>h1 {color:red}h2 {color:green}h3 {color:blue} </style><h1>rojo</h1><h2>verde</h2><h3>azul</h 3>

5. Propiedades de fuentes.

Contamos con una serie de propiedades relacionadas a fuentes: font-family font-size font-style font-weight font-variant Podemos utilizar algunas o todas las propiedades relacionadas a fuentes.

5. Propiedades de fuentes.
Debemos indicar el nombre de la marca HTML para el estilo y luego, entre llaves, todas las propiedades separadas por punto y coma.

Algunas de las fuentes ms populares son:

Arial Courier Georgia Impact

Tahoma Times New Roman Verdana

5. Propiedades de fuentes.
<style type=text/css>h1 { font-family:arial; font-size:30px; font-style:italic; }h2 { font-family:impact; font-weight:bold; } </style><h1>Primero</h1 > <h2>Segundo</h2>

5. Propiedades de fuentes.
En caso que la fuente no est disponible, el navegador selecciona la fuente por defecto. Para evitar esto, podemos elegir varias fuentes: font-family: verdana, arial, georgia;

La segunda propiedad inicializada es font-size: font-size:30px;

(30 pxeles indica el tamao).

5. Propiedades de fuentes.


La tercera propiedad es font-style: normal italic oblique

La ltima propiedad es font-weight, pudiendo tomar los siguientes valores: normal bold bolder lighter

6. Varias marcas HTML con una misma regla CSS.

Nos permite ahorrar la escritura de reglas duplicadas para diferentes marcas HTML. Supongamos que queremos la misma fuente y color para las marcas h1, h2 y h3.

6. Varias marcas HTML con una misma regla CSS.

<style type=text/css>h1,h2,h3 { font-family:verdana; color:red; } </style><h1>Primero</h1> <h2>Segundo</h2><h3>T ercero</h3>

7.Varias reglas para una misma marca HTML.

Supongamos que queremos todas las cabeceras con la misma fuente, pero con tamaos distintosPodemos implementarlo de la siguiente manera:
<style type=text/css"> h1,h2 { font-family:Arial; } h1 { font-size:40px; } h2 { font-size:30px; } </style>

7.Varias reglas para una misma marca HTML.

<style type=text/css> h1,h2 { font-family:impact; } h1 { font-size:40px; } h2 { font-size:30px; } </style> <h1>Primero</h1> <h2>Segundo</h2>

8.Propiedades relacionadas al texto. color

Estas propiedades ya la vimos: color Podemos indicar con 3 valores hexadecimales que indican la mezcla de rojo, verde y azul. Por ejemplo si queremos rojo puro debemos indicar: color: ff0000; Si queremos verde puro: color: 00ff00 Si queremos azul puro: color: 0000ff Si queremos amarillo debemos mezclar: rojo y verde: color: ffff00

relacionadas al texto. textalign

Otra propiedad es: text-align, que puede tomar alguno de estos cuatro valores: left right center justify text-align:center; El texto aparecer centrado.

relacionadas al texto. textdecoration

Nos permite entre otras cosas que aparezca subrayado el texto, tachado o una lnea en la parte superior, los valores posibles de esta propiedad son: none underline overline line-through

8.Propiedades relacionadas al texto.

<style type=text/css>h1 { color:#ff0000; text-align:left; text-decoration:underline; }h2 { color:#dd0000; text-align:center; text-decoration:underline; } </style><h1>Primero<h1><h2>Segundo<h2>

Ejercicios.
1. Qu es CSS? 2. Crear un ttulo de color azul, sobre fondo amarillo. 3. Crear 2 ttulos, con fondo azul, sobre fondo amarillo. 4. Crear un ejemplo similar al punto 4, con 2 ttulos. 5. Crear un ttulo, con letra Impact y tamao 24. 6. Crear 2 ttulos, con las mismas propiedades: letra Arial y color azul. 7. Crear 2 ttulos, con letra Arial y tamaos 30 y 20. 8. Crear 1 ttulo: subrayado y centrado. (textalign:center;text-decoration:underline) https://docs.google.com/forms/d/1xGT0fWYiKFR4O0nkdH BFS9929QCJc-6yCkLo3MxtiMw/viewform