FANDOM


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 (<div></div>), a header (<h1></h1>), a paragraph (<p></p>)

Inline elements try to insert themselves around the text with variable width and height.
a simple container (<span></span>), 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>

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.
<span style="color: green; text-decoration: blink;">…</span>
  • 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
  1. ) Chose a container, ex DIV*
  2. ) Select a regular background color
  3. ) Specify direction, this example use a Linear gradient
  4. ) Chose your second color
  5. ) 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


HTMLCSSWikitext
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!

See also Help:list on wikipedia
HTML CSS Wikitext
  • unorganized list and list item = <ul><li></li></ul>
  • Detailed list title and data = <dl><dt></dt><dd></dd></dl>
  • Ordered list and list item = <ol><li></li></ol>
apply some style to a list like : list-style-type: none; and make it float to create a menu. Unorganized list header and elements require to start the line
;Title   :some text , ::some text

Start the line with * for a list with a chip or a # for a numeral list
For a short quotation use HTML q /q tag

  • unorganized
  • list
  1. organised
  2. list
detail
detailed
list (nested)
Note : Lists could be nested. Anywhere a item is created, you could start a new list to indent the first one. Or start a line with more than one **, or ##.


Lists

Lists can be customized with the property list-style design, which accepts up to three values: type and position of the points list, and a URL to a graphic file that is to be used as a list item (in this order).

Inline CSS with lists can only with pure HTML (Help: HTML / lists) are used.

<ol style="list-style:_ … …;"><li>…</li><li>…</li>…</ol>
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
  1. Lowercase
upper-roman
  1. Roman numerals in uppercase
<ol style="list-style:… _ …;"><li>…</li><li>…</li>…</ol>
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
<ol style="list-style:… … _;"><li>…</li><li>…</li>…</ol>
Values for graphic integration Effect
none no file, instead of the normal list item
url ('___') download an image file as a list item

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 also Help:Interwiki link Help:Interlanguage link
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

See also : Help:Parser functions Help:Substituting templates

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.pngFile:Logo.png
Formatting

See also Help:Galleries, Slideshows, and Sliders/wikitext

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

  1. ) For the font and the shadows, chose a dark color.
  2. ) As value, select a color code who support opacity.
  3. ) As value, select the "em" font size who adjust himself.
  4. ) 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).
  5. ) 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

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

See also : help:Infoboxes


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. <nowiki></nowiki>. 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

See also : [1]


See also Edit


Further help and feedbackEdit