Valores e Unidades

Roger.Santos 03/01/2023

Módulo Progresso

0% Concluído

Cada propriedade em CSS é definida por valores especificos que podem ser diferentes tipos de valores numericos e ou palavras chaves pre definidas.

Exemplos:

Cores

color: yellow;
color: #12B567;
color: rgb(0, 255, 180);

Tamanho da fonte

font-size: 24px;
font-size: 1rem;

Peso da fonte

font-weight: bold;
font-weight: 100;

Cada propriedade tem seus próprio valores, você não pode por exemplo dizer que o font-size: yellow; ou a color: 24px;, Esses valores são inválidos para essas propriedades, então vamos cobrir vários deles aqui no decorrer do curso, mas recomendo que você fique de olho nos sites que indiquei anteriormente e também, que você utilize uma IDE que ajude você a auto completar os valores como o VSCode.

Exercício 1: Estilizando um Título

Você deve criar um arquivo HTML com a seguinte estrutura:

HTML (index.html):

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
    <h1>Meu Título</h1>
</body>
</html>

Agora, crie um arquivo CSS (estilos.css) e estilize o título (<h1>) da seguinte maneira:

Defina a cor do texto como amarela (yellow).
Aplique um tamanho de fonte de 36 pixels (px).
Defina o peso da fonte como negrito (bold).

Exercício 2: Estilizando uma Lista

Crie um arquivo HTML com a seguinte estrutura:

HTML (index.html):

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
    <h2>Minha Lista</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

Em seguida, crie um arquivo CSS (estilos.css) e estilize a lista (<ul>) da seguinte maneira:

Defina a cor do texto dentro da lista como azul (#0000FF).
Aumente o tamanho da fonte dos itens da lista para 20 pixels (px).
Defina o peso da fonte dos itens da lista como 100.

Nesses exercícios, você deve criar arquivos HTML e CSS, aplicar diferentes propriedades CSS e valores específicos para estilizar elementos HTML. Isso o ajudará a praticar a aplicação de valores e unidades em CSS de acordo com os exemplos fornecidos na aula.

Curso de CSS 3

Participantes 867

Valores e Unidades

Roger.Santos 03/01/2023

Exercício 1: Estilizando um Título

Exercício 2: Estilizando uma Lista