Inserindo CSS em seu site, um guia para iniciantes

O que é CSS?

CSS significa Cascading Style Sheets, é uma linguagem usada para identificar e descrever como o conteúdo é exibido em uma página escrita em HTML. O W3Schools define isso muito bem: "Os estilos definem como exibir os elementos de HTML."

O CSS funciona da mesma forma no WordPress como funcionaria em qualquer outro site, você tem o arquivo CSS principal (style.css) que dita para seu tema todos os elementos atraentes e de formatação, você possui pedaços de código CSS dentro de seus arquivos PHP principais, que fazem referência para o stylesheet e diz para o site onde colocar tudo.

Todos os elementos HTML do tema tem regras colocadas pelo CSS para personalizar o layout, todos os temas WordPress contam com CSS para gerar uma aparência agradável das fontes, estilos e formatação. O CSS é como como as instruções para o seu site, você tem o seu functions.php, header.php, sidebar.php, e assim por diante, mas não até o style.css entrar no meio destes esses arquivos PHP e colocar o site todo em conjunto.

Personalização simples do CSS

Se você deseja substituir alguns aspectos de seu tema e não deseja como mexer muito com os arquivos dele, é possível instalar um plugin como Simple Custom CSS, este plugin é fácil de usar e foi criado para permitir a máxima flexibilidade dentro de uma interface.

A interface é realmente apenas o regular ol 'WordPress UI, portanto ela é conveniente. No mais, ela mostra as opções de personalização de uma maneira simples. Resumidamente, não é necessário procurar o elemento CSS que você deseja modificar em páginas e páginas de código, basta percorrer as opções básicas apresentadas e sinta-se livre para mexer, tweak e fiddle ao conteúdo do seu coração.

O que é legal sobre este plugin é que ele substitui os elementos de estilo incluídos no seu tema. Se você fizer alterações na folha de estilos anexada ao seu tema, essas alterações não serão transferidas para uma nova, caso você decida alterá-la - você precisaria entrar e fazer essas alterações manualmente novamente. E todos nós temos coisas mais importantes a fazer do que tarefas redundantes como essa!

Mudanças bsicas de estilo

Com o Simple Custom CSS, é possível fazer alterações de estilo exatamente da forma que faria com o stylesheet do seu tema, mas que tipo de mudanças você pode fazer? Você deve estar se perguntando, boa pergunta.

Com o CSS é possível fazer qualquer mudança que você desejar para a aparência do seu site, é possível alterar o lugar onde as imagens aparecem, o tamanho do cabeçalho, o local que a barra lateral aparece e optar por não ter uma barra lateral. É possível alterar como os parágrafos são formatados, as fontes, cores e estilos de texto, links e cabeçalhos, o CSS lida com tudo que está relacionado com os os aspectos visuais de um site, e realmente isso é quase tudo, não acha?

Sem mais conversa, vamos falar um pouco sobre como fazer algumas dessas mudanças estilosas usando CSS no WordPress.

Note: Vou assumir que você esteja usando o plugin para fazer essas alterações e a menos que você esteja planejando usar o mesmo tema para sempre (e nunca atualizá-lo), o plugin route é a maneira mais fácil de fazer alterações no CSS do seu site.

Fonte do texto do corpo da página

Se você deseja alterar a aparência do texto em todo o site, o CSS deve ficar semelhante a este:

body { background-color: #eeeeee; /* light gray */ font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 500; font-size: 14px; color: #1e1e1e; /* dark gray */ } 

Neste trecho de código, "body" identifica que estamos referindo ao texto no corpo, em seguida, "background-color" refere a cor do plano de fundo da página, em seguida vem "font-family", que é onde coloca o tipo de fonte que você gostaria no texto do corpo.

Se certifique de incluir algumas opções, no caso de alguns de seus visitantes não usem os navegadores adequados para visualizar a sua fonte principal. O indicador "sans-serif" observa se uma das fontes não funciona, fazendo com que o navegador use uma das fonte sans-serif que tiver disponivel, em seguida, é o "font-weight", que indica a espessura das linhas que compõem cada letra e "font-size" diz ao seu navegador o quão grande a fonte deve ficar em pixels, finalmente, é o "color" que da a cor do texto.

Dica: tudo que você incluir em /* marcas como esta */, não aparecerá no site.

Headers

Os cabeçalhos são muito importantes para deixar o texto do corpo mais fácil de ler, eles também são importantes para SEO, vamos supor que você quer que todas as suas tags de cabeçalho transportem os mesmos atributos, com tamanhos diferentes, neste caso, é necessário usar um código como este:

h1, h2, h3, h4, h5, h6 { font-family: Georgia, serif; font-style: italic; color: #004060; } 

Neste exemplo, todas as header tags de h1 a h6 serão na fonte Georgia (ou qualquer fonte serif), em itálico, e com uma cor azul escura, mas digamos que você deseja fazer suas tags h1 um pouco mais diferente do resto, se esse for o caso, insira o código acima, em seguida, o seguinte:

h1 { background-color: #004060; color: #ffffff; padding: 4px 8px; }

Neste exemplo, nós decidimos deixar o h1 aparecer um pouco, lhe dando um fundo e deixando o texto branco. Também adicionamos alguns preenchimentos em torno do texto em pixels para garantir que ele fique separado o suficientemente das margens do topo, direita e esquerda.

Link

Você deseja que os seus links se destaquem do texto do seu corpo, de modo que ele altere a forma que estão aparecendo no seu site, precisaria ter um código de entrada como este:

a, a:visited { color: #006699; text-decoration: none; } 

O "color" se refere à cor do texto do link e o "text-decoration” aqui é definido como nenhum porque não queríamos nenhum sublinhado. O "a:visited" refere-se ao fato de que queremos que os links aparecem da mesma forma depois que eles foram clicados.

Link Hover

Agora, às vezes é legal ter aquele efeito quando um visitante passa o mouse sobre um link, um sublinhado simples, para fazer isso, digite:

a:hover { text-decoration: underline; }

Lista

Se você deseja dar um pouco de estilo às listas desordenadas em seu site WordPress, é possível usar este código:

ul { list-style-type: circle; color: #004060; font-size: 16px; font-weight: bold; }

"list-style-type" determina o que é o estilo de marcador, neste caso, definido como "circle", é possível definir um tamanho de fonte diferente, peso da fonte e cor para suas listas também.

E quando se coloca tudo junto, o CSS aparece desta forma em um site no ar:

Conclusão dos elementos de CSS

Estes são apenas alguns dos elementos básicos de CSS que é possível modificar e dar o seu site WordPress uma aparência especial. Há muitas outras opções que você descobrirá à medida que você ficar fluente nesta linguagem. Essas dicas devem são um bom começo para você mergulhar em WordPress e personalização templates gratis html.

Você personaliza o CSS em seu site? Se sim, qual o caminho que você toma? Você usa um plugin, cria templates html para crianças ou edita style.css diretamente no seu tema? Nos conte sobre isso nos comentários.

Tom Ewer

Tom Ewer é o fundador do WordCandy.co, ele é um grande fã do WordPress desde a primeira vez que viu, ele tem escrito conteúdo educativo e informativo para usuários do WordPress desde 2011. Quando ele não está trabalhando, é possível encontrá-lo em algum lugar nas ruas, o mais longe possível de um monitor!

Informática Internet Tecnologia