Para as atividades 1 e 2, eu fiz a correlação com um link simples e um design em cascata base para o corpo do documento:
<link rel="stylesheet" href="style.css">
body {
background-color: indigo;
color: white;
}
Após elas, vieram as atividades 3, 4, 5 e 6, onde eu precisei recorrer à necessidade de criar uma multiplicidade de arquivos mais completos, e isso me levou a entender a importância de evitar qualquer tipo de formatação presente no HTML. Desde um style para uma div específica até um simples
, pode ser interessante naquele momento para aquele contexto, mas é algo que acaba comprometendo a separação de responsabilidades de forma coerente.
Vou deixar aqui um dos códigos CSS que montei, mas vale ressaltar que é um mundo em que, quanto mais você se aprofunda, mais ferramental você ganha, o que possibilita uma melhora profunda nos seus designs baseados em contextos. Acredito que desenvolvimento web seja sobre você entender a requisição de design, se organizar estruturalmente com o HTML para uma marcação coerente e de fácil manutenção e, por fim, ter o ferramental CSS necessário que possibilite alcançar aquele design referenciado:
@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Headline:wght@200..700&display=swap');
body {
background-color: rgb(7, 9, 10);
color: white;
font-family: "Stack Sans Headline", sans-serif;
}
body main h1 {
font-size: 28px;
font-weight: bold;
}
body main h2 {
font-size: 20px;
font-weight: lighter;
font-style: italic;
}
body main h2 strong {
font-weight: bold;
}
body main img {
width: 113px;
height: 170px;
border-radius: 10px;
}
body main p {
font-size: 14px;
font-weight: lighter;
}
body footer a {
color: rgb(21, 21, 100);
border-width: 2cap;
font-size: 15px;
font-style: italic;
}
