いつもお世話になっております。

スマホのカテゴリページ内に、カテゴリへのリンクを設置したいと思っております。
お客さんが操作しなくてもカテゴリが見える状態にしたいです。

下記のように、色を変えたり角丸にしたりなどしたいのですが、
styleが使えないとエラーが出てしまいます。
「 ="” 」を入れるというものも、どこに入れたらよいのかがわかりません。

また、カーソルが無いスマホでリンクの色を変えるのは
意味がないのでしょうか。


よろしくお願いいたします。



<style type="text/css">
<!--
a:link {color:#283d7d;}
a:visited{color:#283d7d;}
a:hover{color:#2dbbea;}
a:active{color:#2dbbea;}
-->
<!--

a { text-decoration:none;}
a:hover { text-decoration:underline;}

-->
</style>

<table>
<tr><td style="padding: 10px; margin-bottom: 10px; border: 1px solid#283d7d; text-align: center; background-color: ffffff; width:330px;"><a href="https://item.rakuten.co.jp/●●/c/0000000100/">◯◯◯</a></td></tr></table><br>

<table><tr><td style="padding: 5px; margin-bottom: 10px; border: 1px solid #283d7d; border-radius: 5px; text-align:center; background-color:#D8F2FB; width:75px;">
<a href="https://item.rakuten.co.jp/●●/c/0000000136/">
□□
</a></td><td style="padding: 5px; margin-bottom: 10px; border: 1px solid #283d7d; border-radius: 5px; text-align:center; background-color:#D8F2FB; width:75px;">
<a href="https://item.rakuten.co.jp/●●/c/0000000160/">
□□
</a></td><td style="padding: 5px; margin-bottom: 10px; border: 1px solid #283d7d; border-radius: 5px; text-align:center; background-color:#D8F2FB; width:75px;">
<a href="https://item.rakuten.co.jp/●●/c/0000000136/">
□□
</a></td><td style="padding: 5px; margin-bottom: 10px; border: 1px solid #283d7d; border-radius: 5px; text-align:center; background-color:#D8F2FB; width:75px;">
<a href="https://item.rakuten.co.jp/●●/c/0000000160/">
□□
</a></td></tr></table>