CSS Layout I

Objectives

Describe what a pseudo-class does
Use float and clear properties in CSS
Use flexbox to easily distribute elements on the page

Pseudo-classes

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected.

Pseudo-classes

What does a pseudo-class look like?

p:hover {
    color: red;
}

Pseudo-classes

Link-based pseudo-classes

:link
:visited
:hover
:active

Pseudo-classes

Text-based pseudo-classes

:first-line
:first-letter
:before {content: "..."}
:after {content: "..."}

pseudo-elements

Pseudo-classes

Interaction-based pseudo-classes

:focus
::selection
:hover

Pseudo-classes

Family-based pseudo-classes

:first-child
:last-child
:nth-child()
:only-child

MDN List of Pseudo-classes

CSS-Tricks List

Pseudo-classes

MDN List of Pseudo-classes

CSS-Tricks List

Let's go do stuff!

Float

CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

div {
    float: left;
}

div {
    float: right;
}

Clear

The simplest way to ensure a nearby element is aligned left.

footer {
    clear: both;
}

You can.....float!

Revisit the boxes codepen and try out float and clear!

Text-based example

Flexbox

Flexbox Layout is a way to position HTML elements. It was developed and design to solve most if not all of the layout issues commonly encountered by web developers.

Flexbox

Let's make this!

Flexbox

Let's make this!

Flexbox

Flexbox Froggy

Review

Why do we use pseudo-classes?

Discuss with your table

Review

How do you break out of a float?

Review

Why do we use Flexbox?