Coding Guide Neo/Advanced

Syntax
`text-shadow: {XOFFSET} {YOFFSET} {BLUR} {COLOR};`
`{XOFFSET}` being a negative or positive number value in pixels (px). If negative, the text shadow moves left, if positive the text shadow moves right.
`{YOFFSET}` being a negative or positive number value in pixels (px). If negative, the text shadow moves up, if positive the text shadow moves down.
`{BLUR}` being a number value in pixels (px). If `{BLUR}` is left blank, the value will be set to 0.
`{COLOR}` being a color code (HEXA, RGBA...). If left blank, the browser decides the color.
Examples
`<span style="**text-shadow: -4px 4px 2px #f00;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="**text-shadow: -2px -6px 8px #0a6301;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="**text-shadow: 7px 7px 0px #7f0a9f;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
Multiple text shadows can be applied at once by separating the individual shadows with commas, creating a fancier effect.
`<span style="**text-shadow: -2px -2px 8px #f00, *1px 1px 1px #fa0*;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="**text-shadow: 0px -3px 0px blue, *0px 3px 0px hsl(300, 100%, 50%)*;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...

### Text Decoration

The `text-decoration` property adds a text decoration to the content inside the tag. (shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and `text-decoration-thickness`.)

Vic's Coding Tip

**Compatibility Note:** Safari doesn't support the shorthand form without a vendor prefix: `-webkit-`. To support Safari correctly duplicate the text-decoration property and tag but attach `-webkit-` to the beginning of the first instance of `text-decoration`.

Edge does not support the shorthand form at all so everything must be typed out.

