Build a site
Format images using CSS Use CSS to gain precise control over the display of images on your website
A
webpage would be pretty dull without any images on it. Some images may appear on every page, such as a graphical website logo or heading, while others may be specific to each page. You will need to create the images for your site before you start. Remember to use them sparingly and keep the file size as small as possible to ensure that your webpages load quickly. If you’re having trouble, we will go into further detail later in the book. Images are inserted into webpages using the HTML <img> tag, and there are attributes to
position it left and right, set the size and so on, but those are dated. If you use CSS to format images instead, there are many more options available to you. For example, you can add a border, set its thickness and its colour. The spacing around each side of the image can be individually adjusted, text can be wrapped around it on the left or the right
“If you use CSS to format images, there are many more options available to you”
A guide to CSS images There are many formatting options to enhance your images Width and height The size of an image can be manually set by entering the width and height in pixels. However, enlarging or shrinking it will affect the quality. It’s best with auto width and height
Add a shadow If you want to lift the image off the page, add a shadow below it using this command. Try different values to see the effect they have. It only works in new web browsers though
Define the margins A single margin command makes all the margins exactly the same. They don’t have to be that way, though: each of the sides of the image can have a different margin, as shown here
CSS3 drop shadows The drop shadow function box-shadow: 10px 10px 5px #666; is new to CSS3 and will only work with newer browsers. Visit http://caniuse.com to check support. Old browsers ignore it. The first two numbers are the horizontal and vertical shadow positions. Bigger numbers make bigger shadows. The third number is the amount of blur and the last is the colour.
54 Web Design for Beginners
and so on. The latest web browsers that are up to speed with CSS version 3 can display advanced image attributes like drop shadows that give the page a 3D look. Forget the old HTML way of doing things and take advantage of CSS and its powerful features. Our tutorial will guide you through the process.
Float the image If you want the image to appear within the text with the words wrapped around it, use float. The image can be floated left or right and the text automatically moves to slot it in