Adding CSS/JS to pages

Adding your own CSS or JS to every or specific page can also be done through a layout XML file. The source of a file that you want to include can come from the following:

• An external source hosted remotely

• Module-specific, which is mainly used by JavaScript

• Theme-specific, which is mainly used when adding CSS but can also be used to add custom JavaScript

Getting ready

In order to include CSS or JavaScript to a page, you first need to know where you want to include your files and where the file is located that you want to include. In this recipe, we will see how to include both an external CSS and JavaScript file and a theme JavaScript and CSS file.

How to do it…

This recipe is based on the theme created in the Creating a new theme recipe of this chapter.

1. To add a new source (CSS or JS) to all pages, the configuration is done through the default_head_blocks.xml file. It is also possible to add it to a single page only through the layout file for that layout handle:

   app/design...