Please enable JavaScript.

Coggle requires JavaScript to display documents.

Module 2: HTML, CSS, and Javascript for Web Developers: Cascading Style…

- - - - HTML
        
        defines the structure of the content
        
        is sufficient for raw content
      - "Content is king" - Bill Gates
    - - Raw content is not enough
      - CSS
        
        needed to style the content that is pleasing to the user
        
        styling includes
        
        color
        
        positioning
        
        size
        
        ...
        
        UX for the users
        
        Example: http://csszengarden.com
  - - - works by associating Rules with HTML elements.
      - CSS Rule
        
        governs how specified HTML element(s) should be displayed.
        
        syntax
        
        Declaration
        
        zero or more declarations
        
        consists of property/ value pair(s)
        
        good practice to terminate by a ;
        
        Selector
      - CSS Style Sheet
        
        collection of zero or more CSS rules
        
        applied to an HTML document
  - - - determines which HTML element or set of HTML elements, the CSS declaration is applied to
      - Selector API
        
        used by the browsers to traverse the Document Object Model (DOM)
      - Frequently used 3 types
        
        Element
        
        selects the element based on the HTML element name.
        
        Class
        
        defined with a .
        
        selects a HTML element based on the class
        
        (Least reusable) Id
        
        defined with a #
        
        selects a HTML element based on the id value.
      - Grouping selectors
        
        comma separated list of selectors
        
        used to select multiple HTML elements for styling them together.
        
        e.g.
  - - - Element with class selector (selector.class)
        e.g. p.big, .highlight.big
        
        Child selector (selector > selector)
        e.g. article > p, article > .colored
        
        Descendent selector (selector selector)
        e.g. article p, .colored p
    - - combine other selectors to specify useful relationship to each other and the location of content in the document.
    - - Adjacent sibling selector (selector + selector)
        e.g. p + img
        
        General sibling selector (selector ~ selector)
        e.g. p ~ img
  - - - used to define a special state of an element.
    - - selector : pseudo-class
    - - : link ⏋generally grouped together
        
        : visited ⏌
        
        : hover ⏋ generally grouped together
        
        : active ⏌
        
        : nth-child(...)
- - - - HTML & CSS: Designing and Building Web Sites by Jon Duckett
        
        JavaScript & jQuery: Interactive Front-End Development by Jon Duckett