How to use Plain CSS In CSS
While SCSS is generally preferred for its advanced features, you can also use plain CSS files.
1. Create CSS File: Create a new file with the .css extension in the app/assets/stylesheets directory (e.g., custom.css).
2. Write CSS Styles: Add your custom styles directly to the CSS file:
custom.css
body {
font-family: 'Arial', sans-serif;
background-color: #f8f9fa;
}
div {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.btn-primary {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}
3. Link CSS File: Link the CSS file in your application layout using the stylesheet_link_tag helper:
<%= stylesheet_link_tag ‘custom’, media: ‘all’, data: { turbolinks: false } %>
Below example shows the content of app/views/layouts/application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Rails App with Plain CSS</title>
<%= stylesheet_link_tag 'custom', media: 'all', data: { turbolinks: false } %>
</head>
<body>
<button class="btn-primary" >Click Me</button>
</body>
</html>
Output:
How to Add CSS in Ruby on Rails?
This article focuses on discussing how to add Cascading Style Sheets (CSS) in Ruby on Rails.
Table of Content
- Using SCSS
- Using Plain CSS
- Using Inline Styles
- Using External CSS Frameworks
- Comparison of Different Approaches
- Additional Considerations
- Conclusion
Contact Us