Computación e Informática Tercer Ciclo

HOJAS DE ESTILO EN CASCADA (CSS)

1. Hojas de estilo

Las hojas de estilo son un mecanismo para separar el formato de representación y

presentación del contenido. Eso se consigue asociando atributos de presentación a cada una
de las etiquetas de HTML o a subclases de éstas.

Por ejemplo, si deseamos que todos los párrafos de nuestro documento (definidos por
<p></p>) tengan el fondo rojo y el texto en amarillo usaremos la siguiente definición:

<style type=”text/css”>
p {color: red; background:yellow;}
</style>

Para indicar qué estilos debemos usar en una página, disponemos de la etiqueta style, que
nos permite especificarlos in situ, y de otra etiqueta link, que nos permite indicar un fichero
externo que contendrá nuestros estilos.

La etiqueta style tiene que estar en la cabecera de la página. Dispondremos de un parámetro

type que nos permite indicar qué sintaxis usaremos para definir los estilos, que en nuestro
caso será text/css. La etiqueta link, para poder definir una hoja de estilos externa, tiene la
siguiente apariencia:

<link rel=“stylesheet” href=“miweb.css” type=“text/css”>

De hecho es muy recomendable el uso de la etiqueta link para la definición de las hojas de
estilo asociadas a una página, ya que de ese modo facilitaremos el mantenimiento, al
concentrarse en un único fichero todos los estilos de un sitio web en lugar de estar replicados
en cada una de las páginas.

2. Formato de las hojas de estilo

Como hemos podido ver en los ejemplos anteriores, el formato de las hojas de estilo es el
siguiente:

<elemento> {<formato>}

Por ejemplo, el estilo:

p {color: red; background:yellow;}

Será aplicado automáticamente a cualquier párrafo escrito en HTML:

<p>texto destacado</p>

Y producirá el siguiente resultado:

Cabe destacar que la sintaxis de CSS (las hojas de estilo) es sensible a mayúsculas y
minúsculas.

Esta sintaxis nos permitiría definir el formato que deseamos para los párrafos de nuestra web.
Existe una extensión de dicha sintaxis que hace posible definir un estilo que sólo se aplicará a
ciertas partes de nuestro documento. En concreto, nos permite definir clases de elementos a
los que aplicaremos el estilo.

Herramientas de Internet 1 Marco A. Sotelo Monge

Computación e Informática Tercer Ciclo

Por ejemplo, para definir una clase de párrafo que llamaremos destacado:

