Getting to Grips with CSS- Finally!

I have started to understand the process of adding CSS to my website and have become more confident in experimenting in what it can do. I have decided to use an internal CSS sheet for my website, because I work better having everything in one place and it avoids confliction between internal and external style sheets. Also, because each of my pages is going to be different in terms of layout and colour, it makes sense to have individual internal CSS that I feel comfortable working with.

 

I started by adding  a wrapper to my website to go around the sides and give the website a boundary. I then started experimenting with floaters and positioning to manipulate the images. Something that I am learning is that in order to get these numbers/pixels right, you need to do a lot of trial and error and preview where and how the images are moving. From this I started experimenting with margin's and positions. Something I also am finding useful in Dreamweaver is the colour co-ordination of the CSS & HTML. It allows me to see mistakes without having to re-trace my steps or read through reams of coding. For example, the bottom div class .robot3 is in blue, because the above div class .microchip has a missing '{' symbol to complete the instruction. Hence, I am now learning to look out for colour changes to correct my work.

 

Something else that I am learning is short-cuts. On the left is a screen shot of the positioning of four individual images. I spent hours individually moving the images to try and place them in a horizontal line, by using floats, paddings and margins. This was a time-consuming process and when I added a border it read all of them as one image and added a giant border round the whole space.

 

This was incredibly frustrating and meant that the majority of my time was being spent on positioning images. Because of this, I started researching better ways to position images and went to a colleague of mine who recommeded inserting a table, and placing the images into a table. This prooved successful and became a lot easier in terms of CSS. You can see on the right, I could remove all the previous id's and simply add a #divtable and border: 2px solid #000;

 

This allowed me to manipulate the images within a table so they did not move or need numerous CSS instructions. I am glad that I came across this AFTER individually positioning the images as it taught me about the different id's and classes, but also allowed me to learn two ways of achieving this.. Even though it was time-consuming!