CSS básico que todo usuário WordPress precisa saber

Qualquer pessoa com um site WordPress, em algum ponto, se deparará com uma situação em que precisará alterar parte do código. Isso não quer dizer que se espera que você seja um desenvolvedor web, escrevendo JavaScript e PHP como um profissional. Mais provavelmente, você precisará mexer em HTML e CSS básico, os fundamentos de qualquer página da web, WordPress ou não.

Temos um ótimo tutorial sobre os códigos HTML mais comuns e amigáveis ​​para iniciantes de que você precisa. Dê uma olhada e leia sobre isso também. Desta vez, queremos guiá-lo por alguns dos trechos de CSS mais básicos e ideias que o ajudarão a ajustar seu site para que pareça e atue exatamente como você deseja.

Inscreva-se no nosso canal no Youtube

1. Seletores, classes e IDs

No CSS, a base de tudo é um seletor . Simplificando, é uma abreviatura que diz ao código o que deve ser direcionado. Você pode direcionar todos os parágrafos individuais no site com um p {} . (Qualquer código que se aplique ao seletor é colocado entre chaves.) Em muitos casos, esses seletores de elemento se alinham às tags HTML com as quais você constrói a página da web (como p {} segmentação <p> ou h2 {} e < h2> ).

Depois disso, você tem aulas . Estes são tipos específicos de seletores que você (ou seu tema / WP) define. Se você deseja segmentar apenas os títulos H1 para postagens, você pode ter .post-title {}. Um seletor de classe CSS é identificado pelo ponto / ponto na frente do próprio seletor. Eles são usados ​​para direcionar os elementos de todo o site, mas não os elementos fundamentais, como um H1 simples. Observe que os seletores de base não têm um ponto ou outro indicador, o que significa que são o HTML base.

IDs em CSS funcionam exatamente da mesma forma que uma classe. Exceto por duas pequenas diferenças. Eles são indicados por um # na frente do seletor e são nomeados para uma única instância específica (ou número limitado de instâncias) de um elemento que precisa de um estilo especializado. Como # email-subscribe-about-page {} ou # email-subscribe-after-post {}. Esses IDs indicam que, em vez de almejar um tipo específico de elemento, eles próprios estão selecionando elementos individuais.

p {
	color: red;
}

.class {
	color: white;
}

#id {
	color: blue;
}

Outros Seletores

Como estamos discutindo os fundamentos do CSS, não vamos mergulhar nos seletores mais complexos, mas eles existem. Você também pode direcionar o que são chamadas de pseudoclasses que podem se aplicar apenas quando um link é passado por cima. Ou um seletor de atributo que terá como alvo apenas os elementos que possuem um parâmetro específico anexado a ele. Além disso, você pode habilitar o CSS para ser relativo à posição de um elemento usando p :: after e img :: before.

Eles podem ser incrivelmente avançados e complexos para acertar; portanto, para aprender o básico, eles não são algo com que você deva se preocupar. Queríamos, no entanto, que você soubesse que existem maneiras muito mais específicas de interagir com o documento.

2. Dois pontos e ponto e vírgula

Mencionamos acima que todo o código CSS está entre chaves. Dentro dessas chaves, no entanto, cada linha de personalização deve terminar com um ponto e vírgula (;) . Isso indica ao navegador que o estilo específico está completo. O espaçamento não importa com CSS, exceto para a legibilidade, mas o ponto-e-vírgula em si não é negociável.

Além disso, entre o estilo CSS real e o valor, você coloca dois pontos regulares (:) . Novamente, o espaçamento aqui não importa . Você pode ter espaços em um lado dele, ambos ou nenhum, e o CSS ainda será renderizado.

Observe que, embora você possa deixar esses espaços, é geralmente aceito que não o faça. No entanto, com a maioria dos sites e temas que oferecem minificação CSS, todos os espaços são removidos de qualquer maneira.

3. Comentários CSS

Se você precisar incluir documentação no código CSS, pode fazê-lo com comentários. Os comentários CSS são abertos e fechados com os símbolos / * e * / . Comentar seu código é importante não apenas para você retornar ao CSS mais tarde, mas também para desenvolvedores posteriores. Em geral, os comentários CSS são usados ​​para indicar o que um trecho específico faz.

Você pode ver acima que o código apenas diz o que o próximo snippet faz. É muito importante continuar fazendo isso, pois seu arquivo CSS pode ficar muito complicado com o tempo.

/* This is what a CSS Comment Looks Like */

img {
	display:none;
}

4.! Importante

É difícil exagerar o quão importante a tag ! Important pode ser para o CSS. Trocadilho pretendido. É um dos elementos CSS mais usados, mas também é um dos elementos mais mal usados ​​e excessivamente usados.

Veja ,! Important declara que qualquer linha em que esteja deve sobrescrever qualquer outro estilo para aquele seletor. Em qualquer lugar da folha de estilo. Portanto, se você quiser ter certeza de que um determinado elemento sempre terá uma determinada cor, use ! Important para fazer isso. Certifique-se de observar que toda a tag ! Important fica entre o valor e o ponto-e-vírgula, não depois.

