How to create a number list 1, 2, 3, and Sub number list 1.1, 1.2, 1.3 … HTML list?

CSS Code:
ul.numeric-decimals { counter-reset:section; list-style-type:none; }
ul.numeric-decimals li { list-style-type:none; }
ul.numeric-decimals li ul { counter-reset:subsection; }
ul.numeric-decimals li:before{
    counter-increment:section;
    content:counter(section) ". ";/*content:"Section " counter(section) ". ";*/
}
ul.numeric-decimals li ul li:before {
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}

Html Code:

<ul class="numeric-decimals">

  <li>Cats

    <ul>

      <li>Birds</li>

      <li>Rats</li>

    </ul>

  </li>

  <li>Dogs

    <ul>

      <li>Birds</li>

      <li>Rats</li>

    </ul>

  </li>

  <li>Rabbits</li>

  <li>Ants

    <ul>

      <li>Lions</li>

      <li>Rats</li>

    </ul>

  </li>

  <li>Ducks</li>

</ul>

3 ways of inserting CSS media queries

CSS media queries can be added to CSS in all of the ways you're able to define it:

External stylesheet:
<link rel="stylesheet" type="text/css" href="smallscreen.css" media="only screen and (max-width: 480px)" />

Imported stylesheet within the <style> element:
@import "smallscreen.css" only screen and (max-width: 480px);

Within the <style> element as a media rule:
 <style type="text/css">
  @media only screen and (max-width: 480px){
    /* rules defined inside here are only applied to browsers that support CSS media queries and the browser window is 480px or smaller */
  }
</style>

Source from: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml