Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Qué es: CSS

CSS (Cascading Style Sheets) es un lenguaje con un conjunto de reglas que definen el aspecto de los elementos de su sitio web.

Estas reglas controlan los elementos de diseño de su sitio web, como el tamaño y el color de la fuente, el color de fondo de su sitio y cuánto espacio hay entre las distintas secciones.

Piense en CSS como las instrucciones de estilo para su sitio web. Mientras que tu tema de WordPress utiliza elementos HTML para estructurar el contenido de tu sitio (como encabezados, párrafos, imágenes y botones), CSS indica al navegador cómo presentar visualmente esos elementos.

What Is CSS in WordPress

¿Por qué es necesario editar CSS en WordPress?

Aunque los temas de WordPress ofrecen una gran variedad de opciones de diseño, es posible que a veces desee realizar cambios específicos en la apariencia de su sitio web más allá de la configuración incorporada en el tema. Aquí es donde la edición de CSS es muy útil para los usuarios de WordPress.

Por ejemplo, puede que desee cambiar el color de fondo de una sección específica de su sitio web o modificar ligeramente el tamaño de la fuente para mejorar la legibilidad.

También puede personalizar el aspecto de su sitio web y diferenciarlo de otros sitios que utilicen el mismo tema. Esto podría implicar cambiar el color de selección de texto, añadir un efecto de paralaje o estilizar el formulario de comentarios de WordPress.

Parallax effect GIF

A veces, un tema puede no mostrar los elementos exactamente como quieres en tu diseño web. Con unas pocas líneas de CSS puedes solucionar problemas menores, como centrar un texto que aparece descentrado o ajustar el relleno o el margen alrededor de una imagen.

¿Necesito saber CSS para usar WordPress?

No, no es necesario saber CSS para crear un sitio web con WordPress. La mayoría de los temas de WordPress vienen con una variedad de opciones de diseño integradas que te permiten personalizar el aspecto de tu sitio sin tocar ningún código.

La edición de CSS suele considerarse una función avanzada. Aunque los principiantes pueden usar WordPress sin ella, conocer CSS abre más posibilidades para ajustar el diseño de tu sitio web.

Para facilitar la edición de CSS, puedes utilizar un plugin de WordPress como CSS Hero. Un plugin de CSS te ofrece un enfoque visual para realizar cambios en CSS y es compatible con muchos temas populares de WordPress.

CSS code preview

Dicho esto, entender cómo funciona CSS le dará más control y flexibilidad a la hora de personalizar su sitio web WordPress.

Conceptos básicos de CSS en WordPress (con ejemplos)

CSS utiliza una sintaxis específica para definir el aspecto de los elementos de su sitio web. Aunque al principio pueda parecer complejo, su estructura básica es bastante sencilla.

Lo primero que debes conocer son los selectores CSS. Estos le dicen a CSS qué elementos de tu sitio web debe estilizar. Son como etiquetas que apuntan a partes específicas de tu sitio web.

Por ejemplo, la etiqueta body se refiere a toda el área de contenido de su sitio web. Por lo tanto, el selector body se dirigiría a toda la página.

La segunda son las propiedades. Éstas definen los aspectos visuales específicos que desea cambiar. Las propiedades son como instrucciones sobre cómo quiere que sea el elemento seleccionado. Algunos ejemplos comunes son el color, el tamaño de la fuente, el color de fondo y el margen.

A continuación están los valores. Estos especifican a qué debe ajustarse la propiedad. Por ejemplo, el valor de color puede ser rojo, azul o un código de color específico.

Luego está la clase CSS, que es un tipo de atributo que puede asignarse a elementos HTML. Puedes asignar una clase a un elemento en el código HTML y luego usarla en tu CSS para aplicar los mismos estilos a todos los elementos con esa clase.

Digamos que quieres cambiar el color de fondo de todo tu sitio web a negro. Aquí está el código CSS para eso:

body {
  background-color: black;
}

En este ejemplo:

  • body es el selector, dirigido a toda el área de contenido del sitio web.
  • background-color es la propiedad que define qué aspecto queremos cambiar.
  • black es el valor que especifica el nuevo color de fondo.

