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 | @codefoster Michael Palermo | @palermo4

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

IE Dev Center

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

CSS Syntax

CSS Syntax Anatomy of a style rule Selectors Combinators Directives Properties

Anatomy of a Style Rule

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

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

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

codepen: Clove Hitch

Directives @font-face @media @keyframes

codeShow: Font Face

codeShow: Media Queries

codeShow: CSS Border

codeShow: Border Radius

codeShow: Gradients

Layout Strategies

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

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

codeShow: CSS IDs and Classes

codeShow: Layout

codeShow: flex

codeShow: grid

Implement This Layout

<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>

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

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

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