1. Jeremy Foster | @codefoster Michael Palermo | @palermo4
02 | Styling and Layout
Really, styling and layout are not entirely exclusively defined and we use CSS properties to affect both, but basically styling is changing the look of things – the colors, the fonts, the sizes, etc. Layout, on the other hand, is more a matter of where on the screen things appear, how much space there is between things, and how things behave when the screen is resized or reoriented by the user.
Jeremy Foster
Michael Palermo

2. Module Overview IE Dev Center CSS syntax Layout strategies
Implement this layout
calc()
vw vh

3. IE Dev Center

4. The IE Dev Center IE Dev Center Modern.ie F12 tools
IE Developer Channel
IE Test Drive
MyPinnedSite

5. CSS Syntax

6. CSS Syntax Anatomy of a style rule Selectors Combinators Directives
Properties

7. Anatomy of a Style Rule

8. Selectors Universal type selector (*) Type Class (.) ID (#)
Attribute ([])
Pseudo-class (:)
Pseudo-element (::)

9. Combinators Descendent (space) Child (>) General sibling (~)
Adjacent sibling (+)

10. Properties Select and then affect Hundreds of CSS style properties
Browser determines the effect

11. codepen: Clove Hitch

12. Directives
@font-face
@media
@keyframes

13. codeShow: Font Face

14. codeShow: Media Queries

15. codeShow: CSS Border

16. codeShow: Border Radius

17. codeShow: Gradients

18. Layout Strategies

19. Examples of styling and layout from microsoft.com
Draw red lines emphasizing the spacing and layout of microsoft.com

20. Layout Strategies (layout) Flow Table Absolute Float Flex Grids
Browser compatibility
Grids
(layout)

21. codeShow: CSS IDs and Classes

22. codeShow: Layout

23. codeShow: flex

24. codeShow: grid

25. Implement This Layout

27. <style>
.grid {
display:-ms-grid;
-ms-grid-rows:1fr 1fr;
-ms-grid-columns:1fr 1fr; }
.top { -ms-grid-row: 0 }
.bottom { -ms-grid-row: 1 }
.left { -ms-grid-column: 0 }
.right { -ms-grid-column: 1 }
</style>
<div class="grid">
<div class="top left"></div>
<div class="top right"></div>
<div class="bottom left"></div>
<div class="bottom right"></div>
</div>

29. <style>
.container > div {
margin:5px;
background-color:gray;
height:80px; }
</style>
<div class="container">
<div></div>
</div>

37. Resources codefoster.com/cssbook css-tricks.com htmldog.com
codepen.io/codefoster
calc()
vw vh

38. Summary IE Dev Center CSS syntax Layout strategies
Implement this layout
calc()
vw vh