CSS en Web

C SS EN W EB
Q u es CSS?
Puede que ya hayas odo hablar de
CSS sin saber realmente qu es. En

esta leccin aprenders ms cosas
sobre CSS y qu puede hacer por ti.
CSS
es
el
acrnicmo
deCascadingStyleSheets (es decir,
hojas de estilo en cascada).
Q u puedo hacer con CSS?

CSS es un lenguaje de estilo que define la presentacin
de los documentos HTML. Por ejemplo, CSS abarca

cuestiones relativas a fuentes, colores, mrgenes,
lneas,
altura,
anchura,
imgenes
de
fondo,
posicionamiento avanzado y muchos otros temas.
Espera unos segundos y ya vers!
Es posible usar HTML, o incluso abusar del mismo, para
aadir formato a los sitios web. Sin embargo, CSS
ofrece ms opciones y es ms preciso y sofisticado.
CSS est soportado por todos los navegadores hoy da.
Despus de unas cuantas lecciones de este tutorial
sers capaz de crear tus propias hojas de estilo usando
CSS para dar a tu sitio web un aspecto nuevo y genial.
Cm o funciona CSS?
En esta leccin aprenders a crear tu
primera hoja de estilo; conocers el

modelo bsico de CSS y qu cdigo
es necesario para usar CSS en un
documento HTML.
Muchas de las propiedades que se
usan en las hojas de estilo en
cascada (CSS) son parecidas a las de
HTML
La sintaxis bsica de CSS

Digamos que queremos un bonito color rojo como fondo
de nuestra pgina web:

UsandoHTMLpodramos haberlo conseguido as:
<body bgcolor="#FF0000">
ConCSSel mismo resultado puede lograrse as:
body {background-color: #FF0000;}
Como vers, el cdigo usado es ms o menos idntico
para HTML y CSS. El ejemplo anterior te muestra

adems el modelo CSS fundamental:
Aplicando CSS a un
docum ento H TM L
Podemos aplicar CSS a un documento HTML
de tres maneras diferentes. Todos estos

mtodos se explican a continuacin. Te
recomendamos que te centres en el tercero,
es decir, el externo.
Mtodo 1: En lnea (el atributostyle)
Un modo de aplicar CSS a HTML es usando el
atributo de HTMLstyle. Si ampliamos el
ejemplo anterior sobre el color de fondo rojo,
CSS se puede aplicar as:
M todo 2:Interno (la etiquetastyle)

Otra forma es incluir el cdigo CSS
usando la etiqueta HTML<style>.

Por ejemplo, as:
M todo 3:Externo (enlace a una hoja de estilo)

El mtodo recomendado es enlazar con lo que se denomina hoja de
estilo externa. A lo largo de este tutorial usaremos este mtodo en

todos nuestros ejemplos.
Una hoja de estilo externa es sencillamente un fichero de texto con
la extensin.css. Como cualquier otro fichero, puedes colocar la
hoja de estilo en el servidor web o en el disco duro.
Por ejemplo, digamos que tu hoja de estilo se llamastyle.cssy
est localizada en una carpeta que se llamastyle. Esta situacin se
puede ilustrar de la siguiente manera:
El truco consiste en crear un vnculo desde el documento HTML (por
ejemplo, default.htm) con la hoja de estilo (style.css). Dicho vnculo

se puede crear con una sencilla lnea de cdigo HTML:
Fjate cmo la ruta a nuestra hoja de estilo
aparece indicada por medio del atributohref.

La lnea de cdigo debe insertarse en la
seccin de encabezado del cdigo HTML, es
decir, entre la etiqueta<head>y</head>.
De esta manera:
Este vnculo indica al navegador que debera
usar la presentacin del fichero CSS al mostrar

el fichero HTML. Lo realmente bueno de este
mtodo es que se pueden vincular varios
documentos HTML con la misma hoja de
estilo. En otras palabras, se puede usar un
nico
fichero
CSS
para
controlar
la
presentacin del muchos documentos HTML.
Esta
tcnica puede ahorrarte mucho trabajo. Si

quisieras cambiar, por ejemplo, el color de fondo de un
sitio web compuesto por 100 pginas, un hoja de
estilo puede ahorrarte el tener que cambiar de forma
manual los 100 documentos HTML. Con CSS, el cambio
se puede llevar a cabo en unos segundos modificando
parte del cdigo de la hoja de estilo principal.
Vamos a llevar a la prctica lo que acabamos de
aprender.
Prubalo t mismo
Abre el Bloc de notas (o el editor de texto que utilices)
y crea dos ficheros - un fichero HTML y un fichero CSS
- con el siguiente contenido:
Fichero default.htm
Fichero style.css
Ahora coloca los dos ficheros en la
misma carpeta. Recuerda grabar los

ficheros con las extensiones
correctas (".htm" y ".css",
respectivamente).
Abre el ficherodefault.htmcon el
navegador y observa que la pgina
tiene un color de fondo rojo.
Enhorabuena! Acabas de crear tu
primera hoja de estilo!
Colores y fondos
En esta leccin aprenders a aplicar colores y
colores de fondo a tus sitios web.

Examinaremos tambin mtodos avanzados
para posicionar y controlar imgenes de fondo.
Se explicarn las siguientes propiedades CSS:
color
background-color
background-image
background-repeat
background-attachment
background-position
background
Color de prim er plano:la propiedad 'color'

La propiedadcolordescribe el color de primer plano de un
elemento.
Por ejemplo, imagina que queremos que todos los ttulos
de un documento aparezcan con color rojo oscuro. Todos
los ttulos estn marcados con el elemento<h1>. El
cdigo
siguiente
establece
el
color
de
los
elementos<h1>como rojo.
Los
colores se pueden introducir como valores

hexadecimales, como en el ejemplo anterior: #ff0000; o
se pueden usar los nombres de los colores: "red" (rojo), o
bien como valores rgb: (rgb(255,0,0)).
ejem plo
La propiedad 'background-color'
La propiedadbackground-colordescribe el color de
fondo de los elementos.

El elemento<body>contiene todo el contenido de un
documento HTML. As pues, para cambiar el color de

fondo de una pgina, la propiedadbackgroundcolordebera aplicarse al elemento<body>.
Tambin se pueden aplicar colores de fondo a otros
elementos, entre ellos, a los encabezados y al texto.

En el ejemplo que sigue se aplicarn diferentes colores
a los elementos<body>y<h1>.
Fjate cmo hemos aplicado dos propiedades
a<h1>separndolas por medio de un punto y

coma.
Fjate cmo hemos aplicado dos propiedades a <h1> separndolas por medio de un punto y coma.
ejem plo
Im genes de fondo [background-im age]

La propiedad CSSbackground-imagese usa
para insertar una imagen de fondo.

Para el ejemplo de la imagen de fondo, vamos
a usar la mariposa que ves ms abajo. Puedes
descargar la imagen para usarla en tu propio
ordenador (haz clic con el botn derecho
sobre la imagen y elige "guardar imagen
como..."), o bien puedes usar cualquier otra
imagen.
Para insertar la imagen de la
mariposa como imagen de fondo de

una pgina web, aplica
sencillamente la
propiedadbackground-imageal
elemento<body>y especifica la
localizacin de la imagen.
Repetir la im agen de fondo

[background-repeat]
En el ejemplo anterior, te fijaste en
que, por defecto, la mariposa se

repeta tanto en el eje horizontal
como en el vertical para ocupar toda
la
pantalla?
La
propiedadbackgroundrepeatcontrola
este
comportamiento.
La tabla siguiente resume los cuatro
valores
diferentes
para
la
ejem plos
La
propiedadbackgroundattachmentespecifica si una imagen est fija

o se desplaza con el elemento contenedor.
Una imagen de fondo fija no se mover con
el texto cuando el lector se desplace por la
pgina, mientras que una imagen de fondo
no fija se desplazar con el texto de la
pgina web.
La tabla siguiente resume los dos valores
posibles para la propiedadbackgroundattachment.
Ubicacin de la im agen de fondo

[background-position]
Por defecto, una imagen de fondo se posiciona en la esquina
superior izquierda de la pantalla. La propiedadbackgroundpositionte permitir cambiar este valor por defecto y posicionar
la imagen de fondo en cualquier lugar de la pantalla que quieras.
Hay muchas formas diferentes de establecer los valores de la
propiedadbackground-position. Sin embargo, todas ellas se
formatean como un conjunto de coordenadas. Por ejemplo, el
valor '100px 200px' posiciona la imagen de fondo a 100 pxeles
del margen izquierdo y a 200 pxeles del margen superior del la
ventana del navegador.
Las coordenadas se pueden indicar como porcentajes del ancho
de la pantalla, como unidades fijas (pxeles, centmetros, etc.) o
puedes usar las palabras "top" (superior), "bottom" (inferior),
"center" (centro), "left" (izquierda) y "right" (derecha). El modelo
siguiente ilustra cmo funciona el sistema:
Com binacin de propiedades

[background]
La propiedadbackgroundes una
forma abreviada de todas las

propiedades de fondo listadas a lo
largo de esta leccin.
Con la propiedadbackgroundse
pueden comprimir varias
propiedades, y as escribir una hoja
de estilo de forma ms abreviada, lo
que facilitar su lectura.
Por ejemplo, observa estas cinco
Usandobackgroundse puede lograr el mismo resultado con una nica lnea
de cdigo:
El orden en que deben aparecer las propiedades individuales es el
siguiente:
[background-color]|[background-image]|[backgroundrepeat]|[background-attachment]|[background-position]
Si se omite alguna propiedad, de forma automtica sta se establecer con
su valor por defecto. Por ejemplo, si se omiten las propiedadesbackgroundattachmentybackground-positiondel ejemplo anterior, quedando el cdigo
de la siguiente manera:
Estas dos propiedades que no se especifican se estableceran, sin ms, con
sus valores por defecto, que, como ya sabes, sonscrollytop left.
Fuentes
En esta leccin aprenders nociones sobre fuentes y
cmo se aplican usando CSS. Tambin veremos cmo

solucionar el tema de que las fuentes especficas
elegidas para un sitio web slo se pueden ver si estn
instaladas en el PC desde el que se accede a dicho
sitio web. Se describirn las siguientes propiedades
CSS:
font-family
font-style
font-variant
font-weight
font-size
font
Fam ilia de fuentes [font-fam ily]

La propiedadfont-familyse usa para establecer una
lista ordenada de fuentes que se usarn para mostrar

un elemento determinado o una pgina web. Si la
primera fuente de la lista no est instalada en el
ordenador desde el que se accede al sitio, se seguir
probando con la siguiente fuente hasta encontrar una
fuente apropiada.
Para clasificar las fuentes se usan dos tipos de
nombres: nombres de una familia y familias genricas.

Estos dos trminos se explican a continuacin.
La diferencia se puede ilustrar as:
Al listar fuentes para el sitio web, por
supuesto se empieza por la preferida,

seguida
sta
de
algunas
fuentes
alternativas. Se recomienda completar la
lista con una familia de fuentes genrica.
As, al menos, la pgina se mostrar
usando una fuente de la misma familia si
ninguna de las especificadas estn
disponibles.
Un ejemplo de lista de fuentes por orden
de prioridad podra tener este aspecto
Los encabezados marcados con la etiqueta<h1>se
mostrarn usando la fuente "Arial". Si esta fuente no

est instalada en el ordenador de usuario, se usar
en su lugar la fuente "Verdana". Si ambas fuentes no
estn disponibles, se usar una fuente de la
familiasans-serifpara mostrar los encabezados.
Fjate cmo el nombre de fuente "Times New Roman"
contiene espacios y, por lo tanto, se lista usando
comillas.
Estilo de la fuente [font-style]

La propiedadfont-styledefine la fuente elegida bien
con el valornormal, el valoritalico el valoroblique.

En el ejemplo que sigue, todos los encabezados
marcados con<h2>aparecern en cursiva.
Variante de fuente [font-variant]

La propiedadfont-variantse usa para elegir entre las
variantesnormalosmall-caps(versalita) de una
fuente. La fuente a la que se aplica el valorsmallcapses una fuente que usa letras en mayscula
inicial ms pequeas, en vez de letras en minscula.
Confuso? Veamos los ejemplos siguientes:
Peso de la fuente [font-weight]

La propiedadfont-weightdescribe qu
intensidad o "peso" en negrita debera tener

la fuente. Toda fuente puede tener los
valoresnormalobold. Algunos navegadores
soportan, incluso, el uso de nmeros entre
100 y 900 (de cien en cien) para describir el
peso de dicha fuente.
Tam ao de la fuente [font-size]

El tamao de la fuente se establece por medio
de la propiedadfont-size.
A la hora de describir el tamao de las
fuentes, existen muchas unidades diferentes
(por ejemplo, pxeles y porcentajes) entre las
que elegir. En este tutorial nos centraremos en
las unidades ms comunes y adecuadas.
Como ejemplo, podemos incluir:
Com binacin de propiedades [font]

Si usamos la propiedad abreviadafontes posible incluir todas
las propiedades diferentes relativas a fuentes en una nica

propiedad.
Por ejemplo, imagina estas cuatro lneas de cdigo que usamos
para describir las propiedades de fuente para la etiqueta<p>:
Usando la propiedad abreviada, el cdigo se puede simplicar
as:
El orden de los valores para la propiedadfontes:

font-style|font-variant|font-weight|font-size|font-family
Texto
Formatear y aadir estilo al texto es un tema
clave para cualquier diseador web. En esta

leccin presentaremos las increbles
oportunidades que ofrece CSS a la hora de
aadir presentacin al texto. Describiremos
las siguientes propiedades:
text-indent
text-align
text-decoration
letter-spacing
text-transform
Sangra deltexto [text-indent]

La propiedadtext-indentpermite aadir un toque de elegancia a los
prrafos de texto al aplicar sangra a la primera lnea de dicho prrafo. En

el ejemplo siguiente se ha aplicado una sanga de30pxa todos los
prrafos de texto marcados con la etiqueta<p>:
Alineacin del texto [text-align]

La propiedad CSStext-alignes el equivalente al atributoalignusado en
versiones anteriores de HTML. Los valores posibles de esta propiedad

son:left(texto alineado a la izquierda),right(texto alineado a la derecha)
ocenter(texto
con
alineacin
centrada).
Adems,
el
valorjustify(alineacin justificada) alargar cada lnea de forma que los
mrgenes izquierdo y derecho estn justificados. Esta tipo de presentacin
la habrs visto, por ejemplo, en peridicos y revistas.
En el ejemplo que sigue, el texto de los encabezados de la tabla,<th>, se
ha alineado a la derecha, mientras que los datos de la tabla,<td>,
aparecen centrados. Adems, los prrafos de texto normales estn
justificados:
D ecoracin deltexto [text-decoration]

La
propiedadtext-decorationpermite aadir
diferentes "decoraciones" o "efectos" al texto.
Por ejemplo, se puede subrayar el texto,
tacharlo o ponerle un subrayado superior. En
el
ejemplo
siguiente,
el
elemento<h1>aparecer
subrayado,
el
elemento<h2>aparecer con un subrayado
por
encima
del
texto
y
el
elemento<h3>tendr el texto tachado..
Espaciado entre caracteres [letter-spacing]

El espaciado entre los caracteres de texto se
puede especificar usando la propiedadletterspacing.

El
valor
de
esta
propiedad
corresponde,
sencillamente,
al
ancho
deseado. Por ejemplo, si queremos un
espaciado de3pxentre los caracteres de un
prrafo
de
texto<p>y6pxentre
los
caracteres
de
los
encabezados<h1>,
usaramos el siguiente cdigo:
Transform acin deltexto [text-transform ]

La propiedadtext-transformcontrola la escritura en maysculas de un texto.
Puedes elegir entre los valorescapitalize,uppercaseolowercase, sin importar

cmo aparece el texto original en el cdigo HTML.
Un ejemplo podra ser la palabra "ttulo" que se puede presentar al usuario como
"TTULO" o "Ttulo". A continuacin ofrecemos una explicacin de los valores de
la propiedadtext-transformmencionados en el prrafo anterior:
Capitalize
Pone en mayscula la primera letra de cada palabra. Por ejemplo, "john doe" aparecer como
"John Doe".
Uppercase
Convierte todas las letras a mayscula. Por ejemplo, "john doe" aparecer como "JOHN DOE".
lowercase
Convierte todas las letras a minscula. Por ejemplo, "JOHN DOE" aparecer como "john doe".
None
No se realiza transformacin alguna; el texto se presenta tal como aparece en el cgido HTML.
Como ejemplo, usaremos una lista de nombres. Todos los nombres estn marcados con la
etiqueta<li>(de "list element", es decir, elemento de lista). Supongamos que queremos
que las iniciales de los nombres aparezcan en mayscula y los ttulos con todos los
caracteres en mayscula.
chale un vistazo al cdigo fuente del ejemplo y vers que el texto aparece
realmente en minscula.
Como ejemplo, usaremos una lista de

nombres. Todos los nombres estn
marcados con la etiqueta<li>(de "list
element", es decir, elemento de lista).
Supongamos que queremos que las iniciales
de los nombres aparezcan en mayscula y
los ttulos con todos los caracteres en
mayscula.
chale un vistazo al cdigo fuente del ejemplo
y vers que el texto aparece realmente en
minscula.

CSS en Web

Cargado por

Copyright:

Formatos disponibles

CSS en Web

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CSS en Web

Cargado por

Copyright:

Formatos disponibles

C SS EN W EB

CSS sin saber realmente qu es. En

Q u puedo hacer con CSS?

de los documentos HTML. Por ejemplo, CSS abarca

primera hoja de estilo; conocers el

La sintaxis bsica de CSS

de nuestra pgina web:

para HTML y CSS. El ejemplo anterior te muestra

de tres maneras diferentes. Todos estos

M todo 2:Interno (la etiquetastyle)

usando la etiqueta HTML<style>.

M todo 3:Externo (enlace a una hoja de estilo)

estilo externa. A lo largo de este tutorial usaremos este mtodo en

El truco consiste en crear un vnculo desde el documento HTML (por

ejemplo, default.htm) con la hoja de estilo (style.css). Dicho vnculo

Fjate cmo la ruta a nuestra hoja de estilo

aparece indicada por medio del atributohref.

Este vnculo indica al navegador que debera

usar la presentacin del fichero CSS al mostrar

tcnica puede ahorrarte mucho trabajo. Si

Ahora coloca los dos ficheros en la

misma carpeta. Recuerda grabar los

colores de fondo a tus sitios web.

Color de prim er plano:la propiedad 'color'

colores se pueden introducir como valores

fondo de los elementos.

documento HTML. As pues, para cambiar el color de

elementos, entre ellos, a los encabezados y al texto.

Fjate cmo hemos aplicado dos propiedades

a<h1>separndolas por medio de un punto y

Im genes de fondo [background-im age]

para insertar una imagen de fondo.

Para insertar la imagen de la

mariposa como imagen de fondo de

Repetir la im agen de fondo

que, por defecto, la mariposa se

propiedadbackgroundattachmentespecifica si una imagen est fija

Ubicacin de la im agen de fondo

Com binacin de propiedades

forma abreviada de todas las

Usandobackgroundse puede lograr el mismo resultado con una nica lnea

El orden en que deben aparecer las propiedades individuales es el

Estas dos propiedades que no se especifican se estableceran, sin ms, con

sus valores por defecto, que, como ya sabes, sonscrollytop left.

cmo se aplican usando CSS. Tambin veremos cmo

Fam ilia de fuentes [font-fam ily]

lista ordenada de fuentes que se usarn para mostrar

nombres: nombres de una familia y familias genricas.

Al listar fuentes para el sitio web, por

supuesto se empieza por la preferida,

Los encabezados marcados con la etiqueta<h1>se

mostrarn usando la fuente "Arial". Si esta fuente no

Estilo de la fuente [font-style]

con el valornormal, el valoritalico el valoroblique.

Variante de fuente [font-variant]

Peso de la fuente [font-weight]

intensidad o "peso" en negrita debera tener

Tam ao de la fuente [font-size]