Sometimes custom CSS styling is necessary to display a View as you intend. The CSS editor section, accessed through the Loop Output section, allows you to add this styling, which is loaded when that particular View is displayed.

When does it make sense to include the CSS in the View?

Including the CSS in the View is desirable when you want to:

  • edit specific styling without having to edit a CSS file
  • use specific CSS styling on different parts of your site that employ Views or Content Templates
  • export and import modules, including their styling, as easily as possible

When does it make sense to include the CSS in the theme and not in the View?

Including the CSS in the theme, and not in the View, is desirable when:

  • the design you are using is part of the theme and is not limited to a specific block of content
  • you want to store the entire CSS code in a single file (i.e., in your theme’s style.css file) so you can edit everything in one location

How to add custom CSS using the Views editing page

The CSS editor accepts CSS code exactly as it does when you write in a style.css file. For example, this line of CSS code will style an H3 tag, thereby producing links inside an H3 tag blue.

CSS code to style an h3 tag
h3 a { color: blue; }

It will style HTML elements such as this one:

Styled h3 tag

Further reading

If you are just beginning to use CSS or want to expand your knowledge of this style sheet language, many great learning resources are available online. The following are exceptional training materials that we recommend: