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
Pseudo-classes
Float
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!
Flexbox
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
Flexbox
Flexbox
Review
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?
CSS Layout
By Valerie Kraucunas
