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, 2006).
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 ...
Get Learning Rails: Live Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.