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.
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>
.hidden
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;">
<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
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.
Note
If .seoSummary
is not explicitly specified on a page, the first paragraph is automatically set as the SEO summary.
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.">
Block level styles
This section lists the block-level styles available for style content blocks on MDN.
Code syntax highlighting
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>This gives you the following output:
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>Which gives you the following output:
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.
details
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.
Example syntax
This is an example syntax section for <details>
that was hidden with <details>
. Ooooooh, how meta.
<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>
Note
You can include an open
attribute on the <details>
element to make it opened by default.
.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 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>
.note.notecard
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.
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>
.notecard.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!
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>
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 |
Style notes
- Note the different styling applied to the headers (
<th>
), and the fact that they havescope
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 °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>