### [Solução de problemas de CSS](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/)
**Publicado:** 23 de novembro de 2023
**Autor:** Umair Majeed
**Excerto:** Aprenda a corrigir problemas de CSS em seus formulários para que eles sejam exibidos corretamente.
**Conteúdo:**
Você criou CSS personalizado para seus formulários, mas não conseguiu ver esses estilos ao visualizar seu site? Existem alguns problemas comuns que podem fazer com que o CSS não apareça corretamente em um site.
Este tutorial irá guiá-lo pelas opções para solucionar problemas de por que seu CSS não está funcionando e oferecer possíveis soluções.
---
**Nota:** Se você preferir não usar CSS personalizado para estilizar seus formulários, considere conferir nosso tutorial de [estilização de formulários](https://wpforms.com/docs/styling-your-forms/) para aprender como estilizar seus formulários no editor de blocos.
### Cache do Navegador
Os navegadores geralmente armazenam em cache ou armazenam temporariamente recursos de sites que você visita para melhorar a velocidade de carregamento. Alguns sites também usam plugins para cache adicional. Frequentemente, quando você não vê seus estilos personalizados em seu site, é porque o navegador ou outro sistema armazenou em cache uma versão antiga do seu site.
Aqui está um tutorial que o guiará pelas principais etapas para [limpar o cache do seu site e dos plugins](http://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/ "Como Limpar o Cache no WordPress").
Se limpar o cache do seu navegador não parecer funcionar, aqui estão algumas estratégias adicionais para tentar:
#### Tentando um Navegador Diferente
Cada navegador manterá seu cache dos sites que você visita. Ao abrir seu site em um navegador diferente (ou no modo privado oferecido por alguns navegadores, como a janela anônima do Chrome), você pode ver uma versão sem cache do seu site.
#### Perguntando ao seu Provedor se Ele Tem um Cache
Alguns provedores de hospedagem fornecerão cache para seu site diretamente em seus servidores, que é onde os arquivos do seu site são armazenados. Se você não tiver certeza, pode querer entrar em contato com seu provedor para perguntar se ele está armazenando seu site em cache e, se estiver, peça para ele limpar esse cache para você.
#### Tentando uma Fonte de Internet Diferente
Ocasionalmente, apenas carregar seu site por uma fonte de internet diferente pode ajudar a contornar um cache existente. Se você tiver um dispositivo móvel com dados disponíveis, a maneira mais simples de fazer isso é desativar temporariamente o WiFi em seu dispositivo e recarregar a página.
### Formato CSS Inválido
O CSS deve ser escrito em um formato específico para que um navegador o entenda. Existem muitas ferramentas online para verificar se o seu CSS é válido, incluindo o [Validador CSS da W3School](http://validator.w3.org/ "Serviço de Validação de Marcação W3C"). Esta é uma excelente opção se você tem muito CSS personalizado e pelo menos um pouco de experiência anterior na criação de CSS.
Se você estiver usando apenas uma pequena quantidade de CSS, no entanto, às vezes pode ser mais fácil fazer uma verificação rápida do formato por conta própria. Vamos começar olhando um trecho de CSS válido:
```
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 26px;
margin: 0 0 10px 0;
}
```
Aqui está o porquê este CSS é válido ou 'legível' pelos navegadores:
- **Formato de seletor correto:** Se o seletor incluir várias partes, ele deve ser escrito do 'maior' para o 'menor'. No exemplo acima, `div.wpforms-container-full` é o maior elemento contêiner no HTML, enquanto `.wpforms-form` está dentro desse contêiner. O menor e último item no seletor, `.wpforms-title`, está contido em ambos os outros elementos. Em qualquer outra ordem, o navegador não conseguirá ler este seletor.
- **Dois colchetes:** Deve haver um colchete de abertura ({) logo após o seletor CSS e no final da lista de propriedades e valores. Esquecer esse colchete de fechamento (}) é um erro comum e geralmente impede que todo o CSS abaixo dele seja exibido no navegador.
- **Dois pontos e ponto e vírgula:** Certifique-se de incluir dois pontos (:) entre cada propriedade e valor CSS, e um ponto e vírgula (;) após cada valor para que o navegador possa ler seu CSS (por exemplo, `font-size: 26px;`).
- **Uso correto de espaço em branco:** Na maior parte, o CSS não é muito exigente em relação ao espaço em branco (que inclui tabulações e espaços). Uma exceção a isso, no entanto, é para unidades. `26px` funcionará, por exemplo, enquanto `26 px` não funcionará.
Para mais informações sobre como escrever CSS com a sintaxe correta, você pode conferir [este tutorial da W3Schools](https://www.w3schools.com/css/css_syntax.asp "Sintaxe CSS").
### Especificidade CSS
Como todos os temas e a maioria dos plugins contêm seus próprios conjuntos de estilos, você frequentemente descobrirá que seus estilos personalizados devem "competir" contra estilos existentes. Nessas situações, o seletor CSS mais específico quase sempre vencerá um seletor menos específico.
Por exemplo, aqui está o CSS padrão que define o tamanho da fonte dos títulos de formulário no WPForms:
```
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 26px;
}
```
Vamos tentar substituir esse CSS para tornar a fonte maior. Pode ser tentador usar um seletor CSS curto como este:
```
.wpforms-title {
font-size: 40px;
}
```
Esse CSS é válido, mas seus estilos não serão aplicados no navegador. Os estilos padrão serão aplicados em vez disso porque eles têm um seletor mais específico. Você precisaria usar o mesmo seletor mais longo que o estilo padrão para seu CSS personalizado:
```
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 40px;
}
```
**Nota:** Para mais informações sobre seletores, você pode conferir esta lista de [seletores de campos de formulário do WPForms e seus estilos padrão](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/ "Como Personalizar o Estilo de Campos de Formulário Individuais").
#### Usando !important em CSS
Em algumas situações, você pode forçar um trecho de CSS menos específico a funcionar incluindo a regra `!important` antes do ponto e vírgula. É sempre melhor tentar um seletor mais específico (como descrito acima) primeiro, mas às vezes isso pode oferecer uma correção rápida.
É importante notar, no entanto, que adicionar a regra `!important` nem sempre funcionará. Vamos tentar essa abordagem para o CSS que discutimos no último exemplo:
```
.wpforms-title {
font-size: 40px !important;
}
```
Nesta situação, o navegador prefere a especificidade do CSS padrão à regra `!important`, portanto, este CSS não será aplicado ao seu site.
Vamos ver um exemplo onde adicionar a regra `!important` *funciona*. Por padrão, o asterisco (*) que marca um campo 'obrigatório' no WPForms será vermelho:
Aqui está o CSS que cria esse estilo (`#ff0000` é um código hexadecimal para a cor vermelha):
```
div.wpforms-container-full .wpforms-form .wpforms-required-label {
color: #ff0000;
}
```
Queremos que esses asteriscos apareçam em azul em vez disso. Poderíamos copiar todo esse seletor do CSS acima, ou poderíamos usar um seletor curto e adicionar a regra `!important`, como neste trecho de CSS:
```
.wpforms-required-label {
color: #007acc !important;
}
```
Pode ser difícil saber se a regra `!important` funcionará ou não, então você provavelmente precisará tentar e testar.
É isso! Cobrimos as estratégias de solução de problemas mais comuns para usar quando o CSS não está funcionando. Se você ainda estiver com problemas para estilizar seus WPForms, por favor [entre em contato com o suporte](https://wpforms.com/contact/ "Página de Contato WPForms") para que possamos ajudá-lo.
Em seguida, você gostaria de personalizar ainda mais seus formulários? Confira [nosso tutorial sobre personalização de campos de formulário individuais](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/ "Como Personalizar o Estilo de Campos de Formulário Individuais") para obter detalhes e exemplos.
**Categorias:** Estilização, Estilização e Personalização, Solução de problemas
---