Manual Básico de CSS

Introdução

Hoje vamos explorar o mundo do CSS, ou Cascading Style Sheets. O CSS é uma linguagem de estilo usada para descrever a apresentação de um documento escrito em HTML ou XML. Com o CSS, podemos controlar a aparência de nossos sites, desde cores e fontes até layouts complexos. Vamos começar entendendo como aplicar CSS ao nosso site. É importante frisar que CSS tem uma enorme quantidade de atributos, propriedades e valores que você pode encontrar na documentação oficial.

Applying CSS Code: Os 3 Métodos de Aplicar CSS no Site

Existem três maneiras principais de aplicar CSS ao seu site: através de um arquivo externo, embutido diretamente no código HTML e usando CSS inline. Vamos explorar cada um desses métodos.

External File (Recomendado)

O método mais recomendado é usar um arquivo CSS externo. Isso mantém seu HTML limpo e facilita a manutenção do código. Você cria um arquivo .css separado e o vincula ao seu HTML usando a tag <link>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Meu Site</title>
</head>
<body>
    <h1>Bem-vindo ao meu site!</h1>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Bem-vindo ao meu site!</h1>

</body>

</html>

No arquivo styles.css, você pode escrever todas as suas regras CSS.

h1 {
    color: blue;
    font-family: Arial, sans-serif;
}

h1 {

color: blue;

font-family: Arial, sans-serif;

}

Embedded Directly into HTML Source Code

Outra maneira de aplicar CSS é embutindo-o diretamente no código HTML, dentro da tag <style> no <head> do documento.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        h1 {
            color: blue;
            font-family: Arial, sans-serif;
        }
    </style>
    <title>Meu Site</title>
</head>
<body>
    <h1>Bem-vindo ao meu site!</h1>
</body>
</html>

<!DOCTYPE html>

<head>

<style>

h1 {

color: blue;

font-family: Arial, sans-serif;

}

</style>

</head>

<body>

<h1>Bem-vindo ao meu site!</h1>

</body>

</html>

Inline CSS

O CSS inline é aplicado diretamente aos elementos HTML usando o atributo style. Este método é menos recomendado, pois pode tornar o HTML confuso e difícil de manter.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Site</title>
</head>
<body>
    <h1 style="color: blue; font-family: Arial, sans-serif;">Bem-vindo ao meu site!</h1>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1 style="color: blue; font-family: Arial, sans-serif;">Bem-vindo ao meu site!</h1>

</body>

</html>

Syntax of a CSS Rule

Uma regra CSS é composta por um seletor e um bloco de declarações. O seletor aponta para o elemento HTML que você deseja estilizar, e o bloco de declarações contém uma ou mais declarações de estilo.

seletor {
    propriedade: valor;
}

seletor {

propriedade: valor;

}

Por exemplo:

h1 {
    color: blue;
    font-size: 24px;
}

h1 {

color: blue;

font-size: 24px;

}

Aqui, h1 é o seletor, color e font-size são propriedades, e blue e 24px são os valores dessas propriedades.

Selecting an Element

Para selecionar um elemento HTML, basta usar o nome da tag como seletor. Por exemplo, para estilizar todos os parágrafos (<p>), você usaria:

p {
    color: green;
}

p {

color: green;

}

Selecting Classes and IDs

Classes

Classes são usadas para aplicar estilos a vários elementos. Você define uma classe no HTML usando o atributo class e a seleciona no CSS usando um ponto (.) seguido pelo nome da classe.

<p class="highlight">Este é um parágrafo destacado.</p>

1	<p class="highlight">Este é um parágrafo destacado.</p>

.highlight {
    background-color: yellow;
}

.highlight {

background-color: yellow;

}

IDs

IDs são usados para aplicar estilos a um único elemento. Você define um ID no HTML usando o atributo id e o seleciona no CSS usando um cerquilha (#) seguido pelo nome do ID.

<p id="unique">Este é um parágrafo único.</p>

1	<p id="unique">Este é um parágrafo único.</p>

#unique {
    font-weight: bold;
}

#unique {

font-weight: bold;

}

Mais Seletores

Selecionando Múltiplos Elementos

Você pode selecionar múltiplos elementos separando os seletores com uma vírgula.

h1, h2, h3 {
    color: red;
}

h1, h2, h3 {

color: red;

}

Selecionando Child Elements

Para selecionar elementos filhos diretos, use o símbolo >.

div > p {
    color: blue;
}

