Making Things Prettier

Step 1: In your styles folder, add a new file named blog.css (or whatever you want to call it).

Step 2: In the blog.css file, add some styling for the <h1> and <h4> tags that appear within the .row-content sections.

You should get rid of some of the space under the heading a.k.a the <h1> tag. After that, totally remove the margins from the subheadings a.k.a the <h4> tags used for the date and post tags.

Step 3: Link the new stylesheet to your blog.html file, this way it can be used for your page.

The results so far :D

Step 4: Next you will make the tags appear less in your face. To style the tags, you need to add a class to the HTML element that contains them. In the JavaScript blog.html create a line to add the .tags CSS class to the element (line 83).

Step 5: In your blog.css add a section for your .tags class. Change the font-weight to normal, the style to italic and the color to lightgray

The results as of now.

Step 6: Currently, the font doesn’t look good in the dark rows. You should fix this by adding some CSS to make the tags, that are only in the even rows, slightly darker.

The final final result.
Like what you read? Give Rose Pacheco-Campbell a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.