Help:Wikitext/CSS

Inline CSS is CSS that is embedded directly into the HTML code. The wikitext and the inline css could affect more than a simple table. To answer the question, could I do that, try to consider everything on a webpage as a box that you could customize. As example, you could give style onto text, tables, links, pictures, headers and much more.

Block elements	Inline elements
Block elements take full width and could have variable height. a simple container ( ), a header ( ), a paragraph ( )	Inline elements try to insert themselves around the text with variable width and height. a simple container (), a link, a picture

A style attribute is added to an opening HTML tag (style="…"), which can contain multiple CSS declarations between the quotation marks; these declarations apply to everything contained within the corresponding HTML tags. A CSS declaration consists of an attribute, a colon, and a value to assign to the attribute. Multiple CSS declarations are allowed and must be separated by semicolons.

selector or element, followed by a declaration who contain property with value.

Elements	declaration	Property	Value
`div span`	<aname __="_:_;_" __="_:_;_"> </samename> `style=""` class="" (some HTML tags like) width=""	__="__:_; color:__; border:__;"	__="_:solid black 1px;_"
<element name /* some inline css using style=" " */ style="property:; property:; border:value value value;" width=""> displayed text </element name>

Various HTML tags are allowed.
Furthermore inline-CSS can be used for chart syntax.
More information at Help:Wikitext/table examples.

How to create a table
HTML	CSS	Wikitext
<table></table>	< ___ style=""> </___ >	`{\|` `\| or ! \|}`

Ex : <span style="color:blue;">Some text</span>

A good reason why, wikia recommend only limited use of inline CSS, is because actual web content (beyond HTML5) is dynamically updated. Classes and templates help to upkeep codes without having to re-open pages. Note also that css may not properly display on a cellphone.

See community CSS
Using CSS classes is generally a better approach for styles that occur repeatedly, as it is easier to update.
About syntax, see also :Help:Wikitext/more examples

Note that blink value is not supported on Chrome

On this page, possible values and their effects on the single CSS attributes will be described onto sections.

Common propertyEdit

Theses effects could be inserted into any elements bellow

Alignment (elements and text)Edit

Vertical alignment and the horizontal alignment

Horizontal alignment

wikitext	CSS	HTML
Use a `class="center"`, as for picture and links \|center]]	For a block element or a table, `"margin:auto;"` For a inline element or text, `"text-align:center;"`	Not supported in HTML5 `center /center` tag

Vertical alignment

Wikitext	CSS	HTML
Use the <gallery></gallery> tag	For element, see CSS `padding` property, or use equal amount of `height:;` and `line-height:;` , or use `position:relative;` with `transform:;` For text, `"vertical-align:middle;"`	Not supported in HTML5 `center /center` tag

Text Orientation

`<div style="text-align:___;">…</div>`
Values	Effect
`right`	flush right
`Center`	centrally
`left`	left-aligned
`justify`	Justification

Vertical Alignment

`<span style="vertical-align:___;">…</span>`
Values	Effect
`top`	above
`Middle`	centrally
`bottom`	down
`sub`	as subscript
`great`	as superscript
`__px`	Increase in pixels ("40px")
`__em`	depending on the font size ("1.7em")
`__ex`	depending on the font size ("-3ex")

With vertical-align more than just text can be aligned.

Color and shadowEdit

Every elements could have some color sets and shadows.

see Help:Color

Text Color Edit

`<div style="color:___;">…</div>`
Values	Effect
`___`	Color value; Possible values are at Help:Color

Background color Edit

`<div style="background-color:___;">…</div>`
Values	Effect
`transparent`	Background remains transparent (standard)
`___`	Background color; Possible values are at help: Color

CSS3 Gradient property

Note : A line of this code is different for a browser, ex Chrome, to an another ex Opera.

