CSS Crash Course


Goal 1: Selectors

The body is set to grey using the element selector

This element was selected by its class name

This element was selected by its identifier


Goal 2: Colors

This is green background with green text

This is blue background with red text

This is red background with blue text

This is black background with white text


Goal 3: Fonts

This is bold text This is italic text This is large text This is small text This is Arial font This is Bangers font


Goal 4: Spacing

outline versus border on element
margins are on the outside of the outline/border
padding is on the inside of the outline/border

Heading in a container

This is a paragraph in a container


Goal 5: Sizing

This image is normally too big to fit in the viewport

This image already fits in the viewport so its not resized

This image fills the viewport width regardless if its too small or too big


Goal 6: Backgrounds

The background is an image

Heading on top of background image

Text on top of background image

The background is an image and does not repeat

heading on top of background image

Text on top of background image

The background is an image and is fixed in place

Heading on top of background image

Text on top of background image

The background is a gradient of colors

Heading oon top of background image

Text on top of background image


Goal 7: CSS Customizations

Anchors: Removes the default underline and changes text to red when mouse hovers over

Hover over me!

Buttons: Change background color to red when mouse hovers over

Lists: Indent all List Items & replace bullets with images

Tables: Row padding and alternating row colors

1 2 3
4 5 6
7 8 9
10 11 12
13 14 15

Goal 8: Aligning w/ Flexbox

Flexbox to left align block-level elements
Flexbox to center align block-level elements
Flexbox to right align block-level elements
Flexbox to justify align block-level elements, maximizing space between elements
Flexbox to justify align block-level elements, centering space between elements
Flexbox to justify align block-level elements, maximizing space between elements

Goal 9: Aligning w/ Grid

Gridbox with 1 column
Gridbox with 2 columns
Gridbox with 3 columns