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>
.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.
Link to MDN
Link away from MDN
Link away from MDN with ignore-external
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="http://wikipedia.org">Link away from MDN</a> <a href="http://wikipedia.org" class="ignore-external">Link away from MDN with <code>ignore-external</code></a>
.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.
Example macro syntax
{{Glossary("HTML")}}
.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.
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.
The final page display won't show any styling change, but in the editor 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.
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.
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.
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.</p>
.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.
- 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.
Example syntax
<ul class="card-grid"> <li>My card content</li> <li>My second card content</li> <li>My third card content</li> </ul>
.column-container
Denotes a container for specific-width columns. Usually used in conjunction with other classes, as seen below.
My first equal width column.
My second equal width column.
My third equal width column.
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>
.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>
.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>
<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>
.example-bad and .example-good
Good and bad code examples can be highlighted using the .example-good and .example-bad classes.
Good code example
<label for="test">Form label:</label> <input type="text" id="test">
Bad code example
<input type="text">
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>
.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.
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.
Example syntax
<div class="moreinfo"> <!-- content goes here --> </div>
.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.
Note: This is how we usually present a note in an MDN article.
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>
.pull-aside
Pulls content to the side.
Some content that does not go off 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>
Other uses
.moreinfo class.Some content that does not go off to the side.
Some content that does not go off to the side.
<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>
.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 the start of this article. Below we will talk about puppies, giraffes, and dugongs.
This is available via the "Article Summary" option in the MDN editor WYSIWYG styles dropdown.
Note: This class doesn't have any effect on meta tags or SEO (that's .seoSummary's job.)
On zone landing pages, text in the summary is used to create the snippet of text that is overlayed on the mast head.
Example syntax
<p class="summary">This is the start of this article. Below we will talk about puppies, giraffes, and dugongs.</p>
.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>
.threecolumns
Causes a block of content to be displayed in three equal width columns.
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.
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.
This is available via the "Three columns" option in the MDN editor WYSIWYG styles dropdown.
Note: If you want to apply this to a list, then you should apply it to an outer wrapper <div> — if not, it gets applied to the <ul> element, which causes the list bullets to not display in Chrome.
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.</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.</p> </div>
.twocolumns
Causes a block of content to be displayed in two equal width columns.
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.
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.
This is available via the "Two columns" option in the MDN editor WYSIWYG styles dropdown.
Note: If you want to apply this to a list, then you should apply it to an outer wrapper <div> — if not, it gets applied to the <ul> element, which causes the list bullets to not display in Chrome.
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.</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.</p> </div>
.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.)
Warning: Here be dragons!
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>
Table styles
MDN provides specific styles for presentation of HTML <table> elements. This section covers these.
No added classes:
| Variety | Caffeine | Steeping Time | Water Temperature |
|---|---|---|---|
| Black | High | 2-3 minutes | 99 °C |
| Green | Low to Medium | 1-2 minutes | 75 to 80 °C |
| Caffeine free | |||
| Herbal | None | 3-6 minutes | 99 °C |
.standard-table
| Variety | Caffeine | Steeping Time | Water Temperature |
|---|---|---|---|
| Black | High | 2-3 minutes | 99 °C |
| Green | Low to Medium | 1-2 minutes | 75 to 80 °C |
| Caffeine free | |||
| Herbal | None | 3-6 minutes | 99 °C |
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 provide more information for screenreaders, if desired.
Style notes
- Note the different styling applied to the headers (
<th>), and the fact that they havescopeattributes applied for accessibility purposes. - By default, alternating rows have zebra stripes applied, but these can be removed by adding the
.no-stripeclass 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
.fullwidthclass 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>
.standard-table.nostripe
| Variety | Caffeine | Steeping Time | Water Temperature |
|---|---|---|---|
| Black | High | 2-3 minutes | 99 °C |
| Green | Low to Medium | 1-2 minutes | 75 to 80 °C |
| Caffeine free | |||
| Herbal | None | 3-6 minutes | 99 °C |
.standard-table.fullwidth
| Variety | Caffeine | Steeping Time | Water Temperature |
|---|---|---|---|
| Black | High | 2-3 minutes | 99 °C |
| Green | Low to Medium | 1-2 minutes | 75 to 80 °C |
| Caffeine free | |||
| Herbal | None | 3-6 minutes | 99 °C |
.fullwidth-table
| Variety | Caffeine | Steeping Time | Water Temperature |
|---|---|---|---|
| Black | High | 2-3 minutes | 99 °C |
| Green | Low to Medium | 1-2 minutes | 75 to 80 °C |
| Caffeine free | |||
| Herbal | None | 3-6 minutes | 99 °C |