10 dicas simples para aprender CSS para WordPress

Aprender CSS pode ser cansativo, especialmente quando você não sabe por onde começar e quais termos procurar quando estiver travado.

Como CSS é uma linguagem de estilo e não uma linguagem de programação completa como Javascript ou PHP, na verdade é bastante simples de aprender, especialmente se você tiver algum conhecimento de HTML (que eu suponho que você tenha para os propósitos deste post).

Em nossa pesquisa de blog, um grande número de vocês mencionou que queria melhorar seu jogo e se familiarizar mais com CSS e é por isso que publicamos recentemente uma lista de mais de 150 recursos para aprender CSS, o que deve ajudá-lo a começar, especialmente em conjunto com esta postagem.

Hoje, mostrarei o fluxo de trabalho e dicas que me ajudaram a aprender CSS quando comecei há muitos anos. Comece com a primeira dica e vá descendo a lista até o domínio do CSS.

Continue lendo ou vá em frente usando estes links:

• Construção Básica
• Pratique com seletores e propriedades simples
• Memorize o modelo da caixa
• Aprender fazendo
• Organize o conteúdo por largura e altura
• Flutuantes e Posicionamento
• CSS avançado
• Replicar um site com CSS
• Pré-processadores
• Estruturas

1. Construção Básica

A primeira coisa é a primeira: Para aprender a escrever seu próprio CSS, você precisa saber como formatá-lo corretamente. Na verdade, existem duas maneiras corretas de fazer isso, mas uma delas ajuda a mantê-lo mais organizado.

Como é comum que o HTML seja a primeira linguagem que as pessoas aprendem quando querem trabalhar com sites WordPress, é útil aprender a sintaxe CSS escrevendo-a primeiro de maneira semelhante ao HTML.

Aqui está a estrutura básica que o CSS usa:

É bastante simples quando não há muitos estilos que você deseja implementar para um elemento em seu site, mas quando você começa a se familiarizar com CSS, você vai precisar de muito mais de um estilo para um elemento e é aí que um estrutura como esta pode ficar confusa, rápido.

É por isso que existe uma maneira mais eficiente e organizada de escrever seu CSS:

Agora você pode começar a explorar os termos usados ​​neste exemplo. Cada um desses termos são os blocos básicos de construção do CSS: classe, ID, seletor, propriedade e valor. As propriedades e valores também compõem o que é chamado de declaração.

Este é um ótimo ponto de partida para aprender a escrever seu próprio CSS e, assim que começar, você pode se perguntar onde deve escrever tudo isso em seus arquivos do WordPress.

Em sua instalação do WordPress, qualquer arquivo que você vê que termina em .css é um arquivo CSS, como você provavelmente já adivinhou. O arquivo principal que você precisa procurar é sua folha de estilo e está rotulada como style.css . É aqui que a maior parte ou todo o design do seu tema é mantido em termos de cores, fontes, imagens básicas e possivelmente parte do layout do seu tema.

Você também pode notar um arquivo em um tema pré-criado chamado custom.css e geralmente é onde eles gostariam que você fizesse qualquer alteração no tema. Quando você faz alterações neste arquivo, ele deve substituir os estilos existentes na folha de estilos do tema.

Se você adicionar plugins ao seu tema, eles também podem vir com arquivos CSS em sua pasta e são usados ​​para estilizar a aparência do plugin.

2. Pratique com seletores e propriedades simples

O próximo passo é aprender sobre seletores e propriedades básicos e como eles funcionam em um tema. Seletores como h1 , h2 e h3 para cabeçalhos p para texto de parágrafo, por exemplo, bem como propriedades como font-family e background-color .

Existe uma maneira fácil de praticar essas novas habilidades e realmente ver as alterações que você está fazendo, sem precisar iniciar seu próprio blog WordPress. W3Schools tem uma tonelada de informações sobre CSS, bem como exemplos ao vivo onde você pode alterar seu código e com o pressionar de um botão, você pode ver instantaneamente as alterações feitas.

Quando você vê um exemplo, basta clicar no botão Experimente você mesmo e uma janela se abre onde você pode testar alguns CSS básicos.

