Images, Color, Text

The long and short of this reading is how to format your pages visually, bot in CSS and HTML.

Images

Placing an Image

• Before a paragraph:
  • The paragraph starts on a new line after the image
• Inside the start of a paragraph:
  • The first row of the text aligns with the bottom of the image
• In the middle of a paragraph:
  • The image is placed between the words on the paragraph that it appears in

Three Rules for Creating Images

• Save images in the right format
  • Use .jpg .png or .gif
• Save them as the right size
  • Save it as the height and width you want it seen on the website
• Measure the image in pixels

Color

Opacity

Opacity is the value of how opaque an elements is, on a scale from 0 to 1, 1 being completely opaque

Contrast

Contrast is the difference in color between foreground and background colors in the same element, or even surrounding elements

Text

Typeface Terminology

Serif font: Fonts that have extra details on the end of main strokes of letter. These strokes are known as serifs

Sans-serif font: Fonts that omit serifs

Monospace font: Fonts where each letter has the same width

Font Family: Property in CSS that allows you to specify the typeface that should be used for any text inside the element to which the rule applies

JPEG vs. PNG vs. GIF

JPEG: Most useful when the image is a natural scene or photograph the variation in color and intensity is smooth

PNG: Most useful when the image needs transparency or for images with text or objects in them with sharp contrast edges like logos

GIF: Used when an image contains animations