Images

<img src="images/quokka.jpg" alt="A family of
quokka" title="The quokka is an Australian
marsupial that is similar in size to the
domestic cat." />

<img src="images/bird.gif" alt="Bird" width="100"
height="100" />

<img>, src, alt, title, width, height, align

<figure>

<figcaption>  

Color

/* color name */
h1 {
color: DarkCyan;}
/* hex code */
h2 {
color: #ee3e80;}
/* rgb value */
p {
color: rgb(100,100,90);}

Foreground Color

background Color

Contrast

opacity

HSL & HLSA

SUMMARY

Color not only brings your site to life, but also helps convey the mood and evokes reactions.

There are three ways to specify colors in CSS: RGB values, hex codes, and color names.

Color pickers can help you find the color you want.

It is important to ensure that there is enough contrast between any text and the background color (otherwise people will not be able to read your content).

CSS3 has introduced an extra value for RGB colors to indicate opacity. It is known as RGBA.

CSS3 also allows you to specify colors as HSL values, with an optional opacity value. It is known as HSLA.

Text

• font type
• font size
• bold
• italic
• upercase & lowercase
• underline & strike
• leading
• letter & word spacing
• text align
• vertical align
• text indent
• text shadow

JPEG VS PNG VS GIF

• TL;DR too long did’t read.

Use JPEG format for all images that contain a natural scene or photograph where variation in colour and intensity is smooth.

Use PNG format for any image that needs transparency or for images with text & objects with sharp contrast edges like logos.

Use GIF format for images that contain animations.