MDN has many built-in global styles available for use when styling and laying out articles — this article serves as a reference guide to what's available, explaining which styles are available and how to use each one.
Some of these styles can be accessed via the MDN Editing Toolbar. In such cases, we'll include the phrase "Editing Toolbar" under the heading for the style, and an image of the relevant toolbar button.
One thing to bear in mind is that these styles have been developed to cover the most common of uses cases with respect to article styling. Ideally you should try to make do with what's on offer — diverging too much from the standard page look and feel would not be good for consistency and readability. If you feel that your page absolutely requires some kind of special custom styling, you should begin by starting a discussion on the MDN mailing list.
Note: If you want to search for usage of a particular CSS class on MDN, you can use the URL structure https://developer.mozilla.org/en-US/search?locale=&css_classnames=[YOUR_CSS_CLASS] — for example try the following link: https://developer.mozilla.org/en-US/search?locale=*&css_classnames=card-grid.
Important: This page is not finished, and is being gradually added to over time. If you want to help with completing it, or want to report a missing or incorrectly-documented style, contact are Chris Mills (on Mozilla IRC as chrismills, also on the mdn and dev-mdc mailing list.
Inline styles
This section lists the inline styles available for style content blocks on MDN.
.button
Gives any element MDN button styling. Usually used to style links (<button>
elements are stripped from article source code, for security reasons.)
Example syntax
<a href="https://github.com/mdn/simple-web-worker/archive/gh-pages.zip" class="button">Download source code</a>
Live example
.external-icon
and .ignore-external
Links to content outside of MDN are automatically formated to have the class external-icon
added to them, which creates an icon indicating that they lead away from the site. In some cases, however, this icon is unwanted and interferes with other styles. It can be removed by adding the ignore-external
class to the link.
Most of the time, we don't want to use these. .external-icon
is added automatically and there are very few cases we want to hide the fact that people are leaving MDN.
Example syntax
<a href="/">Link to MDN</a> <a href="https://wikipedia.org">Link away from MDN</a> <a href="https://wikipedia.org" class="ignore-external">Link away from MDN with <code>ignore-external</code></a>
Live sample
Link to MDN
Link away from MDN
Link away from MDN with ignore-external
.glossaryLink
This is a class for styling glossary links to make them less obtrusive on the page. This class is added using a KumaScript macro, as outlined in Commonly Used Macros, so wouldn't be inserted manually.
.hidden
Allows you to hide content in the wiki articles but view it in the editor. Typically this is used to provide HTML, CSS, and JavaScript to the script that creates the live code samples while only displaying the relevant language to the reader.
Example syntax
<h4 id="Hidden_Code_Sample" name="Hidden_Code_Sample">Hidden code Sample</h4>
<div class="hidden">
<h5 id="HTML_Content">HTML Content</h5>
<pre class="brush: html language-html">
<button id="test"> Click me </button>
<h5 id="CSS_Content">CSS Content</h5>
<pre class="brush: css language-css">
button {
background-color: #a00;
color:#fff;
font-size: 20px;
}
</pre>
</div>
<h5 id="JavaScript_Content">JavaScript Content</h5>
<pre class="brush: js language-js">
document.getElementById("test").addEventListener("click", works);
function works() { window.alert('works');
</pre>
<p>{{ EmbedLiveSample('Hidden_Code_Sample') }}</p>
Hidden code Sample
HTML Content
<button id="test">Click Me</button>
CSS Content
button{ background-color: #a00; color:#fff; font-size: 20px;
JavaScript Content
document.getElementById("test").addEventListener("click", works); function works(){ window.alert("you clicked it!");}
.seoSummary
This is a class that has no visible effect on content on the page, however, if the class is applied to an element (usually a <span>
) KumaScript will use the element's content to create description
<meta>
tags. These provide a short description to be used in search engines and sharing sites like Facebook and Twitter. This class is available via the "SEO Summary" option in the MDN editor WYSIWYG styles dropdown.
The final page display won't show any styling change, but the text that is set as the SEO summary will be marked with a dotted outline and a "SEO Summary" label", as shown below:
The below examples are taken from the Mozilla Add-ons page.
Note: If .seoSummary
is not explicitly specified on a page, the first paragraph is automatically set as the SEO summary: there is no need to use this on most pages.
Example syntax
<p> <span class="seoSummary">Add-ons add new functionality to <a href="/en-US/docs/Mozilla/Gecko">Gecko</a>-based applications such as Firefox, SeaMonkey, and Thunderbird.</span> There are two main types of add-on: <a href="#Extensions">Extensions</a> add new features to the application, while <a href="#Themes">Themes</a> modify the application's user interface. </p>
Example of the generated <meta>
elements
<meta property="og:description" content="Add-ons add new functionality to Gecko -based applications such as Firefox, SeaMonkey, and Thunderbird."> <meta name="description" content="Add-ons add new functionality to Gecko -based applications such as Firefox, SeaMonkey, and Thunderbird."> <meta name="twitter:description" content="Add-ons add new functionality to Gecko -based applications such as Firefox, SeaMonkey, and Thunderbird.">
Example of how Facebook uses it
Block level styles
This section lists the block-level styles available for style content blocks on MDN.
.callout-box
Allows you to create a right-floating box for containing a callout, or related information you want to highlight.
Example syntax
<div class="callout-box"> <p>This is an exciting callout</p> </div> <p>Example content to float around</p> <p>Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch, health goth roof party lo-fi next level 8-bit occupy wolf XOXO salvia synth stumptown. Selfies 90's plaid, health goth messenger bag crucifix tote bag ugh American Apparel. Blue Bottle actually Kickstarter umami +1. Helvetica pickled twee, leggings you probably haven't heard of them mustache American Apparel VHS 8-bit Banksy Wes Anderson.</p>
Live sample
This is an exciting callout
Example content to float around
Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch, health goth roof party lo-fi next level 8-bit occupy wolf XOXO salvia synth stumptown. Selfies 90's plaid, health goth messenger bag crucifix tote bag ugh American Apparel. Blue Bottle actually Kickstarter umami +1. Helvetica pickled twee, leggings you probably haven't heard of them mustache American Apparel VHS 8-bit Banksy Wes Anderson.
.card-grid
Allows you to place a number of cards next to each other to call out specific contents or map out a multi-step call to action. The cards are spaced evenly in the available horizontal space; about 2–3 works best.
Example syntax
<ul class="card-grid"> <li>My card content</li> <li>My second card content</li> <li>My third card content</li> </ul>
Live sample
- CSS Reference
An exhaustive reference for seasoned Web developers describing every property and concept of CSS.
- CSS Tutorial
A step-by-step introduction to help complete beginners get started. It presents all the needed fundamentals.
- CSS3 Demos
A collection of demos showing the latest CSS technologies in action: a boost for the creativity.
.column-container
Denotes a container for specific-width columns. Usually used in conjunction with other classes, as seen below.
Example syntax
<div class="column-container"> <div class="column-4"> <p>My first equal width column.</p> </div> <div class="column-4"> <p>My second equal width column.</p> </div> <div class="column-4"> <p>My third equal width column.</p> </div> </div>
Live sample
My first equal width column.
My second equal width column.
My third equal width column.
.column-1
, .column-2
, .column-3
... all the way up to .column-11
Specifies a specific-width column, to be contained by .column-container
, that is a certain number of twelvths of the column container wide (based on a 12 column grid layout.) A gutter is left between each column pair.
Example syntax
<div class="column-container"> <div class="column-1" style="background-color: yellow;">1/12</div> <div class="column-11" style="background-color: lime;">11/12</div> </div> <div class="column-container"> <div class="column-5" style="background-color: yellow;">5/12</div> <div class="column-7" style="background-color: lime;">7/12</div> </div> <div class="column-container"> <div class="column-6" style="background-color: yellow;">6/12</div> <div class="column-4" style="background-color: lime;">4/12</div> <div class="column-2" style="background-color: pink;">2/12</div> </div>
Live sample
.column-quarter
, .column-third
, .column-half
Specifies a specific-width column, to be contained by .column-container
, that is a certain portion of the column container wide. A gutter is left between each column pair.
These classes are equivalents of commonly-used numerical width classes, as follows:
.column-quarter
— equivalent to.column-3
.column-third
— equivalent to.column-4
.column-half
— equivalent to.column-6
Example syntax
<div class="column-container"> <div class="column-half" style="background-color: yellow;">Half</div> <div class="column-half" style="background-color: lime;">Half</div> </div> <div class="column-container"> <div class="column-third" style="background-color: yellow;">Third</div> <div class="column-third" style="background-color: lime;">Third</div> <div class="column-third" style="background-color: pink;">Third</div> </div> <div class="column-container"> <div class="column-quarter" style="background-color: yellow;">Quarter</div> <div class="column-quarter" style="background-color: lime;">Quarter</div> <div class="column-quarter" style="background-color: pink;">Quarter</div> <div class="column-quarter" style="background-color: cyan;">Quarter</div> </div>
Live sample
<details>
Can be wrapped around a block of content to hide that content and instead display a "+ Details" link that can be clicked to expand/collapse the content contained within. You can see it used throughout this article.
Example syntax
This is an example syntax section for <details>
that was hidden with <details>
. Ooooooh, how meta.
<div class="details"> <h4>Example syntax</h4> <p>This is an example syntax section for <code>.detail</code> that was hidden with <code>.detail</code>. Ooooooh, how meta.</p> </div>
.equalColumnHeights
Used on the Firefox OS landing page to wrap columns that should all be the same height — it caues them to adopt the same height, regardless of how much content is inside each one.
Example syntax
<div class="equalColumnHeights"> <div> <!-- column content here --> </div> <div> <!-- column content here --> </div> </div>
Live sample
Note: Some padding and background color have been included on the following child elements just to make the effect easier to see.
Some text
And a new paragraph
Some text
here
.example-bad
and .example-good
Good and bad code examples can be highlighted using the .example-good
and .example-bad
classes.
You should always use headings with these classes, as shown below — CSS is unable to add localized language to the page identifying whether they're good or bad so this is important for people who rely on screen readers, and people with different cultural backgrounds (green and red are not universally good and bad.)
Example syntax
<h5 id="Good_code_example">Good code example</h5> <pre class="brush: html example-good"> <label for="test">Form label:</label> <input type="text" id="test"> </pre> <h5 id="Bad_code_example">Bad code example</h5> <pre class="brush: html example-bad"> <input type="text"> </pre>
Live sample
Good code example
<label for="test">Form label:</label> <input type="text" id="test">
Bad code example
<input type="text">
.moreinfo
This class was originally designed to present a list of links for further reading but it can be used for any information that leads away from the current page.
Example syntax
<div class="moreinfo"> <!-- content goes here --> </div>
Live sample
Tools to build on your JavaScript knowledge
- JavaScript frameworks
- Developed by Google Angular.js is one of the best known frameworks.
- Ember.js is open source and community driven.
- JavaScript Compilers
- Babel lets you write ES2015 and compiles to more backwards compatible code.
.note
Turns a section of content into a note box, which is normally a useful note that tangentially relates to the current subject but doesn't directly fit into the flow of information. This is available via the "Note box" option in the MDN editor WYSIWYG styles dropdown.
Example syntax
<div class="note"> <p><strong>Note</strong>: This is how we usually present a note in an MDN article.</p> </div>
Live sample
Note: This is how we usually present a note in an MDN article.
.pull-aside
Pulls content to the side.
Example Syntax
<div class="pull-right">Some content that goes off to the side.</div> <p>Some content that does not go off to the side.</p>
Live Sample
Some content that does not go off to the side.
Usually it will be combined with other classes.
<div class="pull-aside"><div class="moreinfo">Some content that goes off to the side.</div></div> <p>Some content that does not go off to the side.</p> <p>Some content that does not go off to the side.</p>
Some content that does not go off to the side.
Some content that does not go off to the side.
.summary
Creates a summary box for the page, which visually manifests as a grey box with extra padding — should be used for the opening paragraph of an article (but not for reference articles), to give it extra importance on the page. This is available via the "Article Summary" option in the MDN editor WYSIWYG styles dropdown.
On zone landing pages, text in the summary is used to create the snippet of text that is overlayed on the mast head.
Note: This class doesn't have any effect on meta tags or SEO (that's .seoSummary
's job.)
Example syntax
<p class="summary">This is the start of this article. Below we will talk about puppies, giraffes, and dugongs.</p>
Live sample
This is the start of this article. Below we will talk about puppies, giraffes, and dugongs.
.topicpage-table
Creates two columns seperated with a thick grey border. Often used on landing pages. This usually works best with nested <div>
s. Note that the two child elements have to be given the .section
class.
Example syntax
<div class="topicpage-table"> <div class="section">Column 1</div> <div class="section">Column 2</div> </div>
Live sample
.threecolumns
Causes a block of content to be displayed in three equal width columns. This is available via the "Three columns" option in the MDN editor WYSIWYG styles dropdown.
Example syntax
<div class="threecolumns"> <p>Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch, health goth roof party lo-fi next level 8-bit occupy wolf XOXO salvia synth stumptown. Selfies 90's plaid, health goth messenger bag crucifix tote bag ugh American Apparel. Blue Bottle actually Kickstarter umami +1. Helvetica pickled twee, leggings you probably haven't heard of them mustache American Apparel VHS 8-bit Banksy Wes Anderson.</p> <p>Street art PBR YOLO pug, before they sold out fixie artisan blog bicycle rights beard direct trade chillwave. Fanny pack cornhole whatever, Austin single-origin coffee ethical church-key distillery fashion axe tofu farm-to-table irony tattooed Tumblr. Craft beer Thundercats Austin gentrify, wolf Echo Park asymmetrical hella sartorial. Sustainable swag PBR&B XOXO Carles forage. Seitan XOXO church-key irony Blue Bottle fap. Keffiyeh Bushwick jean shorts, pickled Neutra raw denim quinoa Banksy squid. Ugh gluten-free flexitarian fanny pack pop-up crucifix.</p> </div>
Live sample
Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch, health goth roof party lo-fi next level 8-bit occupy wolf XOXO salvia synth stumptown. Selfies 90's plaid, health goth messenger bag crucifix tote bag ugh American Apparel. Blue Bottle actually Kickstarter umami +1. Helvetica pickled twee, leggings you probably haven't heard of them mustache American Apparel VHS 8-bit Banksy Wes Anderson.
Street art PBR YOLO pug, before they sold out fixie artisan blog bicycle rights beard direct trade chillwave. Fanny pack cornhole whatever, Austin single-origin coffee ethical church-key distillery fashion axe tofu farm-to-table irony tattooed Tumblr. Craft beer Thundercats Austin gentrify, wolf Echo Park asymmetrical hella sartorial. Sustainable swag PBR&B XOXO Carles forage. Seitan XOXO church-key irony Blue Bottle fap. Keffiyeh Bushwick jean shorts, pickled Neutra raw denim quinoa Banksy squid. Ugh gluten-free flexitarian fanny pack pop-up crucifix.
.twocolumns
Causes a block of content to be displayed in two equal width columns. This is available via the "Two columns" option in the MDN editor WYSIWYG styles dropdown.
Example syntax
<div class="twocolumns"> <p>Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch, health goth roof party lo-fi next level 8-bit occupy wolf XOXO salvia synth stumptown. Selfies 90's plaid, health goth messenger bag crucifix tote bag ugh American Apparel. Blue Bottle actually Kickstarter umami +1. Helvetica pickled twee, leggings you probably haven't heard of them mustache American Apparel VHS 8-bit Banksy Wes Anderson.</p> <p>Street art PBR YOLO pug, before they sold out fixie artisan blog bicycle rights beard direct trade chillwave. Fanny pack cornhole whatever, Austin single-origin coffee ethical church-key distillery fashion axe tofu farm-to-table irony tattooed Tumblr. Craft beer Thundercats Austin gentrify, wolf Echo Park asymmetrical hella sartorial. Sustainable swag PBR&B XOXO Carles forage. Seitan XOXO church-key irony Blue Bottle fap. Keffiyeh Bushwick jean shorts, pickled Neutra raw denim quinoa Banksy squid. Ugh gluten-free flexitarian fanny pack pop-up crucifix.</p> </div>
Live sample
Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch, health goth roof party lo-fi next level 8-bit occupy wolf XOXO salvia synth stumptown. Selfies 90's plaid, health goth messenger bag crucifix tote bag ugh American Apparel. Blue Bottle actually Kickstarter umami +1. Helvetica pickled twee, leggings you probably haven't heard of them mustache American Apparel VHS 8-bit Banksy Wes Anderson.
Street art PBR YOLO pug, before they sold out fixie artisan blog bicycle rights beard direct trade chillwave. Fanny pack cornhole whatever, Austin single-origin coffee ethical church-key distillery fashion axe tofu farm-to-table irony tattooed Tumblr. Craft beer Thundercats Austin gentrify, wolf Echo Park asymmetrical hella sartorial. Sustainable swag PBR&B XOXO Carles forage. Seitan XOXO church-key irony Blue Bottle fap. Keffiyeh Bushwick jean shorts, pickled Neutra raw denim quinoa Banksy squid. Ugh gluten-free flexitarian fanny pack pop-up crucifix.
.warning
Turns a section of content into a warning box, which normally communicates a vital fact that the reader needs to be really careful about (e.g. they need to do something, or avoid something to avoid serious issues.) This is available via the "Warning box" option in the MDN editor WYSIWYG styles dropdown.
Example syntax
<div class="warning"> <p><strong>Warning</strong>:Here be dragons!</p> </div>
Live sample
Warning: Here be dragons!
Table styles
MDN provides specific styles for presentation of HTML <table>
elements. This section covers these.
.standard-table
A standard table can be created using the Table button in the MDN editor WYSIWYG toolbar. Pressing this brings up the Table Properties dialog box, which contains a number of functions. Generally you'll just want to use it to set the number of rows and columns, which cells are table headers (<th>
), and a visible <caption>
and summary
attribute to prpvide more information for screenreaders, if desired.
Style notes
- Note the different styling applied to the headers (
<th>
), and the fact that they havescope
attributes applied for accessibility purposes. - By default, alternating rows have zebra stripes applied, but these can be removed by adding the
.no-stripe
class to them. - You can force a table to span the full width of the content area (or other immediate containing box, if it is not the content area) by adding the
.fullwidth
class to the<table>
element.
Example syntax
<table class="standard-table" summary="This table details what tea we liked to drink back in the heady month of December 2015"> <caption>Favourite teas, December 2015</caption> <thead> <tr> <th scope="row">Variety</th> <th scope="col">Caffeine</th> <th scope="col">Steeping Time</th> <th scope="col">Water Temperature</th> </tr> </thead> <tbody> <tr> <th scope="row">Black</th> <td>High</td> <td>2-3 minutes</td> <td>99 °C</td> </tr> <tr> <th scope="row">Green</th> <td>Low to Medium</td> <td>1-2 minutes</td> <td>75 to 80 °C</td> </tr> <tr> <th scope="row">Herbal</th> <td>None</td> <td>3-6 minutes</td> <td>99 °C</td> </tr> </tbody> </table>
Live sample
Variety | Caffeine | Steeping Time | Water Temperature |
---|---|---|---|
Black | High | 2-3 minutes | 99 °C |
Green | Low to Medium | 1-2 minutes | 75 to 80 °C |
Herbal | None | 3-6 minutes | 99 °C |