How it work	Example
) Chose a container, ex DIV* ) Select a regular background color ) Specify direction, this example use a Linear gradient ) Chose your second color ) Copy and Write your line of code 5 time; one for each browser a reader could use. *If the chosen container encounter problem, use HTML markup instead (ex:table.)	<div style=" background-color:#000080; <!--Regular background for browsers that do not support gradients--> background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#000080), to(#66e0ff)); <!--Gradient code for Safari/Chrome browser--> background-image:-moz-linear-gradient(0% 100% 90deg, #000080, #66e0ff); <!--Gradient code for Firefox browser--> background-image:-o-linear-gradient(#000080, #66e0ff); <!--Gradient code for Opera browser--> background-image: linear-gradient(#000080, #66e0ff); <!--Gradient code for Standard / IE browser--> "> </div>

CSS3 ColorsEdit

Title use red rgba color with transparency, and hsla red background-color
Note: Doesn't work on some older browser

<div style="color:___;">…</div>

RGBA colors: rgba(255, 0, 0, 0.2);; rgba(red, green, blue, alpha); alpha = opacity, transparency
HSL colors: hsl(120, 100%, 50%);; hue saturation lightness
HSLA Colors: hsla(120, 100%, 50%, 0.3);; hue saturation lightness alpha(opacity)

Transparency (CSS3 Opacity)Edit

Set both text color and background-color

`<div style="opacity:___;">…</div>`
Values	Effect
`___`	Decimal number from 0.0 (fully transparent) to 1.0 (no transparency); here 0.4

Blending Edit

`<div style="mix-blend-mode:___;">…</div>`
Values	Effect
`normal`	No mixing effect
`color-dodge, screen, lighten`	Mixing with a brighter background
`color-burn, darken, multiply`	Mixing with a darker background
`Overlay, Hard-Light, Soft-Light`	Mixing with contrasting methods
`difference, exclusion`	Mixing with inversion modes
`hue, saturation, color, luminosity`	Mixing with color mixtures

Mixtures with text and images using blend modes require table cell background color to be used otherwise it will not work.

Text shadows Edit

The first two values (position of the shadow to the right, below) are mandatory, all others can be omitted.

`<div style="text-shadow:___ ___ ___ ___;">…</div>`
Values for 1-3 (1.2 negative)	Effect 1.2	Effect 3
`__px`	Position in pixels	Length expiring shadow
`__em`	depending on the font size (1em = height of the current large print)
`__ex`	depending on the font size (1ex = height of the current lower case)
Values for 4	Effect
`___`	Shadow color; Possible values are at Help:Color

Box-shadow Edit

Tables and Div-sections may be using box-shadow propose a shadow. The first two values (position of the shadow to the right / bottom) are mandatory, all others can be omitted.

`<div style="box-shadow:___ ___ ___ ___ ___ ___;">…</div>`
Values for 1-4 (1.2 negative)	Effect 1.2	Effect 3	Effect 4
`__px`	Position in pixels	Length expiring shadow	additional size shadow
`__em`	depending on the font size (1em = height of the current large print)
`__ex`	depending on the font size (1ex = height of the current lower case)
Values for 5	Effect
`___`	Shadow color; Possible values are at Help:Color
Value for 6	Effect
`Inset`	causes the shadow thrown by the frame in the box

Note : You may have to include a clear="" to keep space between element with shadow and the next one.

Border, margin and paddingEdit

Contents like text, inside an element, could contain padding, margin, borders and outline. Borders are also called outline.

Note : outline:; is also a property who display, but outside the total width of his element. As value he could contain style, color and width

Border and radius (rounded)Edit

Every elements could have border and theses borders could be rounded using the CSS3 radius property.

Border thickness -type, and -colorEdit

These three attributes are all set by the attribute "border"; up to 3 values, separated by spaces, are Entered after the colon in the Following order: width, type, color. Color and thickness can only be set with the type along.

`<div style="border:___ … …;">…</div>`
Values for thickness	Effect
`Thin`	Thin
`medium`	medium (like the border of this chart)
`Thick`	Thick
`__px`	Thickness in pixels

