Note that the CSS in Listing 5.5 has a consistent form. In general, CSS rules refer either to a class, an id, an HTML tag, or some combination thereof, followed by a list of styling commands. For example,

puts 60 pixels of padding at the top of the page. Because of the navbar-fixed-top class in the header tag, Bootstrap fixes the navigation bar to the top of the page, so the padding serves to separate the main text from the navigation. Meanwhile, the CSS in the rule

associates the center class with the text-align: center property. In other words, the dot . in .center indicates that the rule styles a class. (As we’ll see in Listing 5.7, the pound sign # identifies a rule to style a CSS id.) This means that elements inside any tag (such as a div) with class center will be centered on the page. (We saw an example of this class in Listing 5.2.)

                  Although Bootstrap comes with CSS rules for nice typography, we’ll also add some custom rules for the appearance of the text on our site, as shown in Listing 5.6. (Not all of these rules apply to the Home page, but each rule here will be used at some point in the sample application.) The result of Listing 5.6 is shown in Figure 5.5.  

Listing 5.6 Adding CSS for nice typography.
app/assets/stylesheets/custom.css.scss

Finally, we’ll add some rules to style the site’s logo, which simply consists of the text ‘‘sample app.’’ The CSS in Listing 5.7 converts the text to uppercase and modifies its size, color, and placement. (We’ve used a CSS id because we expect the site logo to appear on the page only once, but you could use a class instead.)

Listing 5.7 Adding CSS for the site logo.
app/assets/stylesheets/custom.css.scss