3. Memorize o modelo da caixa

Sou um defensor da referência às informações mais comuns, em vez de guardá-las todas na memória. Talvez seja porque eu acho que minha memória está faltando a maior parte do tempo, mas eu prefiro dizer que é porque há tantas referências maravilhosas online.

Você pode facilmente procurar seletores e propriedades que não conhece em um piscar de olhos. Basta uma simples consulta ao seu mecanismo de pesquisa favorito, como Google ou Bing, e todas as informações de que você precisa estão a apenas um clique de distância.

Felizmente, não é difícil de aprender e com toda a honestidade, se eu puder memorizá-lo, você também não deve ter problemas com isso. Em essência, inclui uma área de conteúdo, preenchimento, borda e margem.

4. Aprenda fazendo

Assim que você começar a se familiarizar com o CSS, é uma ótima ideia colocá-lo em prática escolhendo um tema que tenha um design totalmente básico e alterando seu estilo editando sua folha de estilo.

É importante entender como mudanças simples podem afetar drasticamente um tema algumas vezes e outras nem tanto. Em última análise, praticar tanto quanto você pode ajudá-lo a ver visualmente as alterações que você faz e conectar suas ações de escrever código ao resultado final.

No esquema mais amplo das coisas, uma vez que você é capaz de conectar os pontos, você pode não apenas escrever CSS rapidamente, mas também deve ser capaz de solucionar problemas no futuro, o que se torna uma tarefa crítica para web design e desenvolvimento.

Aqui estão alguns temas excelentes para praticar que você pode instalar em seu site WordPress gratuitamente. Nem todos são representações perfeitas de como um tema deve necessariamente parecer e funcionar, mas todos são ótimos pontos de partida para aprender como você pode alterar um tema com CSS simples.

Spektrum branco

O tema White Spektrum é um tema simples com um layout comum que inclui a área de conteúdo principal, barra lateral, cabeçalho e rodapé.

Além de um toque de cor quando se trata de fontes e links, é um tema simples e simples de se trabalhar.

Fundador

Uma vez que você começa a entender realmente CSS, o tema Founder é ótimo para espiar por baixo do capô e dar uma olhada em sua folha de estilo, pois é um pouco mais complexo do que os outros temas listados até agora. ícone de hambúrguer para telas móveis, bem como muitos outros detalhes de design CSS que são ótimos para estudar.

Mesmo com esses temas minimalistas acima, você ainda pode se sentir um pouco sobrecarregado com quantas coisas ainda não reconhece e tudo bem. À medida que você marca cada seção deste post, tudo deve começar a se juntar um pouco mais.

5. Organize o conteúdo por largura e altura

Depois de instalar um desses temas, você também pode começar a alterar o layout inserindo diferentes comprimentos e larguras de áreas de conteúdo e seletores.

É um precursor para a próxima etapa e familiariza você com as diferentes áreas de layout em um tema WordPress.

6. Flutuantes e Posicionamento

É aqui que o CSS tende a ficar um pouco complicado, pois você pode criar um layout puramente com CSS e, em particular, floats e posicionamento. O problema é que essas propriedades não são projetadas para criar layouts inteiros e há um rascunho para atualizar layouts CSS.

Por enquanto, essa é uma maneira comum de muitas pessoas acertarem o layout . É uma ótima ideia observar temas que já existem, incluindo a lista acima, e ver como eles diferem com o uso de floats e posições.

7. CSS avançado

Neste ponto, você está realmente começando a entender o CSS, mas há muito mais para descobrir:

• Pseudoclasses – Usadas para definir um estado específico de um elemento, como passar o mouse e posicionar imagens em um local específico relevante para outros elementos.
• Seletores complexos – Você pode ser ainda mais específico com o estilo usando seletores mais avançados.
• Animações CSS3 – Criando um fade, pop ou outras transições quando você passa o mouse sobre imagens e botões.
• Capacidade de resposta com consultas de mídia CSS3 – Uma das maneiras mais fáceis de criar um tema responsivo é usando consultas de mídia.
• Transformações – Controla o tamanho e a forma das áreas de conteúdo selecionadas.
• At-rules – Usado para importar coisas como fontes e folhas de estilo para o seu tema.
• Gradientes – Adicionando um gradiente ao seu tema sem precisar usar uma imagem.

