Cascade ALgorithm

  1. Position and Appearence
  2. Specificity
  3. Origin
  4. Important
Origin: Inline > ID selectors > class or attribute selectors > Element selector > Universal Selector
Important: use !IMPORTANT to override everything else
Position: Mostly used as a tie breaker when necessary

Sizing Units

  1. PX
  2. viewport
  3. em
  4. rem
  5. vmin | vmax
Default font-size
is 16 pixels
em
is the times of the current font size .
for example 1.5em give 1.5 times of the current font size .
rem
is the times of the font size of the root html element.
for example 1.5rem gives 1.5 times of the font size of root html element .
vmin
The minimum of height and width in the viewport
vmax
The maximum of height and width in the viewport


Note

  1. Min|Max Height|Width . To Specify limits
  2. the % is going to relate with the parent of where it is specified.



Nice sauce

CSS Display property

  • You can use the display property/attribute with inline option to make any kind of element inline
  • The inline option doesn't consider the width and top , [ be it padding or margin ] where as the inline-block does consider the top values
  • none removes the element from the document , whereas visibility just doesn't display but occupies the space
    • Sauce


    Box Shadow

    flex
    is used to move the elements easily using justice-content
    By default it keeps all the elements in a horizontal plane
    You can use inline-flex , flex-box etc.
    box-shadow
    is used to give shadow to the element , in the format h-offset, v-offset blur spead color inset
    text-shadown
    Same as box-shadow for text
    outline
    same as border but for the external part of the box-model
    format: width style color
    you also get the option of outline-offset
    border-radius
    curves the corners of the border
    There is no radius for outline , it inherits that property from border



    Lists

    list-item
    The display property of lists is list-item
    list-style
    You can change the style of the markers here
    can just make it to none , if you don't want to mark it , typical for nav bars
    list-style-position
    In order to add the list marker inside the list item in the document in order to modify it , you can use this option with inside as its value!
    you can also add inside in just the list-style attribute
    list-style-image
    This can be used to add any kind of image [ including URLs ] as a marker [bullets] to the list item
    list-style-type
    Similar to the previous [image] one , this can also be used to add emojis

    Overflow

    Auto
    you get a scroll bar when the content overflows
    scroll
    you get a scroll bar regardless of the overflow

    White space : nowrap

    a horizontal scroll bar appears and no whitespaces are brought in the next line
    text-overflow
    attributes like ellipses
    overflow-x/y axis
    in shorthand- overflow: hidden auto ;
    that is overflow : x-axis y-axis;
    Next