Guide to classes and styles used in MDN content

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.

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 talk to us about it.

This section lists the inline styles available for style content blocks on MDN.

Gives any element MDN button styling. Usually used to style links (<button> elements are stripped from article source code, for security reasons.)

Download source code

Example syntax

<a href="https://github.com/mdn/simple-web-worker/archive/gh-pages.zip" class="button">Download source code</a>

Allows you to hide content in the final rendered view. 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">Hidden code Sample</h4>

<div class="hidden">
<h5 id="HTML">HTML</h5>

<pre class="brush: html;">
&lt;button id="test"&gt; Click me &lt;/button&gt;

<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

JavaScript

document.getElementById("test").addEventListener("click", works);
function works(){
    window.alert("you clicked it!");
}

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.

The below example is taken from the Mozilla Add-ons page.

Example syntax

<span class="seoSummary">
  Add-ons allow developers to extend and modify the functionality of Firefox.
</span>

Example of the generated <meta> element

<meta name="description"
      content="Add-ons allow developers to extend and modify the functionality of Firefox.">

This section lists the block-level styles available for style content blocks on MDN.

To create a code example block on MDN, you wrap it in a <pre> element:

<pre>p {
  color: red;
  /* This is my code example */
}</pre>

p {
  color: red;
  /* This is my code example */
}

If you want to use syntax highlighting on your code example, you need to include a class attribute containing a value of brush: highlight-type, where highlight-type can be one of:

• bash
• cpp (for C/C++)
• css
• html
• java
• js (for JavaScript)
• json
• php
• python
• sql
• xml
• wasm (for WebAssembly text format)

For example, to provide CSS highlighting, you'd do this:

<pre class="brush: css">p {
  color: red;
  /* This is my code example */
}</pre>

p {
  color: red;
  /* This is my code example */
}

If no appropriate language is available, just use no brush value, or brush: plain, to get code without syntax highlighting.

A <details> element 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.

<details>
    <summary>
<h4>Example syntax</h4>
    </summary>
<p>This is an example syntax section for <code>.detail</code> that was hidden with <code>.detail</code>. Ooooooh, how meta.</p>
</details>

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

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.

We've used an <h4> for the heading in this example, but you should choose the level of heading that makes sense for your note's position in the document hierarchy — <h2>, <h3>, or <h4>.

Example syntax

<div class="notecard note">
  <h4>Note</h4>
  <p>This is how we usually present a note in an MDN article.</p>
</div>

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

We've used an <h4> for the heading in this example, but you should choose the level of heading that makes sense for your note's position in the document hierarchy — <h2>, <h3>, or <h4>.

Example syntax

<div class="notecard warning">
  <h4>Warning</h4>
  <p>Here be dragons!</p>
</div>

MDN provides specific styles for presentation of HTML <table> elements. This section covers these.

No added classes:

Style notes

• Note the different styling applied to the headers (<th>), and the fact that they have scope attributes applied for accessibility purposes.

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