Rails: Up and Running, 2nd Edition

Stylesheets

Currently, to change the styling of the application, you have to change each individual HTML element. If you’ve used much HTML, you know that our current design will make design work tedious and error prone. Before we get too far along in beautifying our Photo Share application, we should start using stylesheets to keep all styling in one place. First, we’ll create an overall application stylesheet where we will move the styles for our navigation bar and set a background color for all pages. Then, we’ll create a special stylesheet for specifying styles for our photos and thumbnails.

Rails creates a public/stylesheets/scaffold.css file that contains the basic styling used by generated scaffolding code. Let’s use this as a starting point for our application’s overall stylesheet. Copy the file public/stylesheets/scaffold.css and name this copy public/stylesheets/application.css.

First, change the background color to a very light gray by adding background: #eee; to the section starting body, p, ol, ul, td {. Then, add a .navbar section to style the navigation bar. When you’re done, the beginning of application.css should look like this:

body { background-color: #fff; color: #333; }

body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   13px;
  line-height: 18px;
	background: #eee;
}

.navbar {
	padding: 7px;
	padding-bottom: 12px;
	margin-bottom: 20px;
	background-color: LightBlue;
}

pre {
...

Next, edit the standard layout file (app/views/layouts/application.html.erb ...