PDF de programación - Edición HTML - Estilos CSS - Introducción y sintaxis

MINISTERIO
DE EDUCACIÓN
Y CIENCIA

SECRETARÍA GENERAL
DE EDUCACIÓN
Y FORMACIÓN PROFESIONAL

DIRECCIÓN GENERAL
DE EDUCACIÓN,
FORMACIÓN PROFESIONAL
E INNOVACIÓN EDUCATIVA

CENTRO NACIONAL
DE INFORMACIÓN Y
COMUNICACIÓN EDUCATIVA

Edición HTML

Estilos CSS

Introducción y sintaxis

C/ TORRELAGUNA, 58
28027 - MADRID

Estilos CSS – Introducción y sintaxis

1 de 16

Índice de contenido

Cascading Style Sheets....................................................................................................... 3
¿Por qué se denominan hojas de estilo?......................................................................... 4
¿Por qué se denominan "en cascada"?........................................................................... 4
¿CSS1, CSS2 o CSS3?................................................................................................... 4
Sintaxis básica .................................................................................................................... 5
El editor CSS de N|VU......................................................................................................... 5
Selectores de tipos............................................................................................................... 6
Selector universal................................................................................................................. 7
Agrupando selectores .......................................................................................................... 7
Selectores contextuales....................................................................................................... 8
Selectores basados en atributos........................................................................................ 11
Clases ............................................................................................................................... 11
Pseudoclases..................................................................................................................... 13
Pseudoclases relacionadas con los vínculos................................................................. 13
El selector id ...................................................................................................................... 15
Comentarios....................................................................................................................... 16

Estilos CSS – Introducción y sintaxis

2 de 16

CASCADING STYLE SHEETS
CASCADING STYLE SHEETS

O lo que es lo mismo: hojas de estilo en cascada.

El motivo de haber puesto en primer lugar la denominación en inglés es porque vas a
encontrar en muchos momentos estas siglas para referirse al concepto que trabajaremos en
este epígrafe. Poco a poco iremos descifrando el significado real de esta denominación que,
por ahora, puede resultarnos un tanto críptica.

Lo primero en lo que coincidiremos es en que el lenguaje HTML es francamente antipático y
poco flexible cuando se trata de incidir en la apariencia de una página. El problema real está
en que la concepción original del mismo no pretendía orientarlo hacia el aspecto gráfico: la
misión principal de las etiquetas HTML es proporcionar estructura lógica y semántica al
contenido. Pensemos que el lenguaje HTML surgió en un entorno, el universitario, y con un
propósito, la publicación de contenidos científicos estructurados, eminentemente textuales. El
problema es que la masiva difusión de Internet hizo que se rompiera el marco original y se
hiciera necesario, especialmente desde la irrupción de un uso comercial, presentar páginas en
las que el centro de gravedad se trasladaba del contenido y su estructura a la forma, ya que se
trataba de crear "imagen de marca". Fue entonces cuando empezaron a aparecer los
problemas, ya que el lenguaje HTML no está pensado para trabajar con los elementos formales
sino con los de tipo estructural.

Si te paras a pensar un poco sobre lo que acabas de leer puedes darte cuenta por ejemplo de
que, aunque hayamos podido utilizar las etiquetas <h1> para conseguir un texto de un
determinado tamaño que nos pudiera valer de titular lo lógico habría sido emplearlas para
organizar los contenidos indicando que su contenido es el título de un fragmento que tiene
tiene una importancia superior, que aquellos que van encabezados por un <h2>

El crecimiento exponencial de Internet hizo que la imagen que nos hemos hecho de lo que
debe ser una página WEB fuera acercándose a lo que es hoy: un entorno multimedia en el que
los aspectos formales han cobrado una gran importancia. Pero esta percepción sigue
apoyándose en la utilización del mismo lenguaje que le había servido de base en los primeros
tiempos, lo cual ha hecho que los diseñadores hayan tenido que recurrir a trucos y artimañas
para paliar las deficiencias del lenguaje HTML en lo referente a la presentación visual.

Al tratarse de añadidos a la finalidad original, y en muchos casos utilizaciones francamente
contradictorias con la misma, podemos encontrarnos con situaciones muy problemáticas
cuando pretendemos introducir modificaciones globales en un sitio WEB. ¿Imaginas, por
ejemplo, el trabajo que sería necesario para cambiar el tipo de letra de un sitio WEB
compuesto por cincuenta páginas?

