¿Qué es el CSS?

Si estás empezando a meter la cabeza en el mundo de las páginas web o eres usuario de una, seguro que ya te has encontrado más de una vez con que alguien menciona el CSS y todavía no tienes claro qué es exactamente. En este artículo te voy a explicar lo que es, te voy a dar algunas nociones básicas con ejemplos y te voy a remitir a otros sitios gratuitos en los que puedes convertirte en un verdadero experto en la materia.

¿Qué es el CSS?

Las siglas CSS corresponden a las palabras Cascading Style Sheets, cuya traducción literal sería hojas de estilo en cascada. Se refieren a un lenguaje de programación que se utiliza para definir el diseño visual de páginas web y otras aplicaciones programadas en HTML o XHTML (Wikipedia). Para que te hagas una idea, con HTML se define el contenido de una página web, y con CSS se modifica la manera en la que estos elementos son presentados: colores, posición, fuentes, alineación, márgenes y bordes, etc. Y cómo se muestran en diferentes dispositivos y pantallas.

Hace años se utilizaban marcas dentro del HTML de una web para definir su estilo, pero esto obligaba a repetir la información en cada página de la web. En cambio el CSS permite tener una hoja de estilo simple y externa que defina todos los elementos de la web que tengan las mismas características. De esta manera si queremos cambiar el estilo de un elemento concreto en toda la web, solo tenemos que hacerlo una vez, cuando antes era necesaro modificarlo en cada página de la misma. Así que el CSS

Veamos cómo funciona el CSS con un ejemplo

Si usas WordPress te habrás dado cuenta que existen diferentes tipos de encabezados que se llaman Título 1, Título 2, Título 3 … según su importancia dentro del documento. Si en tu editor de WordPress tienes un artículo empezado en el que hayas usado estas etiquetas para destacar los encabezados, si pasas a la pestaña de HTML te encontrarás con algo así:

<h2>¿Qué es el CSS?</h2> (Esto es un Título 2)

css pantalla html

Las etiquetas <h2></h2> definen dónde empieza y termina un encabezado con estas características. Y con CSS podemos aplicarle un tamaño, color, tipografía, etc. y que se repita en toda la web con que lo definamos una sola vez.

En tu hoja de estilos de CSS, style.css, te encontrarás las características de ese <h2>

 h2 {
    1. font-family‘Raleway’,Helvetica,Arial,Lucida,sans-serif;
    2. font-size29px;
    3. line-height1.2em;
    4. padding-bottom10px;
    5. color#ee4a65;
    6.  font-weight: 500;

Cada uno de estos atributos en inglés define una característica del elemento <h2>:

  • font-family: familia de la fuente o tipografía
  • font-size: tamaño de la fuente
  • line-height: altura de línea
  • padding-bottom: espacio debajo de la línea
  • color: color del texto
  • font-weight: grosor del texto

Si hacemos un cambio en nuestra hoja de estilo de CSS, este cambio se aplicará a todos los elementos con la etiqueta <h2> que haya en nuestra web. Algo que simplifica mucho el trabajo a los diseñadores.

¿Por qué te interesa aprender un poco de CSS?

Si tienes una página web creada con WordPress, todo el estilo de la web estará recogido en la hoja de estilo de CSS. Todas las plantillas para WordPress tienen al menos una. La mayoría de las plantillas o themes de WordPress vienen con unos estilos definidos para cada elemento de la plantilla que son los que crean la experiencia visual del diseño de la plantilla.

Muchas veces me he encontrado con personas que, habiendo comprado una plantilla con un diseño definido, quieren hacer pequeños cambios en el aspecto final de la misma. Puede ser que quieras cambiar una tipografía, un tamaño de letra o la disposición de un elemento en particular. Si conoces un poco de CSS podrás hacerlo tú mismo sin mucha dificultad.

Además las mejores plantillas de WordPress ya suelen incluir un apartado en el que puedes introducir tu CSS personalizado sin necesidad de modificar los archivos de tu web directamente. Esto es una importante ventaja, porque si no tendrías que crear un Child Theme para que tus cambios sobrevivan a las actualizaciones.

Por ejemplo, en la plantilla que uso yo, Divi, encontrarás el apartado para personalizar el CSS en las Opciones del tema y tiene esta pinta:

css divi

En otras plantillas lo encontrarás también en el apartado de opciones de la plantilla y será muy similar.

¿Cómo saber qué propiedades de CSS tiene un elemento concreto de tu plantilla?

Imagínate que quieres saber qué propiedades tienen los elementos <h2> de tu plantilla por defecto. ¿Cómo puedes averiguarlo para saber qué es lo que tienes que cambiar? Es más fácil de lo que piensas.

Primero coloca el ratón sobre el elemento que quieras inspeccionar, luego haz click sobre el elemento con el botón derecho del ratón y elige la opción inspeccionar.

css inspeccionar

Se abrirá una pestaña abajo del todo de tu pantalla en la que podrás ver algo similar a esto:

css

Puede variar un poco según el navegador que utilices, yo en los pantallazos estaba utilizando Google Chrome. En el recuadro de la derecha, haciendo doble click sobre las propiedades puedes hacer cambios y ver cómo quedan en tiempo real. Una vez que estés contento con el cambio, puedes copiar el trocito de código directamente ahí y llevarlo al apartado de CSS personalizado de tu tema o plantilla.

¿Dónde puedes aprender CSS gratis y fácilmente?

En internet hay infinidad de tutoriales en los que puedes aprender CSS de manera gratuita. De hecho es un lenguaje que se aprende muy fácilmente sobre la marcha, a base de practicar con pequeños cambios en tu web. Yo te recomiendo algunas webs donde hay tutoriales interesantes:

  • Wikipedia. Aquí encontrarás una explicación más extensa de cómo funciona el CSS.
  • w3schools. Aquí puedes aprender cualquier lenguaje de programación web y tienen tutoriales sencillos y extensivos sobre CSS. (En Inglés)
  • Flex box froggy. Aquí puedes aprender CSS jugando de forma interactiva. (En Inglés)
  • Ciudadano Cero. Tiene un extenso tutorial en español.

Espero haberte ayudado un poco a entender qué es el CSS y cómo te puede resultar útil a la hora de darle un aspecto único a tu página web. Si te animas a probarlo no dudes en dejarme un comentario con tu experiencia.

curso de diseño web con WordPress