Community Central


CSS Guide

Avin ~ παρυηzεΙ ~ Slay
Avin-blog-photo My Blogs:
CSS Guides
Other Users Helpful Blogs
Jr Mime's Blogs:

Rofl's Blogs On Infoboxes:

Fubuki's Blogs


Okay so this is where I will link to all the blogs in my series about CSS. First though, I need to tell you how you can use css in <tags>, wikitext tables and in your wiki's MediaWiki:Wikia.css or Common.css

Using CSS in Tags

When we use CSS in a <tag> it gets called upon, called being us telling the wiki that we want it to display something a certain way.

  • All of the css styling in a tag is located inbetween the two quotation marks in this statement: style="all your css goes in here"
  • So it should look like this: <tag style="All my css is in here">Hah font/text</tag>

Using CSS in Wikitext Tables

When you are applying CSS to the whole table, you put the following:

  • {|style="all my CSS goes in here"

When you are applying it to a single header, cell, or even a row.

  • !style="css is in here"| the pipe at the end tells the header what to display with your CSS changes.
  • |style="css is in here"| the pipe at the end tells the cell what to display with your CSS changes.
  • |- style="css is in here" This affects the css of a row. c:

Using CSS in Your MediaWiki

Okay, so you have classes that you can call upon in a tag. With that I could have <tag class="ninjaclass"> or {|class="ninjaclass" which would take away the need for using the <code>style="css in here" every time I wanted to change a <tag> or wikitext table.

You can also have ID's which work the same way as classes, except you put <tag id="ninjaid"> instead of the class="ninjaclass"

Now, on the MediaWiki CSS pages, you have your classes and id's like this.

#ninjaid { css styling goes in here then we close it with a }
.ninjaclass { css styling goes in here then we close it with a }

the # and period, tell us what form of css we are changing, 

# is for ID's and the period is for Classes. :D

Using CSS anywhere

To actually use CSS we have to use it very specifically. style="border:3px solid black;

  • I started the css change with what I was changing: border
  • I put a : after border to show that I was showing it what it was changing about the border
  • 3px solid black tells border: what I'm changing about the border:
  • ; Makes sure that my changes don't over-lap. Make sure that you put one of these ; after every css statement, (these are called css statements.) so that your coding will work. c:

Fubuki's Recommendation

The following information is copied from w3schools and I've added a few thoughts, as it explains the specifications of how CSS reads styling.

What style will be used when there is more than one style specified for an HTML element? ––the HTML element is a <tag>

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

  1. Browser default
  2. External style sheet
  3. Internal style sheet (in the head section) This one isn't useable on wikia.
  4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

Also on Fandom

Random Wiki