¿Qué son las CSS?

Nada más molesto que cambiar planes a mitad de un proceso... Muchas veces los clientes deciden hacer cambios sobre la marcha. La pregunta ahora sería: ¿Qué pasaría si un cliente necesita hacer cambios en un sitio Web? Por ejemplo cambiar el color del encabezado de las páginas, la fuente de los títulos, el borde de las imágenes, etc. Si el sitio estuviera compuesto de pocas páginas nos podría llevar algunas horas las modificaciones. Pero si el sitio Web constara de unas cientos de páginas y tendría que hacer las modificaciones página por página nos llevaría más que unas cuantas horas.

 

 

Para solucionar este problema se han introducido las hojas de estilo (CSS, Cascading Style Sheets), que permiten controlar con facilidad la presentación y el aspecto de todas las páginas. Por ejemplo, permiten especificar el espacio entre las líneas de texto, el tipo y tamaño de las fuentes, el tamaño de los márgenes, los colores usados para el texto o el fondo, así como dar formato a cualquier etiqueta HTML. La utilización de estilos CSS para aplicar formato a una página permite separar el contenido de la presentación. El contenido de la página (el código HTML) reside en el archivo HTML, mientras que las reglas CSS que definen la presentación del código residen en otro archivo (una hoja de estilos externa) o en otra parte del documento HTML (normalmente, en la sección head). La separación del contenido y la presentación hace que resulte mucho más fácil mantener la presentación del sitio desde una ubicación central, ya que no es necesario actualizar las propiedades de las distintas páginas cuando se desea realizar algún cambio.

 

No necesariamente las hojas de estilo se encuentran en un documento externo, también se lo puede encontrar en el mismo archivo HTML embebida dentro de la etiqueta head o dentro de una etiqueta HTML.


Conceptos básicos de CSS

 

Para definir estilos en las etiquetas se debe usar el siguiente formato:

SELECTOR {PROPIEDAD1: VALOR1; PROPIEDAD2:VALOR2;....;}

 

Toda la línea anterior es una regla. El selector o identificador indica a qué elemento se aplicará el formato. Las propiedades de formato y sus valores se colocan entre llaves y son separadas por punto y comas -esto conforma lo que denominaremos bloque CSS-. El código puede escribirse en varias líneas para que sea más fácil de entender. Si los valores que son asignados a las propiedades llevan múltiple palabras se deben encerrar entre comillas dobles.

 

Además de anexar numerosas propiedades a un selector, también es posible colocar muchos selectores separados por comas al cual se le van a aplicar las mismas propiedades.

SELECTOR 1, SELECTOR2 {PROPIEDAD1: VALOR1; PROPIEDAD2:VALOR2;....;}

 

Para los ejemplos que daremos a continuación el selector a aplicar las modificaciones serán etiquetas o tags html.

 

Ejemplo:

Una regla en CSS.

Si bien la historia de las CSS podría remontarse un poco más en el tiempo, fue en el mes de diciembre de 1996 cuando tuvo su primera revisión la CSS 1. CSS2 aparece en mayo de 1998. Por su parte, CSS3 se mantiene en desarrollo y los navegadores más modernos ya son compatibles con sus características.




Compartir: