Noções básicas de CSS
Uma introdução à estilização com CSS (visão geral opcional)
Noções básicas de CSS é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML for Kids, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML for Kids inclui 4 aulas no total.
Conceitos básicos de CSS: introdução à estilização com CSS
Boas-vindas ao mundo do CSS! Hoje, aprenderemos a usar Folhas de Estilo em Cascata (CSS) para estilizar suas páginas da web e deixá-las incríveis.
O que é CSS?
CSS significa Folhas de Estilo em Cascata. É uma linguagem usada para controlar a aparência e o estilo das suas páginas da web.
Com CSS, você pode alterar cores, fontes, layouts e muito mais!
Como o CSS funciona
O CSS funciona selecionando elementos HTML e aplicando estilos a eles. Você pode usar CSS de três maneiras:
- Incorporado: Adicione estilos diretamente dentro dos elementos HTML.
- Interno: Adicione estilos dentro de uma tag
<style>no<head>. - Externo: Use um arquivo CSS separado.
Nesta lição, vamos nos concentrar nos estilos internos e externos.
CSS interno
O CSS interno é escrito dentro de uma tag <style> no <head> do seu documento HTML.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This page has styles applied using internal CSS.</p>
</body>
</html>
CSS externo
O CSS externo é escrito em um arquivo separado com a extensão .css. Você o vincula ao seu documento HTML usando a tag <link>.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This page uses an external CSS file for styling.</p>
</body>
</html>
Seletores em CSS
Os seletores são usados para direcionar elementos HTML específicos para estilização. Entre os seletores comuns estão:
- Seletor de tag: Direciona todos os elementos com uma tag específica. Exemplo:
p. - Seletor de classe: Direciona elementos com uma classe específica. Exemplo:
.myClass. - Seletor de ID: Direciona um elemento com um ID específico. Exemplo:
#myID.
Vamos ver como usá-los!
Seletores de classe e ID
Use uma classe quando quiser estilizar vários elementos. Use um ID para um único elemento exclusivo.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
#unique {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<p class="highlight">This is highlighted text.</p>
<p id="unique">This text is unique.</p>
</body>
</html>
Experimente você mesmo
Vamos criar uma página da web usando CSS interno. Veja um exemplo para começar:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: darkmagenta;
}
p {
color: gray;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Page</h1>
<p>This is an example of using internal CSS to style a page.</p>
</body>
</html>
Parabéns!
Parabéns! Você aprendeu os conceitos básicos de CSS e como usá-lo para estilizar suas páginas da web. O CSS faz com que suas páginas tenham uma aparência profissional e visualmente atraente. Na próxima lição, vamos nos aprofundar em cores e fundos para deixar suas páginas ainda mais vibrantes. Prepare-se para liberar sua criatividade!
Perguntas Frequentes
A aula “Noções básicas de CSS” é grátis?
Sim — o texto completo de “Noções básicas de CSS” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML for Kids, atualize para CoddyKit PRO. O curso de HTML for Kids inclui 4 aulas no total.
O que vou aprender em “Noções básicas de CSS”?
Uma introdução à estilização com CSS (visão geral opcional) Você pratica HTML for Kids com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML for Kids?
Nenhuma experiência prévia é necessária. HTML for Kids no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Noções básicas de CSS”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML for Kids?
Sim. Cada aula de HTML for Kids inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Estilos embutidos
- Noções básicas de CSS
- Cores e planos de fundo
- Formatação de texto