CSS Crash Course


Goal 1: Selectors

The body is set to gray using the element selector

This element was selected by its class name

This element ws selected by its-identifier


Goal 2: Colors

This is green background wiht green text

This is blue background wiht red text

This is red backgroung with blue text

This is black background wiht white text


Goal 3: Fonts

This is bold This is italicized text This is large text This is small text This is a browser fontcalled arial This is a google font called bangers


Goal 4: Spacing

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

Heading in a container

Text in a container


Goal 5: Sizing

This image is normally too big to fit in the view port

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


Backgrounds

The background is an image

Heading on the top of background image

Text on the top of the background

The background is an image and does not repeat

Heading on the top of background image

Text on top of backgroung image

The background is an image and is fixed in place

Heading on the top of background image

Text on top of backgroung image

The background is a gradient of colors

Heading on the top of background image

Text on top of backgroung image

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 and replace bullets with images.

Tables: Row padding and alternating table row colors

1 2 3
4 5 6
7 8 9

Aligning with 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

Aligning with Grid

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