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. Specifying image sizes helps pages to load more smoothly because the HTML and CSS code will often load before the images, and telling the browser how much space to leave for an image allows it to render the rest of the page without waiting for the image to download.

## Aligning images using css

Aligning an image means to position the image at center, left and right. We can use the float property and text-align property for the alignment of images.

If the image is in the div element, then we can use the text-align property for aligning the image in the div.

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. Once it has been made into a block-level element, there are two common ways in which you can horizontally center an image:
- 1: On the containing element, you can use the text-align property with a value of center.
- 2: On the image itself, you can use the use the margin property and set the values of the left and right margins to auto.

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.

The background-repeat property can have four values:
repeat The background image is repeated both horizontally and vertically (the default way it is shown if the backgroundrepeat property isn’t used)
repeat-x The image is repeated horizontally only (as shown in the first example on the left).
repeat-y The image is repeated vertically only.
no-repeat The image is only shown once.

When an image is not being repeated, you can use the background-position property to specify where in the browser window the background image should be placed. This property usually has a pair of values. The first represents the horizontal position and the second represents the vertical.
(left top , left center , left bottom ,center top ,center center ,center bottom ,right top ,right center ,right bottom)

It’s important to understand who your target audience is, why they would come to your site, what information they want to find and when they are likely to return.
Site navigation not only helps people find where they want to go, but also helps them understand what your site is about and how it is organized. Good navigation tends to follow these principles…
Concise Ideally, the navigation should be quick and easy to read.
Clear Users should be able to predict the kind of information that they will find on the page before clicking on the link.
Selective The primary navigation should only reflect the sections or content of the site.
Context Good navigation provides context.
Interactive Each link should be big enough to click on
Consistent The more pages a site contains, the larger the number of navigation items there will be. Although secondary navigation will change from page to page, it is best to keep the primary navigation exactly the same.