O que é CSS3? Aprenda tudo sobre CSS (sintaxe, especifidade, estilos)

Neste artigo você vai aprender o que é CSS, daremos um fundo mergulho as Cascading Style Sheets para tirar todas as suas dúvidas sobre estilização

Fala programador(a), beleza? Bora aprender mais sobre CSS e estilização de páginas web!

Confira também em vídeo:

Antes de começarmos

CSS é uma parte fundamental para qualquer site que queira dar estilos ao HTML

Porém a linguagem de marcação acaba sendo um pré-requisito para que você aprenda a estilizar páginas

Por este motivo, preparei um artigo super completo te explicando tudo sobre HTML, você pode vê-lo clicando aqui!

Considero-o como fundamental para quem deseja aprender CSS a fundo 🙂

O que é CSS?

CSS ou CSS3 não é uma linguagem de programação, e sim uma linguagem de estilos, estilização

Apesar de ter alguns recursos que são presentes em linguagens de programação, e estar bem mais perto de ser do que o HTML

Ainda faltam elementos fundamentais para ser considerada uma, é bom lembrar que a cada dia são adicionados mais recursos, quem sabe futuramente não seja possível programar com CSS? xD

CSS é um acrônimo de Cascading Style Sheets, ou seja, folhas de estilo em cascata

Por causa da possibilidade de adicionar novas folhas de estilos que vão sobrepondo os estilos da antiga, formando um efeito cascata

Frequentemente utilizada em projetos web, faz parte da tríade fundamental: HTML, CSS e JavaScript

Qualquer site web leva HTML para transmitir dados e informações, e consequentemente precisa de estilos para ficar bonito, se não todos os sites seriam iguais

Editor para programar em CSS

Para seguir os exemplos deste artigo sugiro que você tenha um editor de código na sua máquina, como o VS Code

Você pode fazer o download aqui

Ele é o mais utilizado hoje em dia, recebe atualizações frequentes e é totalmente gratuito

A sintaxe do CSS

O CSS para ser aplicado a algum elemento do HTML precisa seguir algumas regras

Primeiramente precisamos escolher um elemento do HTML, exemplo:

div

Agora estaremos aplicando CSS a uma div do nosso site

Para delimitar as regras, onde terminam e começam, precisamos adicionar uma abertura e fechamento de chaves { }, veja:

div {

}

Agora dentro destas chaves colocamos o código CSS, que segue sempre um mesmo padrão

Nome da regra, separação entre valor e nome por dois pontos, valor e finaliza a sentença com ponto e vírgula

Então para aplicar um estilo de cor de fundo teremos:

div {
 background-color: red;
}

Agora a div está com cor de fundo vermelha!

E esta é a sintaxe do CSS! Mas como podemos adicionar CSS a um HTML?

Formas de adicionar CSS ao HTML

Temos três principais formas de colocar CSS em HTML, vou explicar cada uma delas e comentar a que devemos sempre tentar priorizar

Vamos primeiramente criar um documento HTML, sugiro você abrir o editor e praticar comigo também 🙂

Esta será nossa estrutura inicial:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curso de CSS</title>
</head>
<body>
    <p>Meu parágrafo!</p>
</body>
</html>

Se você não entende muito bem ela ou sentiu dificuldades para interpretar, sugiro novamente que veja o curso completo de HTML, disponibilizado em vídeo também, basta clicar aqui

CSS Inline

Agora vamos a primeira forma, que é a inline, onde colocamos o estilo na própria tag

Vamos colocar CSS inline no parágrafo:

<p style="color: red;">Meu parágrafo!</p>

O resultado no navegador é este:

Obs: Lembrando que para abrir o HTML, basta arrastar o arquivo no navegador

Temos o parágrafo na cor vermelha, para isso foi necessário utilizar o atributo style e a regra de CSS na própria tag

Esta é a pior maneira possível, pois não temos tanta flexibilidade para atingir várias tags

E também para manutenção acaba sendo ruim, precisamos modificar todos os estilos diretamente no HTML

Ou seja, misturamos duas linguagens diferentes e também temos que caçar a agulha no palheiro, evite esta abordagem

CSS Interno (CSS internal)

A próxima abordagem é conhecida como CSS internal, onde colocamos o CSS ainda no HTML mas separado das tags

Ou seja, temos uma área no head para realizar os estilos

