Estilos embutidos
Altere diretamente no HTML a aparência dos seus elementos
Estilos embutidos é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 1 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.
Adicionando uma cor de fundo
Você pode destacar seus elementos usando a propriedade background-color.
Exemplo:
<p style="background-color: yellow;">This text has a yellow background.</p>
Estilos incorporados: adicionando uma estilização simples ao seu HTML
Boas-vindas à lição sobre estilos incorporados! Hoje, você aprenderá a estilizar elementos diretamente no seu HTML usando o atributo style.
O que são estilos incorporados?
Os estilos incorporados permitem adicionar CSS diretamente a uma tag HTML usando o atributo style. Essa é a maneira mais simples de estilizar sua página.
Exemplo:
<p style="color: red;">This is red text!</p>
O color: red; altera a cor do texto para vermelho.
Alterando o tamanho da fonte
Use a propriedade font-size para alterar o tamanho do texto.
Exemplo:
<p style="font-size: 24px;">This text is 24 pixels large.</p>
Combinando vários estilos
Os estilos incorporados permitem combinar várias propriedades CSS. Separe cada propriedade com um ponto e vírgula ;.
Exemplo:
<p style="color: white; background-color: black; font-size: 18px;">
This text has multiple styles!
</p>
Estilizando outros elementos
Os estilos incorporados funcionam com todos os elementos HTML, como títulos, botões e imagens.
Exemplo:
<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: coral; color: white; padding: 10px;">
Styled Button
</button>
Experimente você mesmo
Vamos criar uma página da web usando estilos incorporados. Veja um exemplo para começar:
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<h1 style="color: purple;">Welcome to My Styled Page</h1>
<p style="color: gray; font-size: 16px;">
This is an example of inline styling.
</p>
<button style="background-color: lightblue; padding: 10px; border: none;">
Click Me!
</button>
</body>
</html>
Parabéns!
Parabéns! Você aprendeu a usar estilos incorporados para adicionar uma estilização simples e eficaz aos seus elementos HTML. Os estilos incorporados são ótimos para alterações rápidas, mas, conforme sua página da web cresce, você precisará de técnicas de estilização mais avançadas. Na próxima lição, exploraremos os conceitos básicos de CSS. Prepare-se para criar páginas da web profissionais!
Usando o atributo style
O que são estilos incorporados?
Os estilos incorporados permitem adicionar CSS diretamente a uma tag HTML usando o atributo style. Essa é a maneira mais simples de estilizar sua página.
Exemplo:
<p style="color: red;">This is red text!</p>
O color: red; altera a cor do texto para vermelho.
<p style="color: red;">This is red text.</p>
Perguntas Frequentes
A aula “Estilos embutidos” é grátis?
Sim — o texto completo de “Estilos embutidos” é 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 “Estilos embutidos”?
Altere diretamente no HTML a aparência dos seus elementos 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 4.
Quanto tempo leva a aula “Estilos embutidos”?
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