Skip to content

Latest commit

 

History

History
85 lines (59 loc) · 2.06 KB

reading201-5.md

File metadata and controls

85 lines (59 loc) · 2.06 KB

Images

There are many reasons why you might want to add an image to a web page: you might want to include a logo, photograph, illustration, diagram, or chart.

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

Adding Images

Three Rules for Creating Images

  • Save images in the right format
  • Save images at the right size
  • Use the correct resolution

Image Dimensions

The images you use on your website should be saved at the same width and height that you want them to appear on the page.

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.

Vector Images

Vector images differ from bitmap images and are resolution-independent. Vector images are commonly created in programs such as Adobe Illustrator

Animated GIFs

Animated GIFs show several frames of an image in sequence and therefore can be used to create simple animations.

Transparency

Creating an image that is partially transparent

(or "see-through") for the web

Color

Color can really bring your pages to life.

  • background-color
  • Color

Understanding Color

Every color on a computer screen is created by mixing amounts of red, green, and blue. To find the color you want, you can use a color picker.

Opacity

CSS3 introduces the opacity property which allows you to specify the opacity of an element and any of its child elements.

hsl, hsla

Text

Typeface Terminology :

  • serif -sans-serif -monospace

Weight, Style, Stretch

Specifying Typefaces

font-family

Size of Type

font-size

Article

font-style

UpperCase & LowerCase

text-transform

Underline & Strike

text-decoration

Leading

line-height

Letter & Word Spacing

letter-spacing, word-spacing

Alignment

text-align

Vertical Alignment

vertical-align

Indenting Text

text-indent

Styling Links

:link, :visited

Responding to Users

:hover, :active, :focus