note.txt

css model and css box-sizing


CSS model means every elements in a web page is represented as a box which consist of
    content: the actual thing inside the box
    padding: the space between the content and the border
    border: is the line around the box
    margin: is the space outside the box

box-sizing: is how the browser determines the final size of a box, there are 2 types of box-sizing
    content-box(default): whatever size is given is only for the content, therefore the final size will be content + border + padding

    border-box: whatever size is given is shared between the content, padding and border
        i.e the size given is the final size of the box



Css border
    border-style
    border-width
    border-color
    border-radius - give curved edges
    border-collapse
    border-spacing
    border-image



HTML TABLE
    table - container
    tr - table row/relation
    th -table heading
    td - table data
    row-grouping: thead, tbody, tfoot

    cell merging

Adding CSS to HTML
    1. inline: passed as an attribute to the element to be styled - style = "property: value;"
    2. internal: styling is placed preferably  inside the head of the html wrapped with a style element
            selector {
                property: value;
                property: value;
            }
    3. external: having a separate file for styling and been linked to the HTML using the link element with attributes
        rel="stylesheet" specifying the relationship btw the source file and the html
        href="path/url" specifying the reference to the source file 

CSS selectors
    -Simple: use the name, id(#), class(.), universal (*)
    -pseudo class: use the state of an element (:state)
    -pseudo element:
    -attribute
    -combination: use the relationship between elements
            descendant
            sibling


html list
    unordered
    ordered
    definition/description




CSS Layout
    -display: block, inline, inline-block, none
        css display property specifies the display behavior of an element and how it interacts with other elements.

        block elements always take the full width of their container/parent thereby forcing line break before and after them

        inline elements only take the space needed by their content and does not force line break (width, height, text-align, vertical align, padding, margin, etc does not work well)

        inline-block - the element is inline but height, width, vertical-align etc works well on it

        none- the element is hidden

    -flexbox is a one directional system for creating layout
            terms in flexbox
        .flex-container- an element holding the boxes to be arranged
        .flex-items- are the boxes to be arranged
        .flex-direction - row(default) | column | column-reverse | row-reverse
        .flex-start / end 
        .gap: the space btw flex items
        .flex-axis: main- is where ever the flex direction is
                    cross- the other side
        arrangement/placement: 
            justify-content - arrange the items on the main axis 
            align-content - arrange the items as a whole on the cross axis (doesn't work without flex-wrap)
            align-items -  arrange the items individually on the cross axis
        flex-wrap: nowrap(default) | wrap | wrap-reverse

    -positioning: static, relative, absolute, fixed, sticky
    -grid


Positioning is used to control how and where an element is place in the display flow
    static (default): it is placed in its natural position and can't be moved

    relative: the box is placed in it's normal position but can be moved

    absolute: the box is removed from it's normal position then moved relatively to its nearest parent having a position other than static, else it uses the html

    fixed: the box is removed from it's normal position then moved relatively the html, it remains fixed in the viewport even when the page scrolls

    sticky: emulates both relative and fixed, it's relative in it's actual placement, but becomes fixed when it gets to a specified distance


z-index: to control the stacking order of boxes


CSS transform: change a box
    transform properties
        translate: move
        rotate: turn
        scale: resize
        skew: slant
        perspective: how the box is seen
    types of transform
        2d
        3d

transition: how something changes
    transition-property: whatever is changing !
    transition-duration: how long the changes take !
    transition-delay: how late the change will start
    transition-timing-function: change in speed of the change



flex grow, shrink, basis
    grow: is the ratio at which flex-items share the remaining space in the flex container

    shrink is the ratio at which size is removed from each item when the container reduces in size on the main axis

    basis is the smallest size an item can be on the main axis