Is there a way to apply unique CSS classes to specific tags within a common layout?
In my application.html.erb layout file, the application.css.scss is loaded using
<%= stylesheet_link_tag "application". . . %>
, which then includes all CSS files in the directory (including custom.css.scss).
I have four static pages and one common layout. However, I want the Home page to have different styling such as a full-page background and navigation with different colors.
This is what my application.html.erb layout looks like:
<DOCTYPE! html>
<html>
<head>
·
·
</head>
<body>
<header>
·
·
</header>
·
<%= yield %>
·
</body>
</html>
And here's my home.html.erb file:
<div>
This content is unique to the Home page
</div>
I'm looking for a way to add classes to the <body>
and <header>
tags specifically on the Home page only.
What would be the most effective approach to achieve this?
(I considered creating a separate layout for the Home page along with a dedicated CSS file, but I'm hoping there's a better solution available).