title: For a Rails View *.html.erb : where can I place the style sheet?
body: <p>I have this file:  </p>
  
  <pre><code>app/views/listings/list.html.erb
  </code></pre>
  
  <p>in my rails project. 
  Here are the contents of the file:</p>
  
  <pre><code>&lt;h1&gt;This file is:"list.html.erb"&lt;/h1&gt;  
  
  &lt;!DOCTYPE html&gt;  
  &lt;html&gt;  
    &lt;head&gt;  
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;  
      &lt;style type="text/css"&gt;  
        html { height: 100% }  
        body { height: 100%; margin: 0; padding: 0 }  
        #map_canvas { height: 100% }  
      &lt;/style&gt;  
      &lt;script type="text/javascript"  
        src="http://maps.googleapis.com/maps/api/js?key=key&amp;sensor=false"&gt;  
      &lt;/script&gt;  
  
      &lt;%=javascript_include_tag 'application'%&gt;  
    &lt;/head&gt;  
    &lt;body onload="initialize()"&gt;  
      &lt;div id="map_canvas" style="width:80%; height:80%"&lt;/div&gt;    
      &lt;input type="button" onclick="getlistings();" value="Add Markers"&gt;   
      &lt;input type="button" onclick="clearMarkers();" value="Remove Markers"&gt;   
    &lt;/body&gt;  
  &lt;/html&gt;  
  </code></pre>
  
  <p>Id like to apply a style sheet to it. Where should I place the stylesheet? I tried placing the code in this file:</p>
  
  <pre><code>app/assets/stylesheets/listings.css.scss
  </code></pre>
  
  <p>But the style wasn't applied to the html file. Also do I need to change anything in my html view file to include the style sheet?</p>
  
  <p>This is the style sheet that resides at : "app/assets/stylesheets/listings.css.scss"</p>
  
  <pre><code>// Place all the styles related to the Listings controller here.  
  // They will automatically be included in application.css.  
  // You can use Sass (SCSS) here: http://sass-lang.com/  
  .listings  
  {  
    table tr td  
    {  
      padding: 5px;  
      vertical-align: top;  
    }  
  
  
  dt  
  {  
    color: #232;  
    font-weight: bold;  
    font-size: larger;  
  }  
  
  dd  
  {  
    margin: 0;  
  }  
  }  
  #map_canvas  
  {  
    width: 80%;  
    height: 80%;  
  }  
  </code></pre>
  
  <p>So wondering if anyone can give me a hand?</p>
  
  <p>Thanks<br>
  EDIT<br>
  So the application.html.erb file is fine, so is the application.css. I altered the list.html.erb file after reading the answer posted below.
  The new list.html.erb file is as follows:</p>
  
  <pre><code>&lt;h1&gt;Filename = list.html.erb&lt;/h1&gt;  
  
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;  
  &lt;style type="text/css"&gt;  
    html { height: 100% }  
    body { height: 100%; margin: 0; padding: 0 }  
    #map_canvas { height: 100% }   
  &lt;/style&gt;  
  &lt;script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIz&amp;sensor=false"&gt;  
  &lt;/script&gt;  
  &lt;%= stylesheet_link_tag 'application' %&gt;  
  &lt;%=javascript_include_tag 'application'%&gt;  
  </code></pre>
  
  <p>&lt;%= stylesheet_link_tag 'listings' %><br>
    <br>
      <br>
      <br>
      <br>
      </p>
  
  <p>Only issue is now, I want to take </p>
  
  <pre><code>&lt;style type="text/css"&gt;  
    html { height: 100% }  
    body { height: 100%; margin: 0; padding: 0 }  
    #map_canvas { height: 100% }  
  &lt;/style&gt;  
  </code></pre>
  
  <p>this part out from the list.html.erb and put it into the list.css.scss file. But when I do that the map_canvas disappears from the page, it doesnt show.</p>