Recent updates
-
Lines With a Single Color and Style
Updated onArticleOn this first page, we'll provide examples of and code for one color and/or style horizontal lines that you can quickly and easily implement in your course. Keep in mind that horizontal rules are context-specific and should be guided by a good visual design plan. Use lines thoughtfully and consistently.
Gen3 Course Template Advanced HTML Elements Borders and Lines
-
Horizontal Lines With Multiple Colors and Styles
Updated onArticleOn this second page, we'll provide examples of and code for horizontal lines with multiple colors and/or styles applied to horizontal rule (<hr />) tags.
Gen3 Course Template Advanced HTML Elements Borders and Lines
-
Borders With Vertical and Horizontal Lines
Updated onArticleOn this page, we'll demonstrate how to use horizontal and vertical lines to create borders for a video iframe and text. The example code will give you an idea of how to combine multiple styles within one <div> tag to control margins, spacing, thickness, and color.
Gen3 Course Template Advanced HTML Elements Borders and Lines
-
Basic Borders and Line Properties
Updated onArticleIn this page of the borders and lines tutorial, we'll address basic border and line properties: border-width (thickness), border-style, and border-color. We'll start with the code for a basic horizontal line and show you how to modify the thickness and color.
Gen3 Course Template Advanced HTML Elements Borders and Lines
-
Horizontal Rules, Borders, and Backgrounds
Updated onArticleWe will use this page of the borders and lines tutorial to explore adding background color and creating borders using horizontal and vertical lines.
Gen3 Course Template Advanced HTML Elements Borders and Lines
-
Curves, Color Gradients, and Shading
Updated onArticleAs demonstrated on the Basic Boxes page of the Box module, the border-radius property can be added to one, two, three, or four sides of a box to create curved edges. The same principle applies to horizontal rules. To round the ends of horizontal rules, you must specify their height and which borders are visible so that the length and direction of the curves can be calculated. In this first example, a radius of 20px is used to create a line with two curved edges that slope downwards.
Gen3 Course Template Advanced HTML Elements Borders and Lines
-
Table Overview
Updated onArticleIn this module, you will find code and considerations for customizing tables. It is intended to be a reference to help you find commonly used HTML code, inline CSS styles, and modifications. It does not cover all available options, and you may need to search HTML and inline CSS code sources to find a solution for your specific application.In general, build your basic table in Canvas using the RCE, and check accessibility with the built-in accessibility checke before adding customizations.
Gen3 Course Template Advanced HTML Elements Tables
-
Basic Tables
Updated onArticleThe table is centered on the page, and all cell contents are centered. (Note that table column headers designated with scope="col" or row headers designated with scope="row" are centered by default.)
Gen3 Course Template Advanced HTML Elements Tables
-
Tables With Color
Updated onArticleColor can be specified in the RCE by using one of the preset colors or a custom color by selecting the artist palette icon (see the section on color in this resource for additional information). If you change the colors specified on this page, make sure the background color contrasts well with the font color and meets accessibility requirements for contrast. Also, be sure that you aren't solely relying on color to convey meaning - if colors have a meaning, they should also have another indicator, such as a symbol or text, to convey the same meaning. Use the accessibility checker in the RCE to verify color contrast.
Gen3 Course Template Advanced HTML Elements Tables
-
Tables With Class
Updated onArticleThese tables rely on Canvas classes for styling, which are no longer supported but are still available for use.
Gen3 Course Template Advanced HTML Elements Tables