div > p {

color: blue;

}

Vamos aprofundar a explicação sobre como selecionar elementos filhos diretos usando o símbolo > no CSS.

No CSS, o símbolo > é usado como um seletor de filho direto. Isso significa que ele seleciona apenas os elementos que são filhos diretos de um elemento pai específico. Vamos ver como isso funciona com um exemplo prático.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Seleção de Filhos Diretos</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="parent">
        <p>Este parágrafo é um filho direto do div.</p>
        <div class="child">
            <p>Este parágrafo está dentro de um div filho.</p>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Exemplo de Seleção de Filhos Diretos</title>

</head>

<body>

<p>Este parágrafo é um filho direto do div.</p>

<p>Este parágrafo está dentro de um div filho.</p>

</div>

</body>

</html>

Considerando que estamos usando um arquivo de estilos separado, abaixo temos o exemplo de CSS a ser aplicado:

/* Seleciona apenas os parágrafos que são filhos diretos do div com a classe "parent" */
.parent > p {
    color: blue;
}

/* Seleciona apenas os parágrafos que são filhos diretos do div com a classe "parent" */

.parent > p {

color: blue;

}

Explicação

HTML

<div class="parent">: Este div é o elemento pai com a classe “parent”.
<p>: Este parágrafo é um filho direto do div com a classe “parent”.
<div class="child">: Este div é um filho do div com a classe “parent”.
<p>: Este parágrafo está dentro do div com a classe “child”, portanto, não é um filho direto do div com a classe “parent”.

CSS

.parent > p: Este seletor aplica estilos apenas aos parágrafos (<p>) que são filhos diretos do div com a classe “parent”. No exemplo acima, apenas o primeiro parágrafo será afetado por este estilo.

Resultado ao Carregar a Página

Quando você carrega a página HTML com o CSS aplicado, verá o seguinte:

O primeiro parágrafo, que é um filho direto do div com a classe “parent”, terá o texto na cor azul.
O segundo parágrafo, que está dentro do div com a classe “child”, não será afetado pelo estilo .parent > p porque ele não é um filho direto do div com a classe “parent”.

Explicação Visual

Parágrafo 1: “Este parágrafo é um filho direto do div.” – Este parágrafo será azul porque é um filho direto do div com a classe “parent”.
Parágrafo 2: “Este parágrafo está dentro de um div filho.” – Este parágrafo não será azul porque está dentro de um div filho e não é um filho direto do div com a classe “parent”.

O seletor de filho direto (>) é uma ferramenta poderosa no CSS para aplicar estilos apenas aos elementos que são filhos diretos de um elemento pai específico. Isso permite um controle mais preciso sobre a aplicação de estilos em uma estrutura HTML complexa.

Vamos enriquecer o exemplo adicionando a definição da classe child no CSS e explicando como ela pode ser usada para aplicar estilos específicos aos elementos dentro do div com a classe child.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Seleção de Filhos Diretos</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="parent">
        <p>Este parágrafo é um filho direto do div.</p>
        <div class="child">
            <p>Este parágrafo está dentro de um div filho.</p>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Exemplo de Seleção de Filhos Diretos</title>

</head>

<body>

<p>Este parágrafo é um filho direto do div.</p>

<p>Este parágrafo está dentro de um div filho.</p>

</div>

</body>

</html>

Para aplicação do CSS considerando que estamos usando o arquivo externo “styles.css” nossa sintaxe de CSS fica assim:

/* Seleciona apenas os parágrafos que são filhos diretos do div com a classe "parent" */
.parent > p {
    color: blue;
}

/* Aplica estilos aos elementos dentro do div com a classe "child" */
.child {
    background-color: lightgray;
    padding: 10px;
    border: 1px solid #ccc;
}

/* Aplica estilos aos parágrafos dentro do div com a classe "child" */
.child p {
    color: green;
}

/* Seleciona apenas os parágrafos que são filhos diretos do div com a classe "parent" */

.parent > p {

color: blue;

}

/* Aplica estilos aos elementos dentro do div com a classe "child" */

.child {

background-color: lightgray;

padding: 10px;

border: 1px solid #ccc;

}

/* Aplica estilos aos parágrafos dentro do div com a classe "child" */

.child p {

color: green;

}

Explicação

HTML

