Search⌘ K
AI Features
Home
Courses
Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4

Elements and Class Selectors

Explore how HTML elements like divs and spans flow in normal document flow and learn to use class selectors in CSS. Understand how to structure CSS code to target classes using dot notation and apply multiple style properties for better web layout control.

We'll cover the following...

That’s it for this chapter! Here are a few conclusions and a summary of what we’ve learned.

HTML

  • HTML elements flow on a web page (web document), like the words flow on a novel page.

  • This is what a normal document flow looks like:

HTML
-----------------
| ------------> |
| ------------> |
| ------------> |
| ------------> |
| ------------> |
-----------------
  • Normal document flow means that elements flow top-to-bottom and left-to-right

Here’s a diagram of the normal document flow we’d have with only divs:

HTML
-----------------------------
| <div>..............</div> |
| <div>..............</div> |
| <div>..............</div> |
| <div>..............</div> |
| <div>..............</div> |
| <div>..............</div> |
| <div>..............</div> |
| <div>..............</div> |
-----------------------------
  • Regardless of how long the text content inside a div is,
...