Como funciona o Box Model, Content, Padding, Border, Margin no Css
Bem-vindo(a) ao post no blog.
👉 Sintaxe, Seletores e Propriedades Essenciais.
🧩 Revisão Rápida — Sintaxe CSS
Uma regra CSS é sempre assim:
seletor {
propriedade: valor;
}
Exemplo:
h1 {
color: blue;
text-align: center;
}
● h1 → Seletor (define o alvo: todos os <h1>)
● color, text-align → Propriedades
● blue, center → Valores
O ponto e vírgula (;) é colocado no final de cada linha para separar as propriedades.
🧭 Tipos de Seletores
Seletores são a ponte entre o HTML e o CSS — eles dizem a quais elementos aplicar as regras.
Vamos ver os principais:
🔹 a) Seletor por Tipo (Tag)
Afeta todas as tags daquele tipo no HTML.
p {
color: #333;
font-size: 18px;
}
Aplica a todos os <p> do documento.
💡 Ideal para aplicar estilos globais.
🔹 b) Seletor por Classe (.classe)
Afeta todos os elementos que tiverem o atributo class no HTML.
⚙️ Classes são precedidas por um ponto (.):
.destaque {
color: #d6336c;
font-weight: bold;
}
HTML:
<p class="destaque">Texto destacado!</p>
<p>Texto normal.</p>
📘 Você pode aplicar a mesma classe em vários elementos.
Classes são reusáveis e ideais para padronizar estilos.
🔹 c) Seletor por ID (#id)
Afeta um elemento específico, identificado com id.
#titulo {
color: #0077ff;
text-align: center;
}
HTML:
<h1 id="titulo">Bem-vindo!</h1>
💡 Um ID deve ser único na página (somente um elemento por id).
🔹 d) Seletor Combinado (agrupamento)
Você pode aplicar as mesmas regras a vários seletores:
h1, h2, h3 {
color: darkblue;
font-family: Arial, sans-serif;
}
💬 A vírgula (,) separa seletores diferentes.
🔹 e) Seletores Descendentes (elementos dentro de outros)
Permitem atingir elementos apenas dentro de uma área específica.
section p {
color: green;
}
Isso aplica cor verde somente aos <p> dentro de <section>.
HTML:
<section>
<p>Este parágrafo fica verde!</p>
</section>
<p>Este não muda de cor.</p>
🔹 f) Seletor Universal (*)
Aplica regra a todos os elementos da página.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Esse estilo é muito usado no início dos projetos para resetar padrões automáticos do navegador.
🔹 g) Seletor de Atributo
Seleciona elementos baseados em atributos HTML.
input[type="text"] {
border: 2px solid #0077ff;
}
Aplica estilo apenas aos inputs do tipo “texto”.
🧠 Herança e Cascata
O CSS “herda” propriedades: se você aplicar uma regra a um elemento pai, os elementos filhos geralmente herdam automaticamente.
Exemplo:
body {
color: #333;
font-family: 'Segoe UI', Arial, sans-serif;
}
Isso faz com que todos os textos da página usem essa fonte e cor, sem precisar repetir em cada tag.
Mas nem todas as propriedades são herdadas — por exemplo, bordas e margens não são.
🎨 Propriedades Essenciais
Agora vamos ver as propriedades mais usadas no CSS — as que você precisa dominar bem desde o início.
🟢 a) color (cor do texto)
Define a cor do texto.
p {
color: #333333; /* hexadecimal */
}
Formatos mais comuns:
● Nome: red, blue, green
● Hexadecimal: #ff0000
● RGB: rgb(255, 0, 0)
● RGBA (com transparência): rgba(255, 0, 0, 0.5)
🟠 b) background (fundo)
Controla o plano de fundo de um elemento.
body {
background-color: #fafafa;
}
Você pode usar imagens também:
div {
background-image: url('fundo.jpg');
background-size: cover;
background-position: center;
}
🔵 c) font-family (tipo de letra)
Define a fonte usada pelo texto.
body {
font-family: 'Segoe UI', Arial, sans-serif;
}
Sempre é bom definir fontes de fallback (alternativas).
🟣 d) font-size (tamanho da fonte)
Define o tamanho da letra:
h1 {
font-size: 32px;
}
Unidades comuns:
● px (fixo)
● em/rem (relativo)
% (proporcional)
🟥 e) text-align (alinhamento de texto)
Centraliza, justifica ou alinha texto:
p {
text-align: justify;
}
h1 {
text-align: center;
}
🟤 f) margin e padding (espaçamentos)
Dois conceitos cruciais 🎯
● margin = espaço fora do elemento
● padding = espaço dentro (entre o conteúdo e a borda)
div {
margin: 20px;
padding: 10px;
}
💡 Você pode usar:
margin-top, margin-right, margin-bottom, margin-left
⚫ g) border (borda)
Desenha bordas ao redor de elementos.
p {
border: 2px solid #0077ff;
border-radius: 8px;
}
Explicando:
● 2px = espessura
● solid = estilo (pode ser dotted, dashed, double etc.)
● #0077ff = cor
● border-radius arredonda os cantos
⚪ h) width e height (largura e altura)
Define o tamanho dos elementos.
div {
width: 300px;
height: 150px;
background-color: lightblue;
}
Pode usar também porcentagens:
div {
width: 50%;
}
🧱 i) box-sizing (controle do tamanho real)
Por padrão, width e height não incluem bordas nem padding.
Com box-sizing: border-box;, tudo é incluído — muito mais previsível! 💡
* {
box-sizing: border-box;
}
🪄 j) cursor e transition (interatividade visual)
button {
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0077ff;
color: white;
}
👆 Assim criamos efeitos suaves e profissionais com apenas duas linhas.
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
🧮 Prática — Mini Projeto “Cartão de Apresentação”
Vamos fixar o aprendizado criando um pequeno cartão estilizado.
📄 index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Meu Cartão</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cartao">
<h1 id="nome">Ana Costa</h1>
<p class="titulo">Desenvolvedora Front-End</p>
<p class="descricao">Amo transformar ideias em interfaces modernas e eficazes 💻✨</p>
<button>Entrar em contato</button>
</div>
</body>
</html>
📄 style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #a2d2ff, #cdb4db);
font-family: 'Segoe UI', Arial, sans-serif;
}
.cartao {
background-color: #fff;
border-radius: 12px;
padding: 24px;
width: 320px;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#nome {
color: #0077ff;
font-size: 28px;
}
.titulo {
color: #333;
font-weight: bold;
margin: 10px 0;
font-size: 16px;
}
.descricao {
color: #555;
font-size: 14px;
margin-bottom: 20px;
}
button {
background-color: #0077ff;
color: white;
border: none;
border-radius: 8px;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #005fd4;
}
Abra o resultado no navegador e observe:
● Tipografia alinhada,
● Cores harmônicas,
● Bordas suaves e
● Efeito hover no botão 😍.
Comentários
Postar um comentário