<div class="parent">: Este div é o elemento pai com a classe “parent”.
<p>: Este parágrafo é um filho direto do div com a classe “parent”.
<div class="child">: Este div é um filho do div com a classe “parent” e tem a classe “child”.
<p>: Este parágrafo está dentro do div com a classe “child”, portanto, não é um filho direto do div com a classe “parent”.

CSS

.parent > p: Este seletor aplica estilos apenas aos parágrafos (<p>) que são filhos diretos do div com a classe “parent”. No exemplo acima, apenas o primeiro parágrafo será afetado por este estilo.
.child: Este seletor aplica estilos ao div com a classe “child”, incluindo um fundo cinza claro, padding e uma borda.
.child p: Este seletor aplica estilos aos parágrafos (<p>) dentro do div com a classe “child”, mudando a cor do texto para verde.

Resultado ao Carregar a Página

Quando você carrega a página HTML com o CSS aplicado, verá o seguinte:

O primeiro parágrafo, que é um filho direto do div com a classe “parent”, terá o texto na cor azul.
O segundo parágrafo, que está dentro do div com a classe “child”, terá o texto na cor verde e estará dentro de um div com fundo cinza claro, padding e uma borda.

Explicação Visual

Parágrafo 1: “Este parágrafo é um filho direto do div.” – Este parágrafo será azul porque é um filho direto do div com a classe “parent”.
Parágrafo 2: “Este parágrafo está dentro de um div filho.” – Este parágrafo será verde porque está dentro do div com a classe “child”, que também terá um fundo cinza claro, padding e uma borda.

Adicionando a definição da classe child no CSS, podemos aplicar estilos específicos aos elementos dentro do div com essa classe. Isso permite um controle mais refinado sobre a aparência dos elementos na página. O seletor de filho direto (>) continua a ser uma ferramenta poderosa para aplicar estilos apenas aos elementos que são filhos diretos de um elemento pai específico.

Seleção por Atributo

A seleção por atributo permite que você aplique estilos a elementos HTML com base nos atributos que eles possuem. Isso é extremamente útil quando você deseja estilizar elementos específicos sem precisar adicionar classes ou IDs extras.

Exemplo Básico

Vamos começar com um exemplo básico onde selecionamos elementos <input> com o atributo type="text".

input[type="text"] {
    border: 1px solid black;
}

input[type="text"] {

border: 1px solid black;

}

Explicação

input[type="text"]: Este seletor CSS aplica estilos a todos os elementos <input> que possuem o atributo type com o valor "text".
border: 1px solid black;: Este estilo adiciona uma borda preta de 1 pixel ao redor dos elementos selecionados.

HTML de Exemplo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Seleção por Atributo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form>
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome">
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        
        <label for="senha">Senha:</label>
        <input type="password" id="senha" name="senha">
        
        <input type="submit" value="Enviar">
    </form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Exemplo de Seleção por Atributo</title>

</head>

<body>

<form>

<label for="email">Email:</label>

<label for="senha">Senha:</label>

</form>

</body>

</html>

CSS de Exemplo

/* Seleciona todos os inputs do tipo texto */
input[type="text"] {
    border: 1px solid black;
}

/* Seleciona todos os inputs do tipo texto */

input[type="text"] {

border: 1px solid black;

}

Resultado

Neste exemplo, apenas o campo de entrada de texto (Nome) terá uma borda preta de 1 pixel. Os campos de email e senha não serão afetados por este estilo.

Seletores de Atributo Avançados

Além do seletor básico de atributo, o CSS oferece seletores de atributo mais avançados que permitem uma seleção ainda mais precisa.

Selecionar por Presença de Atributo

Você pode selecionar elementos que possuem um atributo específico, independentemente do valor.

input[required] {
    background-color: lightyellow;
}

input[required] {

background-color: lightyellow;

}

Selecionar por Início de Valor

Você pode selecionar elementos cujo valor de atributo começa com um valor específico.

a[href^="https"] {
    color: green;
}

a[href^="https"] {

color: green;

}

Este seletor aplica estilos a todos os links (<a>) cujo atributo href começa com "https".

Selecionar por Fim de Valor

Você pode selecionar elementos cujo valor de atributo termina com um valor específico.

img[src$=".jpg"] {
    border: 2px solid red;
}

img[src$=".jpg"] {

border: 2px solid red;

}

Este seletor aplica estilos a todas as imagens (<img>) cujo atributo src termina com ".jpg".

Selecionar por Contém Valor

Você pode selecionar elementos cujo valor de atributo contém uma substring específica.

input[name*="user"] {
    background-color: lightblue;
}

