Please enable JavaScript.

Coggle requires JavaScript to display documents.

CSS: Basics (Selectors (Simple (Universal (Has a performance impact, *),…

- - - - Case-insensitive
    - - Duplicate IDs may result in unpredictable behavior
    - - Has a performance impact
      - *
  - - - [attr]
        
        Presence of attribute
      - [attr=value]
        
        Presence with specific value
      - [attr~=value]
        
        Presence with at least a specific value
    - - [attr^=val]
        
        Value start with val
      - [attr$=val]
        
        Value ends with val
      - [attr*=val]
        
        Value contains the substring val
      - [attr|=val]
        
        Value is val or -val
  - - - A B
    - - A > B
    - - A + B
    - - A ~ B
- - - - <link> tag
    - - <style> tag inside <head>
    - - style attributes
- - - - px
      - pt
    - - em
      - rem
    - - 0
      - Line height
      - Number of animations
  - - - Pair of characters for a channel
      - String of six characters
    - - Takes three integer values
      - Function
    - - Function
      - Takes an integer and two percentage values
    - - Takes and additional decimal input
      - Distinct from setting the opacity property
        
        Opacity applies to children
- - - - width
        
        Defaults to 100% of available space
      - height
        
        Adopts the height of the content by default
      - min-width, max-height, etc.
      - box-sizing
        
        content-box
        
        Default
        
        border-box
        
        Padding and border included in width and height
    - - Percentage values are based on container width
    - - -width, -style, -color
      - No percentage widths
    - - Negative values cause boxes to overlap
      - Margin collapsing
      - Percentage values are based on container width
    - - Not part of the box model
  - - - auto
        
        Scrollable
      - hidden
        
        Clipped
      - visible
        
        Overflowed content
        
        Default
      - Content overflow behavior
    - - border-box
        
        Default
      - padding-box
      - content-box
      - Extent of background color and image
  - - - Default for block elements
      - Takes its own line
    - - Default for inline elements
      - Flows with surrounding content
      - Width and height have no effect
      - Breaks on new lines
    - - Flows with surrounding content
      - Doesn't break on new lines
- - - - Declaration block
        
        Declarations
        
        Properties and values are case-sensitive
        
        Not all property-value combinations are valid
        
        Invalid declarations are ignored
        
        property: value pair
        
        Should be terminated with a semicolon
        
        Can sometimes be nested
        
        Can be empty
      - Selectors
        
        Invalid selectors in a group are ignored
        
        Can be grouped (comma) or chained
      - Selectors and a declaration block
    - - Metadata
        
        charset
        
        import
      - Conditional information
        
        media
        
        document
      - Descriptive information
        
        font-face
      - Has their own internal syntax
    - - Subset of at-rules
      - Contains rules that should be applied conditionally
      - e.g. media, supports, document
- - - - Stylesheet
        
        User agent < user < author
      - Importance
        
        Author < user
        
        Normal styles < important
    - - Element or pseudo-element
        
        1
      - Class, attribute, or pseudo-class
        
        10
      - ID
        
        100
      - Inline
        
        1000
      - No effect
        
        Universal selector
        
        Combinators
        
        Negation pseudo-class
  - - - font-family
      - color
    - - margin
      - background-image
    - - Universal property values
      - inherit
        
        Same as parent
      - initial
        
        Same as browser stylesheet
        
        If not present, inherit if inheritable
        
        Not supported by IE
      - unset
        
        Inherit or initial based on inheritableness
        
        Not supported by IE
      - revert
        
        Remove styles from current origin
      - Can be applied to the all shorthand properties