Global styles allow you to control the default styling appearance and behavior of each type of element on your website (paragraph text, images, links, etc.)

For example, setting the style of your <H1> headers in the Global Styles Panel will change the appearance of every heading on your entire site -- and any new headings that you add in the future will automatically have the same styling applied by default.

The global styling can still be overridden, by selecting the element on the page and directly applying different styling on it. For text, you can override global styles by applying inline styling (directly selecting the text in the text element and then making changes.)

If you're new to the concepts of inheritance and inline styling, you might want to check out this article, which provides an overview and explains how each is represented in TIMES Sites.
​

For businesses with existing style guides, setting up global styles is a perfect project starting point; it will help ensure that the design of your site remains within your brand guidelines.

For new projects, we recommend setting up your global styles once you've made progress on your initial concept and homepage design, to make future page creation quick and easy.

Global styles can be defined on a per-device basis (desktop, tablet landscape, tablet portrait, smart phone) by changing between device modes. For example, you may wish to make your headers appear larger on desktop devices, or reduce the padding around paragraphs for users on mobile phones. This is a powerful tool for making your site responsive and usable at every screen width.

Open the Global Styles Panel by clicking the "Global Styles" button in the top toolbar, selecting it from the "Window" menu, or pressing shift-G on your keyboard.
​

Select an element type. On the left side of the panel is a list of all the kinds of elements that can be styled:

Note that many of these are different types of text tags. You can define these by editing the actual content of the text elements on your page. 

Select an attribute. Next to the list of elements is a set of tabs that allow you to choose the attribute you want to style:

Edit the styling. When you select the attribute that you want to edit, the rest of the panel will automatically display the styling controls for that attribute. For example, if you select "Dimensions", you'll see inputs that allow you to control height, width, padding, and margins:

Global styles can be defined on a per-device basis (desktop, tablet landscape, tablet portrait, smart phone) by changing between device modes. 

At the top right of the panel, you'll see a selector that you can use to choose your device mode:

By default, desktop mode is selected. To switch to a smaller device, you can click the device icon and choose between desktop, tablet landscape, tablet portrait, and phone portrait:

Whatever Global Styles you define will cascade downwards: they will apply to that screen width, and all sizes below it. For example, if you choose "Tablet Portrait" and decrease the size of a text heading, your change will apply to both "Tablet Portrait" and "Phone Portrait."

Typically, you'll want to define your Global Styles in desktop mode first, then switch to smaller device modes to make adjustments where appropriate. This process will allow you to ensure your site looks good on all screen widths.

At the top left of the panel, you'll see a toggle that will let you switch between "default" and "hover" modes:

Whatever Global Styles you define will apply only to the mode that's currently selected. Use this to set the default styling for elements on hover -- most commonly, you'll use this to set the global style for links.
​