`<div style="border: … ___ …;">…</div>`
Values for type	Effect
`none`	No Border
`dotted`	dotted
`dashed`	dashed
`Solid`	Solid (normal line)
`stand-in`	Double Line (like the border of this chart)
`Groove`	Grooved (depends on the color)
`Ridge`	elevated (depends on the color)
`Inset`	Rising outwards (depends on the color)
`outset`	sloping outwards (depends on the color)

`<div style="border:… … ___;">…</div>`
Values for color	Effect
`___`	The Chosen color; Possible values at Help:Color
`transparent`	invisible (like the border of this chart)

If you want to change the border on one side only then use "border-top", "border-bottom", "border-left" or "border-right" (upper, lower, left, right).

Superposed Borders Edit

`{|style = "border-collapse: ___;" ... |}`
Values	Effect
`Collapse`	adjacent edges overlap to an edge
`separate`	adjacent edges remain separated (as in this table)

Distance between adjacent edges Edit

If adjacent edges are separated, it is possible with the distance between them border-spacing set. If two values are given, the first one refers to distances up / down.

`{|style = "border-collapse: separate; border-spacing: ___ ___;" ... |}`
Values	Effect
`__px`	Distance in pixels
`__em`	depending on the font size (1em = height of the current large print)
`__ex`	depending on the font size (1ex = height of the current lower case)

Rounded corners Edit

The property border-radius accepts up to 8 values; the first four values determine the initial radius in the horizontal plane, the last four of the end radius in the vertical. The value foursquare relate to the four corners, starting with the upper left in a clockwise direction. Excluding a fourth value away, so he accepts the value of the corner opposite, as in only two or a value. The second square can be completely omitted, so that the radii remain constant in a corner.

`<div style="border-radius: _ _ _ _ / _ _ _ _;">…</div> <div style="border-radius: _;">…</div>`
Values	Effect
`__px`	Radius in pixels
`__em`	depending on the font size (1em = height of the current large print)
`__ex`	depending on the font size (1ex = height of the current lower case)

Margin

The property Margin accepts up to four values above for the distances in the directions, right, down, left standing (mnemonic: analog clock). If the fourth value is omitted, there engages the value of opposite, etc.

`<div style="margin:_ _ _ _;">…</div>`
Values	Effect
`auto`	automatically (as here)
`__px`	Distance in pixels
`__em`	depending on the font size (1em = height of the current large print)
`__ex`	depending on the font size (1ex = height of the current lower case)
`__%`	depending on the width of the parent element

With margin-right: auto and margin-left: auto, can be a box to the right or left side slide, without being enveloped text or other inline elements.

Padding

The property Padding accepts as margin up to four values that apply to the distances from the edge inwards.

`<div style="border-collapse:separate; padding:_ _ _ _;">…</div>`
Values	Effect
`__px`	The distance in pixels (here 8px)
`__em`	depending on the font size (1em = height of the current large print)
`__ex`	depending on the font size (1ex = height of the current lower case)
`__%`	depending on the width of the parent element

Framing

The property outline provides a framework around the outside of the object (ie, even at the margin around). Outline is the same set as border.

Float and clearEdit

`<div style="float:___;">…</div>`
Values	Effect
`none`	allow no runaround; Element will not be moved
`right`	to the right side, left runaround
`left`	to the left side, right Runaround (as here)

The Float property pushes the item to the edge and lets it flow around the element following inline elements such as text.

Allow no text runaround

... Or similar inline elements.

`<div style="clear:___;">…</div>`
Values	Effect
`none`	allow runaround
`right`	no runaround right
`left`	no runaround links
`Both`	absolutely no runaround

This property is often in <br clear="both" />use at the end of a section, in order to prevent that from below nothing pure slipping upwards.

Display and visibilityEdit

Hide items

`<div style="visibility:___;">…</div>`
Values	Effect
`Visible`	normal
`Hidden`	hides the element, does not release its place

Remove items

`<div style="display:___;">…</div>`
Values	Effect
`none`	hides the element completely and gives his place freely
`Inline`	enveloped, like a picture in the middle of text
`block`	not reflow, like a centered image

