Remove inline styles from Web/API docs

files/en-us/web/api/selection/index.html

@@ -87,10 +87,8 @@ <h3 id="Multiple_ranges_in_a_selection">Multiple ranges in a selection</h3>
 
 <p>A selection object represents the {{DOMxRef("Range")}}s that the user has selected. Typically, it holds only one range, accessed as follows:</p>
 
-<div style="overflow: hidden;">
 <pre class="brush:js">var selObj = window.getSelection();
 var range  = selObj.getRangeAt(0);</pre>
-</div>
 
 <ul>
  <li><code><var>selObj</var></code> is a Selection object</li>

files/en-us/web/api/sensor/stop/index.html

@@ -25,9 +25,7 @@ <h3 id="Parameters">Parameters</h3>
 
 <p>None.</p>
 
-<p><span
-    style='background-color: #333333; color: #ffffff; font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.6rem; letter-spacing: -0.00333rem;'>Return
-    value</span></p>
+<h3 id="Return_value">Return value</h3>
 
 <p>{{jsxref('undefined')}}</p>
 

files/en-us/web/api/service_worker_api/using_service_workers/index.html

@@ -45,11 +45,11 @@ <h2 id="Basic_architecture">Basic architecture</h2>
  <li>The Service worker will now control pages, but only those opened after the <code>register()</code> is successful. i.e. a document starts life with or without a Service worker and maintains that for its lifetime. So documents will have to be reloaded to actually be controlled.</li>
 </ol>
 
-<p><img alt="" src="sw-lifecycle.png" style="display: block; margin: 0px auto;"></p>
+<p><img alt="" src="sw-lifecycle.png"></p>
 
 <p>The below graphic shows a summary of the available service worker events:</p>
 
-<p><img alt="install, activate, message, fetch, sync, push" src="sw-events.png" style="display: block; margin: 0px auto;"></p>
+<p><img alt="install, activate, message, fetch, sync, push" src="sw-events.png"></p>
 
 <h3 id="Promises">Promises</h3>
 
@@ -142,7 +142,7 @@ <h2 id="Service_workers_demo">Service workers demo</h2>
 
 <p>To demonstrate just the very basics of registering and installing a service worker, we have created a simple demo called <a href="https://github.com/mdn/sw-test">sw-test</a>, which is a simple Star wars Lego image gallery. It uses a promise-powered function to read image data from a JSON object and load the images using Ajax, before displaying the images in a line down the page. We’ve kept things static and simple for now. It also registers, installs, and activates a service worker, and when more of the spec is supported by browsers it will cache all the files required so it will work offline!</p>
 
