PDF de programación - CSS

Introducción

En esta sección intentaremos iniciarnos en el uso de las Hojas de Estilo en Cascada o CSS,
que se utilizan para dar estilo a documentos HTML y XML, separando el contenido de la
presentación. Es un mecanismo simple que describe cómo se va a mostrar un documento en la
pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente
en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos
ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.

¿Qué es CSS?

CSS es la abreviatura empleada para referirse a Cascade Style Sheets (Hojas de Estilo en
Cascada) y es la tecnología empleada para solventar los conflictos que genera el excesivo uso
de tablas y “trucos” en HTML, y de esta manera separar la presentación del contenido.



Con el uso de las CSS, se le indica al documento el estilo de cada elemento en la página a
través del uso de un archivo externo y no directamente en el código HTML, de esta manera,
cada cambio que se realice no tendría que hacerse a cada página sino que afectaría a todos
los elementos vinculados con esa hoja de estilo, lo cual es muy útil para sitios que contengan
muchas páginas.

Historia de las CSS

Las hojas de estilo hicieron su aparición alrededor del año 1970, poco después de la creación
del lenguaje de etiquetas SGML, donde ya se observó la necesidad de un estándar que
permitiera aplicar diferentes estilos de forma rápida y eficaz sobre distintos documentos



electrónicos.

Con la expansión de internet, y el crecimiento del lenguaje HTML, surgieron varios tipos de
navegadores y con ellos, la dificultad de visualizar un sitio web con la misma apariencia en
todos ellos. El organismo 3wC (World Wide Web Consorcium) , organismo encargado de crear
los estándares relacionados con la web, propuso la creación de un lenguaje de hojas de estilos
específico para HTML y, de las 9 propuestas que fueron presentadas, se eligieron dos: la
CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal). Los dos
responsables de cada propuesta, se unieron para definir uno común escogiendo lo mejor de
cada uno, y así fue como, entre 1994 y 1995 nació lo que hoy conocemos como CSS.

En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a su
grupo de trabajo de HTML. A finales de 1996, el W3C publicó la primera recomendación oficial,
conocida como “CSS nivel 1”.
En mayo de 1998 se publica la segunda recomendación oficial, la conocida como “CSS nivel
2”. La versión de CSS que utilizan todos los navegadores de hoy en día es CSS 2.1, una
revisión de CSS 2 que aún se está elaborando (la última actualización es del 23 de abril de
2009). Al mismo tiempo, la siguiente recomendación de CSS, conocida como "CSS nivel 3",
continúa en desarrollo desde 1998 y hasta el momento sólo se han publicado borradores.

El primer navegador con soporte completo de CSS 1 fue la versión para Mac de Internet
Explorer 5, que se publicó en el año 2000. Por el momento, ningún navegador tiene soporte
completo de CSS 2.1.De hecho, uno de los navegadores más utilizados, Internet Explorer 6,
tiene un soporte limitado de CSS 2 y decenas de errores conocidos en la parte de CSS 2 que
implementa, lo que dificulta la creación de páginas con un aspecto homogéneo entre diferentes
navegadores. Está parcialmente corregido en Internet Explorer 8, aunque necesita de etiquetas
meta para soportarlo en versiones anteriores. Los navegadores con mejor soporte de CSS 2
(incluso con soporte de algunas características de CSS 3) son: Firefox, Opera y Safari. Desde
la publicación de la versión CSS 2, se han añadido pequeñas correcciones de errores y
algunas variaciones en el estándar, hasta llegar a la actual versión CSS 2.1.



Ventajas de las CSS

Separar nuestro código HTML del diseño (CSS) nos va a permitir tener un código más limpio y
claro y a la postre reutilizable.

Una de las ventajas, de cara a los diseñadores, es que nos permiten modificar el aspecto del
diseño de un sitio web modificando únicamente la hoja de estilo aportando un importante
ahorro de tiempo y esfuerzo. Sin las hojas de estilo deberíamos realizarlo página a página.

De cara a los usuarios mostraremos una mayor homogeneidad en la Web, sin esfuerzo
considerable añadido.

Teniendo en cuenta los diferentes soportes de comunicación existentes, los CSS nos permiten
definir estilos para la visualización en una PDA ó en un PC. Así como crear hojas especiales
para impresión (sin banners ni imágenes de publicidad) ó para sintetizadores de voz.

Para los buscadores el contenido importante es el primero aparece, a través de CSS, podemos
lograr que los elementos aparezcan en el orden que deseemos (contenido principal, menú
izquierdo, menú principal, cabecera), permitiéndonos mejorar el posicionamiento en internet.

