Wiki Page, Canvas HTML Goodies to Sweeten Learner Engagement: 🍫 Code Sweeteners

Wiki Page
2023-01-04T12:28:45-07:00

Learn more about how you can sweeten your code below.

Font and Background Colors

You can customize the font and background color of HTML elements using color names or hex codes.

Add the following code snippets to an element and add your color name or hex code:

style="color: INSERT COLOR OR HEX HERE;"

style="background-color: INSERT COLOR OR HEX HERE;"

Text Formatting

The following attributes can be used to format text in your HTML code:

Bold: ADD TEXT HERE

Italics: ADD TEXT HERE

Underline:ADD TEXT HERE

Superscript: ADD TEXT HERE

Subscript: ADD TEXT HERE

Bulleted List: ADD TEXT HERE ADD TEXT HERE

Numbered List: ADD TEXT HERE ADD TEXT HERE

Alignment

You can change the alignment in an element by adding the following code snippet:

style="text-align: left;"

style="text-align: center;"

style="text-align: right;"

style="text-align: justify;"

Borders

You can add and customize a border around your elements. Here is an example of what a border around an HTML element:



Let's unpack that code:

Border Side: The code above will create a border around all four sides of the element. You can set a border around a single side using one of the following options.

border-left:

border-right:

border-top:

border-bottom:

Border Width: Customize the width of your border by changing the number of pixels.

Border Style: There are a variety of border styles to choose from. You can choose from the following:

Solid

Dotted

Dashed

Border Color: Change the color of your border by adding a hex code or color name.

Padding

Padding adds space inside of an element.

This sentence has no padding.

This sentence has padding.

To add padding to an element, use the code snippet below:

style="padding: 5px"

You can change the number of pixels or you can use a percentage.

Margins

Margins add space around the outside of an element. The following table has margins around it.

Text | Text

To add margins around an element, use the following code snippet:

style= "margin: 15px"

You can also set different margin values for each side. Replace margin with one of the following:

margin-left

margin-right

margin-top

margin-bottom