1. Computing

Using Yahoo! UI to Give Your Blog That "Blog Look"

By

6 of 10

Adding Some CSS of Your Own
Using Yahoo! UI to Give Your Blog That

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;
}

©2014 About.com. All rights reserved.