Time for action – enhancing the content section appearance with CSS
Perform the following steps to style the blog content:
Add whitespace on all sides of the content section with
padding
andmargin
, as follows.blog-content { padding: 15px; margin-bottom: 30px; }
Separate each blog post with some whitespace and borderline, as follows:
.post { margin-bottom: 60px; padding-bottom: 60px; border-bottom: 1px solid #ddd; }
Align the title to the center, adjust the title font size a little, and change the color with the following style rules:
.post-title { font-size: 36px; text-align: center; margin-top: 0; } .post-title a { color: #333; } .post-title a:hover { color: #3498db; }
Below the title, we have
post-meta
, which consists of the post author name and the post publishing date. Similar to the title, we also adjust the font size and the whitespace, and change the font color, as follows:.post-meta { font-size: 18px; margin: 20px 0 0; text-align: center; color: #999; } .post...