Ahora, supongamos que quieres resaltar cierto texto en tu sitio web. Puedes crear una clase CSS llamada .highlight que ponga el texto en negrita y cambie su color a amarillo. Así es como definirías esa clase en tu CSS:

.highlight {
 font-weight: bold;
 color: yellow;
}

Y así es como lo aplicarías a los elementos de tu HTML:

<p class="highlight">This text will be highlighted.</p>
<div class="highlight">This div will also be highlighted.</div>

En este ejemplo:

  • .highlight es el selector de clase. Selecciona todos los elementos con la clase “highlight”.
  • font-weight: bold; y color: yellow; son propiedades. Definen qué aspectos de los elementos seleccionados queremos cambiar.
  • negrita y amarillo son valores. Especifican los nuevos valores de las propiedades.

¿Cómo puedo añadir código CSS personalizado a WordPress?

La forma de añadir CSS personalizado depende del tipo de tema de WordPress que estés utilizando.

Si utilizas un tema clásico, puedes ir al personalizador de WordPress y seleccionar “CSS adicional” para añadir allí tu código.

Additional CSS in Theme Customizer

Si utilizas un tema de WordPress en bloque, el personalizador de temas no estará presente en tu panel de control de WordPress. Esto se debe a que tu editor por defecto es ahora el editor de sitio completo.

Dicho esto, aún puede acceder al personalizador de WordPress añadiendo /wp-admin/customize.php al final de su nombre de dominio de la siguiente manera:

https://example.com/wp-admin/customize.php

Cuando añades CSS personalizado a través del personalizador de WordPress, los cambios se almacenan en la base de datos de WordPress, no en el archivo físico style.css (la hoja de estilos de tu tema).

Este enfoque le permite realizar cambios sin editar directamente los archivos del tema, lo que es un método mucho más seguro.

Dicho esto, no puedes hacer cambios CSS complejos de esta manera. Por lo tanto, la alternativa es utilizar un plugin de fragmentos de código como WPCode, ya que puede insertar de forma segura CSS personalizado en tu tema de WordPress.

Paste custom CSS code and select CSS Snippet as the Code Type

También puedes crear un tema hijo y añadir allí tu código CSS personalizado. De este modo, tus retoques de CSS seguirán ahí aunque se actualice el tema principal.

Para más información, puedes leer nuestra guía paso a paso sobre cómo añadir CSS personalizado a tu sitio WordPress.

Por último, también puedes utilizar un plugin editor de CSS como CSS Hero. Este plugin te permite editar CSS sin saber codificar. Echa un vistazo a nuestra revisión de CSS Hero para obtener más información.

¿Por qué no se muestra mi CSS en mi sitio WordPress?

Puede que tu CSS no se muestre en tu sitio WordPress debido a errores de sintaxis. Un pequeño error en tu código CSS puede impedir que se aplique. Puede tratarse de un corchete que falta, un error tipográfico en el nombre de una propiedad o un valor incorrecto.

Además, si recientemente has añadido o cambiado tu CSS, puede que necesites borrar la caché para ver los cambios. Borra la caché de tu navegador y, si utilizas un plugin de caché en tu sitio de WordPress, límpialo también.

A veces, otros temas o plugins pueden interferir con tu CSS. Intenta desactivar otros plugins uno a uno para ver si el problema se resuelve. Si lo hace, es probable que el último plugin que has desactivado esté causando el conflicto.

Si está utilizando un tema hijo y su CSS no se muestra, asegúrese de que el tema hijo está correctamente configurado y de que el archivo CSS está correctamente encolado en el archivo functions. php del tema hijo.

Si necesitas ayuda, puedes consultar nuestra guía para principiantes sobre la solución de errores de WordPress.

Esperamos que este artículo te haya ayudado a aprender más sobre CSS en WordPress. También puedes consultar nuestra lista de lecturas adicionales a continuación para ver artículos relacionados con consejos, trucos e ideas útiles para WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Lecturas adicionales

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!