Please enable JavaScript.

Coggle requires JavaScript to display documents.

CSS: Language Basics - Coggle Diagram

- - - - Declarations
        
        A property: value pair
        
        Case-sensitive
        
        Invalid and ignored if a property is unknown or a value is not valid for a give property
        
        Properties
        
        Each property has a different set of allowable values
        
        Shorthand properties
        
        Sets several values at once
        
        Omitted values reverts to its initial value and may reset previously set values
        
        all property
        
        Sets all properties to a given value
        
        No whitespace inside property name
        
        Values
        
        Multiple values are separated by spaces
        
        Value or data types
        
        Numeric values
        
        <integer>
        
        <number>
        
        Decimals
        
        opacity
        
        <percentage>
        
        Always relative to another quantity
        
        1 more item...
        
        <dimension>
        
        <length>
        
        2 more items...
        
        <resolution>
        
        <angle>
        
        <time>
        
        A <number> with a unit
        
        <color>
        
        Colour keywords
        
        Hexadecimal RGB values
        
        Supports a 24-bit colour system
        
        Functions
        
        rgb() and rgba()
        
        hsl() and hsla()
        
        Functions with an alpha channels are aliases
        
        Alpha channel wouldn't affect nested element transparency
        
        <image>
        
        url() or gradient functions
        
        <position>
        
        A set of 2D coordinates
        
        horizontal vertical
        
        Second value defaults to center
        
        Can be a mix of a keyword and a length
        
        <string> and identifiers
        
        Keywords are identifiers
        
        No quotes
        
        <string>
        
        Quoted
        
        content
      - May contain one or more declarations
    - - Combinators
        
        Adjacent (next) sibling
        
        +
        
        Descendant
        
        Space character
        
        Child
        
        >
        
        Combines other selectors to create more specific selectors
        
        General sibling
        
        ~
      - Attribute selectors
        
        Presence and value matching
        
        Exact or one of values in space-separated list
        
        el[attr~="val1 val2"]
        
        Presence of attribute
        
        el[attr]
        
        Exact value of attribute
        
        el[attr="val"]
        
        Exact or begins with value
        
        el[attr|=val]
        
        Substring matching
        
        Begins with value
        
        el[attr^=val]
        
        Ends with value
        
        el[attr$=val]
        
        Contains value anywhere
        
        el[attr*=val]
        
        Case-sensitivity in matching
        
        i]
        
        Case-insensitive attribute value matching
        
        Defaults to the document language case-sensitivity if not present
        
        Case-sensitive for HTML
        
        s]
        
        Force case-sensitivity where case-insensitive
        
        Limited supported
      - Pseudo-class and pseudo-element selectors
        
        Pseudo-class selectors
        
        :pseudo-class
        
        Select based on a certain state of an element
        
        Dynamic or user-action pseudo-classes
        
        :hover
        
        :focus
        
        Pseudo-element selectors
        
        Select a certain part of an element
        
        ::pseudo-element
        
        Some :pseudo-elements are supported for backwards compatibility
        
        Generated content
        
        Use of ::before or ::after pseudo-elements with the content property to insert content using CSS
        
        :wheelchair: Generated text has reduced screen-reader support
        
        Useful for inserting icons
        
        Can be written without an element selector
        
        Equivalent to *:pseudo-class
        
        Pseudo-class selectors and pseudo-element selectors can be combined together
      - Basic selectors
        
        Universal selector (*)
        
        Can be used for better readability
        
        el *:pseudo-class instead of el :pseudo-class
        
        Can be used to target all elements in a document or inside an element
        
        Class selector (.)
        
        A class selector or multiple class selectors can be chained with an element selector
        
        ID selector (#)
        
        Can be chained with a element selector
        
        It's preferable to opt for a class selector in most cases
        
        Element (or type or tag name) selectors
      - Selectors in a selector list should be comma-separated
      - Elements that are selected are the subject of the selector
      - Used to target HTML elements that are to be styled
- - - - Representatives of browser vendors and other companies
      - Invited experts
        
        Independent
- - - - Most general to the most specific rules
  - - - View Source
        
        Displays the HTML file as stored on the server
      - Developer tools
        
        Display the rendered DOM after HTML has been normalised and JavaScript has run
  - - - Object-oriented CSS
      - CSS is separated into reusable objects
        
        Media object
    - - Block Element Modifier
      - CSS is separated into block element styles and modifier styles
  - - - Creates stylesheets
      - Sass etc.
    - - Runs on stylesheets
      - Optimisation etc.
        
        Stripping out comments and whitespace
- - - - Later styles override earlier styles if they have the same specificity and importance
      - Style locations
        
        User agent stylesheet has the lowest precedence
        
        User stylesheet
        
        Normal declarations
        
        Overrides user agent stylesheet
        
        Important declarations
        
        Overrides author stylesheet
        
        Author stylesheet
        
        Overrides normal declarations in the user stylesheet
    - - How specific a selector's selection will be if multiple rules can apply to the the same element
      - Measuring specificity
        
        1000
        
        style attribute
        
        100s
        
        ID selectors
        
        10s
        
        Class selectors
        
        Attribute selectors
        
        Pseudo-class selectors
        
        Negation (:not) has no effect
        
        1s
        
        Element selectors
        
        Pseudo-element selectors
        
        Universal selector and combinators have no effect
      - Each selector type has its own level of specificity that cannot be overwritten by any number of selectors with a lower specificity
    - - !important
      - Discouraged
      - Can be overridden by a later important style with similar or higher specificity
  - - - Not inherited
        
        border
        
        width
      - Inherited
        
        color
        
        font-family
    - - Any property can be set to an inheritance property value
        
        inherit
        
        Turns on inheritance by inheriting property value from parent
        
        initial
        
        Sets property to the initial value of that property
        
        unset
        
        Sets property to its natural value
        
        Acts like inherit for inheritable properties
        
        Acts like initial for non-inheritable properties
        
        revert
        
        Similar to unset but falls back to browser styles
      - An inheritance value can be set for all properties using the all shorthand property
- - - - Defined using a markup language
        
        HTML
        
        SVG
        
        XML
      - Defined in a document
    - - Converting a document to a form usable by an audience
      - Browsers define default styles
        
        A browser is a user agent
        
        A computer programme that represents a user inside a computer system
        
        Makes documents readable at the least
- - - - <link>
        
        Inside <head>
    - - <style>
        
        Inside <head>
        
        Should only be used inside restrictive CMSs
    - - style attribute
      - Should only be used inside restrictive CMSs and HTML-based email messages
  - - - Rules are sorted by selector types
      - Render tree is generated
        
        DOM elements with styles applied
    - - Visual representation of page is displayed
    - - Fetched HTML is converted to a DOM representation
    - - Linked resources (including CSS) are fetched