Skip to main content

Posts

Showing posts with the label hr style

Project Study: Detail Steps to Style Your Own Blog Exercise

At the end of CSS course section study, the instructor assigned us a fun blog exercise. We are going to create a simple blog and use relevant CSS element and Box model to style the blog like this: The Hints of this exercise: there is a gray border around the body, border size is 20px, border color: #bdc3c7 date color: #bdc3c7 H2 color: #2c3e50 Text Font: source sans pro Date Text: All Uppercase Letter-spacing on Date A Horizontal line between posts (add <hr> element on HTML) Now Let's start! Step One: Create a HTML page I create a simple blog page include two dates and two articles. I copied some paragraphs from my old digital analysis post .  The page only has text, and it doesn't look very attractive.  Step Two: Style Your Body I start to style the whole page body by adding a border . Since the instructor told us the border value, I just put the number in the CSS. The Outcome: We have the border around the body, but ...