input[name*="user"] {

background-color: lightblue;

}

Este seletor aplica estilos a todos os inputs cujo atributo name contém a substring "user".

Exemplos Completos

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplos de Seleção por Atributo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form>
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome" required>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        
        <label for="senha">Senha:</label>
        <input type="password" id="senha" name="senha">
        
        <input type="submit" value="Enviar">
    </form>
    
    <a href="https://www.exemplo.com">Link Seguro</a>
    <a href="http://www.exemplo.com">Link Não Seguro</a>
    
    <img src="imagem.jpg" alt="Imagem JPG">
    <img src="imagem.png" alt="Imagem PNG">
    
    <input type="text" name="username">
    <input type="text" name="useremail">
</body>
</html>

<!DOCTYPE html>

<head>

<title>Exemplos de Seleção por Atributo</title>

</head>

<body>

<form>

<label for="email">Email:</label>

<label for="senha">Senha:</label>

</form>

<a href="https://www.exemplo.com">Link Seguro</a>

<a href="http://www.exemplo.com">Link Não Seguro</a>

</body>

</html>

CSS

/* Seleciona todos os inputs do tipo texto */
input[type="text"] {
    border: 1px solid black;
}

/* Seleciona todos os inputs que são obrigatórios */
input[required] {
    background-color: lightyellow;
}

/* Seleciona todos os links que começam com https */
a[href^="https"] {
    color: green;
}

/* Seleciona todas as imagens cujo src termina com .jpg */
img[src$=".jpg"] {
    border: 2px solid red;
}

/* Seleciona todos os inputs cujo nome contém "user" */
input[name*="user"] {
    background-color: lightblue;
}

/* Seleciona todos os inputs do tipo texto */

input[type="text"] {

border: 1px solid black;

}

/* Seleciona todos os inputs que são obrigatórios */

input[required] {

background-color: lightyellow;

}

/* Seleciona todos os links que começam com https */

a[href^="https"] {

color: green;

}

/* Seleciona todas as imagens cujo src termina com .jpg */

img[src$=".jpg"] {

border: 2px solid red;

}

/* Seleciona todos os inputs cujo nome contém "user" */

input[name*="user"] {

background-color: lightblue;

}

Explicação Visual

Campo de Texto (Nome): Terá uma borda preta de 1 pixel e um fundo amarelo claro porque é um campo de texto e é obrigatório.
Campo de Email: Não será afetado por nenhum dos estilos.
Campo de Senha: Não será afetado por nenhum dos estilos.
Links: O link seguro (https) será verde, enquanto o link não seguro (http) não será afetado.
Imagens: A imagem com extensão .jpg terá uma borda vermelha de 2 pixels, enquanto a imagem com extensão .png não será afetada.
Inputs com “user” no Nome: Terão um fundo azul claro.

A seleção por atributo no CSS é uma ferramenta poderosa que permite aplicar estilos de forma precisa e eficiente com base nos atributos dos elementos HTML. Isso é especialmente útil para estilizar formulários, links e outros elementos que possuem atributos específicos.

Selecting Pseudo-Classes

Pseudo-classes são usadas para definir o estado especial de um elemento. Elas permitem que você aplique estilos a elementos com base em seu estado ou posição no DOM (Document Object Model).

Exemplo Básico: `:hover`

A pseudo-classe :hover é usada para aplicar estilos a um elemento quando o usuário passa o cursor sobre ele.

a:hover {
    color: red;
}

a:hover {

color: red;

}

Explicação

a:hover: Este seletor CSS aplica estilos a todos os elementos <a> (links) quando o usuário passa o cursor sobre eles.
color: red;: Este estilo muda a cor do texto do link para vermelho quando o cursor está sobre ele.

Exemplos Adicionais de Pseudo-Classes

`:active`

A pseudo-classe :active é usada para aplicar estilos a um elemento no momento em que ele está sendo clicado.

a:active {
    color: blue;
}

a:active {

color: blue;

}

`:focus`

A pseudo-classe :focus é usada para aplicar estilos a um elemento que está em foco, como um campo de formulário que está ativo.

input:focus {
    border-color: green;
}

input:focus {

border-color: green;

}

`:nth-child(n)`

A pseudo-classe :nth-child(n) é usada para selecionar elementos com base em sua posição entre os irmãos.

li:nth-child(odd) {
    background-color: lightgray;
}

li:nth-child(odd) {

background-color: lightgray;

}

