Primeros elementos de las hojas de estilo

A
Prembulo
El aprendizaje de la publicacin en la Web se haca tradicionalmente distinguiendo el Html de las hojas de estilo CSS. Con la desaparicin, en Html5,
de todos los atributos de presentacin, se hace difcil, casi imposible, ilustrar
el cdigo y las etiquetas Html. De forma lgica parece necesario introducir
algunos elementos de las hojas de estilo para responder a las limitaciones de
la presentacin y poder as ilustrar las explicaciones y los ejemplos.
Este captulo presenta los elementos bsicos de las hojas de estilo que se
usarn en la parte dedicada a Html5.
Lo importante, en este punto de nuestro estudio, es simplemente comprender las funciones respectivas de Html dedicadas a la estructuracin del
contenido y de las hojas de estilo asociadas a la presentacin del mismo.

B
Propiedades de estilo

Editions ENI - All rights reserved

Las hojas de estilo abarcan todo aquello relacionado con la presentacin del
documento Html como el color, la alineacin, el tamao, los bordes, los
fondos o el interlineado.
La declaracin de un estilo se hace mediante el binomio propiedad:
valor;.
Ejemplo
text-align: center;

Lo que puede interpretarse como: "alinear el texto de forma centrada".

45

Captulo 2
Detallemos esta notacin:
- propiedad indica el elemento de presentacin que se ve implicado;
por ejemplo color para el color, text-align para la alineacin,
border para los bordes, font-size para el tamao de la fuente.
- la propiedad est separada por su valor mediante dos puntos.
- valor especifica una palabra clave, un porcentaje o un tamao en
funcin de la propiedad a la que est asignado.
- el punto y coma final indica que se ha terminado la declaracin de estilo,
y es obligatorio.
- se permite el uso de espacios. As, ciertos autores tienen la costumbre de
incluir un espacio entre los dos puntos y el valor para mejorar la
legibilidad del cdigo.

C
Selectores
A continuacin hay que determinar los elementos del cdigo Html que se
vern afectados por el efecto de presentacin. Estos elementos se llaman
selectores.
Selectores bsicos
El primer selector que nos viene a la mente es la etiqueta Html. De este
modo podemos por ejemplo "enganchar" la declaracin de estilo anterior
(alinear el texto de forma centrada) a la etiqueta <h1>.
La sintaxis es: selector { propiedad: valor;}
Ejemplo
h1 { text-align: center;}

46

Primeros elementos de las hojas de estilo

Comentarios
- Se usa simplemente la etiqueta, sin los signos menor que (<) y mayor que
(>). Es decir, nicamente el texto de la etiqueta.
- La declaracin de estilo se efecta entre dos llaves.
- No hay que olvidar la llave de cierre, en caso contrario el navegador no
tendr en cuenta la declaracin de estilo.
De este modo, todas las etiquetas <h1> se alinearn de forma centrada.
Selectores de clase
En ciertas situaciones, no queremos agregar un efecto de presentacin a
todas las etiquetas de un tipo determinado, sino a ciertas etiquetas elegidas
libremente. Las hojas de estilo cuentan para ello con la nocin de clases
(class) que permite al diseador definir sus propios selectores. De ah el
nombre de selector universal.
La etiqueta a la que se quiere aplicar la declaracin de estilo se distinguir
de las dems por el atributo class="nombre_clase" siendo, por ejemplo, <h1 class="efecto1"> ... </h1>.

Editions ENI - All rights reserved

La sintaxis es: .nombre_clase { propiedad: valor;}

El nombre de la clase, precedido de un punto y seguido de la declaracin
de estilo.
Ejemplo
.efecto1 { text-align: center;}

Aqu nicamente la etiqueta <h1> con el atributo class="efecto1"

estar centrada. Adems, esta etiqueta de presentacin podr aplicarse a
otras etiquetas del cdigo como por ejemplo un prrafo o una imagen.

47

Captulo 2
Selector de identificador
Su concepto es muy cercano a los selectores de clase pero, aqu, no se
desea aplicar el efecto del estilo ms que a un nico elemento de la pgina.
Este elemento, siendo nico, podr tratarse como un objeto que se podr
manipular por JavaScript.
Este elemento nico se identifica mediante el atributo id="nombre_
identificador" siendo, por ejemplo, <h2 id="titulo2"> ...
</h2>.
La sintaxis en este caso es:
valor;}

#identificador

propiedad:

Ejemplo
#titulo2 { text-align: center;}

El nombre del identificador, precedido por el signo de almohadilla (#) y

seguido de la declaracin de estilo.

D
Incorporacin del estilo
Existen mltiples formas de incorporar las declaraciones de estilo en una
pgina Html. En este punto del estudio de CSS, vamos a explicar las elementales.
Estilo en lnea
La declaracin de estilo se agrega directamente a una etiqueta concreta del
cdigo Html mediante el atributo style.

48

Primeros elementos de las hojas de estilo

Ejemplo
<h1 style="text-align: center;"> ... </h1>

Esta forma bsica no respeta la regla de separacin de contenido y presentacin. Su uso ser, por tanto, excepcional.
Estilo interno
Las declaraciones de estilo se agrupan en el encabezado del documento
entre las etiquetas <head> ... </head>. La sintaxis es la siguiente:
<style type=""text/css">
Declaraciones de estilo
</style>

Editions ENI - All rights reserved

Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style type=""text/css">
h1 { color: red;}
.efecto1 { padding-left: 20px;
font-style: italic;}
</style>
<body>
<h1>Titulo 1 en rojo</h1>
<h2 class="efecto1">Subttulo en cursiva</h2>
<h1>Ttulo 2 en rojo</h1>
</body>
</html>

49

Captulo 2

50