Width and heightEdit

`<div style="width:___;">…</div>`
Values	Effect
`auto`	automatically (default)
`__px`	Width in pixels
`__em`	depending on the font size (1em = height of the current large print)
`__ex`	depending on the font size (1ex = height of the current lower case)
`__%`	depending on the width of the parent element (here, 90%)

`<div style="height:___;">…</div>`
Values	Effect
`auto`	automatically (default)
`__px`	Height in pixels (270px here)
`__em`	depending on the font size (1em = height of the current large print)
`__ex`	depending on the font size (1ex = height of the current lower case)
`__%`	depending on the amount of the parent element

With max-height, min-height, max-width and min-width can be left out in one direction

Scaling content Edit

`<div style = "transform:scalex(__);">`
Values	Effect
`Transform:ScaleX(value)`	Scales the contents horizontally.

`<div style = "transform:scaley(__);">`
Values	Effect
`Transform:ScaleY(value)`	Scales the contents vertically.

`<div style = "transform:scale(__);">`
Values	Effect
`Transform:Scale(value)`	Scales the contents together with X and Y

You can adjust the content size scale by changing the values by ScaleX, ScaleY, Scale3D or Scale.

Prevent outflow Edit

With overflow you can define what should happen if the content is too large for the box down.

`<div style="overflow:___;">…</div>`
Values	Effect
`Visible`	take no action, the content goes beyond the box out (standard)
`Hidden`	the content will be cut at the end of the box
`scroll`	the content gets scrollbars
`auto`	the content gets scrollbars if and when the contents would otherwise overflow

Elements (Create layout and boxes)Edit

Headers

HTML	CSS	Wikitext
HTML headers level : `<h1>Title</h1>` 2, 3, 4, 5, 6	CSS and headers : div `style="__:___;`" ==Title== /div	wikitext headers ==Title== ======Title======

Note : Inline CSS with headers is easier to include in the HTML markup.

Note 2 : As always, you could give style to the title text using a span

Note 3 : Centered headers disappear on cellphone browsers.

ListsEdit

There is a lots of style you could apply to a list!

TablesEdit

Note : colspan="" and rowspan="" are used to merge cells.

The following attributes are not exclusive for charts, but are often used for them.

see Help:Wikitext/table examples

Display empty cells Edit

In separate edges can adjust to that empty cells receive any formatting.

`{|style = "border-collapse: separate; empty-cells: ___;" ... |}`
Values	Effect	Example
`show`	formatted blank cells
`hide`	unformatted empty cells

Position table heading Edit

`{|style = "caption-side: ___;" "table caption" ... |+ |}`
Values	Effect
`top`	Heading above
`bottom`	Heading down (as here)

Regroup stylesEdit

HTML tags include options to regroup style into fewer lines that was not formatted into wiki text.

Ex : Cut a table into head, body and footer section in order to create different CSS styles using <thead></thead><tbody></tbody><tfoot></tfoot>

Or create a style using <col></col> then apply it to any section using a <colgroup></colgroup>

Row Height Edit

`<div style="line-height:___;">…</div>`
Values	Effect
`normal`	normal
`__px`	Row height in pixels ("30px") foo
`__em`	depending on the font size outside ("1.7em") foo
`__ex`	depending on the font size outside ("1.7ex") foo
`__%`	depending on the font size outside ("166%") foo

LinksEdit

See Help:Wikitext/link examples

Internal and external link
HTML	CSS	WIkitext
Tag a is disabled by default	alternative text Direct link `[[:`, or page section `[[name#section [[name#id`	use [ ] to specify a link, and [[ ]] shortcut for intern page link

Include template or embed a page
HTML	CSS	Wikitext
Tag a is disabled by default	name	use {{ }} instead

Formatting

Some CSS could modify the way links are displayed like "list-style:;". If you want to change the displayed text, write it between <span></span> tag ex : [[help:links|<span style="color:pink;">The links help page</span>]]
The links help page

Medias and picturesEdit

