Images

Images have certain behaviors within a page, including how and where they appear and react with surrounding and nearby elements. To declare images in the <style> element, use the element selector img {}.

You’ll remember that images are block-level elements, and “stack” with other block-level elements down the page. To override this “stacking,” you can use the float: property to effectively direct the flow of adjacent elements. For example, using float: left will place the image to the left, and elements below will flow around it. The opposite is true of float: right.

NOTE: You can also use img {} to style the size of your images across the page, saving you the need to set the width and height in each <img /> tag.