`text-decoration: {LINE} {COLOR} {STYLE} {THICKNESS};`
`{LINE}` being a line type. Options are `underline`, `overline`, or `line-through`.
`{COLOR}` being the color of the line. If `{COLOR}` is left blank it inherits the text color.
`{STYLE}` being a line style. All styles are shown below in italics.
`{THICKNESS}` being a positive number value in pixels (px). Sets the thickness of the text-decoration. If used without the `text-decoration-skip-ink` property (see #skip-ink) setting a high value my cause large portions of the text-decoration to disappear. If `{THICKNESS}` is left blank it defaults to 1px.
Examples
Underlined text
`<span style="**text-decoration: underline #f00 *solid* 1px;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="**text-decoration: underline #f00 *double* 1px;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="**text-decoration: underline #f00 *dotted* 1px;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="**text-decoration: underline #f00 *dashed* 1px;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="**text-decoration: underline #f00 *wavy* 1px;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
Overlined text
`<span style="**text-decoration: overline #f00 *solid* 1px;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="**text-decoration: overline #f00 *double* 1px;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="**text-decoration: overline #f00 *dotted* 1px;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="**text-decoration: overline #f00 *dashed* 1px;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="**text-decoration: overline #f00 *wavy* 1px;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
Line-through text
`<span style="**text-decoration: line-through #f00 *solid*;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="**text-decoration: line-through #f00 *double*;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="**text-decoration: line-through #f00 *dotted*;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="**text-decoration: line-through #f00 *dashed*;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="**text-decoration: line-through #f00 *wavy*;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
Safari and Opera compatible examples (Works on all browsers)
`<span style="-webkit-text-decoration-line: overline; text-decoration-line: overline; -webkit-text-decoration-color: #f00; text-decoration-color: #f00; -webkit-text-decoration-style: double; text-decoration-style: double;">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="-webkit-text-decoration-line: line-through; text-decoration-line: line-through; -webkit-text-decoration-color: #f00; text-decoration-color: #f00; -webkit-text-decoration-style: solid; text-decoration-style: solid;">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="-webkit-text-decoration-line: underline; text-decoration-line: underline; -webkit-text-decoration-color: #f00; text-decoration-color: #f00; -webkit-text-decoration-style: wavy; text-decoration-style: wavy;">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
#### skip-ink

The `text-decoration-skip-ink` property determines if overlines and underlines are drawn when they would pass through text.

Vic's Coding Tip

**Compatibility Note:** Edge and Safari do not support `text-decoration-skip-ink`.

`text-decoration-skip-ink: {SKIP};`
`{SKIP}` detirmines whether or not text-decoration is skipped. Options are `auto` (on, default) or `none` (off).
Examples
Auto
`<span style="text-decoration: underline #f00 solid 10px; **text-decoration-skip-ink: auto;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="text-decoration: underline #f00 double 5px; **text-decoration-skip-ink: auto;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="text-decoration: underline #f00 wavy; **text-decoration-skip-ink: auto;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
None
`<span style="text-decoration: underline #f00 solid 10px; **text-decoration-skip-ink: none;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="text-decoration: underline #f00 double 5px; **text-decoration-skip-ink: none;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="text-decoration: underline #f00 wavy; **text-decoration-skip-ink: none;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...

#### text-underline-offset

The `text-underline-offset` property sets the distance from the text and the underline. Without the use of the `text-decoration-skip-ink` property, `text-underline-offset` isn't very useful, since the underline won't normally be drawn if it would show up behind text.

`text-underline-offset: {OFFSET};`
`{OFFSET}` being a negative or positive number value in pixels (px). If negative, the underline moves up, if positive the underline moves down.
Examples
`<span style="text-decoration: underline gold solid 10px; text-decoration-skip-ink: none; **text-underline-offset: -5px;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
`<span style="text-decoration: underline #f00 dotted 6px; text-decoration-skip-ink: none; **text-underline-offset: -12px;**">Lorem ipsum dolar sit amet...</span>`:
Lorem ipsum dolar sit amet...
## Borders

### Border Gradients

The `border-image` property adds a gradient to the border around the tag.

By spec you must include a normal border, some browsers will not load the `border-image` if you do not.

Syntax
`border-image: {GRADIENT};`

## Tables

Table Syntax
Wikitext tables are made up of pipes enclosed by a single set of curly brackets.

Wikitext tables always start with `**{|**`
All new rows, cells, and headers must be on a separate new lines.
To start a new *row* use `**|-**`
Rows are used to start new table rows and move vertically down the table.
To start a new *cell* use `**|**`
Cells are used to display data and move horizontally across the table.
To start a new *header* use `**!**`
Table headers are essentially cells, except that they are bolded by default. They should only be used at the top of a table or at the start of a new section.
Wikitext table always end with `**|}**`
HTML equivalent
Everything is enclosed by a `<table>` tag. `<tr>` replaces `|-`, `<th>` replaces `!`, and `<td>` replaces `|`.
Basic Table

 Cell C

```
! Header A
! Header B

```

### Styling Tables

Table styling is done with the `style` attribute like with html. You can style individual cells, rows, or the entire table.

* Table styling is done by putting the `style` attribute after the opening `{|`.
* Row styling can be done by putting the `style` attribute after the `|-`.
* Cell styling can be done by putting the `style` attribute after the `|` and then adding another `|`after the closing quote.

 C

```
{| style="width: 150px; border: 2px solid black;"
! Header

```

#### border-collapse

The `border-collapse` property determines if table cells have shared or seperate borders.

`border-collapse: {COLLAPSE};`
`{COLLAPSE}` detirmines whether or not the borders of adjacent table cells are collapsed together. Options are `separate` (off, default) or `collapse` (on).
Examples
separate

 C

```
{| style="width: 200px; border-collapse: separate; border: 2px solid black;"
!style="background-color: black; color: #eee;"| Header A
!style="background-color: black; color: #eee;"| Header B

```

collapse

 C

```
{| style="width: 200px; border-collapse: collapse; border: 2px solid black;"
!style="background-color: black; color: #eee;"| Header A
!style="background-color: black; color: #eee;"| Header B

```

### Colspan and Rowspan

Commonly used in infoboxes, the `colspan` and `rowspan` attributes tell a table cell how many columns or rows to take up, respectively.

 rowspan="2"
 Normal Cell

```
{| style="width: 400px;"
! colspan="2" style="border: 2px solid #0f0"| colspan="2"

```