Applying Website Styling With CSS
Goal
The next step is to add styles to our site so it doesn't look like raw HTML. We will also provide the colors we want to see on the website.
We can use the following source (https://colorhunt.co/) to select the color palette we like most.
We have selected such a color palette:
Possible Prompt
Create a CSS stylesheet that can be applied to that HTML, ensuring that it includes styling elements and adheres to the following color palette: #32012F, #524C42, #E2DFD0, and #F97300. Write the complete CSS code to achieve this, incorporating best practices for a visually appealing design.
Result
Important: The only change we need to make in our code is to connect the CSS file to the HTML file in the head.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Blog</title>
<!-- Linking CSS file to HTML document -->
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<h1>Welcome to My Blog</h1>
</header>
<main>
<article>
<h2>Article 1: Exploring Nature</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, tortor non
ullamcorper commodo, justo libero maximus purus, vel pulvinar turpis quam vitae mi. Nullam
auctor, tortor id sagittis fermentum, leo lacus venenatis tortor, at tristique leo magna
in lorem.
</p>
<img src="nature.jpg" alt="Nature Image" />
<p>Category: Nature</p>
</article>
<article>
<h2>Article 2: Cooking Adventures</h2>
<p>
Phasellus rutrum tincidunt sapien, sed vestibulum velit vehicula nec. Sed pharetra dui in
fermentum sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas.
</p>
<img src="cooking.jpg" alt="Cooking Image" />
<p>Category: Cooking</p>
</article>
<article>
<h2>Article 3: Traveling Around the World</h2>
<p>
Nullam efficitur lacus nec urna fringilla, ut venenatis tortor lacinia. Duis vitae mauris
sed mi semper aliquet. Aenean vestibulum libero eget nibh malesuada, id luctus libero
pharetra. Fusce auctor mauris sed tristique efficitur.
</p>
<img src="travel.jpg" alt="Travel Image" />
<p>Category: Travel</p>
</article>
</main>
<footer>
<p>© 2024 My Blog. All rights reserved.</p>
</footer>
</body>
</html>
/* Reset default margin and padding */
body,
h1,
h2,
p,
img {
margin: 0;
padding: 0;
}
/* Apply font and background colors */
body {
font-family: Arial, sans-serif;
background-color: #e2dfd0;
color: #32012f;
}
/* Header styling */
header {
background-color: #524c42;
padding: 20px;
text-align: center;
}
/* Main content styling */
main {
padding: 20px;
}
/* Article styling */
article {
margin-bottom: 30px;
}
/* Article title styling */
article h2 {
Website State
Video Tutorial
Everything was clear?
Thanks for your feedback!
Section 4. Chapter 3
