[{ALLOW edit EISMainUsers}]
[{ALLOW view Anonymous}]
%%commentbox
__see also__\\
[FAQ Formatting|JSPWiki:FAQFormatting]\\[CSSInWikipages|JSPWiki:CSSInWikipages]
%%

You can specify the color of text foreground and background using the [CSS|http://www.w3.org/TR/CSS21/]
syntax. For example, this:

{{{
This is normal text.
%%(color:red)
This text is red.
%%
This is normal text again.
}}}

produces this:

This is normal text.
%%(color:red)
This text is red.
%%
This is normal text again.


!! Specifying colors

The CSS property name is "{{color}}" for foreground (text) colors, "{{background-color}}" for background colors. In CSS, if you specify multiple properties they must be delimited by a semicolon. For example, the syntax to produce red text on a yellow background would be:
{{{
%%( color: red ; background-color : yellow ) Gary Snyder %%
}}}
as in:

%%( color: red ; background-color : yellow ) Gary Snyder %%

You can use any valid CSS color specification, e.g., see the [CSS color names|http://www.w3.org/TR/CSS21/syndata.html#value-def-color]:

%%(text-align:center;font-family:monospace;font-size:large;padding:1em)

%%(background-color:maroon;color:white) maroon "#800000" %%
%%(background-color:red;) red "#FF0000" %%
%%(background-color:orange;) orange "#FFA500" %%
%%(background-color:yellow;) yellow "#FFFF00" %%
%%(background-color:olive;color:white) olive "#808000" %% \\
%%(background-color:purple;color:white) purple "#800080" %%
%%(background-color:fuchsia;) fuchsia "#FF00FF" %%
%%(background-color:white;) white "#FFFFFF" %%
%%(background-color:lime;) lime "#00FF00" %%
%%(background-color:green;color:white) green "#008000" %% \\
%%(background-color:navy;color:white) navy "#000080" %%
%%(background-color:blue;) blue "#0000FF" %%
%%(background-color:aqua;) aqua "#00FFFF"  %%
%%(background-color:teal;color:white) teal "#008080" %% \\
%%(background-color:black;color:white) black "#000000" %%
%%(background-color:silver;) silver "#C0C0C0" %%
%%(background-color:gray;color:white) gray "#808080" %%

%%


!! Inline text formatting

{{{
This is normal text. %%(color:red;)This inline text is red.%% This is normal text again.
}}}

produces this:

This is normal text. %%(color:red)This inline text is red.%% This is normal text again.

----

Note: previous examples required {{{%%(color:red; display:inline)...%%}}}. This is not necessary any more (tested in 2.2.28), for inline usage now a span tag is rendered instead of a div tag. -- Gregor Hagedorn

----
Go back to [DontTellMeShowMe]