Styles and Formats

 

Overview

The editor allows you to style content in many different ways: bolding text, creating lists, or aligning page elements. Using these tools provided by the editor is more of a "manual" means of styling. There are often times this kind of functionality is needed, but there are also times when you will want different pieces of content, maybe even on different pages, to have the same styling.

This, then, is the job of pre-defined formats and styles. By pre-defining what formats and styles can be used, as well as defining exactly how these are shown in the browser, a clean, consistent look can be obtained throughout your site.

Please note that you most likely cannot create and define your own custom styles. These styles are defined in your site's global CSS file, which you most likely do not have access to. The people who manage your web site's styling have most likely populated their CSS file with a basic collection of styles that they suggest you use.

Format and style may seem to be similar terms, and in some ways they are very alike, however, there are differences between them, at least when it comes to page editing in Campusuite.

When text is placed onto a page, there is special markup (called HTML and CSS) that is generated and applied to the text. Using the WYSIWYG editor and viewing pages in browsers, this code is hidden to the user. The browser will use this code to layout and change the appearance of a web page.

In short, formats define the kind of container (the hidden HTML) content is placed in. These containers not only hold content, but also define what kind of content they contain. Default styling can be attributed to these containers so that all the lists or paragraphs in the site are displayed the same.

Styles then define additional visual styling (the hidden CSS) of these elements. A paragraph format may define text that is so many points in size and that uses a certain font, but a style can be applied on top of that making the text a different color, or even applying styling that overrides what is already defined.

In a way, formats are more important than styles, as they not only style content but describe what it is. So, it is suggested that content be formatted properly. For example, make sure you use a heading format for title and headings rather than just bolding the text. (See the heading documentation for more information on this subject.) Styles should only be used as needed to further emphasis or draw focus to a piece of content.

 

Applying a Format

Formats, since they deal with the type of container that content is placed in can be applied to just about any kind of element on a page, whether it is text or even objects such as images. Despite this, however, depending on what a format is applied to, it may not have any effect on the content.

Take for instance an image that has been given a Heading 1 format. Since the image is not text, most of the styling associated with your Heading 1 will not be applied to an image (for instance, most headers are bolded, and it is impossible to bold an image). If, though, that format has styling applied to it that affects the flow of content, such as margin or padding, or even things like underlining and borders, it will be applied to that image, since those are all styles that are relevant to images. Usually it is not needed to apply formats to things other than text.

Also, unlike styles, a selection can only have one format applied to it. This helps keeps things simple, and from keeping the style of one format overriding the style of another.

  1. Click somewhere in the text that you wish to apply a format to. It is unnecessary to highlight the entire section of text. The editor uses the placement of hard breaks in your content to determine where in the text the format should start and end.
  2. In the Editor Toolbar, click the arrow on the Formats dropdown.
  3. Choose the desired format from the list.
  4. The editor immediately applies the format, thus possibly changing the look and feel of the content. Feel free to make this selection multiple times so you can determine which format works best. Since these changes are immediate, you can flip back and forth between different ones and compare them rather easily.

 

Removing a Format

In the editor, formats are never removed entirely from text. Since text must have some sort of container wrapped around it, "removing" a format really consists of applying a "default" format that results in the appearance of the normal text styling for your site.

You may notice in the Format dropdown of the Editor Toolbar a Normal and a Normal (div) format. When dealing with text, the Normal format should be selected to remove any special format applied to it. A Normal format will define the content to be a paragraph. The Normal (div) format will place the content in a generic container, which does not describe the kind of content properly. Usually, this Normal (div) format is used when a lot of custom styling is needing to be done.

  1. Click somewhere in the text that you wish to remove a format from. It is unnecessary to highlight the entire section of text.
  2. In the Editor Toolbar, click the arrow on the Formats dropdown.
  3. Choose the Normal format (for text, it is best to use the Normal format, and not the Normal (div) format; the difference will be explained later).
  4. The editor immediately applies the Normal format, which ultimately applies the most basic text formatting to the selection, based on your site's design.

 

Applying a Style

Styles can be applied to various kinds of elements and formats. How some styles are defined, though, they may be more fitting for certain elements or formats over others. To make your editing as efficient as possible, the Campusuite editor filters out some of the styles based upon what type of element is currently selected. For instance, if an image is selected, you may see styles listed in the Style dropdown that you do not see listed when you select something such as text.

Even if a style is usually not able to be applied to a certain element (such as an image), but that element resides in the selection you make (like if there is a small icon image embedded somewhere in a paragraph), applying a style to an outer element (such a the paragraph text) will ultimately be applied to the inner element (the icon) as well. Granted, some of the text styling in such a scenario may not be relevant to the image, and is ignored, but there may be some pieces of the style that will still be applied.

It is important to note that multiple styles can be applied to a selection or element on a page. Styles are not limited to the single selection that formats are.

  1. Click on the element, or highlight the text, that you wish to style. This selection does require you to highlight the area of content that you want styled. To select large portions of content quickly, such as a whole paragraph of text, try triple-clicking somewhere in the paragraph (not all browsers/operating systems support this).
  2. Click the arrow next to the Style dropdown.
  3. Choose the desired pre-set style from the list. The text for the items in the dropdown may give a quick preview of what the styling will do.
  4. The editor will immediately apply the style to your selection.

 

Removing a Style

If the styling you are trying to clear is rather complex in how it was applied, it may be easier to select an area of content that is larger than what actually has the style applied to it, apply the style to that selection, and then immediately remove it.

Depending on how styling was applied to a selection, and what types of elements are contained within a selection, you may need to touch up some areas by making other selections and removing styles as needed.

  1. Click on the element, or highlight the text, that you wish to remove a style from. This selection does require you to highlight the area of content that you want to alter the styling of. To select large portions of text quickly, try triple-clicking somewhere in the paragraph (not all browsers/operating systems support this).
  2. Click the arrow next to the Style dropdown.
  3. Choose the style you wish to remove. Styles that are applied to a selection should be marked in some way, such as with an icon next to the label, or even a border around the item in the list. If you select an item that is not marked, you will end up adding the style to the selection rather than removing it.
  4. The editor will immediately remove the styling from the selection.