1 – Crie 6 parágrafos. Entre no site Lorem Ipsum e gere-os.
2 – Formate o primeiro parágrafo utilizando classe, texto com cor azul,
justificado e fonte do tipo cursive.
3 – Formate o segundo parágrafo utilizando classe, texto com cor vermelha,
borda preta, alinhado a direita e tamanho 14pt.
4 – Formate o terceiro parágrafo utilizando id, texto com cor rosa, borda
azul, justificado e fonte do tipo fantasy, Arial e cursive, tamanho 12pt.
5 – Formate o quarto parágrafo utilizando id, texto com cor azul,
alinhado a esquerda e fonte do tipo Times new Roman.
6 – Formate o quinto parágrafo utilizando classe, borda vermelha, e texto
justificado. Altere a borda utilizando o atributo border-style, pesquise quais
os tipos de bordas existem e escolha uma que lhe agrade.
7 – Formate o sexto parágrafo da maneira que quiser utilizando id.
8 – Altere todos os h1 para ficar com a cor vermelha e centralizado.
Soluções para a tarefa
Resposta:
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.first-paragraph {
color: blue;
}
.second-paragraph {
color: red;
font-size: 14px;
}
#third-paragraph {
color: pink;
border: 1px solid blue;
text-align: justify;
font-family: fantasy, Arial, cursive;
font-size: 12px;
}
#fourth-paragraph {
color: blue;
font-family: 'Times New Roman';
text-align: left;
}
.fifth-paragraph {
border: 1px solid red;
border-style: dotted;
}
#sixth-paragraph {
font-weight: bold;
}
h1 {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>first-paragraph</h1>
<p class="first-paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit,
nibh at tempor scelerisque, nibh erat fermentum elit, eu blandit ipsum
augue ut lacus. Aliquam aliquam leo vitae interdum pretium. Sed quis
efficitur orci. Suspendisse pellentesque vel libero eu dapibus. Etiam
luctus quis tellus quis vestibulum. Donec lacinia maximus lacus, in ornare
nisl egestas quis. Curabitur hendrerit sem eget fringilla faucibus.
Phasellus scelerisque, velit non blandit mattis, mi urna sodales tellus,
vel facilisis dui sem ut ex.
</p>
<h1>second-paragraph</h1>
<p class="second-paragraph">
Aenean lorem erat, facilisis quis nulla sed, iaculis placerat quam. Sed
consectetur, odio posuere euismod accumsan, nisi dolor eleifend libero,
quis dignissim sapien neque et velit. Morbi quis condimentum neque. Nunc
vulputate enim quis massa lacinia, at hendrerit ex malesuada. In sed
ornare arcu. Proin lobortis risus magna, eu ultrices diam ultricies vel.
Phasellus viverra libero in erat lobortis, at blandit metus semper.
Curabitur cursus eros ut nisi bibendum, ac cursus nibh vehicula. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Sed in velit
sagittis, feugiat nunc sed, ornare ante. Vivamus vitae metus ac nulla
ultricies posuere. Donec maximus mauris quis arcu sollicitudin aliquet.
Maecenas imperdiet venenatis augue, et suscipit massa malesuada quis.
Nulla vitae est ac ligula egestas maximus. Pellentesque eleifend posuere
felis, vel sodales augue congue in. Interdum et malesuada fames ac ante
ipsum primis in faucibus.
</p>
<h1>third-paragraph</h1>
<p id="third-paragraph">
Donec accumsan vel libero id consequat. Phasellus cursus nisi mauris, sit
amet venenatis lacus venenatis ut. Sed condimentum enim et purus lobortis
facilisis. Proin aliquet vehicula ornare. Nullam id luctus lectus. Nunc ut
quam dictum, lobortis libero vitae, tristique mauris. Morbi suscipit
euismod purus ut venenatis. Vestibulum lobortis ex ac vulputate convallis.
Integer mollis, lacus eu eleifend elementum, ex libero condimentum tortor,
eget malesuada purus nisl in nisl. Proin egestas vulputate nisi sit amet
faucibus. In fringilla iaculis sem sit amet vulputate.
</p>
<h1>fourth-paragraph</h1>
<p id="fourth-paragraph">
Nam ligula nisi, fermentum sed felis id, ornare pellentesque quam. Duis
accumsan odio at auctor aliquam. Integer tempor eleifend commodo. Nunc in
urna enim. Donec sodales tellus eget urna fringilla, et dictum mi egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae
sapien accumsan velit efficitur imperdiet fermentum a diam. Pellentesque
in convallis velit. Cras sed quam porttitor ipsum sollicitudin efficitur.
Suspendisse non elit tellus. Ut auctor est odio, ut vehicula augue
suscipit laoreet. Cras et ex sagittis lacus vehicula accumsan.
</p>
<h1>fifth-pagraph</h1>
<p class="fifth-pagraph">
Vivamus non gravida nunc. Ut ornare dolor a justo ullamcorper mollis.
Proin mollis ultricies lectus non dictum. Quisque fermentum porta lectus
eu interdum. Nulla tempor auctor eros, a iaculis orci molestie eget.
Suspendisse vitae velit sed sem viverra bibendum. Cras efficitur ex a est
tempor, vitae consequat ex imperdiet.
</p>
<h1>sixth-paragraph</h1>
<p id="sixth-paragraph">
Aliquam faucibus ante id facilisis finibus. Praesent et dui quis velit
eleifend laoreet id ultricies diam. Integer nec nibh sollicitudin,
vehicula ipsum et, egestas augue. Nulla vel arcu mauris. Ut vitae rhoncus
risus. Curabitur condimentum, sapien id ultricies ultrices, tellus felis
eleifend ipsum, vel egestas nisl arcu eu neque. Integer sit amet efficitur
sapien, et venenatis nisi. Ut ac dui fringilla, rutrum tortor ac, faucibus
est. Praesent commodo enim at turpis semper maximus sit amet sit amet
nisi. Nunc porta sem sed quam pulvinar, id molestie augue congue.
</p>
</body>
</html>
Explicação:
O código foi feito na mesma página, para fazer extrair a estilização crie um arquivo style.css, recorte e cole toda a parte de dentro da tag no head <style></style> e cole no arquivo, posteriormente link o arquivo no head.
<link rel="stylesheet" href="style.css">
Os dois arquivos devem estar na mesma pasta.