Como você pode usar CSS – dicas e truques de web design para iniciantes

Até você pode aprender a usar CSS para estilizar suas páginas da Web com essas dicas de CSS para iniciantes.

Você não precisa saber nada sobre código de computador. Tudo o que você precisa saber é como copiar e colar.

Mas primeiro, o que é CSS?

Cascading Style Sheets (CSS) é um código de linguagem de folha de estilo que os desenvolvedores de temas usam para descrever e alterar a apresentação ou a aparência de um documento HTML.

O que o CSS faz?

Em termos simples, o arquivo CSS faz com que as páginas HTML tenham uma boa aparência.

Não importa qual plataforma de blog você esteja usando, você pode alterar suas propriedades CSS para tornar seu blog ainda melhor.

Não importa qual plataforma de blog você usa.

Você terá uma opção em suas configurações de tema para CSS personalizado ou CSS adicional .

Você pode nunca ter olhado para esta opção.

Ou, se tiver, pode achar que é muito difícil aprender a codificar.

Mas é super fácil.

Não sei nada sobre desenvolvimento web ou sintaxe CSS, mas posso alterar um atributo de estilo em segundos.

Tudo o que você precisa fazer é usar as ferramentas do desenvolvedor do navegador Chrome ou Firefox e aprender alguns truques e dicas simples de CSS.

Vejamos como é fácil.

Por que você gostaria de aprender a editar o CSS do seu blog?

Você provavelmente tem muitas configurações no tema do seu blog.

Mas há muitos elementos menores que podem estar faltando.

Mesmo em temas premium para WordPress, algumas opções não estão disponíveis nas opções padrão.

É por isso que você pode ajudar seu CSS a funcionar melhor fazendo suas próprias edições e alterações.

Ao alterar uma folha de estilo externa, ela pode fazer referência a todas as suas páginas HTML.

Se você fizer uma alteração nos cabeçalhos HTML em uma página, isso alterará a tag HTML em todas as suas páginas.

A referência é chamada de pseudo-elemento.

Isso significa que, se você alterar a aparência do cabeçalho H2, todos os cabeçalhos H2 do seu site serão alterados.

Mas você não precisa aprender tudo sobre essas complicações.

Tudo o que você precisa saber é que funciona e que você pode estilizar seu blog exatamente como deseja, sem saber nada sobre codificação.

Vamos começar com algumas dicas fáceis de CSS para iniciantes.

Como alterar facilmente seu CSS inline

O primeiro passo é abrir seu blog no Firefox, Chrome ou Microsoft Edge.

Nos exemplos abaixo, usei o Firefox. Acho que é um pouco mais amigável de usar do que o Chrome.

Mas ambos funcionam de maneira semelhante.

Abra seu blog em uma nova guia ou janela. Você pode navegar até a página que deseja alterar.

Agora abra as Ferramentas do desenvolvedor, Inspetor, no menu Ferramentas no Firefox ou no menu Exibir no Chrome.

Clique em Inspetor para abrir o painel de ferramentas.

Você pode selecionar qualquer elemento de estilo embutido em sua página usando a seta seletora no canto superior esquerdo do painel de ferramentas.

Mova o cursor pela página para selecionar um elemento. Ou você pode clicar em elementos individuais na lista.

Você verá cada elemento selecionado destacado em azul na visualização do navegador da sua página da web.

Agora você está pronto para fazer alterações na aparência da sua página.

Usando o seletor de CSS

No meu exemplo, vou alterar a aparência do elemento de título H2.

Você pode optar por alterar o elemento H1, o corpo do texto ou a legenda de uma imagem.

Quero começar alterando o tamanho da fonte. Tudo o que você precisa fazer é clicar no tamanho da fonte da tag de estilo e alterar o número.

Mudei o tamanho de 33px para 56px. Você pode ver que o tamanho do título agora é maior.

