Boa noite.
Seguem resoluções propostas para os itens.
- Criando e linkando o arquivo CSS
HTML:
<!DOCTYPE html>
<head>
<title>Exercício Aula 8 - Desafio 1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Desafio 1 - Exercício Aula 8.</p>
</body>
</html>
CSS: ainda sem definir estilo específico.
body{
}
- Definindo estilos básicos
body{
background-color:black;
color: white;
}
- Estilizando com cores e formatos
HTML:
<!DOCTYPE html>
<head>
<title>Exercicio Aula 8 - Desafio 3</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<p>Desafio 3 - Exercicio Aula 8.</p>
<h1>Aplicando CSS</h1>
<button>Botao Exemplo</button>
</body>
</html>
CSS:
body{
background-color:black;
color: white;
font-style: italic;
font-family:'Times New Roman', Times, serif;
}
.button{
background-color:brown;
border:rgb(from color r g b);
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.h1{
color: white;
font-style:normal;
font-family:Arial, Helvetica, sans-serif;
}
- Personalizando a página com CSS
HTML:
<!DOCTYPE html>
<head>
<title>Exercicio Aula 8 - Desafio 4</title>
<link rel="stylesheet" href="style3.css">
</head>
<body>
<h1>Titulo da Pagina</h1>
<p>Desafio 4 - Exercicio Aula 8.</p>
<footer>Rodape da Pagina</footer>
</body>
</html>
CSS:
body{
background-color:black;
color: white;
font-style: italic;
font-family:'Times New Roman', Times, serif;
}
.h{
color: white;
font-style:italic;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}
.p{
color: white;
font-style:normal;
font-family:Arial, Helvetica, sans-serif;
}
.footer{
color: white;
font-style:inherit;
font-family:Georgia, 'Times New Roman', Times, serif;
}
- Aplicando estilos com CSS
HTML: são 3 possibilidades de arquivos css. No caso abaixo (exemplo), temos uma delas aplicada.
<!DOCTYPE html>
<head>
<title>Exercicio Aula 8 - Desafio 4</title>
<link rel="stylesheet" href="style5_3.css">
</head>
<body>
<h1>Titulo da Pagina</h1>
<p>Desafio 4 - Exercicio Aula 8.</p>
<footer>Rodape da Pagina</footer>
</body>
</html>
CSS: conforme requisitado no exercício, temos 3 tipos de css possíveis.
Tipo 1:
body{
background-color: blue;
color: yellow;
}
Tipo 2:
body{
background-color: black;
color: white;
}
Tipo 3:
body{
background-color: black;
color: white;
}
- Personalizando Links
a {
color: rgb(25, 114, 202);
}
Obrigado!
