Podemos Usar Essas Propriedades Inline

<body style="…">

background-color: rgb(7, 39, 49) — define a cor de fundo da página.
font-family: Arial, sans-serif — define a família de fontes padrão para todo o documento (os filhos herdam, a menos que sobrescrevam).
margin: 20px — adiciona espaço externo nas bordas da página (afasta o conteúdo das bordas da janela).
font-size: 20px — tamanho base de fonte do documento. Unidades em em (dos títulos) vão se basear nisso.

<h1 style="…"> e <h2 style="…">

color: aqua / rgb(165, 30, 255) — cor do texto do título.
font-size: 1.5em (h1) e 1.2em (h2) — tamanhos relativos ao font-size do elemento pai (no caso, o body com 20px). • 1.5em ≈ 30px; 1.2em ≈ 24px.

<p style="…">

font-family: Arial, sans-serif — aqui é redundante, pois o body já definiu; mantive só para demonstrar herança vs. sobrescrita.
font-size: 16px — tamanho do parágrafo (menor que o base de 20px para dar hierarquia visual).
color: rgb(255, 255, 255) — texto branco para contraste no fundo escuro.
text-align: justify — alinha o texto dos parágrafos em blocos (bordas esquerda e direita retinhas).

Boas práticas quando usar inline

Rápido para demos: perfeito para aulas, protótipos e testes.
Evite em produção: inline dificulta manutenção e repete código. Prefira classes no CSS externo.
Herança: defina o que for global no body (fonte, cor base) e aplique apenas exceções nos elementos.
Unidades: em / rem são ótimas para tamanhos relativos (responsividade). px dá controle absoluto.
Acessibilidade: garanta bom contraste entre color e background-color.

Exemplo Visual: CSS Interno


    /* CSS Interno */
    body {
    background-color: rgb(7, 39, 49);
    font-family: Arial, sans-serif;
    margin: 20px;
    font-size: 20px;
    }
    h1 { color: aqua; font-size: 1.5em; }
    h2 { color: rgb(165, 30, 255); 
    font-size: 1.2em; }
    p  { font-size: 16px; 
    color: rgb(255, 255, 255); 
    text-align: justify; }

Capítulo 1

Capítulo 1.1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate laborum quam voluptatum nulla architecto commodi dolorem.

Capítulo 1.2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate laborum quam voluptatum nulla architecto commodi dolorem.

Exemplo Visual: Código Inline & Resultado


<h1 style="color:aqua; font-size:1.5em;">Capítulo 1</h1>
<h2 style="color:rgb(165,30,255); font-size:1.2em;">Capítulo 1.1</h2>
<p style="font-family:Arial, sans-serif; font-size:16px; color:white; text-align:justify;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>

Capítulo 1

Capítulo 1.1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate laborum quam voluptatum nulla architecto commodi dolorem.

📘 Aula 25: Estilos Inline 📘

O que é estilo inline?

Podemos Usar Essas Propriedades Inline

<body style="…">

<h1 style="…"> e <h2 style="…">

<p style="…">

Boas práticas quando usar inline

Exemplo Visual: CSS Interno

Capítulo 1

Capítulo 1.1

Capítulo 1.2

Exemplo Visual: Código Inline & Resultado

Capítulo 1

Capítulo 1.1

Checklist rápido