HTML Images; CSS Color & Text Notes

Chapter 5: Images (pp.94-125)

To add an image into your page, you should use the <img>, srcm alt, and title elements. You must ALWAYS specify a source and alt attribute.

You should save images at the size you will be using them on the webpage and in the appropriate format.

Where to place your code

  1. Before a paragraph
  2. Inside the start of a paragraph
  3. In the middle of a paragraph

Chapter 11: Color (pp.246-263)

Color helps convey the mood of your site, evoke reactions and gives your site life. It is important to ensure that there is enough contrast between any text and the packground color so that the viewer can read your text. If text is reversed out (a light color on a dark background), you can increase the height between lines and the weight of the font to make it easier to read

RGB Values: red, green and blue (Ex: 100,100,90)

HEX Codes: six-digit codes that represent the RGB (Ex: #ee3e80)

Color Names: 147 predefined color names recognized by browsers

RGBA: CSS3 introduced an extra value for RGB colors to indicate opacity

HSL Colors hue, saturation and lightness values

HSLA: (A=Alpha) CSS3 introduced an optional opacity value when you specify colors as HSL values

Hue: is similar to the idea of color. This is extressed as an angle (between 0 and 360 degrees)

Saturation: refers to the amount of gray in a color and is expressed as a percentage

Brightness: refers to how much black is in a color (not the same as lightness)

Lightness: sometimes refered to as luminosity,is the amount of white or black is in a color and is represented as a percentage (0%=black, 100%=white, 50%=normal)

Chapter 12: Text (pp.264-299)

Units of Type Size

The default size of a text in a broswer is 16 px Percentages or ems calculate the size of text you want based on the default size of text used in the browser.

Typeface Terminology

JPEG vs PNG vs GIF — which image format to use and when?

Written by Rahul Nanwani


When to use JPEG

When to use PNG

When to use GIF