Conceptos básicos del CSS personalizado

Si alguna vez has intentado cambiar la apariencia de tu sitio, probablemente hayas descubierto que puedes hacerlo usando CSS. En este artículo, ofreceremos una visión general de qué es CSS, cómo Jetpack puede ayudarte a comenzar a hacer personalizaciones con CSS y algunos enlaces a recursos útiles para aprender más.

¿Qué es CSS?

En su forma más sencilla, las páginas web están compuestas por elementos HTML. CSS, acrónimo de hojas de estilo en cascada, es el lenguaje que determina cómo se muestran estos elementos HTML. CSS se utiliza para determinar aspectos como las fuentes, los colores de fondo, el tamaño y el estilo del texto, los bordes y mucho más.

A modo de analogía, si tu casa fuera una página web, HTML sería la estructura y CSS sería la decoración. Al igual que puedes usar pintura para cambiar el color de una pared, puedes usar CSS para cambiar el color de los enlaces, ocultar elementos y mucho más.

¿Cómo puedo personalizar el CSS en un sitio WordPress?

Todos los temas de WordPress incluyen un archivo de hoja de estilos. Este archivo contiene los estilos CSS que dan al tema su apariencia. Hay varias formas de añadir CSS personalizado a tu sitio para modificar esa apariencia:

1. Puedes usar un plugin como Jetpack y su función CSS personalizada para añadir tu CSS personalizado.
2. Si te sientes cómodo trabajando con un poco de código, puedes crear un tema hijo para añadir CSS y funciones personalizadas. (https://codex.wordpress.org/Child_Themes)
3. Si creaste tu propio tema, puedes modificar el archivo style.css directamente. Sin embargo, si no creaste el tema que estás usando, nunca debes editar el tema directamente. De lo contrario, tus cambios se sobrescribirán cada vez que se actualice el tema.

Conceptos básicos de CSS.

Como cualquier otro lenguaje, hay reglas específicas que debes seguir al escribir CSS para que se entienda. Independientemente del método que elijas para personalizar el CSS de tu sitio, tendrás que familiarizarte con la sintaxis de CSS.

• Selector: El elemento al que nos dirigimos. Puede ser una etiqueta HTML, un ID, una clase o una combinación de estos elementos.
• Bloque de declaración: Una o más declaraciones, separadas por punto y coma.
• Declaraciones: Cada declaración incluye una propiedad y un valor separados por dos puntos.
• Propiedad: El atributo que estamos cambiando.
• Valor: El valor que queremos aplicar a la propiedad.

Si nunca has trabajado con CSS, puede sonar un poco abrumador. Veamos un ejemplo para comprobar si podemos aclarar qué es cada elemento.

h1 { color: #000000; }

• h1 es el selector. Por lo tanto, esto seleccionará todas las etiquetas <h1> de tu sitio.
• color: #000000; es el bloque de declaración.
• color es la propiedad.
• #000000 es el valor, que en este caso es el código hexadecimal del color negro.

Después de desglosarlo, podemos ver que este ejemplo cambiará a negro todos los elementos de tipo h1.

¿Cómo puede ayudar Jetpack?

Como se mencionó anteriormente, Jetpack incluye una función llamada CSS personalizado. Esta función te permite añadir nuevas reglas de CSS a tu sitio directamente desde el escritorio. No necesitas pasar por la molestia de crear un tema hijo ni preocuparte por editar directamente tu tema. Este CSS personalizado puede añadirse a tu sitio además de las reglas de CSS existentes de tu tema, o puede reemplazar por completo la hoja de estilos existente de tu tema.

Puedes comenzar siguiendo estos pasos:

1. Activa CSS personalizado en Jetpack > Ajustes, en el escritorio.
2. Ve a Apariencia > Editar CSS.
3. Añade tus reglas personalizadas de CSS al editor grande.
4. Usa el cuadro meta «Publicar», situado a la derecha, para previsualizar y guardar tus cambios.

Puedes leer más sobre cada una de las opciones de edición en nuestro documento de ayuda sobre CSS personalizado.

¿Puedo usar un preprocesador de CSS?

Durante los últimos años, los preprocesadores de CSS se han vuelto muy populares. Los preprocesadores de CSS permiten a los usuarios avanzados adoptar un enfoque más programático para CSS. Permiten usar variables, mixins, anidamiento y muchas otras técnicas para escribir de forma más eficiente tus estilos CSS.

Jetpack te permite usar Sass o LESS si lo deseas. Puedes hacerlo siguiendo estos pasos:

1. Ve a Apariencia > Editar CSS.
2. En la parte derecha, busca la opción «Preprocesador» en «Publicar» y haz clic en el enlace «Editar».
3. Selecciona el preprocesador que prefieras (Sass o LESS) y guarda los cambios.
4. Empieza a escribir Sass o LESS en el área principal de edición de CSS.

¿Dónde puedo aprender más sobre CSS?

Esta es una visión general de alto nivel de CSS y de cómo usar la función de CSS personalizado de Jetpack. Aprender CSS y familiarizarse con él lleva tiempo. Por suerte, hay innumerables recursos disponibles, tanto si estás aprendiendo los conceptos básicos como si intentas escribir CSS más eficiente con un preprocesador.

• Una aventura con CSS es un excelente recurso para aprender más sobre los conceptos básicos de CSS.
• Introducción a CSS: cómo encontrar selectores de CSS te ayuda a aplicar a ejemplos reales lo que has aprendido sobre CSS.
• El foro de temas y plantillas de WordPress.org es una excelente comunidad donde puedes obtener ayuda con preguntas sobre el uso de CSS en WordPress y sobre cómo personalizar tu tema.

¿Hay algún tema o función específica de Jetpack que te gustaría que tratáramos con más profundidad en una publicación futura? ¡Dínoslo en los comentarios!