To Examples

Styles Example

Directions

  1. Create a new Rails project named Styles.
  2. Generate a controller named Inline with a view named page1.
  3. Source code for Styles/app/views/inline/page1.html.erb:
    <h1>Styles Example</h1>
<h2>Inline Controller</h2>
<p style="font: normal 400% Arial; color: maroon;">
   This is a test.
</p>
  4. Remove this line from the file Styles/app/views/layouts/application.html.erb:
    <%= javascript_include_tag 'application', 
   'data-turbolinks-track' => true %>
  5. Generate a controller named DocLevel with a view named page2.
  6. Source code for Styles/app/views/doc_level/page2.html.erb:
    <h1>Styles Example</h1>
<h2>DocLevel Controller</h2>
<p>This is a test.</p>
  7. Create the file Styles/app/views/layouts/doc_level.html.erb and add to it this content:
    <!DOCTYPE html>
<html>
<head>
  <title>Styles</title>
  <%= stylesheet_link_tag 'application', media: 'all', 
     'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <style>
  h1, h2 { font-family: Arial; }
  p { font: normal 400% Arial; color: maroon; }
  </style>
</head>
<body>

<%= yield %>

</body>
</html>
  8. Generate a controller named External with a view named page3.
  9. Source code for Styles/app/views/external/page3.html.erb:
    <h1>Styles Example</h1>
<h2>External Controller</h2>
<p>This is a test.</p>
  10. Source code for Styles/app/assets/stylesheets/external.scss:
    h1, h2 { font-family: Verdana; }
p { font: normal 300% Verdana;
color: maroon; }
  11. View pages 1, 2, and 3 with these URLs:
    http://localhost:3000/inline/page1
http://localhost:3000/doc_level/page2
http://localhost:3000/external/page3