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).
Figure 3-1, the result of the last chapter’s coding, is not exactly attractive.
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, stylesheets should go into the public/stylesheets directory. We’ll call
Example 3-1 hello.css. To link it to the document, we’ll
need to add a link element in the document’s head, as shown in Example 3-2. (You can find all
of these files in ch03/hello004.)
Example 3-2. The Hello message with a hardcoded stylesheet link
<html> <head><title><%=h @message %> </title><link href="/stylesheets/hello.css" media="screen"rel="Stylesheet" type="text/css" /></head> <body> <h1><%=h @message %></h1> <p>This is a greeting from app/views/hello/index.html.erb</p> <% for i in 1..@count %> <p><%=h @bonus %></p> <% end %> </body> </html>
Don’t include the public/ part
in the href attribute, or Rails won’t find the right thing to send. Rails does
provide a more automatic way to do this: stylesheet_link_tag. Instead of the link
element shown in Example 3-2, you can just
write:
<%= stylesheet_link_tag 'hello' %>
When Rails processes the document, it will convert that into:
<link href="/stylesheets/hello.css?1185389385" media="screen" rel="Stylesheet" type="text/css" />
Note
The query string on the href
is meant to change regularly in development mode, reducing the problem
of your getting stuck with an old stylesheet in your web browser’s
cache and making it hard to see recent changes to the
stylesheet.
If that isn’t quite what you had in mind, you can pass stylesheet_link_tag more detailed parameters:
<%= stylesheet_link_tag:media => "all", :type => "text/css",:href => "/stylesheets/hello.css" %>
This will produce:
<link href="/stylesheets/hello.css" media="all" rel="Stylesheet" type="text/css" />
What happened there? What are all of those strange things with
colons in front and => arrows behind? They’re named parameters for the stylesheet_link_tag method. The names with
colons in front of them are called symbols,
which is a bit confusing.
It’s easiest to read the colon as meaning “the thing named” and
the => as “has the value of.” This
means that the thing named media has
the value of all, the thing named
type has the value of text/css, and so on. The stylesheet_link_tag method assembles all of
these pieces to create the final link
element. (And when you provide an href parameter, it overrides the name that was
the first, unnamed parameter. This method is a bit messy that
way.)
You can certainly create your own link elements if you prefer. The code approach
may be useful for cases where you want to let Rails do the work,
especially if, for example, your application is giving users a choice
among a number of stylesheets.
The result, combining the HTML generated by the view with the newly linked stylesheet, is shown in Figure 3-2. It’s not beautiful, but you now have control over styles.
