CSS style guide

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

Download source code

`.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.

Example macro syntax

Live sample

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">
&lt;button id="test"&gt; Click me &lt;/button&gt;

<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

SEOSummary as it is used by Facebook

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

1/12

11/12

5/12

7/12

6/12

4/12

2/12

`.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

Half

Third

Quarter

`<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">
  &lt;label for="test"&gt;Form label:&lt;/label&gt;
  &lt;input type="text" id="test"&gt;
</pre>

<h5 id="Bad_code_example">Bad code example</h5>

<pre class="brush: html example-bad">
  &lt;input type="text"&gt;
</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 goes off to the side.

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 goes 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

Column 1

Column 2

`.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

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.

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.

`.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

`.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.

A diagram showing the Table button in the MDN edit interface, which has a picture of a table on it, and the dialog box that it brings up, which has options on it to set row number, column number, which cells are headings, and more.

Style notes

Note the different styling applied to the headers (<th>), and the fact that they have scope 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&nbsp;°C</td>
  </tr>
  <tr>
   <th scope="row">Green</th>
   <td>Low to Medium</td>
   <td>1-2 minutes</td>
   <td>75 to 80&nbsp;°C</td>
  </tr>
  <tr>
   <th scope="row">Herbal</th>
   <td>None</td>
   <td>3-6 minutes</td>
   <td>99&nbsp;°C</td>
  </tr>
 </tbody>
</table>

Live sample

Favourite teas, December 2015
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

CSS style guide

Inline styles

.button

Example syntax

Live example

.external-icon and .ignore-external

Example syntax

Live sample

.glossaryLink

Example macro syntax

Live sample

.hidden

Example syntax

Hidden code Sample

HTML Content

CSS Content

JavaScript Content

.seoSummary

Example syntax

Example of the generated <meta> elements

Example of how Facebook uses it

Block level styles

.callout-box

Example syntax

Live sample

.card-grid

Example syntax

Live sample

.column-container

Example syntax

Live sample

.column-1, .column-2, .column-3 ... all the way up to .column-11

Example syntax

Live sample

.column-quarter, .column-third, .column-half

Example syntax

Live sample

<details>

Example syntax

.equalColumnHeights

Example syntax

Live sample

.example-bad and .example-good

Example syntax

Live sample

Good code example

Bad code example

.moreinfo

Example syntax

Live sample

Tools to build on your JavaScript knowledge

.note

Example syntax

Live sample

.pull-aside

Example Syntax

Live Sample

.summary

Example syntax

Live sample

.topicpage-table

Example syntax

Live sample

.threecolumns

Example syntax

Live sample

.twocolumns

Example syntax

Live sample

.warning

Example syntax

Live sample

Table styles

.standard-table

Style notes

Example syntax

Live sample

Document Tags and Contributors

`.button`

`.external-icon` and .`ignore-external`

`.glossaryLink`

`.hidden`

`.seoSummary`

Example of the generated `<meta>` elements

`.callout-box`

`.card-grid`

`.column-container`

`.column-1`, `.column-2`, `.column-3` ... all the way up to `.column-11`

`.column-quarter`, `.column-third`, `.column-half`

`<details>`

`.equalColumnHeights`

`.example-bad` and `.example-good`

`.moreinfo`

`.note`

`.pull-aside`

`.summary`

`.topicpage-table`

`.threecolumns`

`.twocolumns`

`.warning`

`.standard-table`