Applying CSS Classes

Site Studio, by default, applies font and paragraph settings directly (inline) to the text.

Alternatively, you can apply classes from a cascading style sheet to your text (and images). Using CSS classes, you can store all of your font and paragraph settings in one location and then apply those settings to your web page.

This saves you time, because rather than change the font and paragraph settings for each individual heading or paragraph, you can specify a class for each one. If you must change those settings, simply update the class.

To implement CSS classes, you insert a reference to your style sheet in the head of your page template. You can do this using a relative path, for example:

<link href="<!--$HttpRelativeWebRoot-->groups/public/documents/adacct/stylesheet.css" type="text/css" rel="stylesheet" />

Or, more typically, you put them in a fragment. Placing CSS references in a fragment does not expose the directory structure of your server.

Then, apply the class names from the style sheet to your text and graphics by editing the page template in Source view or by using the Properties pane in Design view.

Using the Properties Pane to Apply the Class "MyNewStyle."

The Site Assets pane in Designer can be very useful for adding, editing, and identifying the path to the Cascading Style Sheet in the content server (see Defining Site Assets).

Many of the fragments that come with Site Studio contain CSS files as an asset to the fragment (see Adding, Editing, and Deleting Fragment Assets). You can reference class names from those CSS files, too, if you like.

You may also want to make these classes available to contributors while working in the Contributor application. This helps you enforce consistency across the site and make site-wide style updates much easier.