Text and links: Pictures could be inserted on pages, as a link placing a : before the media type name.; Ex : [[:file:logo.png]]file:logo.png
Formatting

Image map: Require an extension to be installed inside your wikia; use the <imagemap></imagemap> tag. Inside you could specify :; " circle 220 120 30" type position x, y and size of button. Then, follow the line with a link.

Galleries, slideshows and sliders

These elements are not easy to write inline using CSS.

Use the wikitext : <gallery type="slideshow"></gallery>

See Help:Galleries,_Slideshows,_and_Sliders

TextEdit

Text Formatting (font -style, -weight)Edit

Font

<span style="font-family:'Times New Roman',Georgia,Serif;">…</span>

The font-family property specifies a list of fonts to apply, in order of preference. The browser applies the first available font for the enclosed text. Always use a generic group name like serif or sans-serif last as a fail-safe default.

Font size

`<div style="font-size:___;">…</div>`
Values	Effect
`xx-small x-small small medium large x-large xx-large`	various fixed sizes (here "large")
`__px`	Font size in pixels ("20px")
`__em`	depending on the font size outside ("2em")
`__ex`	depending on the font size outside ("2ex")
`__%`	depending on the font size outside ("70%")

Font width (spacing)

`<div style="letter-spacing:___;">…</div>`
Values	Effect
`normal`	normal
`__px`	Spacing letters in pixels ("2px")
`__em`	depending on the font size outside ("0.2em")
`__ex`	depending on the font size outside ("-0.08ex")

Italics

`<div style="font-style:___;">…</div>`
Values	Effect
`normal`	normal
`italic`	italic
`Oblique`	enforced italics

Bold

`<div style="font-weight:___;">…</div>`
Values	Effect
`normal`	normal
`Bold`	fat
`Bolder`	richer than the text out
`Lighter`	not quite as bold as the text out

Text DecorationEdit

Try style="text-decoration:underline;"
Text markers

`<div style="text-decoration:___;">…</div>`
Values	Effect
`none`	normal
`underlinestyle`	underlined
`overline`	overlined
`line-through`	strikethrough
`Flashing`	blinking text

Note that blink is not supported by Chrome. Use CSS3 Animation instead.

Large, small Character Edit

`<div style="font-variant:___;">…</div>`
Values	Effect
`normal`	normal
`small-caps`	Big letters with scaled-lowercase

Small font

`<div style="text-transform:___;">…</div>`
Values	Effect
`lowercase`	All lowercase
`capitalize`	each initial letter upper case
`Uppercase`	All in uppercase

IndentEdit

Text

`<div style="text-indent:___;">…</div>`
Values	Effect
`__px`	Indentation in pixels ("20px")
`__em`	depending on the font size outside ("1.2em")
`__ex`	depending on the font size outside ("1ex")
`__%`	depending on the width of the parent element ("25%")

Paragraph, or Vertical indentation could be obtained by using the br / tag or by leaving a double empty line in source mode.

note that some html tags automatically add some white space before and after the content like the p /p tag.

pre /pre tag keep both space and blank lines. Usefull to display a poem.

Word artsEdit

CSS Inset text shadow

Word art - Inset text shadow

) For the font and the shadows, chose a dark color.
) As value, select a color code who support opacity.
) As value, select the "em" font size who adjust himself.
) In order to create an inset text shadow, We reverse the font with the shadow.
1. ) Unlike the usual, the shadow is bigger than his font.
2. ) With the text-shadow property, create 4 shadow using the 2 first value to cover bottom-right, top-right, top-left, bottom-left.
3. ) The font color opacity must be twice as visible as the one for the shadow.
4. ) For the shadow's position, as both value, 0.02em is the maximum value you could set, in order to have a inset shadow. Higher number would multiply the font by 4 instead.
5. ) Diagonally chose 2 of the shadow who will have 1 as opacity (Will be totally visible).
) Result: Print a dark colored shadow into 4 direction who is so small that the font itself would appear inside his own shadow. Then lower diagonally the color opacity on shadows and on the font to create a inset shadow; inside the font characters.