HTML de Exemplo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Pseudo-Classes</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <a href="#">Link Normal</a>
    <a href="#">Link Hover</a>
    <a href="#">Link Active</a>
    
    <form>
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome">
    </form>
    
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Exemplo de Pseudo-Classes</title>

</head>

<body>

<a href="#">Link Normal</a>

<a href="#">Link Hover</a>

<a href="#">Link Active</a>

<form>

</form>

<ul>

</ul>

</body>

</html>

CSS de Exemplo

/* Link normal */
a {
    color: black;
    text-decoration: none;
}

/* Link quando o cursor está sobre ele */
a:hover {
    color: red;
}

/* Link quando está sendo clicado */
a:active {
    color: blue;
}

/* Campo de texto quando está em foco */
input:focus {
    border: 5px solid green; /* Adiciona uma borda verde de 2 pixels */
}

/* Itens de lista em posições ímpares */
li:nth-child(odd) {
    background-color: lightgray;
}

/* Link normal */

a {

color: black;

text-decoration: none;

}

/* Link quando o cursor está sobre ele */

a:hover {

color: red;

}

/* Link quando está sendo clicado */

a:active {

color: blue;

}

/* Campo de texto quando está em foco */

input:focus {

border: 5px solid green; /* Adiciona uma borda verde de 2 pixels */

}

/* Itens de lista em posições ímpares */

li:nth-child(odd) {

background-color: lightgray;

}

Resultado

Links: Os links serão pretos por padrão, mudarão para vermelho quando o cursor estiver sobre eles e para azul quando estiver sendo clicado.
Campo de Texto: O campo de texto terá uma borda verde de 5 pixels quando estiver em foco.
Itens de Lista: Os itens de lista em posições ímpares terão um fundo cinza claro.

Seleção de Pseudo-Elementos

Pseudo-elementos são usados para estilizar partes específicas de um elemento. Eles permitem que você aplique estilos a partes de um elemento sem precisar adicionar elementos HTML extras.

Exemplo Básico: `::first-line`

O pseudo-elemento ::first-line é usado para aplicar estilos à primeira linha de um bloco de texto.

p::first-line {
    font-weight: bold;
}

p::first-line {

font-weight: bold;

}

Explicação

p::first-line: Este seletor CSS aplica estilos à primeira linha de todos os parágrafos (<p>).
font-weight: bold;: Este estilo torna a primeira linha do parágrafo em negrito.

Exemplos Adicionais de Pseudo-Elementos

`::before`

O pseudo-elemento ::before é usado para inserir conteúdo antes do conteúdo de um elemento.

p::before {
    content: "Nota: ";
    font-weight: bold;
    color: red;
}

p::before {

content: "Nota: ";

font-weight: bold;

color: red;

}

`::after`

O pseudo-elemento ::after é usado para inserir conteúdo após o conteúdo de um elemento.

p::after {
    content: " [Fim]";
    font-weight: bold;
    color: blue;
}

p::after {

content: " [Fim]";

font-weight: bold;

color: blue;

}

`::first-letter`

O pseudo-elemento ::first-letter é usado para aplicar estilos à primeira letra de um bloco de texto.

p::first-letter {
    font-size: 2em;
    color: green;
}

p::first-letter {

font-size: 2em;

color: green;

}

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Pseudo-Elementos</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>Este é um parágrafo de exemplo para demonstrar pseudo-elementos.</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Exemplo de Pseudo-Elementos</title>

</head>

<body>

<p>Este é um parágrafo de exemplo para demonstrar pseudo-elementos.</p>

</body>

</html>

CSS de Exemplo

/* Primeira linha do parágrafo */
p::first-line {
    font-weight: bold;
}

/* Conteúdo antes do parágrafo */
p::before {
    content: "Nota: ";
    font-weight: bold;
    color: red;
}

/* Conteúdo após o parágrafo */
p::after {
    content: " [Fim]";
    font-weight: bold;
    color: blue;
}

/* Primeira letra do parágrafo */
p::first-letter {
    font-size: 2em;
    color: green;
}

/* Primeira linha do parágrafo */

p::first-line {

font-weight: bold;

}

/* Conteúdo antes do parágrafo */

p::before {

content: "Nota: ";

font-weight: bold;

color: red;

}

/* Conteúdo após o parágrafo */

p::after {

content: " [Fim]";

font-weight: bold;

color: blue;

}

/* Primeira letra do parágrafo */