Note que mesmo que você não vá utilizar todas as abordagens, elas são de extrema importância para aprender o que é CSS e entender a linguagem a fundo

Veja como estilizar com o internal:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curso de CSS</title>
    <style>
        body {
            padding: 20px;
        }
        
        p {
            color: green;
        }
    </style>
</head>
<body>
    <p style="color: red;">Meu parágrafo!</p>
    <p>Segundo parágrafo</p>
    <p>Terceiro parágrafo</p>
</body>
</html>

Aqui adicionamos mais dois parágrafos também, para mostrar como esta abordagem pode ser melhor que a inline

E o código de estilo é colocado no próprio head com a tag style, note que precisamos fechá-la também

As regras podem ser colocadas em apenas um lugar e atingir vários elementos, o que acaba sendo muito interessante ao colocar estilos em uma página web

Veja o resultado final:

Note que conseguimos afetar mais elementos com apenas uma regra, e se a cor mudar basta ir no head e alterá-la, fica bem mais simples programar desta maneira

Mas mesmo assim não é a melhor abordagem

Ainda misturamos duas linguagens, e acrescentamos código a mais no HTML, deixando-o sobrecarregado

Por isso também não devemos optar por esta maneira, apesar dela existir e alguns programadores a utilizarem

A melhor e mais correta de todas é a próxima!

CSS externo

Esta maneira é a mais interessante pois conseguimos extrair os estilos do HTML

Utilizando um princípio que é muito falado na programação: separação de responsabilidades

Ou seja, cada coisa fica no seu lugar

Veja o que necessário para migrar os estilos para este modo externo:

        body {
            padding: 20px;
        }
        
        p {
            color: green;
        }

Primeiramente vamos criar um novo arquivo chamado styles.css, na mesma pasta que o arquivo HTML

Ele vai conter o código que estava no arquivo de HTML, integralmente e sem mudança alguma

O nosso HTML vai ficar assim:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curso de CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>Meu parágrafo!</p>
    <p>Segundo parágrafo</p>
    <p>Terceiro parágrafo</p>
</body>
</html>

Veja que removemos o inline e o internal, adicionamos agora uma nova tag a link

Ela nos proporciona adicionar um arquivo de CSS externo para o nosso HTML, e realizamos isso colocando o caminho dele

Como ele está na mesma pasta do de HTML foi necessário apenas colocar o nome do arquivo no atributo href

E pronto, este será o nosso resultado:

Veja que todos os parágrafos estão da mesma cor, isso aconteceu por que removemos o estilo inline

Esta abordagem de adição de estilo é muito mais limpa e segue os padrões mais modernos utilizados hoje em dia

Trabalhando em projetos profissionais, você vai se deparar com ela 99.9% das vezes, então já comece a aplicar nos seus projetos! 🙂

Seletores de CSS

Até o momento utilizamos a tag para aplicar estilo em um elemento, e este é um tipo de seletor

Porém há outros que precisamos aprender, pois são mais utilizados

Temos dois principais que são:

classes: Quando queremos aplicar um estilo a vários elementos;
ids: Quando queremos aplicar estilo a um único elemento;

A técnica de ambas inicia diretamente no HTML, adicionando atributos novos as tags

Que para classe utilizamos class e para ids o atributo id

No começo parece ser confuso a utilização de cada um deles, mas com a prática vai se tornando natural

Conforme a explicação anterior, entenda que uma classe pode afetar um ou mais elementos

E o id apenas um, pois há uma ‘regra’ no HTML que diz que um id deve ser único, ou seja, não se repetir mais na página

Tornando então a possibilidade de afetar apenas um elemento com o estilo viável

Veja a aplicação de classes:

    <p class="meu-paragrafo">Meu parágrafo!</p>
    <p class="meu-paragrafo">Segundo parágrafo</p>
    <p>Terceiro parágrafo</p>

Adicionamos o atributo class para dois parágrafos, agora vamos colocar CSS:

.meu-paragrafo {
    background-color: black;
}

Adicionamos esta regra de cor de fundo ao nosso CSS, note que diferente do estilo de tags para sinalizar que é uma classe colocamos um ponto (.) antes do nome da classe

E o resultado é:

Veja que apenas os parágrafos com a classe receberam os estilos das regras de CSS

E é exatamente para isso que utilizamos classes, para aplicar estilos a diversos elementos que compartilham do mesmo aspecto visual

E agora veja um exemplo de id:

