CSS - ¿Cómo agregar estilos a mi página?

CSS

Aplicando estilos al documento

Harold Maduro

¿Cómo 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. 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 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

<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 block El 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; }

Declaration El 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

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

Comentarios