MDN has many built-in global styles available for use when styling and laying out articles, and this article is a guide to the available classes and when to use them.
Some of these styles can be accessed via the MDN editor's 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.
Please keep in that these styles have been developed to cover the most common situations that arise while styling article content, and that whenever possible, you should try to use the available classes; diverging too much from the standard content look-and-feel isn't good for consistency and readability. If you feel that your page absolutely requires some kind of special custom styling, you should first broach the subject in the MDN Discourse forum.
Note: If you want to search for places where a given class is being used on MDN, you can do so using a URL of the form https://developer.mozilla.org/en-US/search?locale=en-US&css_classnames=desired-css-class. For example, to find pages that use our button class, try the URL https://wiki.developer.mozilla.org/en-US/search?locale=*&css_classnames=button.
Important: This guide is incomplete. See Updating this guide for information on how to help us finish it.
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.
Note: Most of the time, we don't want to use these. .external-icon is added automatically in order to help protect users from unknowingly leaving MDN. The only generally acceptable use cases are links to MDN-specific domains or subdomains, such as the ones we use for our sample code or other services.
Link to MDN
Link away from MDN
Link away from MDN with ignore-external
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">HTML</h5>
<pre class="brush: html;">
<button id="test"> Click me </button>
<h5 id="CSS">CSS</h5>
<pre class="brush: css;">
button {
background-color: #a00;
color:#fff;
font-size: 20px;
}
</pre>
</div>
<h5 id="JavaScript_Content">JavaScript Content</h5>
<pre class="brush: js;">
document.getElementById("test").addEventListener("click", works);
function works() {
window.alert("you clicked it!");
}
</pre>
<p>{{EmbedLiveSample("Hidden_Code_Sample")}}</p>
Hidden code Sample
HTML
<button id="test">Click Me</button>
CSS
button{
background-color: #a00;
color:#fff;
font-size: 20px;
}
JavaScript
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
Note: This is not the same as the .summary class, which creates a special "About this page" style blurb box. That class does not set the SEO summary used by search engines or the macros that MDN uses to generate tooltips and to automatically produce menus listing subpages.
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>
.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.
<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> </details>
.example-bad and .example-good
Good and bad examples can be highlighted using the .example-good and .example-bad classes. These are usually used on <pre> blocks denoting sample code snippets, but can also be used on other blocks.
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>
.blockIndicator.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="blockIndicator note" role="complementary"> <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.
<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.
Important: This is not the same as the .seoSummary class, which establishes the section of text which is used by search engines to summarize the page in results listings and by MDN to create tooltips and menus of page titles and their summaries. This class is strictly a visual effect. You can use both classes together if you wish in order to establish both a visible and an effective summary for 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.
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>
.blockIndicator.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="blockIndicator 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>Favorite 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 |
Updating this guide
This guide is incomplete, and is being gradually updated over time. If you'd like to help update or add to this guide, please feel free to do so! If you have questions or would like to discuss and idea you have for improving this article — or have suggestions for how we can improve the style or layout of MDN Web Docs in general — you have several options:
If you want to help with completing it, or want to report a missing or incorrectly-documented style, contact are Chris Mills (in Discourse as chrisdavidmills and on Mozilla IRC as chrismills)
- Start a discussion on the MDN Web Docs Discourse forum
- If you have an idea you'd like to discuss with the MDN Web Docs community or the staff, please feel free to start a topic on the MDN Web Docs forum on the Mozilla Discourse discussion site.
- File your suggestion in GitHub
- If you want to record your suggestion in our official issue tracking system, you are encouraged to do so. It's a good idea to discuss it first using one of the channels above, first, but it's not required.
- Ask questions in our IRC channel
- Our writing staff and community of contributors use the #mdn channel on Mozilla's IRC server to have discussions and share ideas. You're welcome to join us there and ask your questions or make your suggestions! (Note that IRC is poorly attended and may be discontinued in 2020; Discourse is a better bet for getting answers.)