La forma de solucionarlo ha sido la utilización de las hojas de estilo en cascada. Las hojas de
estilo en cascada aportan, como característica esencial, la posibilidad de separar los elementos
formales de los de contenido, de forma que con una pequeña modificación de la hoja de estilo
se pueda cambiar el aspecto de todas las páginas en las que se aplica esa hoja. Volviendo al
ejemplo anterior tal vez nos bastaría con cambiar una vez la palabra sans-serif por serif para
conseguir que las cincuenta páginas de nuestra web cambiaran automáticamente de
apariencia.

Antes de empezar es conveniente considerar una cuestión: el W3C, como organismo
encargado de la estandarización, elabora un conjunto de especificaciones normativas, pero...
cada navegador ofrece un soporte más o menos ajustado a las especificaciones. De hecho nos
encontramos en un momento en el que la especificación CSS3, que incluye una gran cantidad
de posibilidades no contempladas en las versiones previas, no es soportada por ningún
navegador. Incluso, la implementación de las especificaciones CSS2 presenta
importantes deficiencias en Explorer 6 y anteriores, lo cual nos obligará a buscar algunos
trucos para lograr efectos similares en todos los navegadores. Es muy probable que las nuevas
versiones de los navegadores que tal vez hayan aparecido cuando leas esta documentación

Estilos CSS – Introducción y sintaxis

3 de 16

superen estos problemas y se ajusten a la normativa común.

¿POR QUÉ SE DENOMINAN HOJAS DE ESTILO?
¿POR QUÉ SE DENOMINAN HOJAS DE ESTILO?

La denominación de hojas de estilo hace referencia a que podemos, a partir de las etiquetas
básicas de HTML, realizar modificaciones en las propiedades de las mismas, indicándole al
navegador unas instrucciones muy precisas sobre la forma en la que tiene que presentar un
determinado elemento, esto es, el estilo de la presentación.

Una ventaja añadida es que, al tratarse de una colección de instrucciones escrita en formato
de texto. Si recurrimos a su uso más aconsejable, dichas instrucciones estarán separadas de la
propia página web y serán aplicables a múltiples páginas simultáneamente, por lo que
conseguiremos que el código de nuestra página en sí resulte mucho más ligero.

Por otra parte, al quedar un código mucho más limpio gracias a la descarga de los elementos
de formato, la estructura de la información quedará mucho más clara ya que el código tenderá
a ser muy simple.

¿POR QUÉ SE DENOMINAN "EN CASCADA"?
¿POR QUÉ SE DENOMINAN "EN CASCADA"?

A la hora de crear un estilo, las especificaciones que se realicen para un determinado elemento
serán aplicables a todos aquellos elementos que se encuentren "por debajo" de él atendiendo a
un criterio de herencia. Por ejemplo, si especificamos un tipo de letra para el elemento
<body> todos aquellos elementos que puedan heredar las características se presentarán con
el mismo tipo de fuente. Así, el elemento <p> heredará el tipo de letra salvo que
especifiquemos lo contrario y no necesitaríamos volver a indicar esta característica.

Gracias a la organización en cascada podemos crear hojas de estilo muy compactas, ya que
una sola norma en el primer elemento de la cadena de herencia permite que podamos aplicarla
a todos los herederos.

Además de ello se establece un orden de prioridad para la aplicación de las normas en caso de
que resulten contradictorias. El orden de preferencia para aplicar una norma es el siguiente:

1. Estilo especificado dentro de la etiqueta. (estilo en línea)
2. Estilo especificado en la cabecera del documento. (hoja de estilos interna)
3. Estilo definido en un documento independiente al que se enlaza nuestra página. (hoja

de estilos externa)

Teniendo en cuenta el orden mencionado, el procedimiento más cómodo es crear una hoja de
estilo en un archivo independiente y vincular las páginas a este archivo. Si queremos realizar
alguna modificación en un elemento concreto podríamos recurrir a uno de los dos primeros
procedimientos que, al ser más específicos, resultarán preferentes.

¿CSS1, CSS2 O CSS3?
¿CSS1, CSS2 O CSS3?

Es posible que en cuanto intentes localizar alguna información sobre hojas de estilo te
aparezca la referencia a uno de los