¿Qué es CSS y cómo se usa con fines de personalización?

Quizás recuerdes que CSS es una herramienta potente de diseño y personalización de sitios web, ¿pero qué es CSS?

CSS (siglas en inglés que significan hojas de estilo en cascada) es un método para añadir instrucciones de estilo al código de configuración de tu sitio web. Antes de ir más al fondo de este tema, definamos qué es el código y qué hace.

El código del sitio web es el lenguaje que indica al navegador el aspecto y las funcionalidades exactas que debería tener. El lenguaje de codificación más habitual es HTML (siglas en inglés que equivalen a lenguaje de marcado de hipertexto), una forma de codificación que indica qué elementos incluye una página web. El HTML indica, por ejemplo, dónde está la cabecera, dónde se encuentran los saltos de párrafo y qué tamaño debe tener una imagen.

CSS es una extensión de HTML que define instrucciones de estilo concretas. CSS se usa para especificar el color de un encabezado, o la fuente en la que debería de aparecer escrito el contenido. De manera análoga a una construcción civil, si el HTML fuese la estructura de una casa, CSS sería la pintura, el tamaño de las ventanas y el ancho de los pasillos. CSS te permite personalizar el aspecto de tu sitio web y aplicar decisiones de estilo a la totalidad del mismo. Así se garantiza que el aspecto de tu sitio web está en sintonía con la voz de tu marca.

Los elementos de CSS

Antes de adentrarnos en los pasos necesarios para añadir lenguaje CSS personalizado al sitio web, definamos algunos términos. Cuando hablamos de CSS, debes entender el significado de al menos tres componentes principales: los selectores, las propiedades y los valores.

Un selector usa código HTML para indicar la parte del sitio web a la que quieres dar estilo. Por ejemplo, el código HTML de un párrafo es «p». Si quieres usar CSS para cambiar el estilo de un párrafo, «p» será tu selector.

Las propiedades y los valores se usan para aplicar instrucciones de estilo a los selectores. Si quieres que tus párrafos aparezcan escritos en rojo, la propiedad aparece primero e indica el atributo concreto que quieres cambiar (en este caso, el color). El valor representa aquello que quieres cambiar del atributo, en nuestro ejemplo, el color rojo.

Al escribirlo, tu código CSS para un párrafo de texto rojo tendrá este aspecto (observa la puntuación característica de CSS):

p {
color: red;
}

Cada vez que se use «p» en el código de tu sitio web, el texto aparecerá de color rojo. Si quieres familiarizarte con los aspectos básicos de CSS, WordPress.com ofrece varias guías y recursos útiles.

Uso de CSS con WordPress.com

Existen dos formas de personalizar tu sitio web de WordPress.com con CSS. La primera de ellas implica insertar el lenguaje CSS directamente en tu código HTML. Para acceder a él, dirígete a la vista HTML en el editor de WordPress.com. Desde aquí puedes insertar el fragmento de código que te interese cuando quieras que aparezca el estilo CSS. Si te decantas por esta vía, necesitarás insertar el fragmento de código en CSS en cada página y entrada en la que quieras que aparezca el estilo

Para personalizar todo el sitio web, deberás acceder a la función Diseño personalizado. Esta función está disponible en los planes Premium y Business de WordPress.com. Para llegar hasta ella, desplázate a Apariencia > Personalizador > CSS.

Los siguientes ejemplos destacan cómo aplicar estilo al sitio web usando CSS.

Cambiar el color del texto

Si tu tema usa subtítulos de color amarillo de forma predeterminada pero tú los quieres verdes, puedes cambiar el color usando CSS. El código HTML de un subtítulo es «h2» (este será tu selector). La propiedad que estás cambiando es el color, y el valor que vas a cambiar es «verde». En este caso, insertarás el siguiente código en el panel de CSS con el Personalizador:

h2 {
color: green;
}

También puedes usar esta propiedad para cambiar el color del texto principal:

body {
color: blue;
}

Cambiar la fuente y su tamaño

Si tu tema muestra una fuente por defecto que no te gusta, puedes cambiarla con la propiedad «font-family»:

h2 {
font-family: Helvetica;
}

Con el código que aparece más arriba cambiará la fuente de los subtítulos a Helvetica. Sin embargo, puedes elegir muchas otras fuentes.

Otra opción es cambiar el tamaño de la fuente. En CSS, el tamaño de la fuente se controla mediante porcentajes. El código a continuación representa un cambio del 250 % en un subtítulo:

h2 {
font-size: 250%;
}

Con el siguiente texto, también puedes cambiar la fuente y su tamaño simultáneamente:

h2 {
font-family: Helvetica; font-size: 250%;
}

Algunas de las propiedades de texto adicionales que debes conocer son font-weight (que determina si una fuente está o no en negrita), font-style (controla si una fuente está o no en cursiva) y text-decoration (se puede usar para añadir subrayado, una línea alta o tachado).

Cambio del espaciado

A veces tu fuente tiene un aspecto fantástico, pero las letras aparecen demasiado juntas. Para luchar contra los problemas de espaciado, HMLdog ofrece consejos sobre cómo cambiar el espaciado del texto con CSS. Si las letras aparecen muy apretadas, usa lo siguiente:

p {
letter-spacing: 0.5em;
}

Desde aquí, puedes probar con distintos números hasta que el espaciado entre las letras te parezca el adecuado.

Introducción

Entonces, ¿qué es CSS? Por ahora puedes responder a esta pregunta y a algunas más, ya que has leído lo suficiente como para poder empezar a trabajar con esta herramienta. No lo olvides: siempre puedes publicar preguntas adicionales en los foros de WordPress.com.

[skyword-tracking id=»281474979943642″]