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

• Find an image you'd like to include in your webpage. Use HTML to set the image's width and/or height. Use the ALT attribute, which displays a message even if the image doesn't load.
• Include this image a second time, but with a different width and height.
• Post an image and use an inline style to set the CSS float property to 'left.'
• Post an image and use an inline style to set the CSS float property to 'right.'
• Post an image, alongside some text, and use an inline style to set the CSS clear property to 'both.'
• Post an image and use an inline style with 'border-radius' to give the image a rounded border.
• Post an image and use an inline style with 'border-radius' to make the image circular.
• Post an animated GIF.