HTML
<section>There are many ways to add css to web document:</section>
<section>
<ul>
<li>inline styling.</li>
<li>inside styling using <code>style</code> tag element like so:
<pre>
<ol style="display:inline">
<li><style type="text/css"></li>
<li><style type="text/css" media="all (min-width:800px)"></li>
style with media query
<li><style type="text/css" title="smartphone"></li>
style alternate
<li><style type="text/css" media="all (max-width:40px)" title="smartphone"></li>
style alternate based on media query
</ol>
</pre>
</li>
<li>
outside styling using <code><link></code> tag like so:
<pre>
%lt;link href="" hreflang="" rel="stylesheet" type="" >
style
%lt;link href="" hreflang="" rel="stylesheet" type="" media="all (min-width:800px)" >
style based on media query
%lt;link href="" hreflang="" rel="alternate stylesheet" type="" media="all (min-width:800px)" title="smartphone">
alternate stylesheet
</pre>
</li>
<li>
@import at-rule.
</li>
</li>
</ul>
</section>