notes

CSS Syntax and Selectors
    selector propery:value;propery:value;
CSS Selectors
    The element Selector
    The id Selector
    The class Selector
    Grouping Selectors
         h1, h2, li, p
CSS Comments
    /* this is a comment in css */
Three Ways to Insert CSS
    External style sheet
    Internal style sheet
    Inline style
CSS Colors
    Color Names
    HEX Value
    RGB Value
    HSL Value
    rgba
    hsla
CSS Backgrounds
    background-color         background-color: yellow;
    background-image         background-image: url("paper.gif");
    background-repeat        background-repeat: repeat-x;
    background-attachment    background-attachment: fixed;
    background-position      background-position: right top;    
    background: #ffffff url("img_tree.png") no-repeat right top;
CSS Borders
    Border Style (border-style)
        dotted - Defines a dotted border
        dashed - Defines a dashed border
        solid - Defines a solid border
        double - Defines a double border
        groove - Defines a 3D grooved border. The effect depends on the border-color value
        ridge - Defines a 3D ridged border. The effect depends on the border-color value
        inset - Defines a 3D inset border. The effect depends on the border-color value
        outset - Defines a 3D outset border. The effect depends on the border-color value
        none - Defines no border
        hidden - Defines a hidden border
    Border Width
    Border Color
    Border - Individual Sides
    Border - Shorthand Property (    border: 5px solid red; )
CSS Margins
CSS Padding
CSS Box Model
    Margin
    Border
    Padding
    Content
CSS Text
    Text Color
    Text Alignment
    Text Decoration 
    Text Transformation
    Text Indentation
    Letter Spacing
    Line Height
    Text Direction
    Word Spacing
    Text Shadow (    text-shadow: 3px 2px red; )
CSS Fonts
    Font Family     font-family: "Times New Roman", Times, serif;
    Font Style      font-style: italic;
    Font Size       font-size: 30px;
    Font Weight     font-weight: bold;
    Responsive Font Size    
        <h1 style="font-size:10vw">Hello World</h1>
    
CSS Icons
    Font Awesome Icons
    Bootstrap Icons
    Google Icons
    Simpleline icons

CSS Display
    for controlling layouts
    Block-level Elements
    Inline Elements
    Display: none;
    visibility: hidden;
    display 	Specifies how an element should be displayed
    visibility 	Specifies whether or not an element should be visible
CSS Position
    specifies the type of positioning method used for an element
    static      HTML elements are positioned static by default 
    relative    An element with position: relative; is positioned relative to its normal position.
    fixed       An element with position: fixed; is positioned relative to the viewport. The top, right, bottom, and left properties are used to position the element.
    absolute    An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
    sticky      An element with position: sticky; is positioned based on the user's scroll position.
CSS Overflow
    The CSS overflow property controls what happens to content that is too big to fit into an area.
    visible - Default. The overflow is not clipped. It renders outside the element's box
    hidden - The overflow is clipped, and the rest of the content will be invisible
    scroll - The overflow is clipped, but a scrollbar is added to see the rest of the content
    auto - If overflow is clipped, a scrollbar should be added to see the rest of the content
CSS Float
    The float property is used for positioning and layout on web pages.
    left - The element floats to the left of its container
    right- The element floats to the right of its container
    none - The element does not float (will be displayed just where it occurs in the text). This is default
    inherit - The element inherits the float value of its parent
CSS Pseudo Selectors