CSSAplicando estilos al documento

Harold Maduro

¿Cómo lo agrego al HTML?

•Style Element

•Link Tag

•@import Directive

•Inline styles

Style ElementUna de las formas de agregar CSS a su documento es utilizando el elemento de HTML style.

El mismo debe llevar siempre el atributo type con su valor text/css.

También podemos aplicarle al elemento style el atributo de media, si queremos especificar que los estilos son para pantalla, print, handheld, etc.

Style Element

<style type=”text/css”>

p { color: red; }

</style>

Style Element

<style type=”text/css” media=”screen”>

p { color: red; }

</style>

Link Tag

Llamando a un archivo CSS externo al HTML.A estos archivos que son externos al HTML, se les llama external style sheets.

Para poder llamarlos exitosamente, el elemento link debe estar dentro del elemento head al comienzo del documento.

Link Tag

<link rel=”stylesheet” type=”text/css” href=”estilos.css” />

Link Tag

<link rel=”stylesheet” type=”text/css” href=”estilos.css” media=”screen” />

Media

Link TagMedia

• all

• aural

• braille

• embossed

• handheld

• print

• screen

• tty

• tv

Link TagAlternate Style Sheets

<link rel=”stylesheet” type=”text/css” href=”estilos.css” media=”screen” />

<link rel=”stylesheet” type=”text/css” href=”printer.css” media=”print” />

<link rel=”stylesheet” type=”text/css” href=”cell.css” media=”handheld” />

Link TagAlternate Style Sheets

<link rel=”stylesheet” type=”text/css” href=”estilos.css” media=”screen” title=”Normal” />

<link rel=”stylesheet” type=”text/css” href=”grande.css” media=”screen” title=”Texto Grande” />

<link rel=”stylesheet” type=”text/css” href=”chico.css” media=”screen” title=”Texto Chico” />

@import Directive

<style type=”text/css”>

@import url(estilos.css);

</style>

* Netscape 4.0 ignora este directive

El import debe ir dentro de un tag style para que funcione. Por ejemplo:

Inline Styles

<p style=”color: green;”>

HULK SMASH !

</p>

Por último, podemos agregar estilos inline, atado a un elemento en el mismo HTML.

Anatomía de una regla(rule set)

Anatomía de una regla

Un rule set es un enunciado que le indica al browser cómo desplegar un elemento determinado dentro del HTML.

¿Qué es un rule set?

Una regla (rule set) está compuesta por un selector, seguido de un “declaration block”.

Anatomía de una Regla

p { color: green; background: black; }

Selector Declaration Declaration

Property Value

Declaration Block

Selector

Un selector selecciona los elementos dentro de la página HTML que son afectados por el rule set. Incluye todo lo que viene antes de los brackets {.

Declaration blockEl declaration block es un contenedor que incluye todo lo que está dentro de los brackets {} (incluyéndolos).

Los espacios en blanco dentro del declaration block son ignorados y se pueden utilizar para darle el formato visual a la regla que les sea más cómoda.

Declaration block

a { color: red; font-family: verdana; }

a { color: red; font-family: verdana;}

DeclarationEl declaration le indica al browser cómo desplegar un elemento determinado en la página, luego de ser seleccionado.

Está compuesto de una propiedad y un valor, separados por dos puntos “:”.

Comentarios

ComentariosSe pueden insertar comentarios en el CSS para explicar el código.

Al igual que los comentarios en HTML, son ignorados por los browsers.

Comentarios

p { color: blue; } /* so sad... */

Pueden ir después de una declaración

Comentarios

/*

Por favor confirmar el color corporativo

del banco

*/

p { color: blue; }

Los comentarios son multilinea:

Comentarios

/* p { color: blue; } */

p {

font-family: verdana;

/* color: blue; */

}

Se pueden utilizar para comentar ciertas reglas que no queremos utilizar en el momento.

Bibliografía

CSS: The Definitive Guide

Amazon: http://tinyurl.com/5hs7jf

Eric Meyer

Bibliografía

CSS 2.1 Specification

http://www.w3.org/TR/CSS21/

World Wide Web Consortium