Move the style note to be more prominent (#370)

* Move the style note to be more prominent

* Fix the link

* Simplify example

content/docs/reference-dom-elements.md

@@ -60,6 +60,10 @@ The `selected` attribute is supported by `<option>` components. You can use it t
 
 ### style
 
+>Note
+>
+>Some examples in the documentation use `style` for convenience, but **using the `style` attribute as the primary means of styling elements is generally not recommended.** In most cases, [`className`](#classname) should be used to reference classes defined in an external CSS stylesheet. `style` is most often used in React applications to add dynamically-computed styles at render time. See also [FAQ: Styling and CSS](/docs/faq-styling.html).
+
 The `style` attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM `style` JavaScript property, is more efficient, and prevents XSS security holes. For example:
 
 ```js
@@ -91,31 +95,19 @@ Style keys are camelCased in order to be consistent with accessing the propertie
 React will automatically append a "px" suffix to certain numeric inline style properties. If you want to use units other than "px", specify the value as a string with the desired unit. For example:
 
 ```js
-// This:
+// Result style: '10px'
 <div style={{ height: 10 }}>
   Hello World!
-</div>;
-
-// Becomes:
-<div style="height: 10px;">
-  Hello World!
 </div>
 
-// This:
+// Result style: '10%'
 <div style={{ height: '10%' }}>
   Hello World!
-</div>;
-
-// Becomes:
-<div style="height: 10%;">
-  Hello World!
 </div>
 ```
 
 Not all style properties are converted to pixel strings though. Certain ones remain unitless (eg `zoom`, `order`, `flex`). A complete list of unitless properties can be seen [here](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59).
 
-**Note:** Some examples in the documentation use `style` for convenience, but per modern web development best practices, **using the `style` attribute as the primary means of styling elements is _not recommended_.** In most cases, [`className`](#className) should be used to reference classes defined in an external CSS stylesheet. `style` is most often used in React applications to add dynamically-computed styles at render time. See also [FAQ: Styling and CSS](/docs/faq-styling.html).
-
 ### suppressContentEditableWarning
 
 Normally, there is a warning when an element with children is also marked as `contentEditable`, because it won't work. This attribute suppresses that warning. Don't use this unless you are building a library like [Draft.js](https://facebook.github.io/draft-js/) that manages `contentEditable` manually.