Estes são muitos dos elementos onde você pode realmente começar a ver o design do seu tema realmente tomar forma. É o momento perfeito para começar a testar suas habilidades.

8. Replicar um site com CSS

Com todo esse conhecimento em seu cinturão, talvez você precise obter um cinturão mais robusto, mas, mais importante, você pode realmente colocar suas habilidades em prática usando um shell básico de um tema e adicionando seus próprios estilos CSS do zero.

Uma das coisas mais úteis que você pode fazer para aprimorar seu aprendizado é praticar seu conhecimento em aplicações do mundo real. Eu recomendo tentar encontrar um site que você goste e replicá-lo da melhor maneira possível, puramente com CSS em um tema WordPress em branco.

Claro, você provavelmente não conseguirá fazer tudo perfeito e provavelmente há muitos elementos que você não conseguirá replicar apenas com CSS, mas é uma ótima maneira de deixá-lo confortável com CSS.

Aqui estão alguns ótimos e gratuitos temas iniciais que você pode usar:

• Lousa em branco

  

  Isso é o mais básico possível. Há apenas HTML5 neste tema, então você está livre para adicionar seu CSS sem se preocupar com conflitos de estilos. No entanto, ele vem com tudo o que você precisa para começar a estilizar seu tema.

• HTML5 em branco

  

  HTML5 Blank é um tema padrão do WordPress que inclui alguns estilos, mas não muito. É um ótimo começo se você não estiver muito interessado em começar seu CSS do zero.

• Sublinhados

  

  Se você é um pouco aventureiro e deseja experimentar um tema inicial mais avançado, o Underscores é uma excelente opção, mas não para os fracos de coração, pois vem com dois estilos de amostra de tema pré-carregados. Ele também inclui algumas técnicas avançadas e codificação que o tornam uma ótima ferramenta de aprendizado.

Há também o tema HTML5 Reset WordPress no GitHub. Ele inclui recursos um pouco mais avançados, mas é isso que o torna um tema inicial valioso.

9. Pré-processadores

Depois de conhecer os detalhes do CSS, é uma ótima ideia aprender sobre pré-processadores e, em particular, SASS e LESS. Ambos ajudam a organizar seu CSS para que seja muito mais fácil de escrever e mais acessível para edições futuras.

Os pré-processadores tornam seu CSS limpo e fácil de seguir e rapidamente se tornou uma habilidade essencial entre os desenvolvedores da web. Embora haja um debate contínuo sobre qual é o melhor, o SASS tende a ser o pré-processador mais usado até hoje.

Se você gostaria de experimentar o SASS no contexto do WordPress, confira o tema Bones. É composto principalmente de HTML5, então você pode tentar estilizar com o pouco SASS embutido que já está incluído.

10. Estruturas

No desenvolvimento web, os frameworks são uma estrutura para criar sites dinâmicos. Em última análise, o objetivo de uma estrutura é tornar os sites mais rápidos sem perder a funcionalidade.

Uma vez que você tenha o CSS atualizado, você pode acelerar o desenvolvimento do seu tema usando um framework.

Um dos frameworks mais populares é o Twitter Bootstrap. Ele foi criado para ser responsivo imediatamente e usa SASS e LESS, além de muitos componentes CSS personalizados.

Empacotando

Armado com um programa de aprendizado e com dicas para ajudá-lo ao longo do caminho, o CSS não deve ser muito pesado para você entender. Além disso, você deve estar pronto agora para tentar estilizar seu próprio tema WordPress.

Para obter mais recursos sobre como aprender CSS e WordPress, confira alguns de nossos outros posts: Um mega guia para aprender e referenciar CSS para WordPress: mais de 150 recursos e do iniciante ao profissional do WordPress: mais de 200 recursos para impulsionar a carreira.

• CSS