CSS for a href and a name tags

I have links to other pages in my site as well as a link back to the top of the page, but I also have anchors to certain places within my page.

Here is a small clip of a page

          <tr>

           <th></th>

           <th></th>

           <th><a href="#top">[top]</a></th>

           <th></th>

           <th></th>

           </tr>

        </tbody>

        <tr>

        <h3><th><a name="albion4westham2">Albion 4 West Ham United 2 (2016) (England)</a></th><!--own --></h3>

                 <h3><th><a name="alexabliss">Alexa Bliss (2017) (England)</a><!--own --></th></h3>

            <h3><th><a name="animalkeeper">Animal Keeper (2016) (England)</a></th><!--own --></h3>

                 <h3><th><a name="anna">Anna (2015) (England)</a></th><!--own --></h3>

              <h3><th><a name="applejack">Applejack (2014) (England)</a></th><!--own --></h3>

      </tr>

        <tbody>

       <tr>

          <td style="width:150px;"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Albion 4 West Ham 2','','images/stts/wba_back.gif',1)"><img src="images/stts/albion_4_west_ham_2.gif" alt="Albion 4 West Ham 2" name="Albion 4 West Ham 2" width="150" height="230" border="0"></a>

            <p>The Albion 4 West Ham United 0 card was available from the West Bromwich Albion shop and was to be played with the West Bromwich Albion pack.</p></td>

            <td style="width:150px;"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Alexa Bliss','','images/stts/alexa_bliss_back.gif',1)"><img src="images/stts/alexa_bliss.gif" alt="Alexa Bliss" width="150" height="230" id="Alexa Bliss"></a>

            <p>The Alexa Bliss card was to be found inside a 6 card packet inside the Wrestlemania 2017 DVD Boxset which was released through Asda from 5th June 2017.</p></td>

            <td style="width:150px;"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Animal Keeper','','images/stts/animal_keeper_back.gif',1)"><img src="images/stts/animal_keeper.gif" alt="Animal Keeper" name="Animal Keeper" width="150" height="230" border="0"></a>

            <p>The Animal Keeper was given away at Longleat Zoo and was to be played with the Longleat pack.</p></td>

          <td style="width:150px;"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Anna','','images/stts/anna_back.gif',1)"><img src="images/stts/anna.gif" alt="Anna" name="Anna" width="150" height="230" border="0"></a>

            <p>The Anna card was given away by the Entertainer shop with every Top Trumps purchase and was to be played with Frozen.</p></td>

            <td style="width:150px;"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Applejack','','images/stts/applejack_back.gif',1)"><img src="images/stts/applejack.gif" alt="Applejack" name="Applejack" width="150" height="230" border="0"></a>

            <p>The Applejack card was to be played with My Little Pony and was to be found inside My Little Pony Junior Monopoly and Guess Who.</p></td>

         </tr>

How can I make the #top text smaller without affecting anything else on the page.

Thanks in advance!