How to load CSS in a specific part of a Shopify theme?

Question

I'm trying to create another section and apply CSS from the assets folder. But when I put {{ 'style-section-block.css' | asset url | stylesheet_tag }} to the page where I want to apply the CSS, it also affects the other sections, even though I only Put in the parts I want to change.

I want to be able to edit part of a page

Answer 1

If you want to apply a specific section of CSS, first add a unique class or ID to the section you want to style. After using this unique class or ID in your CSS file, you can style the section. Example is

<div class="my-section">
  <!-- section content -->
</div>

"my-section" is the unique class name of the section. You can use the class name to add styles to a section.

.my-section {
      font-size: 24px;      
    }

Based on Shopify themes. You can conditionally use CSS files based on the current page handle or page template. From my idea, you can do this "template" or "page.handle" variable in your theme's "layout" file. I mean the "theme.liquid" file. You can add the following code to the "head" section of your "layout" file.

{% if template contains 'your-specific-template' or page.handle == 'your-specific-page-handle' %}
  {{ 'style-section-block.css' | asset_url | stylesheet_tag }}
{% endif %}

Replace "your specific template" with your template name, or "your specific page handle" with your page handle name. And remove CSS links from other sections.