Sintaxe CSS

Módulo Progresso

0% Concluído

A sintaxe do css é dividida em seletor, bloco de declaração { }, dentro do bloco de declaração nos temos atributos que são definidos por propriedade e valor separados por : e com ; no final de cada linha de atributo.

veja o exemplo abaixo:

seletor {
    propriedade: valor;
    propriedade2: valor;
    propriedade3: valor;
}
  
seletor2 {
    propriedade: valor;
}

Exercício 1: Estilizando Textos e Cores

Objetivo: Introduzir os alunos à aplicação básica de estilos em elementos HTML usando CSS, focando em propriedades de cor e texto.

Descrição: Para este exercício, você vai adicionar estilos a uma página HTML simples. Seu objetivo é modificar a aparência do texto usando CSS. Use o código HTML abaixo como ponto de partida e escreva o CSS necessário para:

Mudar a cor do texto de todos os parágrafos (p) para azul (blue).
Alterar o tamanho da fonte do título (h1) para 24px.
Definir a cor de fundo da página (body) para cinza claro (lightgray).

Código HTML fornecido:

<!DOCTYPE html>
<html>
<head>
    <title>Prática de CSS</title>
</head>
<body>
    <h1>Meu Primeiro Estilo CSS</h1>
    <p>Estilizando com cores e fontes.</p>
    <p>Aprender CSS é divertido!</p>
</body>
</html>

Instruções:

Crie um arquivo estilo.css para adicionar seus estilos CSS.
Use seletores de elementos para aplicar os estilos solicitados aos elementos correspondentes.
Verifique se os estilos foram aplicados corretamente recarregando a página no navegador.

Exercício 2: Trabalhando com Classes e IDs

Objetivo: Ensinar aos alunos como usar seletores de classe e ID para aplicar estilos CSS de maneira mais específica.

Descrição: Neste exercício, você irá aprofundar o uso de seletores CSS, aplicando estilos a elementos específicos através de classes e IDs. Partindo do código HTML fornecido, aplique o seguinte CSS:

Defina a cor do texto dos elementos com a classe destaque para vermelho (red).
Altere a cor de fundo do elemento com o ID fundo-especial para amarelo (yellow).
Mude a fonte (font-family) de todos os elementos h2 para “Arial”.

Código HTML fornecido:

<!DOCTYPE html>
<html>
<head>
    <title>Seletores de Classe e ID</title>
</head>
<body>
    <h1>ID e Classes em CSS</h1>
    <p class="destaque">Este texto deve ser destacado.</p>
    <div id="fundo-especial">
        <p>Este parágrafo está dentro de um div com ID especial.</p>
    </div>
    <h2>Subtítulo</h2>
    <p>Texto normal aqui.</p>
</body>
</html>

Instruções:

Continue utilizando o arquivo estilo.css que você criou ou inicie um novo, se necessário.
Escreva as regras CSS seguindo os objetivos descritos, utilizando seletores de classe e ID onde aplicável.
Teste as modificações no navegador para assegurar que os estilos foram aplicados como desejado.