Você já deve ter ouvido falar que CSS é uma ferramenta útil para mexer no design e na personalização do seu site, mas o que é CSS?
CSS é a sigla de “Cascading Style Sheets”, um método para adicionar instruções estilísticas ao código de back-end de um site. Antes de nos aprofundarmos, vamos definir o que é código e falar para que ele serve.
O código é o que diz ao navegador exatamente como serão a aparência e as funcionalidades de um site. A linguagem mais comum é HTML (sigla de Hypertext Markup Language), uma forma que indica quais elementos compõem uma página. O HTML especifica, por exemplo, onde fica o título, onde cada parágrafo termina e qual é o tamanho de uma determinada imagem.
Já o CSS é uma extensão do HTML que decompõe instruções estilísticas específicas. O CSS é usado para especificar a cor de um título ou em que fonte o conteúdo aparecerá. Se o HTML fosse a estrutura de uma casa, o CSS definiria a cor da tinta, o tamanho das janelas e a largura dos corredores. Com o CSS, é possível personalizar o visual do site e adotar decisões estilísticas nele todo. Assim, você garante que a aparência do site esteja em sintonia com a voz da sua marca.
Os elementos do CSS
Antes de vermos como adicionar um código CSS personalizado a um site, vamos definir alguns termos. Quando falamos de CSS, precisamos entender três componentes principais: seletores, propriedades e valores.
Um seletor usa código HTML para indicar que parte do site deve ser estilizada. Por exemplo, o código de parágrafo em HTML é “p”. Para usar CSS para alterar o estilo de um parágrafo, “p” passa a ser o seu seletor.
Já as propriedades e valores servem para aplicar instruções estilísticas aos seletores. Para que os parágrafos fiquem em vermelho, a propriedade virá primeiro e indicará o atributo específico que você está tentando alterar (neste caso, é a cor). O valor indica como você quer alterar o atributo, que, no nosso exemplo, é “vermelho”.
No fim das contas, o código CSS para um parágrafo vermelho ficará assim (observe a pontuação peculiar usada em CSS):
p {
color: red;
}
Sempre que o “p” aparecer no código do seu site, o texto aparecerá em vermelho. Para se aprofundar mais nas noções básicas de CSS, aproveite os diversos recursos e guias que o WordPress.com oferece.
Como usar o CSS no WordPress.com
Há duas formas para adicionar a personalização de CSS ao seu site do WordPress.com. O primeiro método envolve a inserção do código CSS diretamente no código HTML. Para acessá-lo, abra a visualização em HTML no editor do WordPress.com. Nela, é possível inserir o snippet de código pertinente onde quer que o estilo CSS deva aparecer. Quem opta por este método, precisa inserir o snippet de código CSS em todas as páginas e posts em que o estilo deve aparecer.
Para uma personalização que se aplique a todo o site, use o recurso Design Personalizado, disponível para os planos Premium e Negócios do WordPress.com, em Aparência > Personalizador > CSS.
Os exemplos a seguir destacam como estilizar seu site com CSS.
Como alterar a cor do texto
Se, por padrão, seu tema usa subtítulos amarelos e você quer trocá-los para verde, dá para alterar a cor usando CSS. O código de subtítulo em HTML é “h2”, que será o seletor. A propriedade que você está alterando é a cor, e o valor para o qual você está mudando é verde. Portanto, basta inserir o seguinte código no painel de CSS no Personalizador:
h2 {
color: green;
}
Você pode usar esta propriedade para alterar a cor do texto também:
body {
color: blue;
}
Como alterar o tipo e o tamanho da fonte
Caso não goste da fonte padrão do tema que você escolheu, altere-a usando a propriedade “font-family”:
h2 {
font-family: Helvetica;
}
O código acima vai alterar a fonte dos subtítulos para Helvetica, mas há muitas outras opções de fontes.
Outra opção é alterar o tamanho da fonte. Em CSS, o tamanho da fonte é gerenciado por porcentagens. O código a seguir representa uma alteração de 250% no tamanho do subtítulo:
h2 {
font-size: 250%;
}
O texto abaixo também altera o tipo e o tamanho da fonte ao mesmo tempo:
h2 {
font-family: Helvetica; font-size: 250%;
}
Outras propriedades de texto que são interessantes de conhecer são: font-weight (que determina se a fonte está em negrito ou não), font-style (controla se a fonte está em itálico ou não) e text-decoration (usada para adicionar sublinhado, uma linha acima do texto ou tachado).
Como alterar o espaçamento
Às vezes, a fonte está ótima, mas as letras parecem estar muito juntas. Para resolver problemas de espaçamento, o HTMLdog traz dicas sobre como alterar o espaçamento de texto usando CSS. Se as letras estiverem muito espremidas, use:
p {
letter-spacing: 0.5em;
}
A partir daí, você pode testar diferentes valores até encontrar o espaçamento ideal entre as letras.
Como começar
Então, o que é CSS? Agora, você consegue responder essa pergunta e já sabe como começar a trabalhar. Lembre-se: fique à vontade para postar outras dúvidas nos fóruns do WordPress.com.
SOBRE O AUTOR
Go WordPress - WordPress.com