Warning: The content of this article may be out of date. Last updated : Apr 3 2014 8:00:31 AM

See the updated article Guide to classes and styles used in MDN content for current information.

Defined CSS classes

The following are the custom CSS classes that we have defined for the Devmo wiki. If, for whatever reason, you need a custom class defined in the CSS for this wiki, feel free to contact the documentation team lead.

Class Result
div.bug For displaying bug text within the body of a page.
.cleared Use this class on the first block after text that's wrapped around an image using the "alignment direction" option in the "Image properties" dialog.
.standard-table Basic standard table styling.
.fullwidth-table Table that has width set to 100%. (This table is an example.)
.standard-table td.header Header styling for standard-table.
.fullwidth-table td.header Header styling for fullwidth-table.
div.breadcrumbs Styling for custom breadcrumbs extension.
div.breadcrumbs a.breadcrumbs Styling for links in breadcrumbs string.
div.breadcrumbs span.breadcrumbs Styling for local page title in breadcrumbs string.
ignore-external Use this class on images that are inside links to prevent them from getting the external reference icon displayed next to them.
pre.brush:xml Syntax highlighter for HTML, XML, and all XML-base Syntax.
If you want to use this class, great JS library will rewrite to other HTML elements from your <pre> element.
pre.brush:css Syntanx highlighter for CSS.
pre.brush:js Syntax highlighter for JavaScript.
.threecolumns Displays text in three columns (on browsers supporting CSS3 columns).
.cols-2 Displays text in two columns (on browsers supporting CSS3 columns).
.cols-3 Displays text in three columns (on browsers supporting CSS3 columns).
.cols-4 Displays text in four columns (on browsers supporting CSS3 columns).
.cols-5 Displays text in five columns (on browsers supporting CSS3 columns).

Examples

table.standard-table

table header 1 table header 2
This is an example of: table.standard-table

table.fullwidth-table

table header 1 table header 2
This is an example of: table.fullwidth-table

Divs

Bugs

Use <div class="bug"> for referencing known bugs, with links to the relevant bugzilla entry:

Warnings

Use <div class="blockIndicator warning"> (via Warning) for highlighting warnings within the documentation. Eventually we'll do something cool and add icons or something.

This is a warning.

Notes

<div class="blockIndicator note"> is used (via Note) for highlighting notes within the documentation. Instead of using the div with a class directly, use the template.

This is a note. It's a very interesting note.

Document Tags and Contributors

Tags: 
Last updated by: Sheppy,