-------------------------------------------------------------------------------
CSS Styling Summery Notes
-------------------------------------------------------------------------------
Selection of HTML elements to modify...
(How to you do comments in CSS?)

  P {color:red;}         all p elements
  div p {color:red;}     all p elements within div elements
  div,p {color:red;}     all div and p elements
  div+p{color:red;}      all p that are placed immediately after div

  [name] {...}           all elements with attribute: name     # FAILED to work
  [name=bob] {...}       all elements with attribute: name="bob"

  #identifier {...}      a unique element with id="identifier"

  #identifier > div {...} Div elements immediatally inside id="identifer"

  .classifier    {...}   elements with class="classifier"
  .class1.class2 {...}   elements with BOTH classes defined
  p.thumb {...}          p elements with class="thumb"


-------------------------------------------------------------------------------
Common attributes you can change...

Box Model...
  http://www.w3schools.com/css/css_boxmodel.asp

  display: inline-block     or 'block'?  it is default

    margin-top:       space above the element  (pixels)
    margin:           space around outside of border object  (pixels)

    border:           width of border (default 0)
      solid #000000     color of border (black)
      dashed #057       dash with given pattern
      inset             shade the border colors so as to 'indent'.

    padding:          space between border and inside content  (pixels)

    height:           height of content --  60px (pixels)
    width:            width of content --  90% relative to container
    min-width:        allow oject to shrink  to these minimums
    min-height:

More unusual CSS attributes...

  h1.left_image {
    background-image: url('https://...../image.png');
    background-repeat: no-repeat;
    padding-left:48px;
    min-height:48px;
    display:block;
  }

-------------------------------------------------------------------------------
Elements control of arrangements...

  overflow:          what to do if the contents does not fit?
    auto               add scrollbars as needed
                        (Default is to just overflow the bounds!)
  page-break-after:
    always           Alway page break after this when printing


-------------------------------------------------------------------------------
Styling the Content of an element

  color:             text color
  text-align:        How is test positioned
     left
     right
     center
     justified
  font-family:       font familt to use.
     serif             add little strokes on end of letters (default)
     sans-serif        no little strokes on ends of letters (block like)
  font-style:
     italic            slanted (default isn't)

  line-height:       height of the box around the element (default 100%)

-------------------------------------------------------------------------------
Flex Box layout method
  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/
  https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  https://www.w3schools.com/css/css3_flexbox.asp


  In containing box
    display:          how to display the elements contained
      flex              use flexible (word like) arragments

    flex-direction:   row is default, this changes it to column
      column
    justify-content:  how to justify the items
      flex-start        left justification (default)
      flex-end          right justification
      center            center items
      space-between     evenly spread out
      space-around      even spread including to edge
    flex-wrap:          use multiple rows or colummns
      wrap

  In individual items
    flex: N             shorthand for any of the following.
                        EG:  flex: 2        grow factor
                             flex: 2 30px   grow and content size
                             flex: 2 1 100px  grow, shrink, and content

    flex-grow: N        grow factor for items (number of units)
                        over the objects normal content size
                        0 mean minimal (default)
                        EG to center item2
                          item1:  flex-grow: 1
                          item2:  flex-grow: 0
                          item3:  flex-grow: 1

                        This can be used to center, or set colmns of specific
                        size for each of the items
                        EG 2 for left 1 for tight and 6 for center

    flex-shrink: N      ????

    flex-basis: size    used to set the minimin size for flex-grow
                        Can be used to set size of content for the purpose
                        of calculating flex size, other wise actual content is
                        used. 0 must have a unit.

                        Set to 0px so content does not effect flex size calc.

                        can be in units like px, mm, pt, a percentage,
                        or the keywords:
                          initial    width and height but shrinks to fit
                          auto       starts as initial but grows appropritely
                          none       as initial but inflexible

  Flex boxes can be nested inside each other.

-------------------------------------------------------------------------------
Grid

  Where flex lays out in one direction, grid creates arrays.
  flex uses the contentsize, but grid does not.

-------------------------------------------------------------------------------