Learning Rails 3

Chapter 3. Adding Web Style

The application presented in Chapter 2 is pretty appalling, visually. You’re not likely to want to present pages that look like that to your visitors, unless they’re fond of the early 1990s retro look. Rails provides a number of features that will help you make your views present results that look the way you think they should look, and do so consistently.

Note

This chapter will explore Rails features for supporting CSS and HTML, but it can’t be an HTML or CSS tutorial. If you need one of those, try Jennifer Niederst Robbins’ Learning Web Design (O’Reilly, 2007) or David Sawyer McFarland’s CSS: The Missing Manual (O’Reilly, 2009).

I Want My CSS!

Figure 3-1, the result of the last chapter’s coding, is not exactly attractive.

Figure 3-1. The hello page after the loop executes

Even this fairly hopeless page, however, can be improved with the bit of CSS shown in Example 3-1.

Example 3-1. A simple stylesheet for a simple page

body { font-family:sans-serif;
  }

h1 {font-family:serif;
  font-size: 24pt;
   font-weight: bold;
   color:#F00 ;
  }

Better CSS would of course be a good idea, but this will get things started. We could put this stylesheet right into the index.html.erb file as an internal style element, but it’s usually easier to manage external stylesheets kept in separate files. As noted earlier, though, Rails has its own sense of where files should go. In this case,