Cross Stitch Calculator
2. HTML and Stylesheet
Join the Discussion
More of this Feature
The first thing we need to do to add the cross stitch calculator to our web page is to obtain the HTML to be inserted into our page where we want the calculator to appear. Simply copy the code below and paste it into your page where you want the calculator.
With that HTML in our page we can now add stylesheet commands to define how we want the calculator to look. Here are the styles I used for mine.
#calc {width:400px; border:1px solid #000; background-color:#cff; font-size:13px;}
#calc fieldset {margin:8px;}
#calc h3 {margin:5px; text-align:center;}
#calc div {text-align:center; padding:5px;}
</style>
If you haven't used stylesheets before then just copy the above code into the head of your page.
Of course you can easily change any of these values so as to change the appearance of the calculator to suit your site.
So now our calculator looks nice on our web page but it doesn't actually do anything yet. The final step is to add the Javascript that is needed for the calculator to function.
