- 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
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 {
background-color: indigo;
color: white;
}
- Estilizando com cores e formatos Você recebeu o desafio de dar vida a uma página web que atualmente tem apenas HTML. Sua tarefa é utilizar CSS para adicionar cores e formatos aos elementos da página, inspirando-se em um design específico fornecido no Figma. Foque em selecionar cores adequadas para os fundos, textos e bordas, além de aplicar estilos aos botões e cabeçalhos para torná-los visualmente atraentes. Você pode usar como referência essa tabela de nomes de cores.
body {
background-color: #000000;
h1 {
color: #F6F6F6;
}
button {
background-color: #22D4FD;
color: #000000;
}
}
- 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.
header {
background-color: lightblue;
color: white;
}
p {
color: darkgray;
}
footer {
background-color: gray;
color: white;
}
- 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. Elegante
body {
background-color: gray;
color: black;
}
Vibrante:
body {
background-color: blue;
h1 {
color: gold;
}
}
Minimalista:
body {
background-color: silver;
h1 {
color: black;
}
}
- 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: purple;
}