Não se preocupe. Você não mudou sua página de blog ao vivo. O que você vê no painel do navegador é apenas uma visualização de suas alterações.

Você pode brincar o quanto quiser com qualquer elemento HTML.

Tudo o que você vê no painel do navegador é apenas uma prévia de como serão suas alterações em uma regra CSS.

Agora eu quero mudar a cor do texto.

Se você clicar no ponto colorido entre a etiqueta de cor e o número, abrirá o seletor de cores.

Agora é só escolher a cor que deseja usar.

É simples alterar a cor do atributo HTML. Aqui mudei de preto para azul.

Parece bom, mas a altura da linha poderia ser melhor. Eu vou mudar isso.

A configuração atual é 1,2, que é muito espaço entre as linhas. Eu quero as linhas mais juntas.

Então, vou mudar para 1.0.

Isso parece muito melhor.

Fiz três alterações na aparência do meu cabeçalho H2 no modo de visualização. Alterei o tamanho da fonte, a cor e o espaçamento entre linhas.

Agora é hora de adicionar essas alterações ao meu site ativo.

Como obter o código para o seu site

Você precisa copiar as linhas de código que você modificou.

Selecione e copie todo o código. Certifique-se de copiar todas as linhas, incluindo o último colchete.

Agora cole-o em um editor de texto. Você pode usar o Bloco de Notas em um PC ou o Editor de Texto em um Mac.

A outra mudança que fizemos foi na cor. Precisamos copiar esta linha também.

Você só precisa copiar a linha para a cor.

Você pode ver que o elemento H2 está em negrito na imagem acima. Isso significa que é o mesmo pseudo-elemento do nosso primeiro código. Então você pode usá-los juntos.

Copie a linha.

Agora adicione a linha ao seu editor de texto.

Pode ser necessário adicionar ou excluir alguns espaços para que sua linha de cor seja recuada da mesma forma.

Agora você está pronto para adicionar essas três alterações ao seu site ativo.

Adicione o código ao seu site

Vá para as opções de tema e selecione suas opções de CSS.

Nos temas do WordPress, está no Theme Customizer e é chamado de CSS Adicional ou CSS Personalizado.

Ele será chamado de algo semelhante em outras plataformas de blog.

Agora copie todo o código do seu editor de texto e cole-o na guia Personalizador.

Assim que você colar o código, seu visualizador mostrará as alterações feitas.

Clique em publicar e pronto.

Aqui está uma comparação de antes e depois das minhas mudanças.

Você pode fazer muito mais

Minhas dicas de CSS para iniciantes introdução passo a passo para editar seu HTML O estilo CSS é apenas o começo.

Você pode fazer muito mais se quiser experimentar e tentar mudar outros elementos.

É fácil adicionar bordas ou sombras às imagens, mover o texto para a esquerda ou para a direita ou redimensionar a largura do corpo do texto.

Você pode mover as margens ou reduzir ou aumentar o preenchimento e modificar o alinhamento.

Existem centenas de opções que você pode escolher para editar.

Lembre-se de que, ao trabalhar nas Ferramentas do desenvolvedor, você não afetará seu site.

Quaisquer alterações feitas são uma visualização e apenas visual dentro dessa janela do navegador.

Não importa o que você tente, ou se funciona ou não.

Pense nisso como um playground para você aprender o quanto mais você pode fazer para estilizar seu site ou blog.

Seja curioso e você vai se divertir aprendendo essa nova habilidade com essas dicas de CSS para iniciantes.

Uma grande dica de bônus com ferramentas de desenvolvedor

Agora que você abriu o quadro de ferramentas do desenvolvedor, há uma coisa muito interessante que você pode fazer.

Você pode testar a velocidade do seu site.

Tudo o que você precisa fazer é clicar na guia Rede.

Em seguida, clique em CTRL + R.

Você verá o tempo de velocidade da página totalmente carregada em vermelho na linha na parte inferior marcada com a seta.