class-05.md

How use Images in CSS

How to add images to pages

Choosing the right format

Optimizing images for the web

• Choosing Images for Your site A picture can say a thousand words, and great images help make the difference between an average-looking site and a really engaging one.

• storing Images on Your site If you are building a site from scratch, it is good practice to create a folder for all of the images the site uses.

How we adding images

• <img> To add an image into the page you need to use an <img> element. This is an empty element (which means there is no closing tag). It must carry the following two attributes:

• src **This tells the browser where it can find the image file. This will usually be a relative URL pointing to an image on your own site. **

• alt This provides a text description of the image which describes the image if you cannot see it.

• title You can also use the title attribute with the<img>element to provide additional information about the image. Most browsers will display the content of this attribute in a tootip when the user hovers over the image.

height & width of images

aligning images horizontally

• left
• right

aligning images Vertically

• top
• middle
• bottom

Cropping Images

When cropping images it is important not to lose valuable information. It is best to source images that are the correct shape if possible.

Image resolution

Images created for the web should be saved at a resolution of 72 ppi. The higher the resolution of the image, the larger the size of the file.

JPGs, GIFs, and PNGs belong to a type of image format known as bitmap.

HTML5 : Figure and figure caption

Color in CSS

• How to specify colors
• Color terminology and contrast
• Background color

rgb values Hex Codes ColoR Names Hue css BrightNess background-color

Contrast

When picking foreground and background colors, it is important to ensure that there is enough contrast for the text to be legible.

opacity

opacity, rgba

hsl, hsla

TexT in CSS

• Size and typeface of text
• Bold, italics, capitals, underlines
• Spacing between lines, words, and letters

Typeface Terminology

• Serif

• Sans-Serif

• monoSpace

Specifying TypefaceS

• font-family

• Size of type

• font-weight

• font-style

• text-transform

• text-decoration

• line-height

• letter-spacing, word-spacing

• text-align

• vertical-align

• text-indent

• text-shadow

• :first-letter, :first-line

• :link, :visited
• :hover, :active, :focus

Type Scales