| When reading a sizable chunk of text online, it can | | | | and having the text flow around the images, you |
| really help to have a few explanatory diagrams or | | | | help lead the reader's and add a bit of visual interest. |
| images to help break up the content and aid | | | | Subtle effects can also be achieved with the |
| understanding. However, if the images have just | | | | minimum of coding effort. You can add CSS styling |
| been plopped in carelessly then it can result in an | | | | for the hover states which gives useful feedback to |
| awkward looking page that leaves a poor impression | | | | the user and looks stylish, all without any scripting or |
| with the reader. | | | | heavy code. |
| The Problems With Not Using CSS | | | | Styling your images with CSS helps unify your |
| When you reply on the default settings for styling | | | | business web site design. The user's eye is helped |
| images you end up with bags of whitespace to the | | | | though the text and he/she can pick up subtle visual |
| side of the image and whatever default margins, | | | | clues that look great. |
| borders and padding that the browser has given. | | | | Effects such as different colours of frames around |
| The default border styling for images with links is an | | | | images could be a very helpful addition for a |
| ugly blue border. It lets the user know that there's | | | | hierarchy chart for example. Small clues lie this can |
| something to go to, but the default styling can look | | | | helo a user's comprehension of complicated data. |
| clumsy. | | | | Summary |
| Not using CSS in your images mans that you are | | | | Unstyled imaged plopped here and there into a sea |
| missing out conveying subtle information to your | | | | of text can look very unprofessional. To craft a look |
| users. | | | | that appears more stylish and unified to your visotrs, |
| Adding CSS Styling to Your Images | | | | experiment wth CSS styling, in particular the margin, |
| It only a takes a few extra lines of code to add a | | | | border and padding. Three dimensional effects are |
| small gap on all sides of your images so they don't | | | | also possible to create a look of a drop shadow. Plus, |
| touch the text. You can easily add in styling to have | | | | the addition of hover, visited and focus states can |
| the text float around the images, this can really | | | | convey extra information without the need for a lot |
| enhance the look of a page of text. By giving a gap | | | | of extra heavy coding. |