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.