Introdução ao CSS
Introdução ao CSS
Introdução ao CSS é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 1 de 1. 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 1 aulas no total.
Introdução 1
Olá,
No capítulo anterior, aprendemos o que é CSS e por que devemos usá-lo. Agora quero fazer uma breve introdução com um exemplo simples.
Vamos definir uma página HTML simples.
<html>
<body>
<h1>Hello CSS</h1>
</body>
</html>Estilo inline
Agora, vamos mudar para vermelho a cor do nosso cabeçalho Hello CSS. Para isso, usaremos o atributo style , que pode ser adicionado a quase qualquer tag HTML.
Com esse atributo, podemos definir um estilo em cada elemento de forma inline.
Ao observarmos a seção de visualização, veremos que a cor do cabeçalho ficará vermelha.
color: red;
Aplicamos uma definição de estilo à cor da fonte do elemento.
<h1 style="color:red;">Hello CSS</h1>Estilo inline 2
Você deve se lembrar de que dissemos que usamos atributos para atribuir comportamentos e características às tags em HTML.
Um dos atributos mais importantes nesse contexto é o style: usamos o atributo style para definir um estilo para as tags.
Estilo inline 3
Agora vamos adicionar um novo estilo. Podemos aumentar o tamanho do texto com font-size.
Ao definir vários estilos, precisamos separá-los com ponto e vírgula.
No exemplo abaixo, os estilos color e font-size são separados por ponto e vírgula.
<h1 style="color:red;font-size:50px;">
Hello CoddyKit
</h1>Definição de estilo
A sintaxe é importante ao adicionar um estilo.
styleName: styleValue;
Vamos lembrar novamente que precisamos atribuir o estilo conforme mostrado acima.
Exemplo
Agora vamos expandir um pouco mais o nosso exemplo.
<html>
<body>
<h1>Hello CoddyKit</h1>
<p>Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a
type specimen book.</p>
<h1>Hello CSS</h1>
</body>
</html>Exemplo 2
Neste exemplo, queremos mudar para vermelho a cor de todo o texto. Para cada tag, podemos definir o estilo da seguinte forma.
<html>
<body>
<h1 style="color:red;">Hello Coddy</h1>
<p style="color:red;">
Lorem Ipsum is simply dummy
text of the printing and typesetting industry
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley
of type and scrambled it to
make a type specimen book.</p>
<h1 style="color:red;">Hello CSS</h1>
</body>
</html>Seletor CSS
Mas dessa forma não fica muito bom, não é?
Como agora temos 3 elementos na página, mudamos para vermelho a cor do texto de cada um deles. No entanto, considerando que esse número tenha aumentado para 3000, não faz muito sentido definir um estilo para cada um.
Em vez disso, precisamos usar seletores CSS, em vez de definir cada elemento inline.
Introdução 12
Agora vamos aprender o conceito de seletor.
Os seletores CSS são responsáveis por selecionar o elemento HTML relevante contido no documento para aplicar estilos aos elementos HTML.
Assim, como podemos entender pelo nome, eles escolhem elementos HTML. 😂
Os seletores CSS devem ser definidos entre as tags <style> no documento HTML ou em um arquivo CSS externo.
Nos nossos exemplos, usaremos o que normalmente fica entre as tags style. No entanto, é mais correto definir o estilo em um arquivo CSS externo.
Introdução 13
O operador ponto e o nome da classe são usados para definir uma classe entre as tags de estilo. E as definições de estilo são feitas entre as chaves.
.class-name {
font-size:22px;
color:red;
}
No exemplo abaixo, definimos uma classe chamada my-component entre as tags de estilo. O estilo font-size foi atribuído à classe correspondente.
<style>
.my-component{
font-size:22px;
}
</style>
Agora vamos definir dois elementos de parágrafo
Agora vamos definir dois elementos de parágrafo que têm a classe my-component.
Após essa definição, como os dois parágrafos têm o mesmo nome de classe, eles serão selecionados pelo seletor CSS, e seus tamanhos de fonte serão atualizados para 22px.
<style>
.my-component{
font-size:22px;
}
</style>
<p class="my-component">Hello CoddyKit</p>
<p class="my-component">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean maximus neque diam,
in tristique tortor volutpat a. Vivamus porttitor
id est et suscipit. Duis interdum at sem sed vestibulum.
Phasellus sit amet ullamcorper libero, a vestibulum libero.
Fusce laoreet nunc a pharetra viverra.
</p>Introdução 6
Podemos atribuir mais de um estilo a um seletor.
No exemplo abaixo, os estilos font-size e color são definidos no mesmo seletor.
<style>
.my-component{
font-size:22px;
color:red;
}
</style>Aninhamento de seletores CSS
Vamos analisar o código HTML abaixo.
Um elemento de parágrafo foi definido, e um elemento span contendo o conteúdo 'Hello CSS Selectors' foi adicionado a esse elemento.
Nesse caso, podemos dizer que o elemento de parágrafo é o pai do span.
Por outro lado, o span também será filho do elemento p.
Assim como os seres vivos, usaremos elementos HTML em relações pai-filho, de acordo com seu posicionamento no bloco de código.
<p>
<span>Hello CSS Selectors</span>
</p>Aninhamento de seletores CSS 2
Vamos expandir um pouco mais nosso exemplo e analisar novamente a hierarquia entre os elementos.
- De acordo com o exemplo abaixo
- Os elementos <span> e <a> são irmãos entre si.
- Os elementos <span> e <a> são descendentes do elemento div.
- <span> e <a> são filhos do elemento <p>.
- O elemento <p> é filho do elemento <div>.
<div>
<p>
<span>Hello CSS Selectors</span>
<a href="https://coddykit.com">
Go CoddyKit
</a>
</p>
</div>modelo de árvore de análise
Vamos observar mais atentamente a imagem acima.
O exemplo de código HTML a seguir foi convertido em um modelo de árvore.
Observe que o modelo de árvore é, na verdade, um reflexo da hierarquia pai-filho.
<!DOCTYPE html>
<html>
<head>
<title>CoddyKit</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is a Heading</h1>
<p>
<a href="#">Link</a>
<br/>
<span>lorem ipsum</span>
</p>
</body>
</html>
Então, quando usamos essa relação hierárquica?
Então, quando usamos essa relação hierárquica?
Vamos primeiro fazer um exemplo e apresentar um problema. Depois veremos como podemos fornecer soluções usando essa hierarquia.
Vamos observar o exemplo de código abaixo.
Digamos que queremos pintar todo o texto de vermelho. Nesse caso, aprendemos até agora duas formas diferentes.
- Primeiro, e pior de tudo, definiremos o atributo de estilo (style = "color: red") inline em cada elemento.
- Segundo, definiremos uma classe chamada red-txt e atribuiremos cada elemento como um atributo (class = "red-txt").
Mas existe uma maneira mais fácil de fazer isso. 🥳
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p><span>
This is a span element
</span>
</p>
</div>
</div>Então, quando usamos essa relação hierárquica? 2
Vamos analisar novamente o código acima.
Quando prestamos atenção ao elemento div com uma classe chamada root, vemos que ele é, na verdade, o ancestral de todos os elementos do nosso exemplo.
Nos seres humanos, as características genéticas são transmitidas dos ancestrais aos descendentes. No CSS, o estilo atribuído a um ancestral também se reflete nos descendentes.
Nesse caso, quando fazemos uma definição de estilo que seleciona o elemento div correspondente, podemos esperar que todos os seus descendentes sejam afetados por essa atribuição.
Vamos fazer isso.
Então, quando usamos essa relação hierárquica? 3
Vamos definir uma classe chamada root com a ajuda de um operador ponto e fazer uma definição de estilo (com color: red) dentro dela.
Ela selecionará todos os elementos que têm a classe root e tornará vermelha a cor do texto deles e de seus descendentes.
Ao observarmos a seção de visualização, veremos que as cores de todos os textos ficam vermelhas.
<style>
.root{
color:red;
}
</style>
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p>
<span>
This is a span element
</span>
</p>
</div>
</div>Herança
Podemos expressar esse conceito no CSS como Herança. E aprendemos a escrever nosso código de forma mais curta usando esse recurso.
Assim como no exemplo anterior, em vez de definir a mesma propriedade para cada elemento individualmente, definimos essa propriedade no elemento ancestral e evitamos a repetição de código.
Posicionamento do elemento head
Nos exemplos anteriores, adicionamos o elemento de estilo ao lado do elemento HTML que escrevemos.
No entanto, o local correto onde a tag de estilo deve ser inserida é entre as tags head.
E o uso ficará mais adequado da seguinte forma.
<!DOCTYPE html>
<html>
<head>
<style>
.hello{
font-size:30px;
}
</style>
</head>
<body>
<h1 class="hello">This is a Heading</h1>
</body>
</html>escrever nossos códigos da forma mais curta e reutilizável possível
Ao programar, precisamos escrever nossos códigos de forma o mais curta possível e reutilizável.
Parabéns
Parabéns 🎉
Nesta seção, aprendemos com você os conceitos de Seletor e Herança.
Na próxima seção, aprenderemos os tipos de definição de estilo no CSS.
Perguntas Frequentes
A aula “Introdução ao CSS” é grátis?
Sim — o texto completo de “Introdução ao 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 1 aulas no total.
O que vou aprender em “Introdução ao CSS”?
Introdução ao CSS 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 1 de 1.
Quanto tempo leva a aula “Introdução ao 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.