HTML & CSS: Images

Images

This webpage does a nice job of explaining how images work in HTML and CSS. Have a look at it.

 

Here are some examples that illustrate ways that HTML and CSS can modify an image.

The images above are displayed pretty simply.

 

The top image above shows the effect that the CSS property 'float:right' has. This is an example of an inline style, a style put directly inside an HTML tag. The image on the bottom is modified by the CSS property 'clear:both', though here there is no clear difference that 'clear:both' makes. It is supposed to remove text from the left and right sides of an image.

 

Both images here show the effect that the CSS property 'border-radius' can have. Note the curved borders in the upper image, and that the bottom image has become circular.

 

Exercise