-<p><img alt="" src="demo-screenshot.png" style="display: block; margin: 0px auto;"><br>
+<p><img alt="" src="demo-screenshot.png"><br>
  <br>
  <br>
  You can see the <a href="https://github.com/mdn/sw-test/">source code on GitHub</a>, and <a href="https://mdn.github.io/sw-test/">view the example live</a>. The one bit we’ll call out here is the promise (see <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L22-L47">app.js lines 22-47</a>), which is a modified version of what you read about above, in the <a href="https://mdn.github.io/js-examples/promises-test/">Promises test demo</a>. It is different in the following ways:</p>
@@ -204,7 +204,7 @@ <h4 id="Why_is_my_service_worker_failing_to_register">Why is my service worker f
  <li>It is also not allowed to point to a service worker of a different origin than that of your app.</li>
 </ol>
 
-<p><img alt="" src="important-notes.png" style="display: block; margin: 0px auto;"></p>
+<p><img alt="" src="important-notes.png"></p>
 
 <p>Also note:</p>
 
@@ -261,7 +261,7 @@ <h3 id="Custom_responses_to_requests">Custom responses to requests</h3>
 
 <p>Now you’ve got your site assets cached, you need to tell service workers to do something with the cached content. This is easily done with the <code>fetch</code> event.</p>
 
-<p><img alt="" src="sw-fetch.png" style="display: block; margin: 0 auto;"></p>
+<p><img alt="" src="sw-fetch.png"></p>
 
 <p>A <code>fetch</code> event fires every time any resource controlled by a service worker is fetched, which includes the documents inside the specified scope, and any resources referenced in those documents (for example if <code>index.html</code> makes a cross origin request to embed an image, that still goes through its service worker.)</p>
 

files/en-us/web/api/serviceworkerglobalscope/clients/index.html

@@ -21,7 +21,7 @@
 
 <h2 id="Syntax">Syntax</h2>
 
-<pre class="brush: js" style="font-size: 14px;">swClients = self.clients
+<pre class="brush: js">swClients = self.clients
 </pre>
 
 <h3 id="Value">Value</h3>

files/en-us/web/api/serviceworkerglobalscope/onnotificationclick/index.html

@@ -23,7 +23,7 @@
 
 <h2 id="Syntax">Syntax</h2>
 
-<pre class="brush: js" style="font-size: 14px;">ServiceWorkerGlobalScope.onnotificationclick = function(NotificationEvent) { ... };
+<pre class="brush: js">ServiceWorkerGlobalScope.onnotificationclick = function(NotificationEvent) { ... };
 </pre>
 
 <h2 id="Example">Example</h2>

files/en-us/web/api/serviceworkerglobalscope/onnotificationclose/index.html

@@ -33,8 +33,7 @@
 
 <h2 id="Syntax">Syntax</h2>
 
-<pre class="brush: js"
-  style="font-size: 14px;">ServiceWorkerGlobalScope.onnotificationclose = function(NotificationEvent) { ... };
+<pre class="brush: js">ServiceWorkerGlobalScope.onnotificationclose = function(NotificationEvent) { ... };
 ServiceWorkerGlobalScope.addEventListener('notificationclose', function(NotificationEvent) { ... });</pre>
 
 <h2 id="Example">Example</h2>

files/en-us/web/api/serviceworkerglobalscope/onsync/index.html

@@ -5,17 +5,7 @@
 ---
 <p>{{APIRef("")}}</p>
 
-<p>The <strong><code>ServiceWorkerGlobalScope.onsync</code></strong> event of the
-    {{domxref("ServiceWorkerGlobalScope")}} interface is<span
-        style="line-height: 1.5;"> fired whenever a </span><code
-        style="font-style: normal; font-weight: normal; line-height: 1.5;"><a href="/en-US/docs/Web/Events/SyncEvent">SyncEvent</a></code><span
-        style="line-height: 1.5;"> event occurs. This is triggered when a call
-        to </span><a href="/en-US/docs/Web/API/SyncManager/register"
-        style="line-height: 1.5;"
-        title="The register method of the SyncManager interface returns a Promise that resolves to a SyncRegistration instance."><code>SyncManager.register</code></a><span
-        style="line-height: 1.5;"> is made from a service worker client page. The attempt
-        to sync is made either immediately if the network is available or as soon as the
-        network becomes available. </span></p>
+<p>The <strong><code>ServiceWorkerGlobalScope.onsync</code></strong> event of the {{domxref("ServiceWorkerGlobalScope")}} interface is fired whenever a <code><a href="/en-US/docs/Web/Events/SyncEvent">SyncEvent</a></code> event occurs. This is triggered when a call to <a href="/en-US/docs/Web/API/SyncManager/register" title="The register method of the SyncManager interface returns a Promise that resolves to a SyncRegistration instance."><code>SyncManager.register</code></a> is made from a service worker client page. The attempt to sync is made either immediately if the network is available or as soon as the network becomes available.</p>
 
 <h2 id="Syntax">Syntax</h2>
 

files/en-us/web/api/serviceworkerglobalscope/registration/index.html

@@ -17,7 +17,7 @@
 
 <h2 id="Syntax">Syntax</h2>
 
-<pre class="brush: js" style="font-size: 14px;">serviceWorkerRegistration = self.registration
+<pre class="brush: js">serviceWorkerRegistration = self.registration
 </pre>
 
 <h3 id="Value">Value</h3>

files/en-us/web/api/staticrange/endcontainer/index.html

@@ -12,15 +12,10 @@
 - endContainer
 browser-compat: api.StaticRange.endContainer
 ---
-<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{APIRef("DOM
-    WHATWG")}}</span></p>
-
-<p><span class="seoSummary"><span
-      style="font-size: 1rem; letter-spacing: -0.00278rem;">The </span><strong
-      style="font-size: 1rem; letter-spacing: -0.00278rem;"><code>endContainer</code></strong><span
-      style="font-size: 1rem; letter-spacing: -0.00278rem;"> property of the
-      {{domxref("StaticRange")}} interface returns the end {{domxref("Node")}} for the
-      range.</span></span></p>
+<p>{{APIRef("DOM
+    WHATWG")}}</p>
+
+<p><span class="seoSummary">The <strong><code>endContainer</code></strong> property of the {{domxref("StaticRange")}} interface returns the end {{domxref("Node")}} for the range.</span></p>
 
 <h2 id="Syntax">Syntax</h2>
 

files/en-us/web/api/streams_api/index.html

@@ -23,7 +23,7 @@ <h2 id="Concepts_and_usage">Concepts and usage</h2>
 
 <p>With Streams being available to JavaScript, this all changes — you can now start processing raw data with JavaScript bit by bit as soon as it is available on the client-side, without needing to generate a buffer, string, or blob.</p>
 
-<p><img alt="" src="concept.png" style="display: block; margin: 0px auto;"></p>
+<p><img alt="" src="concept.png"></p>
 
 <p>There are more advantages too — you can detect when streams start or end, chain streams together, handle errors and cancel streams as required, and react to the speed of the stream is being read at.</p>
 

files/en-us/web/api/textrange/index.html

@@ -47,7 +47,7 @@ <h2 id="Methods">Methods</h2>
  <dd>Move the caret to the beginning or end of the current range.</dd>
  <dt>{{domxref("TextRange.duplicate()")}}</dt>
  <dd>
- <p>Returns a copy of <code style="font-size: 1rem; letter-spacing: -0.00278rem;">TextRange</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></p>
+ <p>Returns a copy of <code>TextRange</code>.</p>
  </dd>
  <dt>{{domxref("TextRange.execCommand()")}}</dt>
  <dd>Executes a <a href="/en-US/docs/Web/API/Document/execCommand">command</a> on the current document, the current selection, or the given scope.</dd>
@@ -135,16 +135,16 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
 <table class="standard-table">
  <thead>
   <tr>
-   <th scope="row" style="width: 15px;"></th>
+   <th scope="row"></th>
    <th scope="col">IE</th>
    <th scope="col">Other Browsers</th>
   </tr>
  </thead>
  <tbody>
   <tr>
-   <th scope="row" style="width: 15%;">{{domxref("TextRange")}}{{non-standard_inline()}}</th>
+   <th scope="row">{{domxref("TextRange")}}{{non-standard_inline()}}</th>
    <td>≤8(Standard API after IE9)</td>
-   <td style="width: 60%;">No Support (See <a href="/en-US/docs/Web/API/Selection">Selection API</a>)</td>
+   <td>No Support (See <a href="/en-US/docs/Web/API/Selection">Selection API</a>)</td>
   </tr>
  </tbody>
 </table>

files/en-us/web/api/touchevent/ctrlkey/index.html

@@ -14,7 +14,7 @@
 
 <h2 id="Summary">Summary</h2>
 
-<p>A {{jsxref("Boolean")}} value indicating whether the <kbd>control</kbd> (Control) key is enabled when the touch event is created. If this key is enabled, the attribute's value is <code style="font-size: 15px;">true</code>. Otherwise, it is <code>false</code>.</p>
+<p>A {{jsxref("Boolean")}} value indicating whether the <kbd>control</kbd> (Control) key is enabled when the touch event is created. If this key is enabled, the attribute's value is <code>true</code>. Otherwise, it is <code>false</code>.</p>
 
 <p>This property is {{readonlyInline}}.</p>
 

files/en-us/web/api/uievent/uievent/index.html

@@ -48,7 +48,7 @@ <h3 id="Values">Values</h3>
 
 <h2 id="Specifications">Specifications</h2>
 
-<table class="standard-table" style="height: 49px; width: 1000px;">
+<table class="standard-table">
   <thead>
     <tr>
       <th scope="col">Specification</th>

files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.html

@@ -40,7 +40,7 @@ <h3 id="The_CSS_version">The CSS version</h3>
 
 <p>Here’s a tumbling animation written in CSS showing Alice falling down the rabbit hole that leads to Wonderland (see the full <a href="http://codepen.io/rachelnabors/pen/QyOqqW">code on Codepen</a>):</p>
 
-<p><a href="http://codepen.io/rachelnabors/pen/rxpmJL"><img alt="Alice Tumbling down the rabbit's hole." src="tumbling-alice_optimized.gif" style="display: block; margin-left: auto; margin-right: auto;"></a></p>
+<p><a href="http://codepen.io/rachelnabors/pen/rxpmJL"><img alt="Alice Tumbling down the rabbit's hole." src="tumbling-alice_optimized.gif"></a></p>
 
 <p>Notice that the background moves, Alice spins, and her color changes at an offset from her spinning. We’re going to focus on just Alice for this tutorial. Here’s the simplified CSS that controls Alice’s animation:</p>
 
@@ -143,7 +143,7 @@ <h2 id="Controlling_playback_with_play_pause_reverse_and_updatePlaybackRate">Con
 
 <p>While we can write CSS Animations with the Web Animations API, where the API really comes in handy is manipulating the animation’s playback. The Web Animations API provides several useful methods for controlling playback. Let’s take a look at pausing and playing animations in the Growing/Shrinking Alice game (check out the <a href="http://codepen.io/rachelnabors/pen/PNYGZQ">full code on Codepen</a>):</p>
 
-<p><a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010"><img alt="Playing the growing and shrinking game with Alice." src="growing-shrinking_article_optimized.gif" style="display: block; margin-left: auto; margin-right: auto;"></a></p>
+<p><a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010"><img alt="Playing the growing and shrinking game with Alice." src="growing-shrinking_article_optimized.gif"></a></p>
 
 <p>In this game, Alice has an animation that causes her to go from small to big which we control via a bottle and a cupcake. Both of these have their own animations.</p>
 
@@ -208,7 +208,7 @@ <h3 id="Other_useful_methods">Other useful methods</h3>
 
 <p>In <a href="https://en.wikipedia.org/wiki/Through_the_Looking-Glass">Through the Looking-Glass</a>, Alice travels to a world where she must run to stay in place — and run twice as fast to move forward! In the Red Queen’s Race example, Alice and the Red Queen are running to stay in place (check out the <a href="http://codepen.io/rachelnabors/pen/PNGGaV">full code on Codepen</a>):</p>
 
-<p><a href="http://codepen.io/rachelnabors/pen/PNGGaV"><img alt="Alice and the Red Queen race to get to the next square in this game." src="red-queen-race_optimized.gif" style="display: block; margin-left: auto; margin-right: auto;"></a></p>
+<p><a href="http://codepen.io/rachelnabors/pen/PNGGaV"><img alt="Alice and the Red Queen race to get to the next square in this game." src="red-queen-race_optimized.gif"></a></p>
 
 <p>Because small children tire out easily, unlike automaton chess pieces, Alice is constantly slowing down. We can do this by setting a decay on her animation’s <code>playbackRate</code>. We use <code>updatePlaybackRate()</code> instead of setting the playbackRate directly since that produces a smooth update:</p>
 

files/en-us/web/api/web_animations_api/web_animations_api_concepts/index.html

@@ -23,7 +23,7 @@ <h2 id="History">History</h2>
 
 <p>The Internet Explorer team requested an animations API to consolidate and normalize animation functionality across all browsers, and thus efforts began in earnest among Mozilla Firefox and Google Chrome developers to create the one animation spec to rule them all: the Web Animations API. Now we’ve got the WAAPI for future animation specifications to piggyback on, allowing them to remain consistent and play well together. It also provides a point of reference all browsers can adhere to with the currently available specs.</p>
 
-<p><img alt="An illustration showing the Web Animations API ruling over CSS Transitions and Animations as well as a third category representing future animation specs with a question mark." src="waapi_diagram_white.png" style="display: block; margin: 0px auto;"></p>
+<p><img alt="An illustration showing the Web Animations API ruling over CSS Transitions and Animations as well as a third category representing future animation specs with a question mark." src="waapi_diagram_white.png"></p>
 
 <h2 id="The_Two_Models_Timing_and_Animation">The Two Models: Timing and Animation</h2>
 
@@ -39,7 +39,7 @@ <h3 id="Animation">Animation</h3>
 
 <p>The animation model can be thought of as an array of snapshots of what the animation could look like at any given time, lined up along the duration of the animation.</p>
 
-<p><img alt="An illustration showing how the animation model can be visualized as a series of snapshots arranged along a timeline. In this case, pictures of the cheshire cat going from 0 (there) to 8 seconds (not all there—only his smile is left)." src="waapi_timing_diagram_white.png" style="display: block; margin: 0px auto;"></p>
+<p><img alt="An illustration showing how the animation model can be visualized as a series of snapshots arranged along a timeline. In this case, pictures of the cheshire cat going from 0 (there) to 8 seconds (not all there—only his smile is left)." src="waapi_timing_diagram_white.png"></p>
 
 <h2 id="Core_Concepts">Core Concepts</h2>
 
@@ -53,7 +53,7 @@ <h3 id="Animation_2">Animation</h3>
 
 <p><a href="/en-US/docs/Web/API/Animation">Animation objects</a> can be imagined as DVD players: they’re used for controlling media playback, but without media to play, they don’t do anything. Animation objects accept media in the form of Animation Effects, specifically Keyframe Effects (we’ll get to those in a moment). Like a DVD player, we can use the Animation Object’s methods to <a href="/en-US/docs/Web/API/Animation/play">play</a>, <a href="/en-US/docs/Web/API/Animation/pause">pause</a>, <a href="/en-US/docs/Web/API/Animation/currentTime">seek</a>, and <a href="/en-US/docs/Web/API/Animation/reverse">control the animation’s playback direction</a> and <a href="/en-US/docs/Web/API/Animation/playbackRate">speed</a>.</p>
 
-<p><img alt="An illustration likening how an Animation plays a KeyframeEffect like a DVD player plays a DVD." src="waapi_player_diagram_white.png" style="display: block; margin: 0px auto;"></p>
+<p><img alt="An illustration likening how an Animation plays a KeyframeEffect like a DVD player plays a DVD." src="waapi_player_diagram_white.png"></p>
 
 <h3 id="Animation_Effect">Animation Effect</h3>
 

files/en-us/web/api/web_speech_api/using_the_web_speech_api/index.html

@@ -27,7 +27,7 @@ <h3 id="Demo">Demo</h3>
 
 <p>To show simple usage of Web speech recognition, we've written a demo called <a href="https://github.com/mdn/web-speech-api/tree/master/speech-color-changer">Speech color changer</a>. When the screen is tapped/clicked, you can say an HTML color keyword, and the app's background color will change to that color.</p>
 
-<p><img alt="The UI of an app titled Speech Color changer. It invites the user to tap the screen and say a color, and then it turns the background of the app that color. In this case it has turned the background red." src="speech-color-changer.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p>
+<p><img alt="The UI of an app titled Speech Color changer. It invites the user to tap the screen and say a color, and then it turns the background of the app that color. In this case it has turned the background red." src="speech-color-changer.png"></p>
 
 <p>To run the demo, you can clone (or <a href="https://github.com/mdn/web-speech-api/archive/master.zip">directly download</a>) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the <a href="https://mdn.github.io/web-speech-api/speech-color-changer/">live demo URL</a> in a supporting mobile browser like Chrome.</p>
 
@@ -164,7 +164,7 @@ <h3 id="Demo_2">Demo</h3>
 
 <p>To show simple usage of Web speech synthesis, we've provided a demo called <a href="https://mdn.github.io/web-speech-api/speak-easy-synthesis/">Speak easy synthesis</a>. This includes a set of form controls for entering text to be synthesised, and setting the pitch, rate, and voice to use when the text is uttered. After you have entered your text, you can press <kbd>Enter</kbd>/<kbd>Return</kbd> to hear it spoken.</p>
 
-<p><img alt="UI of an app called speak easy synthesis. It has an input field in which to input text to be synthesised, slider controls to change the rate and pitch of the speech, and a drop down menu to choose between different voices." src="speak-easy-synthesis.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p>
+<p><img alt="UI of an app called speak easy synthesis. It has an input field in which to input text to be synthesised, slider controls to change the rate and pitch of the speech, and a drop down menu to choose between different voices." src="speak-easy-synthesis.png"></p>
 
 <p>To run the demo, you can clone (or <a href="https://github.com/mdn/web-speech-api/archive/master.zip">directly download</a>) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the <a href="https://mdn.github.io/web-speech-api/speak-easy-synthesis/">live demo URL</a> in a supporting mobile browser like Chrome, or Firefox OS.</p>