Advanced Tutorial on Adding CSS to Messages
Other tutorials on enhancing messages: Images | HTML (advanced)
In addition to the allowed HTML tags that we allow at CaneTalk, which we discuss here, we also allow customization through inline CSS. (Cascading Style Sheets) Inline CSS can be added using the style attribute on HTML tags. If you are familiar with CSS, you know that CSS styling can also be used from an external file and also includes CSS selectors to select various elements. To control the kind of CSS we allow, we don't allow that kind of CSS usage, only inline CSS. Only styling in the exact format that we allow can be used. You can test styling when you preview your message to see if you can use the styling you want to use. If you have a specific styling you would like to use that isn't allowed, please contact the webmaster to see if it can be added.

We have listed the various CSS properties that we allow below. For a complete listing of CSS properties, including ones we don't allow, visit: W3Schools | Mozilla

Some formatting is specific to certain HTML tags. Additionally, the values we allow for certain properties are specific to our forum. Because our site is designed to be mobile friendly, certain values are not allowed. Other values might disrupt the layout of the message page.

In dark mode for our forum, various CSS properties will be overridden to help ensure content is legible. This will include resetting the font color to a grayish color and removing background color from elements. You cannot control these changes.

While not noted, any property in which you can use the unit "em", you can also use the unit "rem".
▲Top
Table of Contents:
Colors
You can choose the color of text, backgrounds and borders.

The easiest way to select a color is to use the name of the color. There are 140 color names that can be used. You can find a list of them here. We also support the value "transparent" to be used in most places you can use colors, other than for text color ("color") and "text-shadow".

The second easiest way to choose a color is to get its hex (hexadecimal) code. This is usually a 6 character code. For some codes, they can be shortened to 3 characters. We also support 8 character codes, which include an alpha channel for opacity, though it is easier to use RGBA and HSLA, mentioned in the next paragraphs, if using that. We support all three types. To choose a color you want, you can use a color picker such as the one here at Google to find the color's hex code.

In addition to supporting color names and hex codes, we also support the RGB, RGBA, HSL and HSLA formats when using commas to separate values. You can find additional color pickers for HEX codes, the RGB format and the HSL format by clicking each of those links. For the RGB and RGBA formats, we allow either integers or a percent.

The benefit of using RGBA or HSLA is that you can easily set an alpha value that lets you control the opacity. This is a value from 0 to 1 where 0 is invisible and 1 is fully visible. A value of 0.5 would be half transparent. We allow you to choose an alpha value to two decimal places. Using these for opacity is easier than using a hex code with an alpha channel. These are from 0 to 1, the other kind is from "00" to "ff".

All of the following are allowed values for the color green:The previous list had all the exact same color of green. The following is a slightly different color of green, but is also allowed:Example 1:
Code:
<span style="color: green;">Text</span>
Result:
Text
Example 2, with an alpha value of "0.5":
Code:
<span style="color: rgba(0, 128, 0, 0.5);">Text</span>
Result:
Text
Example 3, using different colors for text, background and border:
Code:
<div style="color: blue; background-color: rgba(0, 128, 0, 0.2); border: 1px solid #000; padding: 10px;"> The quick brown fox jumps over the lazy dog. </div>
Result:
The quick brown fox jumps over the lazy dog.
Basic Text Formatting
Advanced Text Formatting
Margin
Padding
Border
Tables
Lists
Background
Columns
Other