CSS

Aplicando estilos al documento

Harold Maduro

Cmo lo agrego al
HTML?
Style Element
Link Tag
@import Directive
Inline styles

Style Element
Una 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.
Tambin 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
Media

<link rel=stylesheet type=text/css

href=estilos.css media=screen />

Link Tag
Media

all
aural
braille
embossed
handheld

print
screen
tty
tv

Link Tag
Alternate 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 Tag
Alternate 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
El import debe ir dentro de un tag style para que
funcione. Por ejemplo:

<style type=text/css>
@import url(estilos.css);
</style>
* Netscape 4.0 ignora este directive

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

<p style=color: green;>

HULK SMASH !
</p>

Anatoma de una
regla
(rule set)

Anatoma de una
regla
Un rule set es un enunciado que le
indica al browser cmo 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.

Anatoma de una
Regla
Selector

Declaration

Declaration

{ color: green; background: black; }

Property

Value

Declaration Block

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

Declaration block
El declaration block es un contenedor que
incluye todo lo que est dentro de los
brackets {} (incluyndolos).
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 ms cmoda.

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

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

Declaration
El declaration le indica al browser
cmo desplegar un elemento
determinado en la pgina, luego de
ser seleccionado.
Est compuesto de una propiedad y
un valor, separados por dos puntos :.

Comentarios

Comentarios
Se pueden insertar comentarios en el
CSS para explicar el cdigo.
Al igual que los comentarios en HTML,
son ignorados por los browsers.

Comentarios
Pueden ir despus de una
declaracin

p { color: blue; }

/* so sad... */

Comentarios
Los comentarios son
multilinea:

/*
Por favor confirmar el color corporativo
del banco
*/
p { color: blue; }

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

/* p { color: blue; }

*/

p{
font-family: verdana;
/* color: blue; */
}

Bibliografa

CSS: The Definitive Guide

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

Bibliografa

CSS 2.1 Specification

World Wide Web Consortium
http://www.w3.org/TR/CSS21/