Advanced Styling Tools and Techniques

Basic Styling Tools and Techniques

It is best to try to first see if you can use any of Corsbook’s existing styling and formatting tools. While editing a course or lesson, you should fully explore the editing toolbar above the content entry field. You can see the function of each tool by hovering over its icon. There are tools for formatting text as headings, with bold and italics, superscript and subscript and with color. There are several indentation and alignment tools. There is a special character menu, and tools for tables, list, links and code. There is a keyboard shortcuts menu with even more options.

Text Mode—Your Doorway to Advanced Styling

Above the content entry field, you can see two editing mode tabs: Visual and Text. You have likely only been working in Visual mode. Text mode is ultimately more powerful, but more challenging to understand and use. Open up one of your more complicated lessons in a new tab or window. Click on the Text tab and examine the contents (but don’t change anything). You might see styling tags such as h2, and  . These are HTML content tags. You might also see something like span style=”background-color: #ffcc99;”. This is CSS styling code. CSS stands for Cascading Style Sheets. (See Further Reading below for more information about CSS).

While in Text mode, You can use snippets of CSS code to add styling to your content. You can just use the suggested code below. Or, if you want to write your own CSS code, see Further Reading below. Beware that not all CSS code will work in Corsbook, so test your code in Preview before publishing it. Also, you will need to use CSS inline styling (which is the kind you see in the Text tab mode).

Classes

Classes are a CSS approach to categorize styling. You should enclose them in html tags, such as division <div> or paragraph <p> tags. For example, to style a division, you would enter <div class=”box-gray-w-border”> Your content…<div> in Text mode. Always make sure to enter the closing tag.

Boxes

To create boxes, you can use any of the following snippets. For example to style a gray box with a border, enter <p class=”box-gray-w-border”>Your paragraph.</p>. You have the following choices:

Boxes With Borders

class=”box-gray-w-border”

class=”box-lavender-w-border”

class=”box-orange-w-border”

Boxes Without Borders

class=”box-gray”

class=”box-lavender”

class=”box-blue”

class=”box-yellow”

class=”box-orange”

Authoring With Corsbook