CSS Interno

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 7 de 76.

CSS Interno é um método de adicionar estilos CSS a um documento HTML, colocando-os dentro de uma tag <style> na seção <head> do documento. Esta abordagem permite aplicar estilos a múltiplos elementos em uma única página sem a necessidade de folhas de estilo externas. O CSS Interno é útil para estilizar um único documento ou fazer alterações rápidas de estilo.

Aqui está a sintaxe básica para usar CSS interno:

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Neste exemplo, a tag <style> contém regras CSS que definem a cor de fundo do body para azul claro, e a cor do p (parágrafo) para azul, e o tamanho da fonte para 16 pixels. Estes estilos serão aplicados a todos os elementos dentro do documento HTML.

Desafio

Fácil

Você recebeu um documento HTML. Use CSS interno para estilizar o documento com as seguintes propriedades:

Defina a cor de fundo do body como lightgreen.
Defina a cor do texto de todos os cabeçalhos h1 como red.
Defina o tamanho da fonte de todos os parágrafos (p) como 18px.

Você recebeu um código CSS inicial para isso.

Folha de consulta

O CSS interno é adicionado dentro de uma tag <style> na seção <head> de um documento HTML:

<head>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

O CSS interno permite aplicar estilos a múltiplos elementos em uma única página sem folhas de estilo externas.

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            
        }
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>