.destacado {color: red; background:#00FFFF;}

Podemos usar luego el atributo class que HTML 4.0 añadió para definir la clase de cada
párrafo:

<p class="destacado">texto destacado</p>

Y producirá el siguiente resultado:

Existe además un método para asignar un estilo a párrafos individuales, aportando así mayor
granularidad al concepto de clases.
Para ello deberemos definir el estilo de un elemento individual de HML mediante CSS usando
la siguiente sintaxis:

#parrafo1 {color: blue; background:#00FFFF;}

A continuación, podemos otorgar a algún elemento de HTML dicha identidad mediante el uso
del atributo ID:

<p class=“destacado” id=“parrafo1”>otro destacado pero el color en éste viene dado

por su identidad</p>

Y producirá el siguiente resultado:

3. Las etiquetas SPAN y DIV

Hemos visto cómo asignar estilos a los elementos de HTML (párrafos, etc.), pero en algunas
ocasiones es interesante asignar estilos a bloques de texto o de contenido que no formen parte
de ningún bloque de HTML.

Ejemplo:
Podría interesarnos definir un estilo que permitiese marcar palabras concretas del texto (para
indicar cambios, etc.). Evidentemente, no podemos definir una nueva etiqueta de HTML, ya que
ello comportaría que los navegadores existentes que desconocen nuestra etiqueta ignorarían
dicho contenido.

La solución viene de la mano de la etiqueta div, que ya hemos visto, y de span.

Si queremos marcar un bloque de contenido como perteneciente a una clase concreta para
poder definir un estilo para él o darle una identificación individual, deberemos envolver dicho
contenido con una etiqueta span o div. La diferencia entre usar una u otra consistirá en que
div se asegura de que tanto al inicio del bloque como al final haya un salto de línea. Podemos,
así, definir estilos para bloques de texto sin que tengamos que envolverlos con etiquetas que
modificarían su formato (como p).

Por ejemplo, podemos definir:

.dudoso
{ color: red; }

.revisado
{color:blue; }

Herramientas de Internet 2 Marco A. Sotelo Monge

Computación e Informática Tercer Ciclo

Y usarlo luego en nuestro documento HTML, por ejemplo, el siguiente código:

<p>este párrafo <span class=“dudoso”>largo</span> deberá ser corregido por el <span

class=“revisado”>director general</span> </p>

Producirá el siguiente resultado:

4. Propiedades más importantes

Veremos algunas de las propiedades más importantes que podemos fijar gracias a CSS. Cabe
destacar que, debido a las incompatibilidades existentes entre los diferentes navegadores, es
recomendable probar nuestras páginas con diferentes versiones de navegador y con
navegadores distintos a fin de asegurar su correcta visualización.

4.1. Propiedades relativas a tipos de letra

Las propiedades que nos permitirán definir el aspecto (tipografía) del texto son:

ƒ font-family: tipo de letra (que puede ser genérico entre: serif, cursive, sans-serif,
fantasy y monospace). Podemos especificar no un sólo tipo, sino una lista de tipos,
genéricos o no, separados por comas. Al especificar tipos, hay que recordar que
éstos pueden no estar presentes en el computador del usuario que visite nuestra
página.
ƒ font-size: tamaño del tipo de letra. xx-small, x-small, small, medium, large, x-large,
xx-large, además de valores numéricos de tamaño relativo o tamaño absoluto.
ƒ font-weight: grosor del tipo de letra. Los valores posibles son: normal, bold, bolder,
lighter y valores numé-ricos entre 100 y 900 (donde 900 será el tipo de negrilla más
grueso).
ƒ font-style: estilo del tipo de letra. Disponemos de normal, italic, italic small-caps,
oblique, oblique small-caps y small-caps.

4.2. Propiedades del texto

Disponemos también de un grupo de propiedades que nos permiten alterar el texto de
nuestra página y el formato de éste.

ƒ line-height: interlineado en valor numérico o porcentual.

ƒ text-decoration: decoración del texto: none, underline (subrayado), overline
(sobrerrayado), line-through (tachado) o blink (parpadeo).
ƒ vertical-align: alineación vertical del texto. Disponemos de: baseline (normal), sub
(subíndice), super (superíndice), top, text-top, middle, bottom, text-bottom o un
porcentaje.
ƒ text-transform: modificaciones del texto: capitalize (la primera letra en
mayúsculas), uppercase (convierte a mayúsculas el texto), lowecase (lo convierte a
minúsculas) o none.
ƒ text-align: alineación horizontal del texto: left, right, center o justify.
ƒ text-indent: sangrado de la primera línea del texto en valor absoluto o porcentual.

4.3. Propiedades de bloques

Las siguientes propiedades afectan a los bloques de texto (párrafos, etc.).

ƒ margin-top, margin-right, margin-bottom, margin-left: distancia mínima entre un

bloque y los elementos adyacentes. Valores posibles: tamaño, porcentaje o auto.
ƒ padding-top, padding-right, padding-bottom, padding- left: relleno de espacio
entre el borde y el contenido del bloque. Valores posibles: tamaño en valor
absoluto, porcentual o auto.

Herramientas de Internet 3 Marco A. Sotelo Monge

Computación e Informática Tercer Ciclo
ƒ border-top-width, border-right-width, border-bottom-width, border-left-width:
anchura del borde del bloque en valor numérico.
ƒ border-style: estilo del borde del bloque. none, solid o 3D.
ƒ border-color: color del borde del bloque.
ƒ width, height: medidas del bloque. Valores en porcentaje, valores absolutos o
auto.
ƒ float: justificación del contenido de un bloque. Valores: left, right o none.
ƒ clear: colocación de los otros elementos respecto al actual. Valores posibles: left,
right, both o none.

4.4. Otras propiedades

Disponemos, además, de otras propiedades de las hojas de estilo que nos permiten
modificar otros aspectos:

ƒ color: color del texto.

ƒ background: color de fondo o imagen de fondo. Valores, un color o una URL del
fichero de imagen. Por ejemplo:

background: url(fondobonito.gif);

ƒ display: decide el carácter de bloque o no de un elemento. Puede ser: inline (como

<I> o <B>), block (como <P>, list como <LI> o none, que inhabilita el elemento).
ƒ list-style: estilo de marcador de un elemento de una lista (podemos así usar un
gráfico como marcador). Valores posibles: disc, circle, square, decimal, lower-
roman, upper-roman, lower-alpha, upper-alpha, none o una URL de una imagen.
ƒ white-space: indica qué tratamiento deben tener los espacios en blanco, si el
habitual o deben ser respetados tal cual, como en el bloque <PRE>. Valores:
normal y pre.

Ejemplos:

ƒ Crear un estilo que modifique el color de fondo y color del texto del encabezado h1.
ƒ Crear un estilo que modifique el color de fondo y color del texto de todos los encabezados.
ƒ Crear un identificador que además del fondo y color de texto convierta en cursiva
ƒ Crear un estilo que establezca el color de fondo de todas las tablas.

Herramientas de Internet 4 Marco A. Sotelo Monge