Help:Colors

From WikiEducator
Jump to: navigation, search
Vista Community Help.png

Using colors


Choice of color

There are many colors available for use on a page and a number of systems with which to specify color:

  • HTML color names (e.g. red),
  • Hexadecimal, or hex triplet, codes (e.g. bronze is #CD7F32),
  • web-safe colors, (e.g., light yellow is #FFC).

Standard HTML color names

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

Color Hexadecimal Color Hexadecimal
black #000000 silver #c0c0c0
gray #808080 white #ffffff
maroon #800000 red #ff0000
purple #800080 fuchsia #ff00ff
green #008000 lime #00ff00
olive #808000 yellow #ffff00
navy #000080 blue #0000ff
teal #008080 aqua #00ffff



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 |}

Zutano Fulano
Mengano Perengano


Example 2. Green background with white text

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

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 |}

Zutano Fulano
Mengano Perengano



Creating colored backgrounds in paragraphs 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 paragraph or a whole page.
  • Colors can be defined by its name or its hexadecimal number.


Example 1. Text over Light Cyan background color

Generic code:

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

Output:

L4C-small 1.png
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 Light 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:

L4C-small 1.png
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 Light 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:

L4C-small 1.png
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!


See also

Help:Colors in Wikipedia

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