<body>
    <h1 id="titulo-principal">Título da página</h1>
    <p class="meu-paragrafo">Meu parágrafo!</p>
    <p class="meu-paragrafo">Segundo parágrafo</p>
    <p>Terceiro parágrafo</p>
</body>

No body foi adicionado uma tag h1 com um id, este será o nosso único título principal

Ou seja, é um bom elemento para colocarmos um id, já que ele será único, entendeu a diferença?

Agora vamos ao estilo:

#titulo-principal {
    background-color: yellow;
    color: black;
    padding: 10px;
    font-family: Helvetica;
}

Mudamos diversos aspectos aqui: cor de fundo, cor, espaçamento e fonte

Note que para selecionar um id também utilizamos um símbolo especial, a hashtag (#), diferente de classe e também de tag

Veja como ficou:

Agora sabemos utilizar outros tipos de seletores, como classes e ids, mas existem outros que eu gostaria de abordar também

O primeiro é o seletor para aplicar estilos a todos os elementos, veja um exemplo:

* {
    font-family: Arial;
}

Utilizando o asterisco (*) e aplicando regras de CSS, teremos um efeito em todos os elementos que estão na página

Esta abordagem é interessante para padronizar os elementos da página, onde todos tem algo em comum

Neste caso alteramos a fonte dos elementos

E o seletor é o de lista, veja:

p, h1 {
    border-bottom: 1px solid red;
}

Veja que os elementos foram separados por vírgula, isso cria uma lista de elementos obedecendo a determinados estilos

Podemos aplicar regras em comum a diversos elementos, veja o resultado da página:

Temos agora uma borda vermelha na parte de baixo dos elementos de h1 e p

Sobre as cores

Já aprendemos os fundamentos do CSS, agora é hora de se especializar em temas dentro da linguagem

Podemos trocar as cores dos textos da nossa página, isso é feito através da regra color

Ela aceita três tipos de configurações como valor:

Nome da cor;
Hexadecimal;
RGB;

Onde hexadecimal e RGB são os mais utilizados, por nos permitir infinitas possibilidades de cores

Já o nome da cor acaba não sendo tão útil, pelo seu escopo limitado de valores

Veja estilos nas três formas:

    <p class="nome-da-cor">Rosa</p>
    <p class="hexa">Hexadecimal</p>
    <p class="rgb">RGB</p>

Este é o HTML para fazermos os testes, agora veja o CSS:

.nome-da-cor {
    color: pink;
}

.hexa {
    color: #332245
}

.rgb {
    color: rgb(200,100,25);
}

Em hexadecimal passamos valores de 6 caracteres, com uma hashtag iniciando eles

Os valores vão de 0 a 9 e A a F, formando uma cor diferente com a alteração deles

Já em RGB temos que alterar a tonalidade de Vermelho, Azul e Verde de 0 a 255

Veja o resultado na página:

Veja que os textos alteram com base nas cores que definimos, as cores também podem ser inseridas no fundo de um elemento

Utilizamos a regra background-color para este fim:

.hexa {
    color: #332245;
    background-color: #342299 
}

Agora este parágrafo também tem a sua cor de fundo alterada via CSS

Meus cursos de HTML e CSS

Vamos para um pouco para respirar! 🙂

Atualmente possuo dois cursos super completos de HTML e CSS, que vão desde o básico até o avançado das linguagens

HTML e CSS – O início: como o nome diz, é um curso que vai tratar desde o básico do HTML e do CSS, sem precisar de conhecimento para realizar o curso

Você vai criar 5 projetos para adicionar ao seu portfólio

HTML e CSS – Técnicas Avançadas: este curso é para quem já sabe o básico e quer avançar ainda mais no HTML e também no CSS, criaremos projetos responsivos com recursos modernos como o Flexbox

O curso também possui 5 projetos para você desenvolver

Fontes de texto

Podemos também alterar a fonte do texto com CSS, aqui também temos diversos detalhes

Daria um artigo muito interessante apenas para falarmos de fontes, vou citar os principais pontos delas, para você entender os fundamentos

A regra para alterar fontes é a font-family, já aplicamos algumas vezes

Porém o que eu ainda não comentei é que temos alguns tipos de fontes, que são:

Serifada: fontes mais detalhadas, parecidas com as que vemos em jornal e livros;
Sem serifa: fontes mais retas, parecidas com as que vemos em computadores, celulares;
Mono espaçadas: as letras tem a mesma largura;
Cursiva: que imitam as letras que escrevemos a mão;

Veja a aplicação de algumas delas com HTML e CSS:

    <p class="serifada">Fonte Serifada</p>
    <p class="sem-serifa">Sem Serifa</p>
    <p class="mono-espacada">Fonte Mono Espaçada</p>

CSS para o exemplo:

.serifada {
    font-family: Georgia;
}

.sem-serifa {
    font-family: Helvetica;
}

.mono-espacada {
    font-family: 'Courier New';
}

Veja o resultado final:

Perceba que a diferença não é tão grande, mas existe!

Observe com detalhe cada uma das fontes acima e veja o que cada classificação representa

E de onde vem as fontes do CSS?

É estranho ter a nossa disponibilidade várias fontes, mas nunca ter importado nada antes ou feito alguma referência a um arquivo de fontes

A explicação para isso é que no navegador temos acesso a todas as: Web Safe Fonts

Você pode verificar cada uma delas clicando aqui

Existem outras fontes que podemos instalar em nossos projetos, algumas delas até são pagas 🙂

Outras propriedades de fontes

As fontes são recursos de um alto nível de configuração, podemos mudar diversas propriedades nelas

Uma muito importante é o tamanho, podemos atingir isso com font-size

E outra é o seu ‘peso’, ou seja deixar a fonte mais grossa ou mais fina, para isso utilizamos font-weight

Veja aplicações de ambas as regras:

    <p class="tamanho-fonte-grande">Esta fonte está gigante</p>
    <p class="tamanho-fonte-pequeno">Esta fonte está pequena</p>
    <p class="peso-fonte">Texto em negrito!</p>

Este é o nosso HTML, veja o CSS necessário:

.tamanho-fonte-grande {
    font-size: 30px;
}

.tamanho-fonte-pequeno {
    font-size: 8px;
}

.peso-fonte {
    font-weight: 700;
}

E o resultado:

Note que alteramos tanto o tamanho, quanto também o peso da fonte, deixando o texto em negrito com CSS

O conceito de Box Model

Box Model é um recurso super importante no CSS, todo elemento possui e também vai nos ajudar a encaixar e posicionar nossos elementos no layout

Este recurso é constituído de algumas partes, que são:

Largura e altura;
Espaçamento interno (padding);
Bordas (border);
Margens (margin);

Cada uma destas propriedades pode ser alterada via CSS, e todos os elementos as possuem

Graficamente podemos representar desta maneira:

Vamos criar um elemento e aplicar cada uma das regras de box model:

    <div class="box-model">
        <p>Este é o nosso box model!</p>
    </div>

Agora vamos definir sua altura e largura:

.box-model p {
    color: #000;
    border: none;
}

.box-model {
    width: 200px;
    height: 100px;
}

Zerei também as outras regras que estavam sendo inseridas no elemento, veja como ficou:

Aparentemente é um elemento como qualquer outro, mas sua largura e altura foram definidas por height e width

Se colocarmos uma borda as definições ficarão mais claras:

.box-model {
    width: 200px;
    height: 100px;
    border: 1px solid blue;
}

Veja agora com borda:

Aplicamos dois elementos do box model já, vamos agora ao padding, que é o espaçamento interno do elemento:

.box-model {
    width: 200px;
    height: 100px;
    border: 1px solid blue;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
}

Este estilo será aplicado entre o conteúdo e a borda, por isso o nome de espaçamento interno, veja o resultado:

Note que definimos cada uma das direções do padding, isso pode ser resumido dessa forma:

.box-model {
    width: 200px;
    height: 100px;
    border: 1px solid blue;
    padding: 20px 40px;
}

O nome deste recurso é short hand property, podemos aplicar todas as direções em uma propriedade só, o que economiza tempo e também linhas de código

Temos o mesmo resultado que antes, com apenas uma regra de CSS

E por último temos a margem, que é o espaçamento externo, ou seja, após a borda e até o outro elemento mais próximo do alvo da regra

Veja uma demonstração prática:

.box-model {
    width: 200px;
    height: 100px;
    border: 1px solid blue;
    padding: 20px 40px;
    margin: 15px;
}

Implementamos aqui a margin em quatro direções com 15px, utilizando também shord hand property

O resultado é este:

Note que espaçamos o elemento da esquerda (limite da tela) e também de cima, afastando do parágrafo

Comentários no CSS

Os comentários são muito utilizados em todas linguagens de programação, podemos utilizar como referência no código ou também para marcar algo

Note que os comentários de HTML e de CSS são exibidos para as pessoas que acessam o site, então não coloque dados sensíveis

Isso não acontece nas linguagens de back-end, onde comentário fica protegido de visualização

Veja como aplicar comentários:

/* Recurso de box model no CSS */
.box-model {
    width: 200px;
    height: 100px;
    border: 1px solid blue;
    padding: 20px 40px;
    margin: 15px;
}

Aqui utilizamos os comentários para determinar uma área no CSS, onde explicamos o que está acontecendo nas próximas linhas

Que é a adição de estilos de box model!

Você pode utilizar para funções parecidas como essa, outro bom exemplo é a separação de estilo de cada sessão do seu site 🙂

Mais propriedades de texto

Os textos sem dúvida são um dos elementos que mais possuem tipos de configurações com o CSS

Vamos explorar mais algumas agora!

Podemos alinha o texto com regras de CSS, o alinhamento padrão é para a esquerda, podemos alinhar a direita, ou para o centro, que é o mais utilizado

Veja um exemplo:

<p class="alinhamento">Texto ao centro</p>

E o CSS:

.alinhamento {
    text-align: center;
}

O resultado é este:

Veja que a borda percorre toda a largura do elemento, mas o conteúdo de texto está no centro do elemento

Outra possibilidade é alterar o texto para letras maiúsculas ou minúsculas com CSS, utilizaremos a propriedade text-transform, veja:

    <p class="transform-maiuscula">este texto vai ficar em caixa alta</p>
    <p class="transform-minuscula">Já Este Ficará TODO em caixa baixa</p>

E o código CSS:

.transform-maiuscula {
    text-transform: uppercase;
}

.transform-minuscula {
    text-transform: lowercase;
}

Resultado final:

Note que não importa como escrevemos no HTML, o CSS vai padronizar para nós

Também há a possibilidade de modificação de espaçamentos, temos dois principais:

Altura de linha;
Espaçamento entre letras;

Vamos ver cada um deles, aplicando-os na prática!

    <p class="espacamento-texto">Texto com espaçamento de linhas e letras</p>
    <p class="espacamento-texto">Texto com espaçamento de linhas e letras</p>

O CSS vai ser o seguinte:

.espacamento-texto {
    line-height: 20px;
    letter-spacing: 4px;
}

O resultado:

Veja como as linhas ficam mais distantes e também as letras umas das outras, isso acontece pela aplicação das regras: letter-spacing e line-height

Estilos de CSS em links

Outros elementos que aparecem muito são os links, representados no HTML pela tag a

Vamos ver algumas possibilidades que temos no CSS para deixá-los mais bonitos

O código que vamos utilizar é o seguinte:

    <div>
        <a href="#" class="decoration">Meu link 1</a>
    </div>
    <div>
        <a href="https://www.google.com.br" class="visitado">Meu link 2</a>
    </div>
    <div>
        <a href="#" class="estilo-hover">Meu link 3</a>
    </div>

Vamos alterar três diferentes propriedades:

text-decoration: remover o underline que geralmente não aproveitado nos links;
visited: alteração de estilos em links já visitados;
hover: alteração de estilo quando o ponteiro do mouse passa pelo elemento;

Veja o CSS:

.decoration {
    text-decoration: none;
}

.visitado:visited {
    color: orange;
}

.estilo-hover:hover {
    background-color: #1292AE;
}

O resultado no navegador é:

CSS para listas

As listas do CSS vem com bullets por default, que geralmente precisam ser removidos

Utilizamos o CSS para isso, veja este HTML:

    <ul>
        <li>Lista</li>
        <li>Com</li>
        <li>Bullet</li>
    </ul>
    <ul class="sem-estilo">
        <li>Lista</li>
        <li>Sem</li>
        <li>Bullet</li>
    </ul>

O CSS para remover os bullets é:

.sem-estilo {
    list-style: none;
}

E no navegador teremos:

Compare as duas listas, as vezes precisamos de um layout mais limpo, por isso removemos os bullets!

A propriedade display

Esta propriedade tem diversos valores, e a grande maioria é muito útil e muito utilizada

Porém antes de testá-la, precisamos entender que o HTML tem elementos de bloco e elementos em linha

Os de bloco ocupam toda a largura da área disponível, não deixando um elemento ficar do lado dele, um exemplo: div

Já os elementos inline permitem outros elementos inline ao seu lado, um exemplo: tag a

Com display podemos alterar este comportamento, vamos ver como eles se comportam por default:

    <div class="inline"></div>
    <div class="inline"></div>
    <a href="#" class="bloco">Mais um link</a>
    <a href="#" class="bloco">Mais outro link</a>

Coloquei apenas um CSS nas divs para elas aparecerem no HTML:

.inline {
    width: 50px;
    height: 50px;
    background-color: teal;
    margin: 5px;
}

Veja o comportamento padrão, sem as regras de display:

Veja que cada div ocupa um espaço, mesmo tendo uma largura pequena

E os links estão um ao lado do outro, agora aplicaremos as regras de display:

.inline {
    width: 50px;
    height: 50px;
    background-color: teal;
    margin: 5px;
    display: inline-block;
}

.bloco {
    display: block;
}

E agora teremos:

Agora temos o inverno, pois alteramos as propriedades dos link para ficarem de bloco e das divs para ficarem inline

O display também é utilizado para esconder um elemento na tela, podemos utilizar a regra:

.elemento {
 display: none;
}

Desta maneira o elemento não é mais exibido, porém é apenas um efeito visual

Ele ainda consta no HTML, e quem acessa o site consegue ver inspecionando os elementos da páginas

Transformando link em botão

Nem sempre os estilos de um link são os que precisamos no projeto, muitas das vezes eles ficam parecidos com um botão

Isso é bem fácil de fazer com CSS, veja:

<a href="#" class="btn">Clique em mim</a>

Utilizaremos os seguintes estilos:

.btn {
    background-color: #34AE43;
    border: 3px solid #234966;
    border-radius: 5px;
    color: #FFF;
    text-decoration: none;
    padding: 12px 7px;
    display: block;
    width: 120px;
    text-align: center;
    margin: 20px;
}

E este será o nosso botão:

Posições de elementos no CSS

Podemos posicionar os elementos em diferentes partes do nosso site

Há algumas posições no CSS, as mais utilizadas são:

relative: onde o elemento se torna uma referência a outros elementos;
absolute: o elemento pode se mover livremente na página, ou dentro de um elemento com posição relativa;
fixed: fixa um elemento em alguma parte da tela;

A regra para aplicar posições é a position

Veja como podemos deixar um elemento fixo:

<div class="element-fixo">Este elemento vai ficar fixo na tela</div>

Agora vamos aplicar um CSS nele:

.elemento-fixo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    text-align: center;
    background-color: #1292AE;
    border-bottom: 2px solid #342299;
    color: #FFF;
    text-align: center;
}

