Now it's time to start adding some CSS of your own design. This CSS will add formatting, color and the overall "blog look" to your page. To create your own stylesheet, create a new file in public/stylesheets called blog.css. Next, add a stylesheet tag to your blog layout file like the following.
<head>
<title>Posts: <%= controller.action_name %></title>
<%= stylesheet_link_tag
'http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css' %>
<%= stylesheet_link_tag
'http://yui.yahooapis.com/2.5.2/build/base/base-min.css' %>
<%= stylesheet_link_tag 'blog' %>
</head>
Now you'll want to add some statements to your new CSS file to add color and formatting to the blog page. The following example uses some muted blue colors and adds a bit of padding to the doc, bd and ft divs to prevent crowding.
#doc {
padding: 10px;
}
#hd h1 {
text-align: center;
font-size: 189%;
}
#bd {
background-color: LightSteelBlue;
padding: 10px;
}
#ft {
padding-top: 10px;
}
body {
background-color: LightSlateGrey;
}
