Margin

• shorthand for margin – the order of the numbers is clockwise from the top

  margin: [top] [right] [bottom] [left];
  // alternatively
  margin: [top/bottom] [right/left];
  

  • so setting margin: 0 5px results in 0 at top and bottom and 5px at the right and left

• by default, type elements (p, h1, etc.) have a top and bottom margin equal to their line height

Inline vs Block Elements

• block elements – take up 100% width and 0 height by default; height grows based on content
  • they are clearly separated from adjacent elements
  • block elements can contain block or inline elements
• inline elements – flow with the content, don't create their own line
  • because they flow with their surroundings, they might overlap with adjacent elements (e.g. adding padding-top will make it overflow with the content above it)
  • setting width and height doesn't do anything for these elements
  • likewise, setting margin on inline elements doesn't really push the adjacent elements away
  • inline elements can only contain other inline elements
• inline-block elements – allow you to have the benefits of block elements (no overlap) while keeping the content flowing (not 100% wide)
• collapsing margins – if the margins of two elements are touching, they will collapse
  • if two adjacent elements have a margin between them, the margins will collapse into each other to be the larger margin of the two
  • if an element is the first child element of its parent, and the parent has no padding, then their margins will collapse together (merge)

Pseudo-selectors

• pseudo-selectors: specifying a selector on elements with a particular state
  • e.g. for the a selector, a:hover, a:visited, a:active (currently being clicked), a:focus (currently selected e.g. via tab)
  • focus vs active state:
    • :focus is when an element is able to accept input – the cursor in an input box or a link that has been tabbed to.
    • :active is when an element is being activated by a user – the time between when a user presses a mouse button and then releases it.

Specificity

• when multiple selectors at the same level of specificity apply for an element, and they modify the same CSS properties, the last one always wins:

  a:active {
  	color: red;
  }
  
  a:hover {
    color: black;
  }
  
  /* when clicking on an <a> element, it is both hovered and active, and 
  because the last style wins, it will be red. */
  

• applying the same styles to multiple selectors:

  p, h1, h2 {
  	margin-top: 0px;
  }
  

• within a specific selector, the later property takes precedence:

  h2 {
      font-size: 32px;
      color: #104c90;
      margin-bottom: 10px; 
      margin: 0; /* this property overrides margin-bottom */
    
  }
  

• shorthand for border property:

  border: 1px solid #000;
  

• order of specificity, from less specific to more specific: element (e.g. div) → class (e.g. .container) → id (e.g. #user-input)

Compound Selectors

• compound selectors: can specify a style for a selector that applies to descendant elements of some other selector

  /*
  select all <a> elements that are inside elements of class "section-two"
  */
  .section-two a {
      color: black;
  }
  

  • note: the style applies to any descendant <a> element of a "section-one"-class element, not just direct children

• you can use compound selectors with pseudo-selectors:

  /*
  select all hovered, "btn"-class elements inside "section-one" elements
  */
  .section-one .btn:hover {
      background: white;
  }
  
  /*
  select all hovered, "btn" elements inside hovered, "section-one" elements
  */
  .section-one:hover .btn:hover {
      background: white;
  }
  

• specificity and compound selectors:

  • to get the specificity of a compound selector, you add up the number of element, class, and id selectors it contains, increasing in order of magnitude with each
  • e.g. .button a { } has 11 points (10 for class + 1 for element), while p #item .class-one .class-two has 121 points (100 for id, 20 for class, 1 for element)