Qué es CSS (Cascading Style-Sheet) y cómo funciona?

Este post explica qué es CSS y cómo podemos implementarlo en nuestra página web. CSS (Cascading Style-Sheet) es un lenguaje de diseño que tiene como funcionalidad proporcionar estilo a las páginas web. Para ello emplea reglas que indican como el elemento en cuestión debe presentarse.

Una regla en CSS consta de 2 partes:

  • Selector: Indica que elemento o elementos se verán afectados por la declaración.
  • Declaración: Establece el estilo que tendrán los elementos referenciados por el selector. Este a su vez consta de la propiedad del elemento y el valor que tendrá este.

Qué es CSS - Esquema regla CSS

Cómo se usa CSS

A continuación, os muestro una regla de CSS que se aplica a varios elementos, separados por comas, y especifica varias propiedades para estos separados por un punto y coma por cada propiedad-valor.

Este caso sería para todos los elementos h1, h2 y h3 que hay en la página. ¿Que pasaría si quiero algo más específico?

CSS permite seleccionar aquellos elementos identificados con un id o con class. Para un id el selector tiene que ir acompañado de “#” por ejemplo #titulo. En caso de una clase iría acompañado de un punto como por ejemplo: .parrafos

Hay ciertos elementos que una vez aplicados una regla, sus elementos-hijos (los que están dentro) también se ven afectados. El caso más común sería el elemento <body>, si aplicásemos una regla que cambie la fuente, todos los elementos que estén dentro automáticamente pasarán a tener la misma fuente, salvo que tengan una regla que establezca lo contrario.

Dónde poner el código CSS de nuestro html

Las reglas de CSS pueden escribirse en 3 lugares:

  • Dentro del elemento <style> dentro del <head>. Esta forma se usa para establecer pocas reglas en una página y si esas reglas sólo van a ser exclusivas para esa. La etiqueta de apertura sería como muestro a cotinuación, pero en HTML5 se puede omitir el atributo type.

  • En un documento .css y referenciándolo dentro del <head> con la etiqueta <link>. El elemento <link> se emplea para describir la relación entre 2 documentos. Para referenciar la página con el CSS, el <link> necesita los atributos rel y href. El atributo rel define qué tipo relación hay y el href indica la ruta o URL donde se localiza el CSS.

A mayores <link> puede tener un atributo llamado media que indica el tipo medio donde se verá la web por ejemplo un monitor (screen) o una televisión (tv).

  • Dentro de la misma etiqueta mediante el atributo style. Esto se conoce como estilo en línea.

De las formas citadas, el más recomendable es usar un documento CSS externo y vincularlo a la página con <link>.

Ventajas de usar un CSS externo

  • Evitas tener que escribir las mismas reglas en todas las páginas.
  • Es más fácil modificar el estilo de una página ya que solo necesitas cambiar el CSS.
  • Los CSS son descargados por el usuario automáticamente. Esto aligera la carga de la web cuando entre en otras páginas que usen el mismo CSS y le quita trabajo al servidor.
  • Puede actuar como una plantilla facilitando que otros autores puedan obtener el mismo estilo sin tener que saber todas las reglas individualmente.
  • Permite adaptar la web según el dispositivo que use un usuario ya sea una tele, un móvil, un monitor…
  • Un CSS puede importar reglas de otros CSS, facilitando un desarrollo modular.

CSS ofrece muchas posibilidades. Permite modificar la fuente, texto, bordes, fondo, márgenes, relleno, dimensiones, posición, tablas, listas, contorno y clasificación. En el caso del CSS3 ya permite realizar modificaciones más complejas como muticolumna, media queries, transiciones, animaciones y transformaciones en 2D y 3D.

Y hasta aquí sibre qué es CSS y cómo usarlo. A medida que escriba posts iré abordando cada una de las posibilidades. Espero haberos dejado con ganas de aprender este lenguaje. Un saludo 😉