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 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 italicized text This is large text This is small text This is a browser font called 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 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


Backgrounds

The background is an image

Heading on top of background image

Text on top of background image

The background is an image & does not repeat

Heading on top of background image

Text on top of background image

The background is an image & is fixed in place

Heading on top of background image

Text on top of background image

The background is a gradient of colors

Heading on top of background image

Text on top of background image


Customizations

Anchors: Removes the default underline & 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 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