Skip to main content

Home / Web Content / Guide to web styling

Guide to web styling

The Cascade WYSIWYG text editor

The wysiwyg text editor is your main tool for creating and updating web content on our website. It is designed to give you a user-friendly way to create content that doesn't require extensive HTML5 knowledge. (HTML5 is the fifth revision of the Hyper-Text Markup Language. It is one of the core technologies that powers the web. Its primary purpose is to give meaning and structure to text)

However, some basic understanding of the foundational elements available in HTML5 is necessary in order to create well-crafted, semantic, and accessible web pages. This is important in achieving compliance with the Americans with Disabilities Act.

The editor will display the tags used at the cursor position at the bottom of the editing window.

If you choose, you can edit your content directly in HTML - click the "<>" icon (source code).

Warnings

While a WYSIWYG editor may look like something akin to Microsoft Word, it is important to note that it is not the same as desktop word processor. The editor translates typical text elements of a word processor into HTML code behind the scenes. Therefore, in some circumstances there may be content on the page that you can't see since it may not have a text equivalent.

(as an example, Enter does not create a new line. It creates a new paragraph block. (<p></p>) Creating a new line can be achieved by Shift + Return instead. (<br />)

Copy and Pasting

Because of the HTML code that is being generated in the background, you should be very careful when copy-and-pasting from another source (word, E-mail bodies, etc). In almost all cases, copy and pasting into the wysiwyg editor will not create proper html. At worst, the pasted content will contain "junk code" - html that is extra/unnecessary/incorrect added from the software you are copying from.

If you are uncomfortable verifying the results of your copy and paste in html, the best practice is to "Paste as Text" (available from the edit menu or using Ctrl/Cmd + Shift + v) and then manually adding the styling using the wysiwyg toolbar (or html). (This may still produce some unexpected results)

Basics of HTML5

HTML is a markup language. In other words, html is a system of annotating text in order to give it meaning, thus allowing web browsers and other technologies to display the text appropriately based on the text's function.

HTML is made up of "elements" that are defined using HTML tags. Most html tags have a start tag and and end tag, allowing you to put content into containers. Tags use text surrounded by angle brackets <tag-name>. The corresponding end tag will use the same tag name, but with an additional slash: </tag-name>

For example, one of the most common elements is the paragraph element. To specify that some text is a paragraph, use the paragraph tag: <p>

<p>This is a paragraph specified in HTML5</p>

Some HTML elements only require one tag (a "self completing" tag). One common example is the Line Break tag. <br />

Example:

<p>This is a paragraph.<br />This sentence starts on a new line</p>

All features of a web page should use the appropriate html element that is designed to describe that feature.

HTML Elements

Heading Levels

Heading levels work similarly to using heading levels in a word document. They provide an outline of the content of the page. Using heading levels correctly is important both for search engines accurately determining page content and to provide structure for screen readers and other assistive technologies.

HTML contains 6 heading levels: H1, H2, H3, H4, H5, and H6. You can access them in the editor through the "Formats" dropdown menu.

It is important that headings nest properly, and that heading levels aren't skipped. (i.e., going from heading 3 straight to heading 5)

Good:

<h3>Page Title</h3>
(content) <h4>Topic</h4>
(content)
<h5>Sub-Topic</h5>
(content)
<h4>Topic 2</h4>
(content)
<h5>Sub-topic</h5>
(content)
<h5>Sub-topic 2</h5>
(content)

Bad:

<h3>Page Title</h3>
<h4>Topic</h4>
<h2>Incorrect heading order!</h2>
<h4>Topic 2</h4>
<h6>Heading level 5 skipped!</h6>
Using headings in your pages

The page title is automatically set as heading 3. Therefore, you should only use Heading 4 as your primary topic header, with h5 and h6 used as necessary for subheadings.

It is important to note that headings have implicit styling attached to them (Font size, font weight, margins). However, headings must be used for page structure ONLY, and not as a shortcut to change font size. Please contact webmaster@grayson.edu if you require additional customization of your text.

Paragraph

The paragraph block element is precisely as it sounds: it specifies a paragraph. Paragraphs should focus on a unified topic or idea. In other words, don't put all your content in a single paragraph!

You can access the paragraph in the editor through the Formats dropdown menu, under "blocks"

<p>This is an example of a paragraph in html. All of this text will appear in one paragraph, and
will be separated from the next paragraph by a margin on the bottom.</p>
Lists

Lists are used for any listing of data on a web page. It is important to use the html elements for lists, rather than "faking" it with line breaks, as this supplies meaning to the list for assistive devices like screen readers.

There are two types of lists in html: ordered and unordered.

Ordered Lists

Ordered lists use sequential numbering for their elements: The numbers are added for you automatically, as in a word processor.

  1. Apples
  2. Oranges
  3. Bananas

They can be created using the "Numbered List", which also contains options for different numbering systems.

In HTML, lists are created using two sets of tags. <ol></ol> (ordered list) defines its contents as an ordered list, and <li></li> (list item) defines the text inside as a list item.

Example:

<ol>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Bananas</li>
</ol>
Unordered Lists

Unordered lists use a bullet point or some other text/graphical symbol to designate the list item.

  • Apples
  • Oranges
  • Bananas

You can create them using the "Bullet List" menu item in the editor. You can also select a different bullet from the dropdown menu.

In HTML, use the unordered list  (<ul></ul>) tags along with the list item (<li></li>) tags to generate the list.

<ul>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Bananas</li>
</ul>
Multilevel lists

You can create multilevel lists in the editor similar to using a word processor. When pressing "enter" to start a new list item, press Tab to indent over to create a new list. Shift-tab will reverse this process.

In HTML, you will create a nested structure, with a new list contained in the prior list item.

Example:

  1. Fruits
    1. Apples
    2. Oranges
    3. Bananas
  2. Beverages
    • Water
    • Juice
  3. Cheeses
    1. Brie
    2. Cheddar
    3. Pecorino Romano
<ol>
  <li>Fruits
  <ol style="list-style-type: lower-alpha;">
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
  </ol>
  </li>
  <li>Beverages
  <ul>
  <li>Water</li>
  <li>Juice</li>
  </ul>
  </li>
  <li>Cheeses
  <ol style="list-style-type: upper-alpha;">
  <li>Brie</li>
  <li>Cheddar</li>
  <li>Pecorino Romano</li>
  </ol>
  </li>
</ol>
Text Emphasis (Bold | Italics | Underline)

Textual elements like bold and italics are semantic elements: they add weight or emphasis to text.

Bold (<strong> tag)

Bold can be toggled using the bold menu item like in any other text editor.

However, note that behind the scenes the editor is wrapping your selected text in the strong html5 element. <strong></strong> This element is used to highlight important text.

<p>However, note that behind the scenes the editor is wrapping your selected text in the <strong>strong</strong> html5 element. This element is used to <strong>highlight important text.</strong></p>
Italics (Emphasis tag <em>)

Italics can be toggled using the italic menu item like in any other text editor.

Behind the scenes, this wraps the text in the emphasis element <em></em>. The emphasis is used on text that is meant to have emphasis. Screen readers may read this back with appropriate vocal emphasis.

This is an example of emphasis.

<p><em>This</em> is an example of emphasis.</p> 
Underline

While underline is available as an option in the text editor, you should rarely use it. Underlined content in an html document is typically associated with hyperlinks to other websites, and this is confusing. Due to the underline's strong associate with linking, HTML5 no longer contains an element that applies non-semantic underlines.

What about <b>, <u>, and <i>?

Those of you who may have had exposure to HTML in the past may remember using <b></b> to bold text, <u></u> to underline text, and <i></i> to italicize text.

These elements still exist in HTML5, but they are not mean to apply a visual styling to text. Rather, they have semantic meaning

  • <b>: Bring Attention To
    • Use the <b> for cases like keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced (but not including any special importance).<b>: The Bring Attention To element
  • <u>: Unarticulated Annotation Element
    • The HTML Unarticulated Annotation element (<u>) represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation...Valid use cases for the <u> element include annotating spelling errors, applying a proper name mark to denote proper names in Chinese text, and other forms of annotation.  - <u>: The Unarticulated Annotation (Underline) element
  •  <i>: Idiomatic Text element
    • The HTML Idiomatic Text element (<i>) represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. - <i>: The Idiomatic Text element
Hyperlinks (anchor element)

The anchor tag <a> is used to create clickable hyperlinks to other web pages.

To create a link in the wysiwyg editor, highlight your text and click the "Insert/Edit Link" button. To remove the link, select a link with your curser and use the "remove link" button.

You are presented several options to set in the link editor:

  1. Link Type
    • Choose Internal (on Grayson's website) or External (Other websites)
  2. Link Source
    • If an internal link, you can select a page from Cascade's file system. If external, you can supply the url here.
  3. Anchor
    • This adds an anchor link to the end of the url, which can be used to link to a certain position on the page. More information will be provided in a later article, you will be unlikely to need this.
  4. Text to Display
    • You can change the link text here
  5. Title
    • An optional item, this will create a tooltip displaying the title text when a user hovers their mouse over a link
  6. Target
    • if linking to an external source, you should use "new window" This will open the window in a new tab and is more secure. It is highly recommended to use this for all links
  7. Styling
    • CSS stlying classes can be selected here - no options are currently necessary for links.
Cascade CMS wysiwyg link editor
link creation interface
Links in HTML

Basic Links in HTML require the a tag, and setting the "href" attribute on the a tag.

<a href="https://grayson.edu">Grayson College Website</a>

In general, you should use the WYSIWYG editor to create internal links for links to grayson.edu websites. If you do happen to manually create links for internal sites, you should format your link as a relative url as opposed to an absolute url.

Absolute url: https://www.grayson.edu/registration-guide/index.html

Relative url: /registration-guide/index.html

Add the title of a link by setting the title element:

<a href="/registration-guide/index.html" title="Grayson Registration Guide">Grayson Registion Guide</a>

Set the target by adding the Target attribuite to the tag

<a href="/registration-guide/index.html" target="_blank">Grayson Registration Guide</a>
Best Practices

It is important that the text of the link be descriptive of the content of the link.

It is common to see link formulations such as : Click here for more info, or click here. This is not good accessibility practice and should be avoided. Better to use something like "Information about X"