Exercício 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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfólio de Guilherme de Freitas Santos</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="10061736.png" alt="Foto de indivíduo contente em programar">
</header>
<main>
<h1>Portfólio do desenvolvedor<strong> Guilherme de Freitas Santos</strong></h1>
<p> Olá, me chamo Guilherme ! Sejam bem-vindos ao meu portfólio ! Sou uma pessoa recém-formada do ensino médio, para ser mais específico, da Escola Estadual Frei Orlando, atualmente, eu tenho 87 anos. Eu já estou alguns meses na área de programação com a Alura, explorando e adquirindo habilidades que podem me ser úteis em minha futura carreira profissional e em projetos colaborativos ! Ademais, paralelamente ao curso, eu sou um futuro aluno da Faculdade Federal de Ouro Preto, onde eu estudarei engenharia da computação.
</p>
<a href="https://instagram.com/guifreitasz7">instagram</a>
<a href="https://github.com/Gui-alt-code ">Github</a>
<img src="1995515.png" alt="Foto de um indivíduo com os braços cruzados e um computador ao fundo">
</main>
<footer></footer>
</body>
</html>
Exercício 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á na cor indigo (entre o violeta e o azul) e o texto branco.body {
background-color: indigo;
color: white;
}
Exercício 3) 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: aquamarine
}
h1 {
color: white
}
button {
border-radius: 5px;
padding: 10px 20px;
font-weight: 300;
}
Exercício 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.
header {
background-color: gold;
color: aqua;
}
p {
background-color: gold;
color: mediumseagreen;
}
footer {
background-color: gold;
color: black;
}
Exercício 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.
# Arquivo style.css
body {
background-color: gold
}
# Arquivo estilo_colorido_e_divertido.css
body {
background-color: palevioletred;
color: turquoise;
}
# Arquivo estilo_minimalista_e_limpo.css
body {
background-color: white;
color: grey;
}
Exercício 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 {
background-color: blue;
color: black;
}
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!