<span style="
color:rgba(238,127,21,0.4);
font-family:'verdana',Georgia,Serif;
font-size:2em;
text-shadow:0.025em 0.025em 0em orange, -0.025em 0.025em 0em rgba(126,67,11,0.2),
 -0.025em -0.025em 0em rgba(126,67,11,0.2), 0.025em -0.025em 0em orange;
">Word art test - Inset text shadow</span>

Word art - Reflecting text: The only inconvenience is the word have to be written twice.

Reflect

<span style="
font-size:2em;
">Slogan <p style="
font-size:1em;
-webkit-transform: rotateX(225deg); /* Safari */
    transform: rotateX(225deg);
opacity:0.5;
">Slogan</p></span>

Word art - bordered text

Word art test - bordered text

This is a variation of the inset text-shadow where the font is white and his opacity is 100% visible

Word art - font gradient: It could be used to give a metallic font color effect

Gradient colored text

<span style="
  font-size: 2em;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
">Gradient colored text</span>

Word art - Gummy's like font

Word art test - Gummy

A variation of inset text shadow using half transparent white font, bold text and a 5th grey shadow facing south.

<span style="
color:rgba(255,255,255,0.6);
font-family:'verdana',Georgia,Serif;
font-size:2em;
font-weight: 900;
text-shadow:0.025em 0.025em 0em orange, -0.025em 0.025em 0em rgba(126,67,11,0.2), -0.025em -0.025em 0em rgba(126,67,11,0.2), 0.025em -0.025em 0em orange,
0em 0.125em 0.125em rgba(50,50,50,0.2);
">Word art test - Gummy</span>

Without classificationEdit

TooltipsEdit

See also Help:Tooltips In HTML, specify a parameter as title="tooltips to be displayed" inside a another element. Usually displayed on mouse over. CSS tooltips require pseudo element who are not available by default on wikia. As wiki text, tooltips is set as example specifying |text inside a picture's link]].

Ex : More text as a tooltips

Magic wordsEdit

br tag separate text in 2 lines and hr create a thematic change. <br /> <hr />

See : Help:Magic_words

See Help:Sorting Help:Collapsing

ResponsiveEdit

Using wikitext, and CSS could be a good opportunity to create pages who adjust themselves to fit small cell phone screen. But, most of customization using CSS is disabled on cellphones by wikia. As example a centered header using a <strong>DIV</strong> would not display on a cellphone.

CSS3 Collumn count (and TOC)Edit

Effects on TOC

Table of content is included by default on any wikia pages. Use __TOC__, __NOTOC__ to specify his position.

Some effect that could be set on TOC include

div

style="

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;"

/div

See also : The class nonumtoc, toclimit-2,

Note about CSS3 : Theses effect are not available with every browser a reader could use and most of them require a recent browser; a recent system.

Special charactersEdit

Wikia offert this shortcut to fix text you don't want your browser to translate into code. . If for a reason this trick need a replacement. Ask for a characters using his html code instead

Characters	Number	HTML
less than <	(&)#60;	(&)lt;

Note : () Has been added to make it easier to understand

Further help and feedbackEdit

Browse and search other help pages at Help:Contents
Check FANDOM Community Central for sources of further help and support
Check Contacting FANDOM for how to report any errors or unclear steps in this article
Learn how to use Fandom in FANDOM University: short how-to videos for all levels of experience
Help:Improving help pages

Values for Type	Effect
`none`	No Listenpunkt
`Circle`	Ring
`Disc`	Circle
`Square`	Square
`decimal`	Number
`decimal-leading-zero`	Number with a leading zero
`lower-latin`	Lowercase
`upper-roman`	Roman numerals in uppercase

Values for position	Effect
`inside`	list points are where the text would begin
`outside`	the list items are shifted to the left so that the text begins where even plain text would begin

Values for graphic integration	Effect
`none`	no file, instead of the normal list item
`url ('___')`	download an image file as a list item

Fandom