¿Qué es CSS?

Son las siglas (Cascading Style Sheets) traducido en español (Hojas de Estilo en Cascada). Si te gusta el mundo del diseño web o estas por empezar en este ámbito, probablemente habrás escuchado el término CSS. Se trata de una tecnología que organiza la presentación y aspecto de una página web, a continuación te explicaremos sobre ¿qué es css y para que sirve? - ¿Cómo funciona? - Tipos de estilo y las versiones.

Aprender más sobre CSS

¿Qué es CSS y para que sirve?

CSS se denomina como el lenguaje de hojas de estilo en cascada que fue desarrollada por el W3C (World Wide Web Consortium), para permitir la separación de los contenidos de los documentos escritos en HTML, XHTML, XML, XUL o SVG de la presentación del documento con las hojas de estilo, tales como los colores, fondos, márgenes, bordes, tipos de letra, modificando la apariencia de una página web de una forma más sencilla, permitiendo a los desarrolladores controlar el estilo y formato de sus documentos.

¿Cómo funciona?

El lenguaje CSS se basa en una serie de reglas que rigen el estilo en los documentos estructurados, y que forman la sintaxis de una hojas de estilo. Cada regla consiste en un selector y una declaración, esta última va entre corchetes y consiste en una propiedad o atributo y un valor separados por dos puntos.

Selector: El Selector especifica que elementos HTML van a estar afectados por esa declaración, de manera que hace de enlace entre la estructura del documento y la regla estilística en la hoja de estilo.

Declaración: Esto se ubica dentro de las corchetes, es la información de estilo que indica cómo se va a ver el selector. En caso de que haya más de una declaración se usa punto y coma para separarlas.

Propiedad y Valor: La Propiedad o Atributo es la que define la interpretación del elemento asignándosela un cierto Valor, que puede ser: color, alineación, tipo de fuente, tamaño y otros. Es decir, especifican qué aspecto del selector se va a cambiar.

Tres tipos de estilos

CSS se puede proporcionar por varias fuentes, ya sea adjunto como un documento por separado o incorporado en el documento HTML, y te mostraremos tres maneras de dar estilo a un documento web:

Hoja de Estilo Externa: La Hoja de Estilo Externa se almacena en un archivo diferente al del archivo con el código HTML al cal estar vinculado a través del elemento link, que debe ir situado en la sección head. Es la manera de programar ms eficiente, ya que separa completamente las reglas de formato para la página HTML de la estructura básica de la página.

Hoja de Estilo Interna: La Hoja de Estilo Interna est incorporada a un documento HTML, a través del elemento style dentro de la sección head, consiguiendo de esta manera separar la información del estilo del código HTML.

Estilo en Línea: Sirve para insertar el lenguaje de estilo dentro de la sección body con el elemento style. Sin embargo, este tipo de estilo no se recomienda pues se debe intentar siempre separar el contenido de la presentación.

Versiones CSS

Existen varias versiones:

• CSS1: Fue la primera especificación que desarrolló el World Wide Web Consortium (W3C). Las hojas de estilo CSS1 describen el formato del texto y de los componentes de una página (fuente, color, tamaño, etc.).
• CSS2: Permite ubicar elementos de XHTML en diferentes capas o layers, cuyo posicionamiento no tiene que seguir el flujo HTML (plantea el modelo de cajas donde cada bloque se define como una caja que se coloca en un lugar concreto). CSS2 incluye a CSS1 (salvo pequeños detalles).
• CSS3: Es la última evolución del lenguaje "Hojas de estilo en cascada". Esta versión trae muchas novedades esperadas, esquinas redondeadas, sombras, degradados , transiciones o animaciones , así como nuevos diseños como columnas múltiples , diseños de caja flexible o cuadrícula. Las partes experimentales tienen un prefijo de proveedor y deben evitarse en entornos de producción o utilizarse con extrema precaución ya que tanto su sintaxis como su semántica pueden cambiar en el futuro.

Ahora ya sabes qué es CSS y como funciona, el siguiente paso es poner en practica. qué es CSS