Hojas de estilo: CSSCon la intencion de separar el contenido de la presentacion y de ofrecer mayores y mas
faciles posibilidades de presentacion el W3 Consortium sugirio la utilizacion de las Hojas
de Estilo (CSS, Cascade Style Sheet) en la Web. En la actualidad las especificaciones
CSS se encuentran en el nivel 2, aunque las del nivel 1 (CSS1)son las mas soportadas.
1. Sintaxis CSS
Una hoja de estilo esta formada de un conjunto de reglas de estilo que le dice al
navegador como presentar un documento. Cada regla de estilo consta de dos partes:
Selector { propiedad: valor;... }
1. Selector. Representa una etiqueta estandar del HTML.
2. Declaracion. Viene definido por un par propiedad:valor separados entre si por
dos puntos. En propiedad indicamos que caracterıstica (tipo de fuente, color, etc...)
queremos cambiar y en valor el valor que le damos.
H1 { color: blue }
Para no repetir reglas que se aplican sobre las mismas etiquetas se pueden agrupar los
selectores. Por ejemplo, todas las cabeceras van a tener el mismo color:
H1, H2, H3, H4, H5, H6 { color: blue }
Tambien se pueden anadir comentarios dentro de los ficheros css de la siguiente manera:
/* COMMENTS CANNOT BE NESTED */
1.1. Definicion
Hay tres maneras de definir los estilos:
1. Se pueden declarar directamente sobre la etiqueta HTML:
<ETIQUETA style="propiedad:valor;....">... </ETIQUETA>
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
1
Por ejemplo si a un parrafo le queremos dar un tamano de fuente 10 y un margen
izquierdo de 20 pts.
<P STYLE="font-size:10pt; margin-left:20pt;">
Mi Primer parrafo con Estilo
</P>
2. Se pueden definir en su conjunto para toda la pagina HTML:
<STYLE TYPE="text/css">
<!-
......
etiqueta {propiedad:valor; .........}
......
-->
</STYLE>
Un ejemplo serıa:
<HTML>
<HEAD>
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
2
<TITLE>Ejemplo CSS</TITLE>
<STYLE TYPE="text/css">
<!-
BODY {margin-left: 0.5in; margin-right: 0.5in}
H1 {color:blue;}
P {font-size:10pt; marginleft:20pt;}
-->
</STYLE>
</HEAD>
<BODY>
<H1>Titulo en azul</H1>
<P>Parrafo con letra 10</P>
</BODY>
</HTML>
3. Se pude especificar en un fichero externo. Esta manera es la mas flexible y recomen-
dada, ya que el estilo asociado a una pagina HTML se puede cambiar sin modificar
el codigo de dicha pagina y ademas la misma hoja de estilo se puede compartir
con diferentes documentos. Para enlazar la hoja de estilo con una pagina HTML se
puede utilizar la etiqueta LINK:
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
3
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="hoja_estilos.css">
</HEAD>
......
</HTML>
El fichero hoja estilos.css es un simple fichero de texto con extension .css en el que
se define la hoja de estilo.
/*Fichero hoja_estilos.css*/
BODY {margin-left: 0.5in; margin-right: 0.5in}
H1 {color:blue;}
P {font-size:10pt; marginleft:20pt;}
/*Fin del fichero hoja_estilo.css*/
1.2. Orden de aplicacion
Estos tres modos de definir estilos pueden convivir en la misma pagina html, pero si
sobre un mismo elemento se han definido diferentes estilos, solo se aplicara uno de ellos
de acuerdo a las siguientes reglas, ordenadas de menor a mayor prioridad:
1. Las definidas por el navegador
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
4
2. Hoja de estilo externa
3. Hoja de estilo interna (dentro de la etiqueta ¡head¿)
4. Directamente sobre la etiqueta HTML
Por ejemplo, una hoja de estilo externa tiene las siguientes propiedades para el selector
h3:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
Y una hoja de estilo externa tiene estas propiedades tambien para el selector h3:
h3
{
text-align: right;
font-size: 20pt
}
Si la pagina con la hoja de estilo interna tambien esta enlazada con la hoja de estilo
externa, las propiedades para h3 serıan:
color: red;
text-align: right;
font-size: 20pt
El color es heredado desde la hoja de estilo externa, y el text-alignment y el font-size son
reemplazados por las de la hoja de estilo interna.
2. Propiedades de las hojas de estilo
Las propiedades estan divididas en 6 grandes grupos que facilitan su utilizacion y
documentacion.
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
5
2.1. Propiedades de texto
Son propiedades que afectan a la presentacion visual de caracteres, espacios, palabras
y parrafos. Las propiedades que podemos utilizar son las siguientes:
color. Especificamos el color del primer plano del contenido del texto.
Nombre Color | Valor HEX | Rgb (R %,G %,B%) | Rgb(R, G,B)
Ejemplo:
H1{color:red}
text-transform. Especifica, por medio de palabras reservadas, si las letras del
texto deben transformarse en mayusculas, minusculas, solo la primera letra de cada
palabra en mayusculas, o si ha de dejarse como esta.
uppercase | lowercase | capitalize | none
Ejemplo:
H1 {text-transform:uppercase}
vertical-align. Alineacion vertical del texto en relacion con la lınea base del texto.
baseline | sub | super | top | text-top | middle | mottom | text-bottom
Ejemplo:
STRONG {vertical-align:sub}
text-align. Fija la alineacion del bloque, al margen izquierdo, al derecho, centrado
o a ambos.
left | right | center | justify
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
6
Ejemplo:
H1{text-align: center}
text-indent. Fija la sangrıa o indentacion de la primera lınea del texto.
XX unidad |%
Ejemplo:
P {text-indent:2em}
line-height. Indica la distancia entre dos lineas adyacentes.
normal | XX unidad |%
text-decoration. Fija una o mas caracterısticas ”decorativas”del texto, como subra-
yado, lineas superiores, caracteres tachados o parpadeantes. Si se aplica a un ele-
mento de bloque la heredan solo los descendientes que sean de texto (o en-linea). Si
se aplica a uno de estos la heredan todos los descendientes.
underline | overline | line-through | blink | none
Ejemplo:
H1 {text-decoration: underline}
letter-spacing. Especifica el espaciado entre letras. En el caso de especificar una
longitud esta se sumara a la normal.
normal | XX unidad
Ejemplo:
H1{letter-spacing: 0.5pc}
word-spacing. Especifican el espaciado entre palabras. En el caso de especificar
una longitud esta se sumara a la normal.
normal | XX unidad
Ejemplo:
H1 { word-spacing: 0.5pc}
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
7
2.2. Propiedades de las fuentes
Con estas propiedades controlamos el estilo de una fuente, su tamano, su familia, su
grosor, etc. Las propiedades que podemos utilizar son las siguientes:
font-family.Indicamos la familia de la fuente a utilizar. Sus posibles valores son los
nombres de las fuentes, pudiendo especificar un conjunto de familias. Se selecciona
la primera que se encuentra en el sistema.
Ejemplo:
BODY{
font-family: Verdana, Arial, Helvetica, sans-serif}
font-style. Especifica el estilo de la fuente, es decir, si los caracteres iran en normal,
en italica (cursiva) o en oblicua (un poco mas inclinada que la italica).
normal | italic | oblique
Ejemplo:
H1,H2,H3{font-style:italic}
font-weight.Especifica el peso, densidad o grosor (cantidad de espacio ocupado en
relacion con el rectangulo en que se inscribe el caracter) de la fuente de caracteres
dentro de una familia de fuentes, con valores entre 100 y 900 siendo cada vez mas
densos. El valor 400 equivale a normal, y el 700 a bold.
lighter | normal | bold | bolder | 100 | 200 | 300 | ...... | 900
Ejemplo:
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
8
STRONG{font-weight:bolder}
font-size. Especifica el tamano de la fuente.
XX units |% | larger | smaller | xx-small | x-small | medium | large |x-large | xx-large
Ejemplo:
H1 {font-size: 150%}
2.3. Propiedades del fondo
Son las propiedades que permiten fijar el color del primer plano y fondo de un elemento.
Las propiedades que podemos utilizar son las siguientes:
background-color. Especifica el color del fondo del elemento, que puede ser un
color o la palabra reservada transparent.
transparent | Nombre Color | Valor HEX | Rgb (R %,g%,B%) | Rgb(R,
G,B)
Ejemplo:
H1{background-color:#0000FF}
background-image. Designa una imagen para rellenar el fondo del elemento por
medio de una URL o la palabra reservada none para indicar que no se utilizara
ninguna imagen. Puede fijarse tambien un color que se colocara debajo de la imagen,
y que asomara si la imagen no esta disponible o, si lo esta, detras de sus zonas
transparentes.
none | url(direccion)
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
9
Ejemplo:
H1 {background-image: white url("fondo.gif")}
background-attachment. Establece si una imagen de fondo es fija o se mueve con
el scroll del resto de la pagina. Solo funciona con la etiqueta body.
scroll | fixed
Ejemplo:
body
{
background-image: url(fondo.gif);
background-attachment: scroll
}
background-repeat. Establece si una imagen si se repetira y como. En Netscape
no funciona con la etiqueta body.
repeat | repeat-x | repeat-y | no-repeat
Ejemplo:
body
{
background-image: url(fondo.gif);
background-attachment: scroll
}
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
10
2.4. Propiedades de margenes y padding
Con estas propiedades especificamos los margenes de cualquier elemento y con el pad-
ding controlamos la distancia entre el borde y el contenido. Las propiedades que podemos
utilizar son las siguientes:
margin-top, margin-bottom, margin-left, margin-right. Fijamos el margen
superior, inferior, izquierdo o derecho. Con la propiedad auto el navegador un valor
adecuado dependiendo del tipo de elemento.
XX unidades |% | auto (el valor por defecto es 0)
Ejemplo:
BODY {margin-top:1cm}
margin.Mediante esta propiedad podemos especificar todos los valores de los mar-
genes de una sola vez. Se pueden poner hasta cuatro valores, para especificar cada
uno de los margenes.
margin: ancho1 ancho2 ancho3 ancho4
Pero si solo especificamos ancho1 se refiere a los cuatro lados del margen. Si se
especifican dos valores, ancho1 se refiere a los lados superior e inferior y ancho2 al
izquierdo y derecho. En el caso de poner los tres primeros, ancho1 se refiere al lado
superior, ancho2 al izquierdo y derecho y ancho3 al inferior.
Ejemplo:
BODY {margin: 1in 2in}
padding-top, padding-bottom, padding-left, padding-right. Distancia entre
el borde superior, inferior, izquierdo o derecho y el contenido.
XX unidades |%
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
11
Ejemplo:
Table {padding-top: 12pt}
padding. Mediante esta propiedad podemos definir en una unica propiedad los
cuatro valores anteriores. Funciona de la misma manera que la propiedad margin.
margin: ancho1 ancho2 ancho3 ancho4
Ejemplo:
H1 {padding:10%}
2.5. Propiedades del borde
Con estas propiedades especificamos el ancho, color y estilo del area de borde. Las
propiedades que podemos utilizar son las siguientes:
border-top-width, border-bottom-width, border-left-width, border-right-
width. Mediante estas cuatro propiedades especificamos el ancho del area de borde
por encima, debajo, a la izquierda y derecha del elemento.
thin | medium | thick | XX unidad
Ejemplo:
H1 {border-top-width:thin}
border-width. Especificamos en una unica propiedad el ancho de todo el area de
borde. Funciona de la misma manera que la propiedad margin.
thin | medium | thick | XX unidad
Ejemplo:
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
12
H1 { border-width: thin thick medium}
border-style. Especificamos el estilo de visualizacion del borde. Los posibles valores
son:
• none: ninguno, anchura cero
• dottet: punteado
• dashed: discontinuo
• solid: liso
• double: doble
• groove: hundido
• ridge: resaltado
• inset: toda la caja hundida
• outset: toda la caja resaltada
none | dottet | dashed | solid | double | groove | ridge | inset | outset
Ejemplo:
Table {border-style: double}
border-color. Especificamos el color del borde.
nombre del color | valor HEX | Rgb (R %, G %, B%) | Rgb (R,G,B)
Ejemplo:
Table {border-color: red}
border-top, border-bottom, border-left, border-right. En cada una de las
cuatro propiedades podemos especificar en conjunto todas las caracterısticas de
cada uno de los lados del borde: tamano, estilo y color.
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
13
anchura | estilo | color
Ejemplo:
Table {border-top: thin dashed red}
border. Mediante esta propiedad podemos especificar de forma conjunta todas las
propiedades de un borde: tamano, estilo y color.
anchura | estilo | color
Ejemplo:
Table {border: thick double red}
2.6. Propiedades de lista
Son propiedades que afectan a la presentacion visual de las marcas de los elementos
de una lista. Las propiedades que podemos utilizar son las siguientes:
list-style-image. Reemplaza el marcador de los elementos de una lista por una
imagen.
url () | none
Ejemplo:
ol
{
list-style-image: url(blueball.gif);
}
list-style-type. Define el tipo de marcador de los elementos de una lista. Algunos
navegadores solo soportan el valor disc.
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
14
none | disc | circle | square | decimal | lower-roman | upper-roman |lower-alpha | upper-alpha
Ejemplo:
ul
{
list-style-type: disc
}
list-style-position. Define si el marcador se situa como parte del texto o lo man-
tiene a la izquierda del texto.
inside | outside
Ejemplo:
ol
{
list-style-position: inside
}
3. Selectores avanzados:Class e ID
Estos tipos de selectores permiten la asignacion de estilos de una manera independiente
de los elementos del documento. Estos selectores pueden ser usados solos o en conjuncion
con etiquetas.
El selector Class necesita una modificacion en el documento html donde se va a
aplicar, es decir las etiquetas necesitan el atributo CLASS:
<P CLASS="importante">NOTA: Es necesario incluir el atributo CLASS </P>
<H3 CLASS="importante">
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
15
En la hoja de estilo se debe anadir:
.importante {color:red;}
El . indica que es un selector class. Si queremos anadir clases a etiquetas concretas,
serıa de la siguiente manera:
P.importancia{color:red;}
Los selectores ID son diferentees a los selectores class. Mientras que un selector class
puede ser aplicado a diferentes elementos en una pagina, un serlector id siempre se
aplica a un unico elemento. Un atributo ID debe ser unico en el documento. Ademas
su sintaxis es diferente, van precedidos de un #.
#importancia{color:red;}
p#para1
{
text-align: center;
color: red
}
Para aplicarlos sobre una etiqueta es decesario el atributo ID.
<P ID="importante">NOTA: Es necesario incluir el atributo CLASS </P>
La diferencia entre estos dos tipos de selectores es que Class puede ser usado varias
veces en el mismo documento mientras que el selector ID solamente puede ser aplicado
una y solo una vez.
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
16
4. Pseudo-Clases y Pseudo-Elementos
Son clases y elementos especiales que son automaticamente reconocidos por los navega-
dores que soportan CSS. Las pseudo-clases distinguen entre diferentes tipos de elementos
(por ejemplo, enlaces visitados o activos). Los pseudo-elementos se refieren a subpartes
de los elementos como la primera letra de un parrafo. Las reglas con pseudo-clases tienen
la siguiente sintaxis:
selector:pseudo-clase { propiedad: valor }
o
selector:pseudo-elemento { propiedad: valor }
Estos selectores no se deberıan especificar con el atributo CLASS de HTML. Se pueden
usar tambien con selectores clases:
selector.clase:pseudo-clase { propiedad: valor }
o
selector.clase:pseudo-elemento { propiedad: valor }
4.1. Pseudo-clases del ancla
En CSS1 solo hay tres pseudo-clases y son asignadas al elemento A para mostrar de
diferente manera los enlaces no visitados, los activos, los visitados y cuando el raton pasa
sobre un enlace.
A:link { color: red }
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
17
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
A:hover {}
4.2. Pseudo-elemento primera lınea
Permite cambiar el estilo a la primera lınea de un elemento de nivel de bloque como
puede ser el parrafo. Un ejemplo podrıa ser:
P:first-line {
font-variant: small-caps;
font-weight: bold }
4.3. Pseudo-element primera letra
Este pseudo-elemento es utilizado para cambiar el estilo de la primera letra de un
elemento de nivel de bloque. Por ejemplo:
P:first-letter { font-size: 300%; float: left }
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
18
5. Unidades de longitud
Un valor de longitud se forma por un signo + o - opcional, seguido de un numero y
de una abreviacion de dos letras que indica la unidad. No hay espacios en un valor de
longitud (1.3em). Una longitud de 0 no necesita las dos letras para identificar la unidad.
5.1. Relativas
Las unidades relativas dan una longitud relativa a otra propiedad longitud. Las si-
guientes unidades relativas estan disponibles:
em (ems, la altura de la fuente de los elementos)
ex (x-height, altura de la letra ”x”)
px (pixels, relativa a la resolucion del lienzo)
5.2. Absolutas
Las unidades de longitud absolutas son muy dependientes del medio de salida, y son
por lo tanto menos utiles que las unidades relativas. Las siguientes unidades absolutas
estan disponibles:
in (pulgadas; 1 pulgada=2.54 cm)
cm (centımetros; 1 cm = 10 mm)
mm (milımetros)
pt (puntos; 1pt = 1/72 pulgada)
pc (picas; 1 pc = 12 pt)
6. CSS Avanzado
6.1. Selector universal
El selector universal se escribe con un asterisco (*) y representa a cualquier elemento
de la pagina. Por ejemplo, con:
* {color: red}
Todos los elementos de la pagina tendran como color de primer plano el rojo
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
19
6.2. La regla @import
La regla @import permite importar hojas de estilo desde otras hojas de estilo. Se
puede usar de las siguientes formas:
@import "hoja_de_estilo.css";
@import url("hoja_de_estilo.css");
Esta declaracion debe ir antes que cualquier otra regla en la hoja de estilo.
6.3. La regla !important
la regla !important, suplantar con sus propias reglas de estilo las especificadas por el
autor del documento.
De este modo, los usuarios con requerimientos especıficos pueden modificar las opciones
del creador de las paginas Web con el fin de mejorar su accesibilidad.
Los navegadores tienen opciones que permiten modificar la apariencia de las paginas
visitadas. Estas opciones constituyen de hecho la hoja de estilo del usuario. Explorer,
ademas de las opciones disponibles en los menues, permite usar una hoja de estilo externa.
De este modo, el usuario obtiene la maxima flexibilidad para aplicar sus preferencias.
Probar la siguiente hoja de estilo:
* { visibility: hidden !important;}
BODY { visibility: visible !important;
background-color: black !important;
background-image: url(borrando.gif) !important;
background-repeat: no-repeat !important;
background-position: 200px 120px !important;}
Depues, editar las Propiedades de Internet de Explorer y en la opcion General-Accesibilidad
indicar la posicion de su hoja de estilo.
6.4. Propiedad del cursor
Especifica el tipo de cursos que sera mostrado cuando se senale un elemento.
url() | default | auto | crosshair | default | pointer | move | e-resize | ne-resize
| nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait |help
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
20
Ejemplo:
h2
{
cursor: crosshair
}
p
{
cursor : url("first.cur"), url("second.cur"), pointer
}
6.5. Propiedades de posicionamiento
Estas propiedades permiten especificar, de manera relativa o absoluta la posicion de
un elemento, su forma y especifcar lo que deberıa pasar si el contenido de un elemento es
mas grande que el area especifcada.
position. Situa un elemento en su posicion normal, en una posicion relativa con
respecto al elemento anterior o en cualquier posicion fija de la pagina.
auto | relative | absolute
Ejemplo:
h1
{
position:absolute;
top:150px;
}
top. Especifica la situacion del borde superior de un elemento.
auto | % | unidad
Ejemplo:
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
21
h1
{
position:absolute;
top:150px;
}
bottom. Especifica la situacion del borde inferior de un elemento.
auto | % | unidad
Ejemplo:
h1
{
position:absolute;
bottom:150px;
}
left. Especifica la situacion del borde izquierdo de un elemento.
auto | % | unidad
Ejemplo:
h1
{
position:absolute;
top:150px;
left:30px;
}
right. Especifica la situacion del borde derecho de un elemento.
auto | % | unidad
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
22
Ejemplo:
h1
{
position:absolute;
top:150px;
right:30px;
}
clip. Especifica la forma de un elemento.
rect (top, right, bottom, left) | auto
Ejemplo:
img
{
clip: rect(10px, 5px, 10px, 5px)
}
overflow. Especifica que sucede cuando el contenido de un elemento es mayor que
el area de visualizacion.
visible | hidden | scroll | auto
Ejemplo:
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
23
z-index. Indica el orden de superposicion de los elementos en el caso de que coin-
cidan en el mismo espacio. Un elemento con un numero mas alto siempre se posi-
cionara encima de un elemento con menor numero.
auto | entero
Ejemplo:
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
7. Bibliografıa
HTML dinamico http://html.programacion.net/dinamico/tutorial/indice.htm
CSS Cascading Style Sheets, level 1 http://www.w3.org/TR/REC-CSS1
CSS Cascading Style Sheets, level 2 http://www.w3.org/TR/REC-CSS2/
Listado de propiedades soportadas por los navegadores http://www.webreview.com/style/
Traduccion de la especificacion CSS2: http://www.sidar.org/recur/desdi/traduc/es/css/cover.html
Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion
24