El uso del estándar CSS de la W3C evitará visualizaciones erróneas de nuestra web en los
diferentes navegadores.



Anatomía de los estilos

CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más
elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un
documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la
declaración está compuesta por una propiedad y el valor que se le asigne.



Selectores: Indican sobre que elementos queremos trabajar.
Atributos: Identifican a que estilo nos referimos.
Valores: Indican como queremos que sea ese atributo.







H1 { align: left; }
Selector { propiedad: valor; }

La primera parte, fuera de los corchetes es el Selector, y es el que indica a qué elemento
HTML afectará (en el ejemplo a las cabeceras de nivel 1). Lo que hay dentro de los corchetes
es la Declaración, que a su vez está formada por una Propiedad (en este caso align) a la que
se le asigna un Valor (en este caso left).

La sintaxis de CSS es muy simple, consiste en poner el nombre del atributo, seguido por dos
puntos y el valor que se le asigna. Además, si queremos escribir varios estilos los separaremos
por punto y coma y/o opcionalmente un salto de línea:

Color: #000000;
Background: #FFFFFF;

Siempre que lo hagamos desde una página externa, deberemos indicar a qué elemento de la
página aplicamos ese estilo. Esto lo haremos con los Selectores. Escribiremos el selector
seguido de los atributos del objeto entre corchetes:

Input {
Color: #000000;
Background: #FFFFFF;
}



Selectores

Una de las cosas más importante respecto a los estilos CSS, es que cualquier elemento HTML
es un posible selector CSS. Un selector es el elemento que está conectado a un estilo
particular:

p { font-size: 3em; }

En este ejemplo, el selector es p . De este modo todo lo que en el documento HTML se
encuentre entre la etiqueta <p></p>, tendrá esta característica (en el ejemplo relacionada con
el tamaño del texto).



Selectores de clase

Si queremos alcanzar mayor control sobre nuestros estilos podemos utilizar los selectores de
clase, que permiten aplicar un estilo a una etiqueta html específica. Mediante un selector de
clase, podemos dar estilo simultáneamente a varios elementos HTML. Puede ser usado más
de una vez para controlar la apariencia de algunos elementos.

<p class="distinto">Párrafo en rojo</p>

Siendo definido en la propia hoja de estilo de esta manera:

.distinto { color: red; }

En el ejemplo, todos los parrafos existentes en nuestra página que sean de clase distinto, y
sólo estos párrafos, apareceran de color rojo.

La principal característica de este selector es que en una misma página, varios elementos
diferentes pueden utilizar el mismo valor en el atributo class, pudiendo reutilizar los mismos
estilos para varios elementos diferentes.

<p class="distinto">Párrafo en rojo</p>
<p>Párrafo normal <a href="#" class="distinto">Enlace en rojo</a></p>

En el ejemplo, tanto el párrafo como el enlace con clase distinto apareceran en color rojo.

Podemos restringir el alcance del selector de clase combinándolo con el selector de tipo en la
hoja de estilos.

Regla

Interpretación

.distinto {
color: red; }

Cualquier elemento de la página cuyo atributo class sea igual a distinto

p.distinto {
color: red; }

Aquellos elementos de tipo <p> que dispongan de un atributo class con valor distinto

p .distinto
{
color: red; }

Todos los elementos con atributo class="distinto" que estén dentro de cualquier elemento de
tipo<p>

p, .distinto Todos los elementos de tipo <p> i todos los elementos de la página cuyo

{
color: red; }

atributo class sea igual adistinto



Selectores ID (identificadores)

Otra característica muy importante de CSS es la herencia, donde determinadas etiquetas se
ven supeditadas a lo que tenga definida una etiqueta de nivel superior. Entran en juego los
selectores ID que a modo de ejemplo aplican formato a una etiqueta específica dentro de otra
etiqueta.

Hemos dicho que la anterior definición p { font-size: 3em; } daría formato a todos los
párrafos existentes en nuestra página, pero si queremos dar un formato determinado a uno de
los párrafos sin variar todos los demás, usamos un selector ID aplicado al párrafo específico.
Sería así:

<p id="cambio">Este cambiará de tamaño</p>

Siendo definido en la propia hoja de estilo de esta manera:

#cambio { font-size: 1.5em; }

Todos los párrafos tendrán la herencia de p { font-size: 3em; }, pero este nuevo
selector ID, es más específico y sólo se aplicará al párrafo con id="cambio". De esta manera
hemos definido una regla general para los párrafos, pero la podremos alterar siempre que
queramos de manera específica sin tener que redefinirlo todo.

La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con HTML
y no c