A ideia foi deixar o elemento parecido com uma barra de navegação superior, esta técnica de posição fixa é utilizada principalmente para isso

Veja o resultado final:

Se você quer aprender mais sobre positions, eu fiz um artigo completo sobre o assunto, clique aqui para acessá-lo

As pseudo classes

As pseudo classes são formas de alterar o estilo de elementos em alguns eventos especiais

Já vimos algumas trabalhando com links, como por exemplo o hover

Porém elas podem ser aplicadas em qualquer elemento, desde que tenham alguma funcionalidade no mesmo

Por exemplo a pseudo class visited, só serve para links, mas hover é aplicável em qualquer elemento

A sintaxe delas é bem parecida, veja:

div:hover {
    background-color: red;
}

Selecionamos o elemento, classe ou id e em seguida colocamos dois pontos (:), e por fim o nome da pseudo classe

Outro uso interessante de pseudo classe é estilizar algum elemento específico com CSS

Temos por exemplo o first-child, que estiliza o primeiro elemento, veja o HTML:

    <div class="primeiro-elemento">
        <p>Este terá estilo</p>
        <p>Este não</p>
        <p>Este não</p>
        <p>Este não</p>
    </div>

Note que vamos estilizar pelo elemento pai dos parágrafos, não eles em diretamente

