CSS Crash Course


Goal 1: CSS 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: CSS Colors

This is a green background with green text.

This is a blue background with red text.

This is a red background with blue text.

This is a 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 it's not resized.

This image fills the viewport width regardless of if it's 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 Flexbot

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

Aligning with Gridview

Flexbot to left-align block-level elements:
Flexbot to center-align block-level elements:
Flexbot to right-align block-level elements: