Qu es CSS?

CSS es un lenguaje de hojas de estilos creado para controlar el

aspecto o presentacin de los documentos electrnicos defnidos con
HTML y XHTML. CSS es la mejor forma de separar los contenidos y su
presentacin y es imprescindible para crear pginas !eb complejas.
"l crear una pgina #eb$ se utili%a 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$ te(to
destacado$ tabla$ lista de elementos$ etc.
)na *e% creados los contenidos$ se utili%a el lenguaje CSS para defnir
el aspecto de cada elemento' color$ tama+o y tipo de letra del te(to$
separacin hori%ontal y *ertical entre elementos$ posicin de cada
elemento dentro de la pgina$ etc.
Cmo incluir CSS en un documento XHTML
)na de las principales caracter,sticas de CSS es su -e(ibilidad y las
diferentes opciones .ue ofrece para reali%ar una misma tarea. /e
hecho$ e(isten tres opciones para incluir CSS en un documento
HTML..
Incluir CSS en el mismo documento HTML
Los estilos se defnen en una %ona espec,fca del propio documento
HTML. Se emplea la eti.ueta 0style1 de HTML y solamente se
pueden incluir en la cabecera del documento 2slo dentro de la
seccin 0head13.
4jemplo'
0html 1
0head1
0meta http5e.ui*67Content5Type7 content67te(t&html8
charset6iso599:;5<7 &1
0title14jemplo de estilos CSS en el propio
documento0&title1
0style type67te(t&css71
p = color' blac>8 font5family' ?erdana8 @
0&style1
0&head1
0body1
0p1)n prrafo de te(to.0&p1
0&body1
0&html1
4ste mAtodo se emplea cuando se defne un nBmero pe.ue+o de
estilos o cuando se .uieren incluir estilos espec,fcos en una
determinada pgina HTML .ue completen los estilos .ue se incluyen
por defecto en todas las pginas del sitio !eb. 4l principal
incon*eniente es .ue si se .uiere hacer una modifcacin en los
estilos defnidos$ es necesario modifcar todas las pginas .ue
incluyen el estilo .ue se *a a modifcar.
Defnir CSS en un archivo eterno
4n este caso$ todos los estilos CSS se incluyen en un archi*o de tipo
CSS .ue las pginas HTML enla%an mediante la eti.ueta 0lin>1. )n
archi*o de tipo CSS no es ms .ue un archi*o simple de te(to cuya
e(tensin es .CSS Se pueden crear todos los archi*os CSS .ue sean
necesarios y cada pgina HTML puede enla%ar tantos archi*os CSS
como necesite.
Si se .uieren incluir los estilos del ejemplo anterior en un archi*o CSS
e(terno$ se deben seguir los siguientes pasos'
<3 Se crea un archi*o de te(to y se le a+ade solamente el siguiente
contenido'
p = color' blac>8 font5family' ?erdana8 @
C3 Se guarda el archi*o de te(to con el nombre estilos.css Se debe
poner especial atencin a .ue el archi*o tenga e(tensin .css y no .t(t
D3 4n la pgina HTML se enla%a el archi*o CSS e(terno mediante la
eti.ueta 0lin>1'
0html1
0head1
0title14jemplo de estilos CSS en un archi*o
e(terno0&title1
0lin> rel67stylesheet7 type67te(t&css7
href67&css&estilos.css7 media67screen7 &1
0&head1
0body1
0p1)n prrafo de te(to.0&p1
0&body1
0&html1
Cuando el na*egador carga la pgina HTML anterior$ antes de mostrar
sus contenidos tambiAn descarga los archi*os CSS e(ternos enla%ados
mediante la eti.ueta 0lin>1 y aplica los estilos a los contenidos de la
pgina.
Eormalmente$ la eti.ueta 0lin>1 incluye cuatro atributos cuando se
enla%a un archi*o CSS'
rel' indica el tipo de relacin .ue tiene el recurso enla%ado 2en este
caso$ el archi*o CSS3 y la pgina HTML. Fara los archi*os CSS$
siempre se utili%a el *alor stylesheet.
type' indica el tipo de recurso enla%ado. Sus *alores estn
estandari%ados y para los archi*os CSS su *alor siempre es
te(t&css
href' indica la )GL del archi*o CSS .ue contiene los estilos. La
)GL indicada puede ser relati*a o absoluta y puede apuntar a
un recurso interno o e(terno al sitio !eb.
media' indica el medio en el .ue se *an a aplicar los estilos del
archi*o CSS. Ms adelante se e(plican en detalle los medios
CSS y su funcionamiento. /e todas las formas de incluir CSS en
las pginas HTML$ esta es la ms utili%ada con mucha
diferencia. La principal *entaja es .ue se puede incluir un
mismo archi*o CSS en multitud de pginas HTML$ por lo .ue se
garanti%a la aplicacin homogAnea de los mismos estilos a
todas las pginas .ue forman un sitio !eb.
Con este mAtodo$ el mantenimiento del sitio !eb se simplifca al
m(imo$ ya .ue un solo cambio en un solo archi*o CSS permite *ariar
de forma instantnea los estilos de todas las pginas HTML .ue
enla%an ese archi*o.
Incluir CSS en los elementos HTML
4l Bltimo mAtodo para incluir estilos CSS en documentos HTML es el
peor y el menos utili%ado$ ya .ue tiene los mismos problemas .ue la
utili%acin de las eti.uetas 0font1. 4jemplo'
0html1
0head1
0meta http5e.ui*67Content5Type7 content67te(t&html8
charset6iso599:;5<7 &1
0title14jemplo de estilos CSS en el propio
documento0&title1
0&head1
0body1
0p style67color' blac>8 font5family' ?erdana871)n prrafo
de te(to.0&p1
0&body1
0&html1
4sta forma de incluir CSS directamente en los elementos HTML
solamente se utili%a en determinadas situaciones en las .ue se debe
incluir un estilo muy espec,fco para un solo elemento concreto.
!structura de declaracion
CSS defne una serie de tArminos .ue permiten describir cada una de
las partes .ue componen los estilos CSS. 4l siguiente es.uema
muestra las partes .ue forman un estilo CSS muy bsico'
Los diferentes tArminos se defnen a continuacin'
Gegla' cada uno de los estilos .ue componen una hoja de estilos
CSS. Cada regla est compuesta de una parte de "selectores"$ un
s,mbolo de "llave de apertura" 2=3$ otra parte denominada
"declaracin" y por Bltimo$ un s,mbolo de "llave de cierre" 2@3.
Selector' indica el elemento o elementos HTML a los .ue se aplica la
regla CSS.
/eclaracin' especifca los estilos .ue se aplican a los elementos.
4st compuesta por una o ms propiedades CSS.
Fropiedad' permite modifcar el aspecto de una caracter,stica del
elemento.
?alor' indica el nue*o *alor de la caracter,stica modifcada en el
elemento. )n archi*o CSS puede contener infnitas reglas CSS$
cada regla puede contener infnitos selectores y cada
declaracin puede estar formada por un nBmero infnito de
pares propiedad&*alor.
Comentarios
CSS permite incluir comentarios entre sus reglas y estilos. Los
comentarios son contenidos de te(to .ue el dise+ador incluye en el
archi*o CSS para su propia informacin y utilidad.
4l comien%o de un comentario se indica mediante los caracteres &H y
el fnal del comentario se indica mediante H&$ tal y como se muestra
en el siguiente ejemplo'
/* Este es un comentario en CSS */
Los comentarios pueden ocupar tantas l,neas como sea necesario$
pero no se puede incluir un comentario dentro de otro comentario'
/* Este es un
comentario CSS de varias
lineas */