#author-name {
	color:red!important;
}

#author-name {
	color:blue;
}

5. display: nenhum;

Este snippet CSS específico é um dos mais importantes para os iniciantes aprenderem. Tudo o que faz é fazer com que qualquer elemento que você almeje simplesmente desapareça. Por exemplo, se você precisa que uma página não tenha um menu de cabeçalho, por exemplo, você simplesmente colocaria este código em:

Fazer isso com uma classe que aparece em quase todas as páginas pode removê-la completamente do site. Portanto, você precisa ter cuidado ao aplicar isso.

Você pode usar isso em postagens ou páginas específicas do WordPress para remover elementos individuais, como metadados, da própria postagem. No Divi, você pode personalizar o módulo de blog individual para não ter o trecho da postagem usando este código:

.home-page-blog .post-content {
	display:none;
}

6. visibilidade: oculto;

Resumidamente, você também pode usar a visibilidade: oculto; CSS para remover um elemento da tela. Lembre-se de que há uma diferença entre this e display: none; em seu código.

A exibição; nenhum; o código removerá completamente o elemento da página. O navegador não renderizará o elemento, pois ele foi removido completamente. Com visibilidade: oculto; o elemento ainda é renderizado e carregado na página, mas é invisível. Para todos os efeitos funcionais, ele ainda está lá. O usuário simplesmente não consegue ver.

Geralmente, você só usaria isso se precisasse da função para alguma coisa, mas não queria que ela fosse exibida. Como um pixel de rastreamento ou outras peças que interagiriam com os outros elementos na tela.

#code-module { 
visibility:hidden; 
}

7. Margem e preenchimento

Margens e Preenchimento são mal compreendidos por iniciantes em CSS. Eles parecem iguais no início, mas quando você se aprofundar, verá que são totalmente diferentes.

Margem é o espaço em torno de um elemento. É invisível e transparente, podendo até ser negativo. Ter uma margem esquerda maior empurrará o elemento para a direita. Uma margem superior maior empurra o elemento em direção à parte inferior. Uma margem negativa faz o oposto. Uma margem superior negativa puxará o elemento para cima, por exemplo.

O preenchimento , então, armazena o tamanho do elemento. O preenchimento à esquerda estenderá o plano de fundo do elemento para a esquerda. Está essencialmente aumentando sua massa física. Como adicionar um segundo suéter em um dia frio. Você obtém mais acolchoamento em seu corpo. Você está mais grosso do que era antes. É assim que o preenchimento em CSS também funciona e, por isso, você não pode ter preenchimento negativo .

Ao usá-lo como código, você pode usar a margem padrão : 15px; ou preenchimento: 1vw; para espaçamento uniforme em torno do seletor. Ou você pode usar margin-top, margin-left, margin-right ou margin-bottom para afetar apenas aquele lado e ter níveis diferentes para cada um. Padding, também, com padding-left e assim por diante.

h2 {
	margin-bottom:25px;
	padding-left:15vh;
}

8. Elementos de coloração

Mudar a cor de vários elementos é uma daquelas coisas que você pode começar a ajustar desde o primeiro dia em que inicia um site. Em CSS, você pode definir uma cor de duas maneiras.

A principal forma é usar seu código hexadecimal de 6 dígitos: #ffffff para branco ou # 000000 para preto, como exemplos. Você pode definir qualquer cor RGB com um código hexadecimal e, se não os conhece, não se preocupe. Muitos sites e ferramentas existem para ajudar com isso.

A segunda maneira é usar uma palavra de cor predefinida. As cores básicas, como azul, preto e vermelho, são predefinidas e você pode usá-las sem precisar se lembrar de nenhum código hexadecimal. Mas se os tons primários não são o que você precisa, os códigos hexadecimais são a melhor aposta.

Usando os códigos de cores

Em termos de realmente usar os códigos de cores, existem várias maneiras. Para qualquer texto que precise ser alterado, basta usar color: #ffffff; e qualquer texto dentro desse seletor será alterado. Você pode fazer o mesmo para títulos como H1 e H2 com cores .

p {
	color:white;
	background-color:#000;
}

h3	{
	background:green;
	border: #110011;
}

Mudar coisas como cor de fundo: vermelho; ou fundo: verde; de um elemento são tão fáceis. Adicione um valor de cor. Você também pode usar a cor: # 000; valores para seletores, como a: hover, que mudará a cor de um link ao passar o mouse . Ou mesmo borda: azul; para colocar uma borda colorida em torno de qualquer elemento que você deseja.

Resumindo noções básicas de CSS

CSS pode ser opressor. E você pode fazer muito mais do que trocar cores e mostrar / ocultar elementos. No entanto, se você está apenas aprendendo CSS e como manipular um site via código, internalizar esses princípios básicos o deixará confortável para ler e ajustar o código, mesmo que nunca tenha aberto um editor de código antes.

Qual é o CSS básico que você usa com frequência em seus sites?

Imagem de destaque do artigo por darkwark / shutterstock.com