#### CSS (styles.css)
css
/* Reset default margin and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Style the header */
header {
background-color: #f2f2f2;
padding: 1rem;
text-align: center;
}
/* Style the navigation menu */
nav ul {
list-style: none;
}
nav ul li {
display: inline;
margin: 0 1rem;
}
nav ul li a {
text-decoration: none;
color: #333;
}
/* Style the blog categories section */
.blog-categories {
margin: 2rem 0;
}
.blog-categories h2 {
text-align: center;
}
.blog-categories ul {
list-style: none;
text-align: center;
}
.blog-categories ul li {
margin: 1rem 0;
}
.blog-categories ul li a {
text-decoration: none;
color: #007bff;
}
/* Style the blog posts section */
.blog-posts {
display: flex;
justify-content: space-around;
margin: 2rem 0;
}
.blog-posts article {
flex: 0 1 45%;
padding: 1rem;
border: 1px solid #ccc;
border-radius: 5px;
}
/* Style the footer */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem;
}
This HTML and CSS code creates a simple blog layout with a navigation menu, categories section, blog posts section, and a footer. The CSS file styles the different sections of the blog to make it visually appealing and user-friendly.
**Keywords**: HTML, CSS, blog layout, blog categories, interactive website, web development, front-end design, responsive design.