CSS: Display

CSS: Display

41mIntermediate2021-02-09

Authors

Jen Kramer

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

Introduction

  • Understanding the mighty display property

Basic Display Values

  • Inline elements
  • Block elements
  • Understanding proper nesting of block and inline elements
  • Display - none vs. visibility - hidden

Newer Display Values

  • Understanding layouts with inline flex and grid
  • Flow-root and floats
  • Inline-block
  • Table, inline-table, and its internal structures
  • List-item

Conclusion

  • Next steps
40,000 Toman