1) Criando e linkando o arquivo CSS
Você vai criar um arquivo CSS chamado style.css para estilizar uma página web. Após criar o arquivo, seu objetivo é linkar esse arquivo CSS ao HTML. Para isso, você usará a tag dentro do
do documento HTML, especificando o caminho do arquivo CSS. Este processo é crucial para que os estilos definidos no CSS sejam aplicados à página HTML.<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio - Curso 1 - Figma</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
2) Definindo estilos básicos
No arquivo CSS, defina a cor de fundo do corpo da página (
) para indigo (indigo) e a cor do texto para branco (white). Salve as alterações e verifique no navegador se o fundo da página está preto e o texto branco.body{
font-family: Poppins;
color: white;
background-color: indigo;
}
3) Estilizando com cores e formatos
1 - Primeiramente, defina as cores dos elementos principais da página, como o fundo (background-color), texto (color) e bordas (border). Por exemplo:
body {
background-color: #f0f0f0;
}
h1 {
color: #333333;
}
2 - Aplique estilos aos botões (button) e cabeçalhos (h1, h2, etc.) para torná-los mais atraentes, usando propriedades como border-radius, padding e font-weight:
button {
background-color: green;
color: white;
}
4) Personalizando a página com CSS
Imagine que você está trabalhando em um projeto web e chegou o momento de dar vida à sua página com cores, formas e estilos. Sua tarefa é criar um arquivo CSS para estilizar uma página HTML simples, a qual contém um cabeçalho, um parágrafo e um rodapé. Use seu conhecimento para definir as cores do texto e do fundo.
background-color: gray;
color: white;
}
5) Aplicando estilos com CSS
Agora, vamos um pouco além. Você precisa criar três arquivos CSS diferentes, cada um com um estilo único, para o mesmo arquivo HTML. Isso demonstrará como o CSS pode drasticamente mudar a aparência de uma página sem alterar o HTML. Crie estilos variados para os elementos da página - um arquivo com um estilo formal e elegante, outro com um estilo colorido e divertido, e um terceiro com um visual minimalista e limpo.
**style.css
background-color: white;
color: black;
}
**style1.css
body{
background-color: yellow;
color: blue;
}
**style2.css
``` body{
background-color: black;
color: white;
}
```
6) Personalizando Links
A última tarefa é estilizar os links na página. Você deverá modificar a aparência dos links para que se destaquem do fundo e do texto. Utilize as propriedades CSS, como colorpara personalizá-los, seguindo as diretrizes do design fornecido no Figma.
a {
color: red;
}
