CSS: Cascading Style Sheets

Las hojas de estilo (CSS) es un lenguaje que nos permite modificar los aspectos visuales o estilo con el cual se presentan los objetos en HTML (Hypertext Marked Language) en diferentes medios tales como pantallas, papel, etc.

Historia

La evolución de la informática durante la segunda mitad del siglo XX, dio lugar a la necesidad de crear estándares que permitieran unificar la forma en que se hacían las cosas. Uno de los pioneros de estas definiciones fue IBM con su lenguaje de marcado generalizado (GML, Generalized Markup Language) que luego dio lugar al lenguaje de marcado generalizado estándar (SGML, Standard Generalized Markup Language).

Después de este estándar y dado el boom de internet y crecimiento exponencial de lenguajes como HTML para la creación de documentos electrónicos, W3C (Word Wide Web Consortium), propuso un lenguaje de hojas de estilo específico para HTML: CHSS (Cascading HTML Style Sheets) y SSP (Stream-based Style Sheet Proposal). Luego unieron lo mejor de cada propuesta y lo llamaron CSS (Cascading Style Sheets). Entre los años 1995 y 1998 se crearon diferentes versiones de CSS y la conocida “CSS nivel 3”, fue publicada en 2011 y el nivel 4 en el año 2017.

Glosario básico

CSS define una serie de términos que permiten describir cada una de las partes que componen las hojas de estilo CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy básico:

Los diferentes términos se definen a continuación:

Regla: cada uno de los estilos que componen las hojas de estilo CSS. Cada regla está compuesta de una parte de “selectores”, un símbolo de “llave de apertura” ({), otra parte denominada “declaración” y por último, un símbolo de “llave de cierre” (}).

Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.

Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS.

Propiedad: característica que se modifica en el elemento seleccionado, como por ejemplo su tamaño de letra, su color de fondo, etc.

Valor: establece el nuevo valor de la característica modificada en el elemento.

Ejemplo:

p {
  color: red;
  text-align: center;
}

Todos los elementos del selector p estarán alineados en el centro y el texto será de color rojo.  

Selectores

Como se indicó anteriormente los selectores indican “a quien hay que aplicar la regla CSS”. Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página.

A un mismo elemento HTML se le pueden aplicar varias reglas CSS y cada regla CSS puede aplicarse a un número ilimitado de elementos. En otras palabras, una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas. Existen varios tipos de selectores; a continuación, la descripción de algunos:

Selectores básicos

Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS):

* {

  margin: 0;

  padding: 0;

}

El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.

Selectores ID

El selector ID utiliza el atributo ID de un elemento HTML para seleccionar un elemento específico. La identificación de un elemento es única dentro de una página por lo que el selector de identificación se utiliza para seleccionar un elemento único.

Para seleccionar un elemento con una identificación específica, escriba un carácter de almohadilla (#), seguido de la identificación del elemento.

#para1 {
  text-align: center;
  color: red;
}

Colores

Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. Aunque el método más habitual es el del RGB hexadecimal; a continuación, las alternativas que ofrece CSS.

h1 {
  background-color: green;
}
div {
  background: rgba(0, 128, 0, 0.3) 
}

Hemos expuesto unos pocos atributos de CSS, pero no solo se queda aquí, ya que además esta sintaxis CSS permite aplicar al documento formato de modo mucho más exacto. Otra ventaja importante de CSS es la capacidad de especificar las medidas con diversas unidades. Si HTML tan sólo podíamos definir atributos en las páginas con pixeles y porcentajes, ahora podemos definir utilizando muchas más unidades como:

• Pixeles (px) y porcentaje (%), como antes.
• Pulgadas (in).
• Puntos (pt).
• Centímetros (cm).
• … y muchas otras que explicaremos cuando llegue el momento

Por último, absolutamente todos los navegadores soportan CSS, por lo que podemos usar este lenguaje con total seguridad y garantía. Pero no solo podemos, sino debemos, porque con CSS aumenta mucho la optimización del sitio web en varios términos, no solo estéticos. Aplicando CSS correctamente, reduce el peso en bytes de las páginas y mejora la mantenibilidad.

Autor: Carlos Alberto Trujillo

Editor: Carlos Pinzón

Código: UCRV-4

Universidad: Universidad Central

Fuentes:

Eguiluz, J. (2006). Breve historia de CSS. Uniwebsidad. https://uniwebsidad.com/libros/css/capitulo-1/breve-historia-de-css

W3C. (2020). CSS Introduction. w3schools.com. https://www.w3schools.com/css/css_intro.asp

Krakowiak, W. (2016). Código Equipo CSS. [Fotografía]. Pixabay. https://pixabay.com/es/photos/c%C3%B3digo-equipo-css-lo-monitor-1797778/