CSS (Cascading Style Sheets) é uma linguagem com um conjunto de regras que definem como os elementos do seu site aparecem.
Essas regras controlam os elementos de design do seu site, como o tamanho e a cor da fonte, a cor de fundo do seu site e o espaço entre diferentes seções.
Pense no CSS como as instruções de estilo para o seu site. Enquanto o seu tema do WordPress usa elementos de HTML para estruturar o conteúdo do seu site (como títulos, parágrafos, imagens e botões), o CSS diz ao navegador como apresentar visualmente esses elementos.
Por que você precisaria editar 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 integradas do tema. É aqui que a edição de CSS se torna útil para usuários do WordPress.
Por exemplo, você pode querer alterar a cor de fundo de uma seção específica do seu site ou ajustar ligeiramente o tamanho da fonte para melhor 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 alterar a cor de seleção de texto, adicionar um efeito parallax ou estilizar o formulário de comentários do WordPress.
Às vezes, um tema pode não exibir os elementos exatamente como você deseja no design do seu site. Com algumas linhas de CSS, você pode corrigir pequenos problemas, como centralizar texto que aparece desalinhado ou ajustar o preenchimento (padding) ou margem em torno de uma imagem.
Preciso saber CSS para usar o WordPress?
Não, você não precisa necessariamente saber CSS para construir 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 é tipicamente considerada um recurso avançado. Embora iniciantes possam certamente usar o WordPress sem ele, conhecer CSS abre mais possibilidades para ajustar o design do seu site.
Para facilitar a edição de CSS, você pode usar um plugin do WordPress como o CSS Hero. Um plugin de CSS oferece uma abordagem visual para fazer alterações de 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 como os elementos do seu site devem parecer. Embora possa parecer complexo no início, a estrutura básica é bastante simples.
A primeira coisa que você deve saber são os seletores de CSS. Eles dizem ao CSS quais elementos do seu site estilizar. Eles são como rótulos apontando para partes específicas do seu site.
Por exemplo, a tag body se refere à área de conteúdo inteira do seu site. Assim, o seletor body teria como alvo a página inteira.
O segundo são as propriedades. Elas definem os aspectos visuais específicos que você deseja alterar. As propriedades são como instruções sobre como você deseja que o elemento selecionado pareça. Exemplos comuns incluem color, font-size, background-color e margin.
Em seguida vêm os valores. Eles especificam a que a propriedade deve ser definida. Por exemplo, o valor para color pode ser red, blue ou um código de cor específico.
Em seguida, 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, em seguida, usá-la em seu CSS para aplicar os mesmos estilos a todos os elementos com essa classe.
Vamos dizer que você queira mudar 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, que visa toda a área de conteúdo do site.background-coloré a propriedade, definindo qual aspecto queremos mudar.blacké o valor que especifica a nova cor de fundo.
Agora, suponha que você queira destacar um certo texto em seu site. Você poderia criar uma classe CSS chamada .highlight que deixa o texto em negrito e muda sua cor para amarelo. Veja como você definiria essa classe em seu CSS:
.highlight {
font-weight: bold;
color: yellow;
}
E aqui está como você a aplicaria 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 quais aspectos dos elementos selecionados queremos mudar.boldeyellowsão valores. Eles especificam os novos valores para as propriedades.
Como Posso Adicionar Código CSS Personalizado ao WordPress?
Como você pode adicionar CSS personalizado depende do tipo de tema WordPress que você está usando.
Se você usar um tema clássico, poderá ir ao personalizador do WordPress e selecionar 'CSS Adicional' para adicionar seu código lá.
Se você usar um tema de blocos do WordPress, o personalizador de tema estará ausente do seu 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 nome do seu domínio, assim:
https://example.com/wp-admin/customize.php
Quando você adiciona CSS personalizado através do personalizador do WordPress, as alterações são armazenadas no banco de dados do WordPress, e não no arquivo físico style.css (a folha de estilos 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 de CSS dessa maneira. Portanto, a alternativa é usar um plugin de trechos de código como o WPCode, pois ele pode inserir CSS personalizado com segurança no seu tema WordPress.
Você também pode criar um tema filho e adicionar seu código CSS personalizado lá. Dessa forma, seus ajustes de CSS ainda estarão lá mesmo quando o tema pai for atualizado.
Para mais informações, você pode ler nosso guia passo a passo sobre como adicionar CSS personalizado ao seu site WordPress.
Por último, você também pode usar um plugin editor de CSS como o CSS Hero. Este plugin permite que você edite CSS sem saber codificar. Confira nossa revisão do CSS Hero para mais informações.
Por que meu CSS não está aparecendo no meu site WordPress?
Seu CSS pode não estar aparecendo no seu site WordPress devido a erros de sintaxe. Um pequeno erro no seu código CSS pode impedir que ele seja aplicado. Isso pode ser um colchete faltando, um erro de digitação em um nome de propriedade ou um valor incorreto.
Além disso, se você adicionou ou alterou seu CSS recentemente, talvez precise limpar seu cache para ver as alterações. Limpe o cache do seu navegador e, se você estiver usando um plugin de cache em seu site WordPress, você também deve limpá-lo.
Às vezes, outros temas ou plugins podem interferir no seu CSS. Tente desativar outros plugins um por um para ver se o problema é resolvido. Se for, o último plugin que você desativou provavelmente está causando o conflito.
Se você estiver usando um tema filho e seu CSS não estiver aparecendo, certifique-se de que o tema filho está configurado corretamente e que o arquivo CSS está corretamente enfileirado no arquivo functions.php do tema filho.
Se precisar de ajuda, você pode conferir nosso guia para iniciantes para solucionar erros do WordPress.
Esperamos que este artigo tenha ajudado você a aprender mais sobre CSS no WordPress. Você também pode querer ver nossa lista de Leitura Adicional abaixo para artigos relacionados sobre dicas, truques e ideias úteis do WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
