CSS (Cascading Style Sheets) é uma linguagem com um conjunto de regras que definem a aparência dos elementos em seu site.
Essas regras controlam os elementos de design do seu site, como o tamanho e a cor da fonte, a cor do plano de fundo do site e a quantidade de espaço entre as diferentes seções.
Pense no CSS como as instruções de estilo de seu site. Enquanto o tema do WordPress usa elementos HTML para estruturar o conteúdo do site (como títulos, parágrafos, imagens e botões), o CSS informa ao navegador como apresentar visualmente esses elementos.
Por que você precisaria editar o CSS no WordPress?
Embora os temas do WordPress ofereçam uma variedade de opções de design, às vezes você pode querer fazer alterações específicas na aparência do seu site além das configurações internas do tema. É nesse ponto que a edição de CSS é útil para os usuários do WordPress.
Por exemplo, talvez você queira alterar a cor de fundo de uma seção específica do seu site ou ajustar ligeiramente o tamanho da fonte para melhorar a legibilidade.
Você também pode personalizar a aparência do seu site e diferenciá-lo de outros sites que usam o mesmo tema. Isso pode envolver a alteração da cor de seleção de texto, a adição de um efeito de paralaxe ou a estilização do formulário de comentários do WordPress.
Às vezes, um tema pode não exibir elementos exatamente como você deseja em seu design da Web. Com algumas linhas de CSS, você pode corrigir problemas menores, como centralizar o texto que aparece fora do centro ou ajustar o preenchimento ou a margem em torno de uma imagem.
É necessário saber CSS para usar o WordPress?
Não, você não precisa necessariamente saber CSS para criar um site WordPress. A maioria dos temas do WordPress vem com uma variedade de opções de design integradas que permitem personalizar a aparência do seu site sem tocar em nenhum código.
A edição de CSS é normalmente considerada um recurso avançado. Embora os iniciantes possam usar o WordPress sem esse recurso, o conhecimento de CSS abre mais possibilidades para o ajuste fino do design do seu site.
Para facilitar a edição de CSS, você pode usar um plug-in do WordPress, como o CSS Hero. Um plug-in de CSS oferece uma abordagem visual para fazer alterações no CSS e é compatível com muitos temas populares do WordPress.
Dito isso, entender como o CSS funciona lhe dará mais controle e flexibilidade na personalização do seu site WordPress.
Noções básicas de CSS no WordPress (com exemplos)
O CSS usa uma sintaxe específica para definir a aparência dos elementos em seu site. Embora possa parecer complexo em um primeiro momento, a estrutura básica é bastante simples.
A primeira coisa que você deve conhecer são os seletores CSS. Eles informam ao CSS quais elementos de seu site devem ser estilizados. Eles são como rótulos que apontam para partes específicas de seu site.
Por exemplo, a tag body refere-se a toda a área de conteúdo de seu site. Portanto, o seletor body teria como alvo a página inteira.
A segunda são as propriedades. Elas definem os aspectos visuais específicos que você deseja alterar. As propriedades são como instruções sobre a aparência que você deseja dar ao elemento selecionado. Exemplos comuns incluem cor, tamanho da fonte, cor de fundo e margem.
Em seguida, temos os valores. Eles especificam como a propriedade deve ser definida. Por exemplo, o valor da cor pode ser vermelho, azul ou um código de cor específico.
Depois, há a classe CSS, que é um tipo de atributo que pode ser atribuído a elementos HTML. Você pode atribuir uma classe a um elemento no código HTML e usá-la em seu CSS para aplicar os mesmos estilos a todos os elementos com essa classe.
Digamos que você queira alterar a cor de fundo de todo o seu site para preto. Aqui está o código CSS para isso:
body {
background-color: black;
}
Neste exemplo:
bodyé o seletor, direcionado a toda a área de conteúdo do site.background-coloré a propriedade que define o aspecto que queremos alterar.blacké o valor que especifica a nova cor de fundo.
Agora, suponha que você queira destacar determinado texto em seu site. Você poderia criar uma classe CSS chamada .highlight que tornasse o texto em negrito e mudasse sua cor para amarelo. Veja como você definiria essa classe em seu CSS:
.highlight {
font-weight: bold;
color: yellow;
}
E aqui está como você aplicaria isso a elementos em seu HTML:
<p class="highlight">This text will be highlighted.</p>
<div class="highlight">This div will also be highlighted.</div>
Neste exemplo:
.highlighté o seletor de classe. Ele seleciona todos os elementos com a classe “highlight”.font-weight: bold;ecolor: yellow;são propriedades. Elas definem os aspectos dos elementos selecionados que queremos alterar.negritoeamarelosão valores. Eles especificam os novos valores para as propriedades.
Como posso adicionar um código CSS personalizado ao WordPress?
A forma de adicionar CSS personalizado depende do tipo de tema do WordPress que você está usando.
Se você usar um tema clássico, poderá acessar o personalizador do WordPress e selecionar “CSS adicional” para adicionar seu código.
Se você usar um tema WordPress em bloco, o personalizador de temas não estará presente no painel do WordPress. Isso ocorre porque seu editor padrão agora é o editor de site completo.
Dito isso, você ainda pode acessar o personalizador do WordPress adicionando /wp-admin/customize.php ao final do seu nome de domínio, da seguinte forma:
https://example.com/wp-admin/customize.php
Quando você adiciona CSS personalizado por meio do personalizador do WordPress, as alterações são armazenadas no banco de dados do WordPress, não no arquivo style.css físico (a folha de estilo do seu tema).
Essa abordagem permite que você faça alterações sem editar diretamente os arquivos do tema, o que é um método muito mais seguro.
Dito isso, você não pode fazer alterações complexas no CSS dessa forma. Portanto, a alternativa é usar um plug-in de snippet de código como o WPCode, pois ele pode inserir com segurança o CSS personalizado em seu tema do WordPress.
Você também pode criar um tema filho e adicionar seu código CSS personalizado nele. Dessa forma, seus ajustes de CSS continuarão presentes mesmo quando o tema principal for atualizado.
Para obter mais informações, leia nosso guia passo a passo sobre como adicionar CSS personalizado ao seu site WordPress.
Por fim, você também pode usar um plug-in de editor de CSS, como o CSS Hero. Esse plug-in permite que você edite CSS sem saber programar. Confira nossa análise do CSS Hero para obter mais informações.
Por que meu CSS não está sendo exibido no meu site WordPress?
Seu CSS pode não estar sendo exibido no site do WordPress devido a erros de sintaxe. Um pequeno erro em seu código CSS pode impedir que ele seja aplicado. Pode ser um colchete ausente, um erro de digitação em um nome de propriedade ou um valor incorreto.
Além disso, se você adicionou ou alterou recentemente o CSS, talvez seja necessário limpar o cache para ver as alterações. Limpe o cache do seu navegador e, se estiver usando um plug-in de cache no seu site WordPress, limpe-o também.
Às vezes, outros temas ou plug-ins podem interferir em seu CSS. Tente desativar outros plug-ins um a um para ver se o problema é resolvido. Se isso acontecer, o último plug-in que você desativou provavelmente está causando o conflito.
Se estiver usando um tema secundário e seu CSS não estiver aparecendo, verifique se o tema secundário está configurado corretamente e se o arquivo CSS está enfileirado corretamente no arquivo functions.php do tema secundário.
Se precisar de ajuda, consulte nosso guia para iniciantes sobre solução de erros do WordPress.
Esperamos que este artigo tenha ajudado você a saber mais sobre CSS no WordPress. Talvez você também queira ver nossa lista de Leitura adicional abaixo para obter artigos relacionados sobre dicas, truques e ideias úteis para o WordPress.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
