CSS: Display
42mIntermediate2021-02-09
Authors

Jen Kramer
Teaches web design and development
Course details
Every CSS layout relies on the display property to tell it basic rules for how to present content. In this course, instructor Jen Kramer explains why the display property is so important and walks you through basic display values and newer display values that you need to understand to make effective use of this property. Jen discusses inline-level elements and the inline display value. She covers block-level elements, the block display value, and how to nest inline and block elements in HTML. Jen describes how to use “display: none” and “visibility: hidden” to hide content. Then she goes into newer display values, such as inline flex and grid values, the flow-root property, inline-block, tables, and list items. Jen concludes with recommendations on further HTM and CSS learning.
Skills covered
CSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Understanding the mighty display property
1. Basic Display Values
- 02 - Inline elements
- 03 - Block elements
- 04 - Understanding proper nesting of block and inline elements
- 05 - Display - none vs. visibility - hidden
2. Newer Display Values
- 06 - Understanding layouts with inline flex and grid
- 07 - Flow-root and floats
- 08 - Inline-block
- 09 - Table, inline-table, and its internal structures
- 10 - List-item
Conclusion
- 11 - Next steps