How to Use CSS with a Ruby on Rails Application

How do I use CSS with a ruby on rails application?

Put the CSS files in public/stylesheets and then use:

<%= stylesheet_link_tag "filename" %>

to link to the stylesheet in your layouts or erb files in your views.

Similarly you put images in public/images and javascript files in public/javascripts.

How to implement custom css in Ruby on Rails application?

You could implement customer css in Ruby on Rails application. For example, you could change a color of the texts or the links, or the font sizes regardless of the first or the second approach(see below)

the first approach:

using import statements in application.scss:

    @import "bootstrap-sprockets";
    @import "bootstrap";
    @import "custom";
    @import "styles";

the second approach:

   a) using import statements in custom.scss :
      @import "bootstrap-sprockets";
      @import "bootstrap";

   b) using statements as below in the application.scss:
         *= require_tree .
         *= require_self

You should not mix up the first and the second approach.

    You could not change hover as you would  like because
    it need to be to complied with bootstrap settings.
    For example, changing hover to green or red produces error.
    So, I ended up using the grey-darker color(see below) instead.
    You could override bootstrap but it is considered as the
    bad idea. 


    examples of changing  formatting:

        h1.green-text { color: green; font-size: 10em; }

        <h1 class="green-text">This text is very large and green
        </h1>


        a {
         color: green;
         &:hover {
             color: $gray-darker;
           }

         }

Unable to use css classes in Ruby on Rails project

If you want to declare a css class for the submit_tag you can do it using :class => "class_name", or better if it would be like class: "class_name".

So you could try with:

<%= submit_tag(:Login), :class => "submit" %>
<%= submit_tag 'Login', class: "submit" %> <!-- recommended way -->

Ruby on Rails: How can I add a css file with rails project?

Rails is likely consolidating all your css files into one that it is calling assets/all.css

Consider using the free plug-ins firebug + firepath to further characterize the problem. This common combo of tools will help you to interrogate web page elements and see the css that is contributing to their display.

How to apply css Styling in Ruby on Rails HTML page?

You have to put the class behind a comma

<%= text_field 'books' :name, class:"form-control mb-4 col-10", placeholder="Patient name" %>

---

Related Topics