### [Solución de problemas de CSS](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/)
**Publicado:** 23 de noviembre de 2023
**Autor:** Umair Majeed
**Extracto:** Aprende a solucionar problemas de CSS en tus formularios para que se muestren correctamente.
**Contenido:**
¿Has creado CSS personalizado para tus formularios, pero no has podido ver esos estilos al ver tu sitio? Hay algunos problemas comunes que pueden hacer que el CSS no aparezca correctamente en un sitio.
Este tutorial te guiará a través de opciones para solucionar por qué tu CSS no funciona y ofrecerá posibles soluciones.
---
**Nota:** Si prefieres no usar CSS personalizado para estilizar tus formularios, considera echar un vistazo a nuestro tutorial de [estilos de formularios](https://wpforms.com/docs/styling-your-forms/) para aprender a estilizar tus formularios en el editor de bloques.
### Caché del navegador
Los navegadores a menudo almacenan en caché o guardan temporalmente recursos de los sitios web que visitas para mejorar la velocidad de carga. Algunos sitios también usarán complementos para almacenamiento en caché adicional. A menudo, cuando no ves tus estilos personalizados en tu sitio, es porque el navegador u otro sistema ha almacenado en caché una versión anterior de tu sitio.
Aquí tienes un tutorial que te guiará a través de los pasos principales para [borrar la caché de tu sitio y de los complementos](http://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/ "Cómo borrar tu caché en WordPress").
Si borrar la caché de tu navegador no parece funcionar, aquí tienes un par de estrategias adicionales para probar:
#### Probar un navegador diferente
Cada navegador mantendrá su caché de los sitios que visitas. Al abrir tu sitio en un navegador diferente (o en el modo privado que ofrecen algunos navegadores, como la ventana de incógnito de Chrome), a menudo puedes ver una versión de tu sitio sin caché.
#### Preguntar a tu proveedor de alojamiento si tiene caché
Algunos proveedores de alojamiento proporcionarán caché para tu sitio directamente en sus servidores, que es donde se almacenan los archivos de tu sitio. Si no estás seguro, es posible que desees ponerte en contacto con tu proveedor de alojamiento para preguntar si están almacenando tu sitio en caché y, si lo están, pedirles que borren esa caché por ti.
#### Probar una fuente de Internet diferente
Ocasionalmente, simplemente cargar tu sitio a través de una fuente de Internet diferente puede ayudar a evitar una caché existente. Si tienes un dispositivo móvil con datos disponibles, la forma más sencilla de hacerlo es desactivar temporalmente el WiFi en tu dispositivo y recargar la página.
### Formato CSS inválido
El CSS debe escribirse en un formato específico para que un navegador pueda entenderlo. Hay muchas herramientas en línea para verificar que tu CSS es válido, incluido el [Validador CSS de W3School](http://validator.w3.org/ "Servicio de validación de marcado W3C"). Esta es una excelente opción si tienes mucho CSS personalizado y al menos un poco de experiencia previa creando CSS.
Sin embargo, si solo estás utilizando una pequeña cantidad de CSS, a veces puede ser más fácil hacer una verificación rápida del formato por tu cuenta. Empecemos por mirar un fragmento de CSS válido:
```
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 26px;
margin: 0 0 10px 0;
}
```
Aquí te explicamos por qué este CSS es válido o ‘legible’ por los navegadores:
- **Formato de selector correcto:** Si el selector incluye varias partes, debe escribirse de lo ‘más grande’ a lo ‘más pequeño’. En el ejemplo anterior, `div.wpforms-container-full` es el elemento contenedor más grande en el HTML, mientras que `.wpforms-form` está dentro de ese contenedor. El elemento más pequeño y último del selector, `.wpforms-title`, está contenido dentro de esos otros dos elementos. En cualquier otro orden, el navegador no podrá leer este selector.
- **Dos corchetes:** Debe haber un corchete de apertura ({) justo después del selector CSS y al final de la lista de propiedades y valores. Olvidar ese corchete de cierre (}) es un error común y generalmente evitará que todo el CSS posterior se muestre en el navegador.
- **Dos puntos y punto y coma:** Asegúrate de incluir dos puntos (:) entre cada propiedad y valor CSS, y un punto y coma (;) después de cada valor para que el navegador pueda leer tu CSS (por ejemplo, `font-size: 26px;`).
- **Uso correcto de espacios en blanco:** En su mayor parte, el CSS no es muy exigente con los espacios en blanco (que incluyen tabulaciones y espacios). Una excepción a esto, sin embargo, son las unidades. `26px` funcionará, por ejemplo, mientras que `26 px` no.
Para obtener más información sobre cómo escribir CSS con la sintaxis adecuada, puedes consultar [este tutorial de W3Schools](https://www.w3schools.com/css/css_syntax.asp "Sintaxis CSS").
### Especificidad CSS
Dado que todos los temas y la mayoría de los complementos contienen sus propios conjuntos de estilos, a menudo encontrarás que tus estilos personalizados deben “competir” contra los estilos existentes. En tales situaciones, el selector CSS más específico casi siempre ganará sobre un selector menos específico.
Por ejemplo, aquí está el CSS predeterminado que establece el tamaño de fuente de los títulos de los formularios en WPForms:
```
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 26px;
}
```
Intentemos anular ese CSS para hacer la fuente más grande. Puede ser tentador usar un selector CSS corto como este:
```
.wpforms-title {
font-size: 40px;
}
```
Ese CSS es válido, pero sus estilos no se aplicarán en el navegador. Se aplicarán los estilos predeterminados en su lugar porque tienen un selector más específico. En su lugar, necesitarías usar el mismo selector largo que el estilo predeterminado para tu CSS personalizado:
```
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 40px;
}
```
**Nota:** Para más información sobre selectores, puedes consultar esta lista de [selectores de campos de formulario de WPForms y sus estilos predeterminados](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/ "Cómo personalizar el estilo de campos de formulario individuales").
#### Usar !important en CSS
En algunas situaciones, puedes forzar que un fragmento de CSS menos específico funcione incluyendo la regla `!important` antes del punto y coma. Siempre es mejor intentar primero un selector más específico (como se describe anteriormente), pero a veces esto puede ofrecer una solución rápida.
Sin embargo, es importante tener en cuenta que agregar la regla `!important` no siempre funcionará. Probemos este enfoque para el CSS que discutimos en el último ejemplo:
```
.wpforms-title {
font-size: 40px !important;
}
```
En esta situación, el navegador prefiere la especificidad del CSS predeterminado sobre la regla `!important`, por lo que este CSS no se aplicará a tu sitio.
Veamos un ejemplo donde agregar la regla `!important` SÍ funciona. Por defecto, el asterisco (*) que marca un campo ‘requerido’ en WPForms será rojo:
Aquí está el CSS que crea ese estilo (`#ff0000` es un código hexadecimal para el color rojo):
```
div.wpforms-container-full .wpforms-form .wpforms-required-label {
color: #ff0000;
}
```
Queremos que estos asteriscos aparezcan en azul en su lugar. Podríamos copiar ese selector completo del CSS anterior, o podríamos usar un selector corto y agregar la regla `!important`, como en este fragmento de CSS:
```
.wpforms-required-label {
color: #007acc !important;
}
```
Puede ser difícil saber si la regla `!important` funcionará o no, por lo que probablemente necesitarás intentarlo y probarlo.
¡Eso es todo! Hemos cubierto las estrategias de solución de problemas más comunes para usar cuando el CSS no funciona. Si todavía tienes problemas para estilizar tus WPForms, por favor [ponte en contacto con soporte](https://wpforms.com/contact/ "Página de contacto de WPForms") para que podamos ayudarte.
¿A continuación, te gustaría personalizar aún más tus formularios? Consulta [nuestro tutorial sobre la personalización de campos de formulario individuales](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/ "Cómo personalizar el estilo de campos de formulario individuales") para obtener detalles y ejemplos.
**Categorías:** Estilos, Estilos y personalización, Solución de problemas
---