p::first-letter {

font-size: 2em;

color: green;

}

Resultado

Primeira Linha: A primeira linha do parágrafo será em negrito.
Antes do Parágrafo: A palavra “Nota: ” será inserida antes do conteúdo do parágrafo, em negrito e vermelho.
Após o Parágrafo: A palavra ” [Fim]” será inserida após o conteúdo do parágrafo, em negrito e azul.
Primeira Letra: A primeira letra do parágrafo será maior (2em) e verde.

Pseudo-classes e pseudo-elementos são ferramentas poderosas no CSS que permitem aplicar estilos de forma precisa e eficiente com base no estado ou em partes específicas de um elemento. Eles são especialmente úteis para criar interações dinâmicas e estilizações detalhadas sem a necessidade de adicionar elementos HTML extras.

Case Insensitive

Os seletores CSS são case-insensitive, o que significa que h1 e H1 são tratados da mesma forma.

Ordem de Precedência

Princípio 1: Mais Específico Tem Maior Precedência

Regras mais específicas têm maior precedência. Por exemplo, uma regra com um ID tem maior precedência do que uma regra com uma classe.

#unique {
    color: blue;
}

.highlight {
    color: green;
}

#unique {

color: blue;

}

.highlight {

color: green;

}

No exemplo acima, se um elemento tiver tanto o ID unique quanto a classe highlight, a cor azul terá precedência devido à maior especificidade do ID.

Princípio 2: Princípio da Herança de Container

Elementos herdam estilos de seus elementos pai, a menos que sejam sobrescritos.

div {
    color: red;
}

div p {
    color: blue;
}

div {

color: red;

}

div p {

color: blue;

}

No exemplo acima, todos os <p> dentro de um <div> terão a cor azul, enquanto outros elementos dentro do <div> herdarão a cor vermelha.

Princípio 3: Se Tudo For Igual, Vale a Última Regra Declarada

Se duas regras têm a mesma especificidade, a última regra declarada tem precedência.

p {
    color: green;
}

p {
    color: yellow;
}

p {

color: green;

}

p {

color: yellow;

}

No exemplo acima, todos os <p> terão a cor amarela, pois é a última regra declarada.

Vejamos um exemplo desses conceitos:

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ordem de Precedência em CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Ordem de Precedência em CSS</h1>

    <section>
        <h2>Princípio 1: Mais Específico Tem Maior Precedência</h2>
        <p id="unique" class="highlight">Este parágrafo tem um ID e uma classe.</p>
    </section>

    <section>
        <h2>Princípio 2: Princípio da Herança de Container</h2>
        <div>
            <p>Este parágrafo está dentro de um div.</p>
            <span>Este span está dentro de um div.</span>
        </div>
    </section>

    <section>
        <h2>Princípio 3: Se Tudo For Igual, Vale a Última Regra Declarada</h2>
        <p class="last-rule">Este parágrafo será amarelo devido à última regra declarada.</p>
    </section>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Ordem de Precedência em CSS</title>

</head>

<body>

<h1>Ordem de Precedência em CSS</h1>

<h2>Princípio 1: Mais Específico Tem Maior Precedência</h2>

<p id="unique" class="highlight">Este parágrafo tem um ID e uma classe.</p>

</section>

<h2>Princípio 2: Princípio da Herança de Container</h2>

<div>

<p>Este parágrafo está dentro de um div.</p>

<span>Este span está dentro de um div.</span>

</div>

</section>

<h2>Princípio 3: Se Tudo For Igual, Vale a Última Regra Declarada</h2>

<p class="last-rule">Este parágrafo será amarelo devido à última regra declarada.</p>

</section>

</body>

</html>

Arquivo `styles.css`

/* Princípio 1: Mais Específico Tem Maior Precedência */
#unique {
    color: blue; /* Maior especificidade devido ao ID */
}

.highlight {
    color: green; /* Menor especificidade devido à classe */
}

/* Princípio 2: Princípio da Herança de Container */
div {
    color: red; /* Cor herdada por todos os elementos dentro do div */
}

div p {
    color: blue; /* Sobrescreve a cor herdada para parágrafos dentro do div */
}

/* Princípio 3: Se Tudo For Igual, Vale a Última Regra Declarada */
.last-rule {
    color: green; /* Primeira regra */
}

.last-rule {
    color: yellow; /* Última regra, portanto, tem precedência */
}

/* Princípio 1: Mais Específico Tem Maior Precedência */

#unique {

