Building a Web Knitting Calculator – 3 The Looks

Project Navigation

So far with this project we have a working calculator, but it doesn’t look or feel very nice. Lets fix that with some basic CSS. What we will do here is very simple however as like with most things discussed there are many applications and much more you can do with CSS than discussed or shown here. For example here is a small button to play with created just basic div elements and pure CSS.

Just like with the JavaScript, it is best practice to have a main CSS file that is linked externally, however you can easily include inline style as well though it is harder to maintain. Create a new document titled YarnCalc_Css with the extension .css and include the link in the main html document below the link for the external JavaScript page.

Next if you haven’t already done so add casses to the div’s and the columns of the calculator grouping them accordingly, this is how we will access the divs with CSS for styling. Elements can also be accessed by the element type or by the id, depending on what you want to do with them.

All of the following will be written in the external CCS style sheet, and will effect the HTML above. I couldn’t do each property that we will be utilizing justice in explaining them, so instead for any specific property I highly recommend W3 schools for more information.

Outside_card – this will build the outside surround area of the calculator

2. Center_card

3. Row – this is handled by bootstrap which is an external stylesheet library that is called in, similar to the one we are building

4. Columns – this similary is handled by bootstrap

5. Card

6. DDL – since we are adjusting a lot of the text sizing and buttons for a specific look it is good to go ahead and also adjust the drop down menus to look correctly as well.