This is a nice ~13-minute explanation of how CSS is a declarative language, where you describe the metadata of your styles. The <i>layout algorithm</i> determines which property values affect the size and position of the element. <media href="https://www.youtube.com/watch?v=o-95kJ0eyzQ" src="https://www.youtube.com/v/o-95kJ0eyzQ" source="YouTube" width="560px" author="Kevin Powell" caption="CSS makes sense when you realize it's a collection of algorithms"> Generally the properties <c>position</c> and <c>display</c> properties determine which layout algorithm is used for a given element. The layouts are, <img attachment="kevin_powell.jpeg" align="right" caption="Kevin Powell"><ul> <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction" source="MDN">Normal flow layout</a> (selected by default) <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_inline_layout" source="MDN">Inline layout</a> (selected by default for inline elements) <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout" source="MDN">Flexible box layout</a> (selected with <c>display: flex</c>) <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout" source="MDN">Grid layout</a> (selected with <c>display: grid</c>) <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_inline_layout" source="MDN">Inline layout</a> (selected with <c>display: grid</c>) <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_multicol_layout" source="MDN">Multi-column layout</a> (selected with <c>display: grid</c>) <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout" source="MDN">Positioned layout</a> (selected with <c>display: grid</c>) <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Floats" source="MDN">Flow layout</a> (selected <c>float: left</c> or <c>float: right</c>) </ul> Most properties work the same in all layouts. Some properties only have an effect in a specific layout mode, e.g., <c>grid-template-columns</c> is ignored if the layout is not <i>grid</i>. Other properties are interpreted differently or completely ignored depending on layout mode, e.g., <c>width</c> and <c>margin</c> are ignored in the <i>inline layout</i>.