WDS 03: CSS Layout and Templates 09/11/19

Demo – Google > Developer Tools
Review: COLOR

Basic Box.
White space/Margins
Border Styles, images, and drop shadows
Centering Content
Rounded Corners and Shapes?
Display Demo: From files (WDS03_19).
display /BlockInline

They have semantic difference – a “div” element is designed to describe a container of data whereas a “p” element is designed to describe a paragraph of content. (Nesting: you can not nest anything in a “p” tag)

Fixed Postioning and “Z”index: test code
Try More
Float and Clear
Another explanation of the FLOAT
Inline vs float: Use either

2 column, and 3 column layout.
Media Rules
– Can also import fonts
Can also use Google Fonts
Some Examples

– More Uses
Diference between this and this.

STUDIO 03: CSS Layout
It is time to make layouts.
– Continue with “Last summer” OR anything else as long as it takes no time to decide.
– Do not worry about RWD just yet.
– Start with basics: Boxes.
– Try some or all of the box decoration from the lecture.
– Create layouts with multiple boxes, formatted using “float” or “display: inline-block”
– Import and apply fonts.
– Incorporate media rules (Breakpoints)