CSS,
es una tecnología que nos permite crear páginas web de una manera más exacta.
Gracias a las CSS somos mucho más dueños de los resultados finales de la
página, pudiendo hacer muchas cosas que no se podía hacer utilizando solamente
HTML, como incluir márgenes, tipos de letra, fondos, colores. CSS son las
siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada.
¿Para
qué sirve?
CSS
se utiliza para dar estilo a documentos HTML y XML, separando el contenido de
la presentación. Los Estilos definen la forma de mostrar los elementos HTML y
XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de
múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado
para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en
las que aparezca ese elemento.
Sintaxis
CSS
tiene una sintaxis muy sencilla, que usa unas cuantas palabras clave tomadas
del inglés para especificar los nombres de varias propiedades de estilo.
Una
hoja de estilo se compone de una lista de reglas. Cada regla o conjunto de
reglas consiste en uno o más selectores y un bloque de declaración (o «bloque
de estilo») con los estilos a aplicar para los elementos del documento que
cumplan con el selector que les precede. Cada bloque de estilos se define entre
llaves, y está formado por una o varias declaraciones de estilo con el formato
propiedad:valor;.<!R0>
En
el CSS, los selectores marcarán qué elementos se verán afectados por cada
bloque de estilo que les siga, y pueden afectar a uno o varios elementos a la
vez, en función de su tipo, nombre (name), ID, clase (class), posición dentro
del Document Object Model, etcétera.<!R1>
Abajo
puede verse un ejemplo de una parte de una hoja de estilos CSS:
selector
[, selector2, ...] [:pseudo-class][::pseudo-element] {
propiedad: valor;
[propiedad2: valor2;
...]
}
/*
comentarios */
Uso
Por
ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un
encabezamiento y que es más importante que un bloque etiquetado como
<h2>.Versiones más antiguas de HTML permitían atributos extra dentro de
la etiqueta abierta para darle formato (como el color o el tamaño de fuente).
No obstante, cada etiqueta <h1> debía disponer de la información si se
deseaba un diseño consistente para una página y, además, una persona que leía
esa página con un navegador perdía totalmente el control sobre la visualización
del texto.
Cuando
se utiliza CSS, la etiqueta <h1> no debería proporcionar información
sobre cómo será visualizado, solamente marca la estructura del documento. La
información de estilo, separada en una hoja de estilo, específica cómo se ha de
mostrar <h1>: color, fuente, alineación del texto, tamaño y otras
características no visuales, como definir el volumen de un sintetizador de voz
Por
otro lado, antes de que estuviera disponible CSS, la única forma de componer
espacialmente una página era el uso de tablas <table>. Aunque esta era
una técnica cómoda y versátil, ello conllevaba el uso de un elemento con una
semántica particular, y en el que la distribución de los datos no se ajustaban
al flujo de la información que se obtenía en la vista desde los navegadores
habituales, lo que redundaba en una merma en la accesibilidad a la página por
parte de otros navegadores (orientados a personas con alguna deficiencia
sensorial, o a ciertos dispositivos electrónicos).
Mediante
el uso de CSS, se ha permitido eliminar el uso de tablas para el diseño,
usándolas solamente para la muestra de datos tabulados, si bien es cierto que
obtener la versatilidad que ofrecía el diseño con tablas, es algo más
complicado si no se usan.
Formas de usar CSS
Para
dar formato a un documento HTML, puede emplearse CSS de tres formas distintas:
1. Un estilo en línea (inline) es un
método para insertar el lenguaje de estilo de página directamente dentro de una
etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar
la descripción del formateo dentro del documento de la página Web, a nivel de
código, se convierte en una manera larga, tediosa y poco elegante de resolver
el problema de la programación de la página. Este modo de trabajo se podría
usar de manera ocasional si se pretende aplicar un formateo con prisa, al
vuelo. No es todo lo claro o estructurado que debería ser, pero funciona.
Dado que los clientes de correo
electrónico no soportan las hojas de estilos externas, y que no existen
estándares que los fabricantes de clientes de correo respeten para utilizar CSS
en este contexto, la solución más recomendable para maquetar correos
electrónicos, es utilizar CSS dentro de los propios elementos (inline).
2. Una hoja de estilo interna, que es una
hoja de estilo que está incrustada dentro de un documento HTML, dentro del
elemento <head>, marcada por la etiqueta <style>. De esta manera se
obtiene el beneficio de separar la información del estilo del código HTML
propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de
una página a otra (esta posibilidad es difícil de ejecutar si se desea para
guardar las copias sincronizadas). En general, la única vez que se usa una hoja
de estilo interna, es cuando se quiere proporcionar alguna característica a una
página Web en un simple fichero, por ejemplo, si se está enviando algo a la
página Web.
3. Una hoja de estilo externa, es una hoja
de estilo que está almacenada en un archivo diferente al archivo donde se
almacena el código HTML de la página Web. Esta es la manera de programar más
potente, porque separa completamente las reglas de formateo para la página HTML
de la estructura básica de la página.
Estilos CSS introducidos por el usuario que
ve el documento, mediante un archivo CSS especificado mediante las
configuraciones del navegador, y que sobreescribe los estilos definidos por el
autor en una, o varias páginas web.
Los estilos marcados "por
defecto" por los user agent, para diferentes elementos de un documento
HTML, como por ejemplo, los enlaces.
