(Optional) Advanced Design Techniques Using HTML and CSS
Was this helpful?
Note: the IDEAS team doesn't provide tech support for custom HTML and CSS, but we know that some instructors already use this, so we have included this information as a resource.
If you are already comfortable editing HTML and CSS code, this section is for you. Here are instructor guides on how to access HTML Links to an external site. and which code is allowed Links to an external site. in Canvas.
Tips
- Before you edit the HTML code, copy the original code and save it in a a text editor like Notepad or TextEdit in case you need to revert back to the original.
- If the code you edited doesn't work and you need to restore a previous version of the page, go to the 3 dots (Options) next to the Edit button, then select View Page History.
Table of Contents with Links to Each Section
Help students find things quickly in long pages by inserting a table of contents with links to each section. For example, these links jump down to the sections below:
Floating Boxes
You may have noticed the floating box in the top right corner of this page that asks "Was this helpful?" This was created using HTML and CSS.
Floating boxes can be used for important reminders, links to resources, or to emphasize due dates.
Floating Boxes: Get the code here
The code below will produce a floating box with the title "Important Note." After you insert the code, you can edit the text and add links through the Canvas Rich Content Editor:
<div class="border border-trbl border-round" style="color: #edeeef; float: right; width: 270px; border: 2px solid #a2aaad; background-color: #f7f7f7; padding: 0 16px 8px 16px; margin: 0 0 10px 10px;">
<h3 style="color: #881c1c; text-align: center;"><strong><span style="font-family: 'trebuchet ms', geneva;">Important Note</span></strong></h3>
<p style="text-align: center;"><strong><span style="color: #000000;">Insert brief note</span></strong></p>
</div>
Accordion Menus
Here is an example of an accordion drop-down menu. Once you insert the code, you can edit the text and insert images from the Canvas Rich Content Editor. Learn how to insert an accordion menu and get the code here Links to an external site..
What is HTML?
HTML stands for Hypertext Markup Language. It is a standard markup language used to create web pages and applications.
What is CSS?
CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation and visual layout of HTML and other structured documents.
What does Div mean?
"Div" is a commonly used HTML element that stands for "division" or "divider". It is a container element that allows you to group related elements together and apply styles and formatting to them as a group.
Buttons
Buttons are a great way to help students navigate your course and find things quickly. In your Sandbox you have a variety of buttons that use images. The buttons here were created using code:
Home Modules Get Help with CanvasButtons: Get the code here
Maroon Button:
<strong><a class="btn btn-large btn-primary" href="https://your-URL-here">your-text-here</a>
Black Button:
<strong><a class="btn btn-large btn-info" href="https://your-URL-here">your-text-here</a>
Other Advanced Techniques
Check out the module "How to create interesting pages in Canvas" in Dr. Sean Nufer's course "How to Canvas." Dr. Nufer also has video tutorials on his website Links to an external site..