Quick Styles

Premium Content - Free Preview

This tutorial isn't about design, but you should know how to use CSS within a Rails application. See the CSS tutorial for more.

Your application's stylesheets are located in app/assets/stylesheets, so open that up in your sidebar navigation. Notice the filenames end with scss. This means the files use SCSS (a.k.a. Sass), which is a variant of CSS that comes with some extra features. Rails automatically converts these files into CSS so browsers can use them. SCSS also lets you write normal CSS, so you don't need to worry about its extra features!

Filenames in Rails

The filename ending (or "extension") tells you what kind of file something is. In Rails, files can have two (or more) endings for different stages of the file. The last ending is pre-processed by Rails to create the a final version of the file that is sent to users. SCSS files turn into CSS, Coffeescript files turn into Javascript, and html.erb files turn into HTML. Refer back to The Layers of Web Development for more.

Open up application.css and look at the top. This file uses a special syntax to declare all the CSS that Rails will include with the web pages of the site.
require_tree . means it includes all the CSS files in this folder.
require_self includes CSS from this page itself, which will take precedence over styles defined elsewhere.

You shouldn't use this page for all your CSS, but it's OK to add a few application-wide styles here. Sites often have navigation links on top of the page, separated from the rest of the page. Let's add some CSS for a navbar class:


 * ....

.navbar {
    padding: 8px;
    border-bottom: solid;

Now let's create the actual navbar. Open up application.html.erb and add a link to your home page so it shows up on the top of the page. Create an actual HTML <a> link (you'll soon see how Rails lets you create such links with Ruby). Put the HTML link inside a <header> marked with a the navbar class.

End of Free Content Preview. Please Sign in or Sign up to buy premium content.

Contact Us
Sign in or email us at [email protected]