Join our WikiEducator discussion group or Register now for free skills training.

From WikiEducator

Colors for WE Open Educational Resources

Standard color names

The HTML 4.01 specification defines sixteen named colors, as follows:

Coloring text

Set text color by using <span style="color:#009000"> TEXT </span>

Set background color by using <span style="background:#00FF00"> TEXT </span>

Set both by using <span style="color:#FFFFFF; background:#FF69B4"> TEXT </span>

Creating colored tables

Example 1. Yellow background

Code: {|style="background:yellow" |Zutano |Fulano |- |Mengano |Perengano |}

Example 2. Green background with white text

Code: {|style="background:green; color:white" |Zutano |Fulano |- |Mengano |Perengano |}

Example 3. Red background, white text, green border 5px width

Code: {|style="background:red; color:white; border:solid green 5px" |Zutano |Fulano |- |Mengano |Perengano |}

Creating colored backgrounds in pharagraphs or whole pages (using div boxes)

A div box is a container for text, images and other objects in any WikiEducator page.

• A div box has several attributes and properties that define size, position, color of text inside the box, background color, border, etc.
• Defining a div box requires the usage of an HTML pair of tags: <div> for opening the box, and </div> for closing the box; "div" stands for "division".
• For the purpose of this Help Page we'll focus on color properties.
• There are several attributes available for div boxes (Id, Class, Style, Title, Lang, etc). The attribute used for managing colors in a div box is: style.
• Notice that you can enclose in a div box a simple pharagraph or a whole page.
• Colors can be defined by its name or its hexadecimal number.

Example 1. Text over Ligh Cyan background color

Generic code:

<div style="background:LightCyan"> text here </div>, or
<div style="background:#E0FFFF"> text here </div>

Output:

Please note that all contributions to WikiEducator are considered to be released under the Creative Commons Attribution Share-Alike License (see WikiEducator:Copyrights for details). If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here. You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource. DO NOT SUBMIT COPYRIGHTED WORK WITHOUT PERMISSION!

Example 2. Text over Ligh Cyan background color, with solid 2px blue border

Generic code:

<div style="background:LightCyan; border: solid blue 2px;"> text here </div>, or
<div style="background:#E0FFFF; border: solid blue 2px;"> text here </div>

Output:

Please note that all contributions to WikiEducator are considered to be released under the Creative Commons Attribution Share-Alike License (see WikiEducator:Copyrights for details). If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here. You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource. DO NOT SUBMIT COPYRIGHTED WORK WITHOUT PERMISSION!

Example 3. Red colored text over Ligh Cyan background color, with solid 2px blue border

Generic code:

<div style="background:LightCyan; border: solid blue 2px; color:red"> text here </div>, or
<div style="background:#E0FFFF; border: solid blue 2px; color:#FF0000"> text here </div>

Output:

Please note that all contributions to WikiEducator are considered to be released under the Creative Commons Attribution Share-Alike License (see WikiEducator:Copyrights for details). If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here. You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource. DO NOT SUBMIT COPYRIGHTED WORK WITHOUT PERMISSION!

Work in progress, expect frequent changes. Help and feedback is welcome. See discussion page.