A website's sylesheets contain the style definitions that determine the look and feel of page content. AR5's grid and theme generate stylesheets automatically which contain the majority of your website's CSS. Whatever is not contained in the theme and grid stylesheets can be found in the user-controlled stylesheets, which you can access from the design menu in the primary nav.
The stylesheets in the design menu contain styles for front-end modules, navigation menus, module styles, breakpoints, and more: there are several stylesheets that come with every AR5 site. If you're confident with CSS—or if you're curious and would like to experiment—you can edit an existing stylesheet, or you can create a new one. In general, you shouldn't need to create a new stylesheet, but if you do, you'll need to assign it in the admin area before it will take effect on your front-end site.
Module styles and other custom CSS can be included in the stylesheet called "custom styles." To edit this stylesheet or any other, navigate to it in the primary nav. Then, under the info tab, edit the card called "stylesheet."
If you make a mistake, or if you just want to review the changes that you've made, go to a stylesheet's history tab. There, you'll see a selection box with a number of times in it. These correspond to saved versions of the stylesheet. Select a time to see the version of the stylesheet that was saved at that time. At this point, you can click the green "restore" button, which will return the stylesheet to the selected version.
CSS in the user-controlled stylesheets takes precedence over CSS in the automatically-generated theme and grid stylesheets. We advise that you take care not to redefine styles found in the theme and grid stylesheets, because doing so will prevent the theme and grid from working as intended.
The latest update to AR5 is now here, bringing with it a number of improvements to our suite of tools for front-end design. Themes have been expanded to include more types of page content, and you can now create and define custom module styles that you can apply, on the fly, to modules on the page. Let's take a closer look.