color: blue; /* Maior especificidade devido ao ID */

}

.highlight {

color: green; /* Menor especificidade devido à classe */

}

/* Princípio 2: Princípio da Herança de Container */

div {

color: red; /* Cor herdada por todos os elementos dentro do div */

}

div p {

color: blue; /* Sobrescreve a cor herdada para parágrafos dentro do div */

}

/* Princípio 3: Se Tudo For Igual, Vale a Última Regra Declarada */

.last-rule {

color: green; /* Primeira regra */

}

.last-rule {

color: yellow; /* Última regra, portanto, tem precedência */

}

Explicação dos Arquivos

index.html:
- Inclui a referência ao arquivo CSS externo styles.css usando a tag <link> no <head>.
- Contém três seções, cada uma demonstrando um dos princípios de ordem de precedência em CSS.
styles.css:
- Princípio 1: Mais Específico Tem Maior Precedência:
  - O ID #unique tem maior especificidade do que a classe .highlight, então o parágrafo será azul.
- Princípio 2: Princípio da Herança de Container:
  - Todos os elementos dentro do <div> herdarão a cor vermelha, mas os parágrafos dentro do <div> terão a cor azul devido à regra mais específica.
- Princípio 3: Se Tudo For Igual, Vale a Última Regra Declarada:
  - O parágrafo com a classe .last-rule será amarelo, pois a última regra declarada tem precedência.

Resultado Esperado

Princípio 1: O parágrafo com o ID unique e a classe highlight será azul.
Princípio 2: O parágrafo dentro do <div> será azul, e o <span> dentro do <div> será vermelho.
Princípio 3: O parágrafo com a classe .last-rule será amarelo devido à última regra declarada.

Como Testar

Crie um arquivo chamado index.html e copie o conteúdo do exemplo acima.
Crie um arquivo chamado styles.css na mesma pasta e copie o conteúdo do exemplo CSS acima.
Abra o arquivo index.html em um navegador para ver os estilos aplicados.

Inconsistências de Display entre Browsers

Diferentes navegadores podem renderizar CSS de maneiras ligeiramente diferentes. Para minimizar essas inconsistências, é comum usar um reset CSS ou uma folha de estilo normalizadora.

/* Exemplo de reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Exemplo de reset CSS */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

Vamos criar um exemplo que demonstra como diferentes navegadores podem renderizar elementos HTML de maneira inconsistente. Para isso, vamos usar um exemplo comum: a renderização de margens e paddings padrão em elementos HTML, que pode variar entre navegadores.

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inconsistência de Display entre Browsers</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Inconsistência de Display entre Browsers</h1>

    <section>
        <h2>Sem Reset CSS</h2>
        <p>Este parágrafo pode ter margens e paddings diferentes em diferentes navegadores.</p>
        <button>Botão</button>
    </section>

    <section>
        <h2>Com Reset CSS</h2>
        <p>Este parágrafo tem margens e paddings consistentes devido ao reset CSS.</p>
        <button>Botão</button>
    </section>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Inconsistência de Display entre Browsers</title>

</head>

<body>

<h1>Inconsistência de Display entre Browsers</h1>

<h2>Sem Reset CSS</h2>

<p>Este parágrafo pode ter margens e paddings diferentes em diferentes navegadores.</p>

<button>Botão</button>

</section>

<h2>Com Reset CSS</h2>

<p>Este parágrafo tem margens e paddings consistentes devido ao reset CSS.</p>

<button>Botão</button>

</section>

</body>

</html>

Arquivo `styles.css`

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos para a demonstração */
body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

section {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}

h2 {
    margin-bottom: 10px;
}

p {
    margin-bottom: 10px;
}

button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

/* Reset CSS */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

/* Estilos para a demonstração */

body {

font-family: Arial, sans-serif;

padding: 20px;

}

section {

margin-bottom: 20px;

padding: 10px;

border: 1px solid #ccc;

}

h2 {

margin-bottom: 10px;

}

p {

margin-bottom: 10px;

}

button {

padding: 10px 20px;

background-color: #007BFF;

color: white;

border: none;

cursor: pointer;

}

button:hover {

background-color: #0056b3;

}

Explicação dos Arquivos

index.html:
- Inclui a referência ao arquivo CSS externo styles.css usando a tag <link> no <head>.
- Contém duas seções: uma sem reset CSS e outra com reset CSS.
styles.css:
- Reset CSS:
  - A regra * { margin: 0; padding: 0; box-sizing: border-box; } é usada para remover margens e paddings padrão de todos os elementos, garantindo uma renderização consistente entre navegadores.
- Estilos para a demonstração:
  - Define estilos básicos para o corpo, seções, cabeçalhos, parágrafos e botões para a demonstração.

Resultado Esperado

Sem Reset CSS:
- A primeira seção pode apresentar margens e paddings diferentes para o parágrafo e o botão em diferentes navegadores, como Chrome, Firefox, Safari e Edge.
Com Reset CSS:
- A segunda seção terá margens e paddings consistentes para o parágrafo e o botão em todos os navegadores, graças ao reset CSS aplicado.

Como Testar

Crie um arquivo chamado index.html e copie o conteúdo do exemplo acima.
Crie um arquivo chamado styles.css na mesma pasta e copie o conteúdo do exemplo CSS acima.
Abra o arquivo index.html em diferentes navegadores (Chrome, Firefox, Safari, Edge) para observar as diferenças na renderização da primeira seção (sem reset CSS) e a consistência na segunda seção (com reset CSS).

Observações

Inconsistências Comuns:
- Diferentes navegadores aplicam margens e paddings padrão de maneira diferente aos elementos HTML.
- O reset CSS é uma técnica comum para neutralizar essas diferenças e garantir uma base consistente para o design.

Comentários

Comentários são usados para deixar notas no código CSS e são ignorados pelos navegadores. Eles são escritos entre /* e */.

/* Este é um comentário */
p {
    color: blue; /* Este é outro comentário */
}

/* Este é um comentário */

p {

color: blue; /* Este é outro comentário */

}

Exercícios

Crie um arquivo HTML e um arquivo CSS externo. Vincule o CSS ao HTML e estilize um título (<h1>) e um parágrafo (<p>).
Adicione uma classe a um parágrafo e estilize essa classe no CSS.
Adicione um ID a um parágrafo diferente e estilize esse ID no CSS.
Experimente com seletores de pseudo-classes e pseudo-elementos. Tente mudar a cor de um link quando o mouse passa sobre ele e estilize a primeira linha de um parágrafo.
Teste a herança de estilos aplicando uma cor a um div e veja como os elementos filhos herdam essa cor.

Introdução

Applying CSS Code: Os 3 Métodos de Aplicar CSS no Site

External File (Recomendado)

Embedded Directly into HTML Source Code

Inline CSS

Syntax of a CSS Rule

Selecting an Element

Selecting Classes and IDs

Classes

IDs

Mais Seletores

Selecionando Múltiplos Elementos

Selecionando Child Elements

Explicação

HTML

CSS

Resultado ao Carregar a Página

Explicação Visual

Explicação

HTML

CSS

Resultado ao Carregar a Página

Explicação Visual

Seleção por Atributo

Exemplo Básico

Explicação

HTML de Exemplo

CSS de Exemplo

Resultado

Seletores de Atributo Avançados

Selecionar por Presença de Atributo

Selecionar por Início de Valor

Selecionar por Fim de Valor

Selecionar por Contém Valor

Exemplos Completos

CSS

Explicação Visual

Selecting Pseudo-Classes

Exemplo Básico: :hover

Explicação

Exemplos Adicionais de Pseudo-Classes

:active

:focus

:nth-child(n)

HTML de Exemplo

CSS de Exemplo

Resultado

Seleção de Pseudo-Elementos

Exemplo Básico: ::first-line

Explicação

Exemplos Adicionais de Pseudo-Elementos

::before

::after

::first-letter

CSS de Exemplo

Resultado

Case Insensitive

Ordem de Precedência

Princípio 1: Mais Específico Tem Maior Precedência

Princípio 2: Princípio da Herança de Container

Princípio 3: Se Tudo For Igual, Vale a Última Regra Declarada

Arquivo index.html

Arquivo styles.css

Explicação dos Arquivos

Resultado Esperado

Como Testar

Inconsistências de Display entre Browsers

Arquivo index.html

Arquivo styles.css

Explicação dos Arquivos

Resultado Esperado

Como Testar

Observações

Comentários

Exercícios

Related Posts

Exemplo Básico: `:hover`

`:active`

`:focus`

`:nth-child(n)`

Exemplo Básico: `::first-line`

`::before`

`::after`

`::first-letter`

Arquivo `index.html`

Arquivo `styles.css`

Arquivo `index.html`

Arquivo `styles.css`