Valores com palavra-chave

Módulo Progresso

0% Concluído

Algumas propriedades aceitam palavras-chaves no lugar de uma unidade como no exemplo a seguir:

CSS

.keyword {
    color: red;
    font-size: medium;
    font-weight: bold;
}

.unit {
    color: #ff0000;
    font-size: 16px;
    font-weight: 900;
}

como foi falado anteriormente, existem diversas palavras-chave e vamos ver muitas no decorrer desse curso, mas ter uma IDE que ajude você a completar com o valor correto ajuda muito.

Exercício 1: Palavras-chave para Estilo de Texto

Crie um arquivo HTML (index.html) com a seguinte estrutura:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p class="keyword">Texto com palavras-chave</p>
    <p class="unit">Texto com unidades</p>
</body>
</html>

Agora, crie um arquivo CSS (styles.css) e estilize os elementos <p> com as classes .keyword e .unit, de modo que:

O parágrafo com a classe .keyword tenha o texto vermelho (color: red), tamanho de fonte médio (font-size: medium), e peso de fonte em negrito (font-weight: bold).
O parágrafo com a classe .unit tenha o texto vermelho (color: #ff0000), tamanho de fonte de 16 pixels (font-size: 16px), e peso de fonte de 900 (font-weight: 900).

Exercício 2: Estilização de Texto com CSS

Objetivo:
Desenvolver um entendimento prático sobre o uso de palavras-chave e unidades específicas em CSS através da criação de um arquivo HTML e um arquivo CSS que aplicam estilos distintos a elementos de texto.

Parte 1: Criar o arquivo HTML

Nomeie o arquivo como index.html e inclua a seguinte estrutura básica:

<!DOCTYPE html>
<html lang="pt">
<head>
    <title>Exercício de CSS</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p class="keyword">Este parágrafo usa palavras-chave para estilização.</p>
    <p class="unit">Este parágrafo usa unidades específicas para estilização.</p>
</body>
</html>

Parte 2: Criar o arquivo CSS

Nomeie o arquivo como styles.css. Configure estilos para os elementos <p> com as classes .keyword e .unit, da seguinte forma:

.keyword {
    color: red;  /* Cor vermelha usando palavra-chave */
    font-size: medium;  /* Tamanho de fonte médio usando palavra-chave */
    font-weight: bold;  /* Peso da fonte em negrito usando palavra-chave */
}

.unit {
    color: #ff0000;  /* Cor vermelha usando código hexadecimal */
    font-size: 16px;  /* Tamanho de fonte de 16 pixels */
    font-weight: 900;  /* Peso da fonte de 900 */
}

Instruções:

Salve os arquivos index.html e styles.css na mesma pasta.
Abra index.html em um navegador para ver os estilos aplicados.
Experimente alterar os valores de estilo no arquivo styles.css para praticar o uso de outras palavras-chave e unidades.

Questões para reflexão:

Observe como o navegador interpreta as palavras-chave em comparação com as unidades específicas. Há diferenças visíveis?
Explore o impacto de diferentes palavras-chave e unidades na responsividade e na aparência geral do texto.

Este exercício ajuda a solidificar a compreensão de como diferentes métodos de estilização podem ser usados em CSS, proporcionando uma experiência prática significativa.