HTML CSS

  • An attribute is extra information to define elements such that <tag attribute="information">
  • The id attribute is a unique name for an element in the current page
  • Document Object Model (DOM)
    • A cross-platform and language-independent interface that treats an HTML document as a tree structure of node objects representing a part of the document
    • Every element in the DOM is a node
  • <div> and <span> are generic HTML container widgets
    • The div tag is a block-level element used for associating and grouping together nested elements, used very often, it's like SKContainer
    • The span tag is an inline element used for associating and grouping together nested elements, often used for styling
  • A CSS rule has three parts
    • selector
    • declaration block
    • one or more properties with values
  • A pattern to select (or find) elements in the DOM
    • Basic selectors
      • div { … } select by tag type
      • .foo { … } select by class name
      • #a { … } select by element id attribute
      • [type="text"] { … } select elements matching attribute value
    • Hierarchical selectors
      • div > div { … } select child elements by parent-child relationship
      • div div { … } select child elements by descendant relationship
    • Pseudo class selectors (there are many more …)
      • :first-child select first child
      • :hover select when mouse is over element
    • Combining selectors
      • div#a { … } select elements matching all selectors
      • div, #a { … } select elements matching at least one selector
  • CSS rule precedence (cascade) determines which style applies when multiple rules match
    • Who specified:
      • user-agent (browser default) < author (your CSS) < user (custom styles)
    • Where specified:
      • external stylesheet < <style> in HTML < inline style attribute
    • When specified:
      • later rules override earlier ones if specificity is equal
    • Importance:
      • rules with !important override others (except user !important)
    • Specificity is a standard method to determine which CSS rule declaration is most relevant to an element. Specificity:
      • inline style > #id > .class > tag
  • flex(grow, shrink, basis)
    • flex-grow controls how much an item grows relative to siblings when there’s extra space.
    • flex-shrink controls how much an item shrinks when there’s not enough space.
    • flex-basis specifies the starting size before grow/shrink is applied.
    • default: 0 1 auto
  • gap sets the space between flex items (horizontal and/or vertical)
  • align-items sets how all items align on the cross axis (perpendicular to main axis)
  • align-self overrides align-items for that element only (Like align-items, but for a single item)
  • justify-content controls horizontal alignment (on the main axis) — i.e. distribution
  • If flex-direction: row → main axis is horizontal; If flex-direction: column → main axis is vertical
  • The CSS grid layout module divides a container into major regions, defining child relationships in terms of size, position, and layer.
  • Getting References to DOM Elements
    • document.getElementbyID("my-id")
    • querySelector("#my-id")