Help:Styling

Using wiki code, it is possible to add some styling to selected areas of pages. This page will help you how to learn basics.

Common usage
Styling is commonly used for changing text color, font size, width of certain areas (e.g. tables), and backgrounds.

Styling can be added to tags like &lt;span&gt; and &lt;div&gt;, and also to tables and table rows and cells.

How it's added
The style section is written in the following way: style="foo" Instead the word foo, you need to add the styling content. There is more information about in the section Attributes and Properties.

Tags
In tags (like &lt;span&gt; and &lt;div&gt;), the style section is added to the opening tag, after the tag name. For example, in the following tag: The style section will be added in the following way:

Tables

 * Entire table

For applying style for the entire table, add the style section to the opening of the table: {| style="foo"
 * Table row

For applying style for an entire row in the table, add the style section to devider above the row: |- style="foo"
 * Table cell

For applying style for a certain table cell, add the style section after the cell opening tube ( | ) and add another tube after it: | style="foo"| cell content
 * Table cell

For applying style for a certain table header, add the style section after the cell opening ( ! ) and add a tube after it: ! style="foo"| header content

Syntax
The style section is made from 4 key areas: A styling is written in the following way: style="property: attribute" A value is written after its property, and a colon ( : ) devides between them.
 * style attribute- opens the style section (style=).
 * Quotation marks- 2 quotetion marks that come after the style= opening. Between them the styling is added.
 * Attributes- mentions a type of styling.
 * Value- the value of an attribute. Specifies how it would be displayed.

In case there are several attributes in a style section, a semicolon ( ; ) will devide between them, in the following way: style="property: value; property: value;" Please note that it's recommended to use lower cases only for styling, and add a space after colons and semicolons, for making the style section clearer in case there is need to change sections in it.

Attributes and Properties
This section contains the most common styling properties and their values. For a more detailed list, see Help:Expanded Styling.

Units
Units can be used for values that requires a specific distance. You can find some other units here.

Colors
There are several color models that can be used for values that include colors. {| class="wikitable" ! Model ! Descripsion ! Syntax ! style="width: 190px;"| Example
 * color_name
 * Uses the color name
 * style="property: orange"
 * HEX
 * A 6-digit number, that contains numbers from 0 to 9, and also the letters A-F. The first 2 characters determines the value of the red color, the middle characters for green, and the last 2 for green. 0 is the lowest character and F is the highest
 * #RRGGBB
 * style="property: #ff9900"
 * RGB
 * The RGB model is similar to the HEX model, but uses numbers only. 0 is the lowest and 255 is the highest.
 * rgb(0,0,0)
 * style="property: rgb(255,128,0)"
 * RGBA
 * The RGB model that uses alpha compositing. The last number is from 0 to 1; 1 is 100% solid and 0 is 100% transparent
 * rgba(0,0,0,0)
 * style="property: rgba(255,128,0,1)"
 * HSL
 * Uses the HSL color model
 * hsl(0,0,0)
 * hsl(21,255,128)
 * HSLA
 * HSL with alpha compositing
 * hsla(0,0,0,0)
 * hsla(21,255,128,1)
 * hsl(0,0,0)
 * hsl(21,255,128)
 * HSLA
 * HSL with alpha compositing
 * hsla(0,0,0,0)
 * hsla(21,255,128,1)
 * hsla(21,255,128,1)