I have a ‘+’ and ‘-‘ button in my page. On clicking ‘+’ I need to increase font size by 10px, again onclick will increase size by 12. Same way for ‘-‘ it decrements. How can I write css class for that?
<ul id="box">
<li><a title="t1" id="SizePlus" href="#"></a></li>
<li><a title="t2" id="SizeMinus" href="#"></a></li>
</ul>
#box
{
list-style-type: none;
display: block;
clear: both;
}
#box li a
{
display: block;
float: left;
width: 25px;
height: 25px;
margin: 0px 10px 0px 0px;
text-indent: -10000px;
}
Not possible with css only. you will have to use javascript to achieve this…
useful site http://www.shopdev.co.uk/blog/text-resizing-with-jquery/