O CSS será:

.primeiro-elemento p:first-child {
    color: purple;
    font-weight: bold;
}

Note que a aplicação foi com pseudo classe, agora temos o seguinte resultado:

Conhecendo os pseudo elementos do CSS

Os pseudo elementos são parecidos com as pseudo classes, porém estilizamos elementos que não são considerados como elementos para o HTML, por isso a palavra pseudo

Já as pseudo classes servem para estilizar algum elemento presente no HTML, mas de uma forma mais indireta

Temos diversos seletores de pseudo elements, vou exemplificar com o first letter, que tem como objetivo estilizar a primeira letra de uma frase

Vejamos o HTML necessário:

<p class="primeira-letra">Esta frase começa com uma letra diferente!</p>

Aqui utilizaremos uma classe diretamente no elemento, pois não influencia

Veja o CSS:

.primeira-letra::first-letter {
    font-size: 25px;
    color: blue;
    background-color: red;
    padding: 2px;
}

Aplicamos diversas regras de estilo na primeira letra, o que vai gerar um destaque, veja:

Note que a sintaxe é o seletor, duas vezes dois pontos e o nome do pseudo elemento

Então podemos dizer que o CSS estilizou um falso elemento no nosso HTML, que é a primeira letra

Unidades no CSS

A diversas unidades para mensurarmos nossos elementos com CSS, cada uma corresponde a uma situação distinta

Novamente é um papo para um artigo completo sobre elas, mas este vou ficar devendo por enquanto 🙂

Já utilizamos algumas vezes o px, que corresponde a pixels

Mas nem sempre ele é a melhor escolha, vamos a um pequeno resumo sobre outras unidades de medida do CSS

em: Tamanho relativo ao tamanho da fonte do texto;
rem: Tamanho relativo ao tamanho da fonte do elemento root da página;
%: Relativo ao tamanho do elemento pai;
vh: Relativo a 1% da altura da tela;
vw: Relativo a 1% da largura da tela;

Todas estas unidades são utilizadas com regras que precisam de medidas, como: width, height, margin, padding e etc.

Sugiro que testem e vejam como elas se comportam

No mundo real temos uma grande utilização de px, mas cada vez mais cresce em e rem, principalmente rem pela padronização com diversos elementos

Conseguindo assim manter uma proporção em todo o site

A especifidade no CSS

A especifidade é um assunto super importante quando vamos estilizar páginas

Talvez você não tenha percebido, mas um estilo por seletor de tag, de classe e de id podem dar estilos a uma mesma tag do HTML

E nessa disputa, quem vence?

É ai que entra a especifidade, temos uma ordem de importância/peso e ainda podemo mesclar técnicas para ter mais especifidade

