Aula 6 - Aprenda CSS do Zero: Guia Completo para Iniciantes em Desenvolvimento Web
Descubra como usar CSS para estilizar páginas HTML. Aprenda do zero como aplicar cores, fontes, margens, posicionamento e muito mais no seu site.
DESENVOLVIMENTO WEB
Prof. Leonardo Gomes Guidolin
4/10/20251 min ler
Introdução
Se você já aprendeu HTML, está na hora de dar o próximo passo no desenvolvimento web: aprender CSS. Com o CSS, você transforma páginas simples em sites bonitos, organizados e responsivos.
Neste post do codandodozero.blog, vamos te ensinar o básico de CSS de forma prática e objetiva. Você aprenderá como aplicar estilos em elementos HTML e criar páginas muito mais atraentes.
O que é CSS?
CSS (Cascading Style Sheets) é a linguagem usada para estilizar elementos HTML. Com ele, você pode:
Alterar cores e fontes
Definir tamanhos e espaçamentos
Organizar o layout da página
Tornar seu site responsivo para celulares e tablets
Como adicionar CSS em uma página HTML
Existem 3 formas de usar CSS:
Inline (na própria tag HTML):
<p style="color: blue;">Texto azul</p>
Interno (dentro da tag <style> no HTML):
<head>
<style>
p {
color: blue;
}
</style>
</head>
Externo (arquivo .css separado - o mais recomendado):
<link rel="stylesheet" href="estilos.css">
No arquivo estilos.css:
p {
color: blue;
}
Conceitos Básicos de CSS
Seletores
Seletores determinam quais elementos receberão os estilos.
/* Todos os parágrafos */
p {
font-size: 16px;
}
/* Elemento com ID */
#titulo {
font-weight: bold;
}
/* Elemento com classe */
.caixa {
padding: 10px;
}
Propriedades comuns
body {
background-color: #f2f2f2; /* Cor de fundo */
color: #333; /* Cor do texto */
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
Box model (modelo de caixa)
Todo elemento HTML é uma caixa com:
Content (conteúdo)
Padding (espaço interno)
Border (borda)
Margin (espaço externo)
div {
margin: 20px;
padding: 10px;
border: 1px solid black;
}
Layouts com CSS
Você pode usar flexbox para criar layouts responsivos com facilidade:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
Ou então usar grid:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
Dicas para iniciantes
Use nomes de classes claros e descritivos
Teste suas alterações com ferramentas como o DevTools do navegador
Separe o conteúdo (HTML) da apresentação (CSS)
Comece simples e vá evoluindo aos poucos
Conclusão
Aprender CSS é um passo essencial para quem quer criar sites profissionais. Agora que você já sabe como usar seletores, aplicar estilos e montar layouts, pratique bastante criando suas próprias páginas!
Continue acompanhando o codandodozero.blog para mais tutoriais de desenvolvimento web, HTML, JavaScript e muito mais. Bora codar do zero e construir seus próprios sites!