• class & ID
• css box model
• floats
• styling navigation links
• introduction to flexbox
• readings & resources

• Configure a class:
  • If the style may apply to more than one element on a page
  • Use the . (dot) notation in the style sheet.
  • Use the class attribute in the HTML.
  • See more about CSS class...
• Configure an id:
  • If the style is specific to only one element on a page
  • Use the # notation in the style sheet.
  • Use the id attribute in the HTML.
  • See more about CSS ID...

• as far as a style sheet is concerned, everything in your HTML is inside a box
• from the outside in it looks like this:
  
  margin

  border

  padding
  this is some content
• box model elements:
  • width and height
  • padding and border
  • margins
  • box-sizing reset

• The CSS float is useful for orienting the textual content of the page.
• Although floating can also be used for many page layout concerns, most layout issues will be better off using flexbox or grid.
• More on CSS float...

• A navigation system is really just a series of list items
• It makes semantic sense to structure navigation bars as lists and style them with CSS
• A sample navigation system

  <ul>
<li><a href="#">Home</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Stuff</a></li>
</ul>


• We can change the list from vertical to horizontal orientation using the list-style-type: none; declaration
• We can define the width and height of block elements
• we can change the default display of elements from block to inloine and vice versa
• We can arrange the list items horizontaly using display: flex;

Your instructor will walk you through the creation of a list-based navigation example, Download the session04.zip folder from the Learning Hub. The starting files are in the folder called 03_nav_styling_begin.

• Initially, CSS provided four layout modes:
  • Block, for sections in a webpage
  • Inline, for text
  • Table, for two-dimensional table data
  • Positioned, for explicit position of an element
• With flexbox, it is easier to design responsive layout structure without using positioning or floats
• flexbox containers:
  • first you must define a container - usually a div with a specific class or id appplied, but can also be a semantic element (main, artile, etc.)
  • becomes flexible by setting display: flex;
  • flex container properties include:
    • flex-direction - direction the container wants to display the flex items (row (default), column, row-reverse, column-reverse)
    • flex-wrap - defines how items will wrap (nowrap (default), wrap, wrap-reverse)
    • flex-flow - shorthand to define direction and wrap
    • justify-content - used to align items (flex-start (default), flex-end, center, space-between)
    • align-items - the alignment of items on the cross axis (e.g., if the flex-direction is rows, cross axis is vertical; if flex-direction is columns, cross axis is horizontal); (stretch (default),flex-start, flex-end, center)
    • align-content - positions content and allows flex items to wrap; does not affect anything if applied to a single row flexbox (flex-start (default), flex-end, center, space-between, space-around)
    • more on flexbox containers and properties
• flex items:
  • once you've defined a container, the direct child elements of a flex container become flex items
  • flex conatiner properties include:
    • order - specifies the order of the items; must be a value (default is 0)
    • flex-grow - specifies how much a flex item will grow relative to the rest of the flex items; must be a value (default is 0)
    • flex-shrink - specifies how much a flex item will shrink relative to the rest of the flex items; must be a value (default is 1)
    • flex-basis - specifies the initial length of a flex item, specified in pixels, for example
    • flex - shorthand property for the flex-grow, flex-shrink, and flex-basis properties
    • align-self - specifies alignment for the selected item inside the flexible container; overrides the default alignment set by the container's align-items property
    • more on flex items and properties
• intended for one-dimensional layouts
• exercise: take a few minutes to work through Flexbox Froggy to acquaint yourself with flexbox

• Type, class and ID selectors
• Intro to the CSS box model
• CSS box-sizing Property – explained
• Using floats
• Create CSS navigation bar
• Free Frontend: 159 CSS Menu samples
• A complete guide to flexbox
• Flexbox at MDN
• Common CSS flexbox layout patterns with sample code
• Flexbox Website Layout Examples
• The ulitmate list of lorem ipsum generators