Ou seja, sendo mais específico em regras, vencemos as regras menos específicas e aplicamos estilos a um elemento

Devido ao tamanho do projeto estas colisões acontecem bastante, então é bom entender deste assunto para não precisar criar classes ou ids de forma desnecessária

Especifidade na prática

Vamos ver um exemplo super prático:

    <h2>Meu título 1</h2>
    <h2 class="titulo">Meu título 2</h2>
    <h2 class="titulo" id="meu-titulo-preferido">Meu título 3</h2>

Temos aqui três tags de h2, e a partir da segunda temos uma classe, e na terceira um id

Veja como este CSS pode nos mostrar a especifidade:

h2 {
  color: red;
}

.titulo {
  color: green;
}

#meu-titulo-preferido {
  color: blue;
}

Tecnicamente temos colisão de estilos a partir da segunda, quem vencerá?

Veja que como dito acima, o id vence os embates, e a classe vence da tag

Há apenas uma regra que pode passar de todas as especifidades, que é a !important

Devemos ao máximo evitar de utilizá-la, é uma má prática, apesar de muita gente utilizar

Você consegue notar um projeto mal feito de CSS quando há muitos importants

O segredo para não utilizar é entender bem de especifidade, que você vai conseguir chegar no mesmo lugar

Veja a destruição que o important pode fazer:

h2 {
    color: purple !important;
}

E o resultado final:

Note que ‘estragamos’ três regras de CSS com uma só, este é o maior perigo do important 🙂

Conclusão

Neste artigo você aprendeu o que é CSS e também os principais fundamentos da linguagem

Apesar do artigo ter ficado bem grande, ainda há muito o que ver sobre a linguagem de estilos

Sugiro criar projetos com o que você sabe agora, que vai conseguir internalizar os conceitos

E depois procurar por outras regras para se especializar ainda mais

Após saber bem HTML e CSS, tome o próximo passo e aprenda JavaScript! 🙂

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!
Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias
O link acima contém um cupom de desconto para os cursos!

O que é CSS3? Aprenda tudo sobre CSS (sintaxe, especifidade, estilos)