HTML5 and CSS
Main Points
- List
- CSS Backgrounds
- CSS Box Model
- Padding
- CSS Borders
- Margin
- Explain margin collapse
- CSS Layout (Float, Flex, Grid, and Frameworks)
Using Float and Clear
Float: left, right, or none;
Clear Techniques:
- .clearfix {overflow: auto;} for container.
- .clearfix::after {content: “”; clear: both; display: table;} for container.
- .clear {clear: both;} for <br> before the container closing tag
Using Display flex
- .flex {display: flex;} for container.
- Notice that all elements inside container is aligned top left to the container beside each other.
- Also they stretch to fill the container height unless you assign a height for each element.
- Use {justify-content: } to align elements horizontal (flex-start, flex-end, center, space-around, space-evenly and space-between).
- Use {align-items: } to align elements vertically (flex-start, flex-end, and center).
- Use {gap:} to set the space between items manual.
- {flex-basis:}
- {flex-grow:}
- {flex-shrink:}
- {flex:}
- {order:}
- {flex-direction: ;}
- {flex-wrap:}
- {flex-flow:}
Using Display grid
- .grid {display: grid;} for container.
- Notice nothing happened because in grid you have to define columns.
- Use {grid-template-columns: } to define columns using fr.
- Use {align-items: } to align elements vertically (start, end, and center).
- Use {gap:} to set the space between items manual.