View reading-notes on GitHub

Audio, Video, Images

  • You can specify the dimensions of images using CSS. This is very helpful when you use the same sized images on several pages of your site.
  • Images can be aligned both horizontally and vertically using CSS.
  • You can use a background image behind the box created by any element on a page.
  • Background images can appear just once or be repeated across the background of the box.
  • You can create image rollover effects by moving the background position of an image.
  • To reduce the number of images your browser has to load, you can create image sprites.

Controlling the size and alignment of your images using CSS keeps rules that affect the presentation of your page in the CSS and out of the HTML markup.
You can also achieve several interesting effects using background images. In this chapter you will learn how to:
● Specify the size and alignment of an image using
● Add background images to boxes
● Create image rollovers in CSS

controlling sizes of images in Css

You can control the size of an image using the width and height properties in CSS, just like you can for any other box.

AlligNing images Using Css

the float property can be used to move an element to the left or the right of its containing block, allowing text to flow around it. Rather than using the element’s align attribute, web page authors are increasingly using the float property to align images. There are two ways that this is commonly achieved

Centering images Using Css

By default, images are inline elements. This means that they flow within the surrounding text. In order to center an image, it should be turned into a blocklevel element using the display property with a value of block.

  • On the containing element, you can use the text-align property with a value of center.
  • On the image itself, you can use the use the margin property and set the values of the left and right margins to auto.

Background Images

background-image
The background-image property allows you to place an image behind any HTML element. This could be the entire page or just part of the page. By default, a background image will repeat to fill the entire box.

Practical Information

  • Search engine optimization helps visitors find your sites when using search engines.
  • Analytics tools such as Google Analytics allow you to see how many people visit your site, how they find it, and what they do when they get there.

  • To put your site on the web, you will need to obtain a domain name and web hosting.

  • FTP programs allow you to transfer files from your local computer to your web server.
  • Many companies provide platforms for blogging, email newsletters, e-commerce and other popular website tools (to save you writing them from scratch).