IMAGES Controlling size of images in CSS Aligning images in CSS Adding background images

IMAGES  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.

IMAGE SIZE IN CSS  control the size of an image using the width and height properties in CSS  chapter-16/image-sizes.html  Whenever you use consistently sized images across a site, you can use CSS to control the dimensions of the images, instead of putting the dimensions in the HTML.

IMAGE ALIGNMENT WITH CSS  using the float property to align images.  The float property is added to the class that was created to represent the size of the image  New classes are created with names such as align-left or align-right to align the images to the left or right of the page.  These class names are used in addition to classes that indicate the size of the image  chapter-16/aligning-images.html

IMAGE CENTERING WITH CSS  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.  chapter-16/centering-images.html

BACKGROUND IMAGES  background-image  chapter-16/background-image-body.html  chapter-16/background-image-element.html

REPEATING IMAGES  background-repeat  chapter-16/background-repeat.html  background-attachment  chapter-16/background-attachment.html

BACKGROUND POSITION  background-position  chapter-16/background-position.html  chapter-16/background-position-percentage.html

SHORTHAND  Background  chapter-16/background-shorthand.html

IMAGE ROLLOVERS AND SPRITES  chapter-16/image-rollovers-and-sprites.html

CSS3 GRADIENTS  background-image  chapter-16/gradient.html

CONTRAST OF BACKGROUND IMAGES  High Contrast  Low Contrast  Screen

SUMMARY IMAGES  You can specify the dimensions of images using CSS.  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

HTML5 LAYOUT  HTML5 layout elements  How old browsers understand new elements  Styling HTML5 layout elements with CSS

TRADITIONAL HTML LAYOUTS  used elements to group together related elements on the page

NEW HTML 5 LAYOUT ELEMENTS

HEADERS AND FOOTERS   chapter-17/example.html

NAVIGATION   chapter-17/example.html

ARTICLES   The element acts as a container for any section of a page that could stand alone and potentially be syndicated  chapter-17/example.html

ASIDE   The element has two purposes, depending on whether it is inside an element or not.  chapter-17/example.html

SECTIONS   The element groups related content together, and typically each section would have its own heading.  chapter-17/example.html

HEADING GROUPS   The purpose of the element is to group together a set of one or more through elements so that they are treated as one single heading.  chapter-17/example.html

FIGURES   can be used to contain any content that is referenced from the main flow of an article (not just images).  chapter-17/example.html

SECTIONING ELEMENTS   Where there is no suitable element to group a set of elements, the element will still be used.  chapter-17/example.html

LINKING AROUND BLOCK-LEVEL ELEMENTS  HTML5 allows you to place an element around a block level element that contains child elements. This allows you to turn an entire block into a link.  chapter-17/example.html

HELPING OLDER BROWSERS UNDERSTAND HTML5  Older browsers that do not know the new HTML5 elements will automatically treat them as inline elements. Therefore, to help older browsers, you should include the line of CSS on the left which states which new elements should be rendered as block-level elements.  chapter-17/example.html

SUMMARY HTML5 LAYOU T  The new HTML5 elements Indicate the purpose of different parts of a web page and help to describe its structure.  The new elements provide clearer code (compared with using multiple elements).  Older browsers that do not understand HTML5 elements need to be told which elements are block-level elements.  To make HTML5 elements work in Internet Explorer 8 (and older versions of IE), extra JavaScript is needed, which is available free from Google.