Exploring section-specific tags
While we can easily define styling or include the JavaScript code inside the theme's respective asset files, Shopify provides us with three types of tags that we can use to include CSS and JavaScript directly in the section file.
The stylesheet tag
Similar to the schema tag, the stylesheet tag is a Liquid tag that does not have any output on its own. It simply allows us to write CSS code inside the section files. Note that each section file can only contain a single stylesheet tag, which must stand on its own. It cannot be nested inside any other kind of Liquid tag:
{% stylesheet %}
{% endstylesheet %}
Although this might not look like a great idea at first, since we end up having CSS code spread over multiple files, Shopify will automatically collect all the CSS files from the different section files, combine them into one stylesheet file, and inject it into the theme file through the content_for_header global object.
Important note...
