Esta es una breve explicacion y está pensado para aquellas personas que quieren comenzar a utilizar CSS y nunca han escrito una hoja de estilos CSS.
El concepto de hojas de estilo apareció por primera vez en 1996 cuando W3C publicó una recomendación nueva intitulada «Hojas de estilo en cascada» o CSS, su sigla en inglés.
El principio de las hojas de estilo consiste en la utilización de un solo documento para almacenar las características de presentación de las páginas asociadas a grupos de elementos. Esto implica nombrar un conjunto de definiciones y características de presentación de las páginas, y activar esos nombres para aplicarlos a una parte del texto. Por ejemplo, se pueden configurar los títulos de una sección para que aparezcan en fuente Arial, en color verde y en cursiva.
Las hojas de estilo se desarrollaron para compensar los defectos de HTML con respecto a la presentación y al diseño de las páginas. HTML tiene varias etiquetas para modificar la presentación y definir los estilos del texto, pero cada elemento tiene su propio estilo, independientemente de los elementos que lo rodean. Al utilizar hojas de estilo, cuando se necesite cambiar la apariencia de un sitio que tiene cientos de páginas Web todo lo que hay que hacer es editar las definiciones de la hoja de estilo en un solo lugar para cambiar la apariencia del sitio completo.
Se denominan «hojas de estilo en cascada» porque se pueden definir múltiples hojas y los estilos pueden aplicarse a todas las páginas (con un sistema predefinido para resolver conflictos).
Las hojas de estilo pueden utilizarse para:
- lograr una apariencia uniforme de todo el sitio al activar una sola definición de estilo en cada página,
- cambiar un aspecto en todo el sitio Web con tan sólo editar unas pocas líneas,
- hacer que los códigos HTML sean más fáciles de leer ya que los estilos se definen por separado,
- permitir que las páginas se carguen más rápido ya que hay menos cantidad de HTML en cada página,
- posicionar los elementos de la página de una manera más uniforme.
CSS 2.0
Desde el 12 de mayo de 1998, la norma CSS 2.0 ha sido el estándar vigente. CSS 2.0 agrega características nuevas a la norma anterior (1.0), que incluye:
- Consideraciones sobre cómo se va a mostrar un documento en los distintos medios (como una pantalla, una impresora, un sistema Braille, un sintetizador de voz, etc.).
- Adición de características de sonido para ciegos y minusválidos visuales.
- Cursores para maniobrar.
- Administración de desbordamiento y visibilidad de elementos
Compatibilidad con los navegadores
A pesar de las recomendaciones de W3C, no todos los navegadores muestran las hojas de estilo de la misma forma. El explorador Microsoft Internet Explorer 3.0 fue el primero que integró hojas de estilo y su uso se hizo más común con las versiones 4.0 y superiores de Internet Explorer y Netscape Navigator.
Navegadores que admiten hojas de estilo:
- Microsoft Internet Explorer 3.0 (parcialmente)
- Microsoft Internet Explorer 4 x
- Microsoft Internet Explorer 5 x
- Microsoft Internet Explorer 6 x
- Netscape Navigator 4.x
- Netscape Navigator 6.x
- Netscape Navigator 7.x
- Mozilla x.x
- Firefox x.x
- Opera 5.x
- Opera 6.x
- Opera 7.x
- Camino 0.8x
- Safari 1.xx
Definición de un estilo
Al definir un estilo se utilizan reglas de texto simples para describir el aspecto de los elementos de la página. Una regla CSS se caracteriza por dos elementos principales:
- Un selector de tipo para especificar a qué etiquetas del documento se aplica el estilo.
- Una declaración de estilo, que se define entre paréntesis, para especificar qué estilo aplicar a las etiquetas seleccionadas. A su vez, la declaración está compuesta por:
- una o más propiedades, seguidas por el carácter «:» (dos puntos)
- uno o más valores asociados a cada propiedad, entre comillas y separados por comas si hay múltiples valores, y todos seguidos por un punto y coma.
Por lo tanto, la sintaxis es:
La siguiente sintaxis define, a forma de ejemplo, el estilo a aplicar a hipervínculos (etiqueta <A>), específicamente fuente Verdana de 18 píxeles de tamaño, en negrita y en color amarillo:
A {
font-family: Verdana;
font-size: 18px;
font-style: bold;
color
}
Un buen tutorial para empezar a crear estilos en CSS, http://www.w3.org/Style/Examples/011/firstcss.es.html#links
Adesign Perú 