Skip to content
  1. Basic - "user agent stylesheet" is default browser style

  2. ViewPort

  3. The viewport is the user's visible area of a web page.

  4. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen

  5. HTML5 introduced a method to let web designers take control over the viewport, through the tag.

  6. <meta. name="viewport" content="width=device-width, initial-scale=1.0">

  7. px vs rem vs em

  8. PX: Pixels (px) are considered absolute units, although they are relative to the DPI and resolution of the viewing device.

  9. EM: Relative to the parent element

  10. REM: Relative to the root element (HTML tag)

  11. %: Relative to the parent element

  12. VW: Relative to the viewport’s width

  13. VH: Relative to the viewport’s height

  14. Keyframes

  15. The @keyframes rule specifies the animation code.

  16. The animation is created by gradually changing from one set of CSS styles to another.

  17. During the animation, you can change the set of CSS styles many times.

  18. Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

  19. This gives more control over intermediate steps of the animation sequence than transition

  20. ad and dis of css

  21. ad

    • better looking website

    • easy to maintain

    • better device compatibility

  22. dis

    • cross browser issues

    • security issues

    • sometimes maintaining it becomes difficult

  23. Class vs Id selector

  24. The basic difference between ID and Class is that the ID selector is applied only to one element in a page, whereas the class selector can be applied to several elements on a single page.

  25. Only one ID selector can be attached to an element. hence ID's are stronger than class seletor as they are specific and hence, also, they are faster than class selector

  26. Multiple class selectors can be attached to an element.

  27. CSS position - Absolute- Relative- static-fixed

  28. https://css-tricks.com/almanac/properties/p/position/

  29. https://www.freecodecamp.org/news/css-positioning-position-absolute-and-relative/

  30. Display: none vs Visibility: hidden

  31. visibility:hidden hides the element, but it still takes up space in the layout.

  32. display:none removes the element from the document. It does not take up any space.

  33. CSS Pseudo-elements

  34. https://www.w3schools.com/css/css_pseudo_elements.asp

  35. A CSS pseudo-element is used to style specified parts of an element. - For example - it can be used to: Style the first letter, or line, of an element Insert content before, or after, the content of an element

      • p::first-letter {

      color: #ff0000;

      font-size: xx-large;

      }

  36. Pseudo-classes

  37. https://www.w3schools.com/css/css_pseudo_classes.asp

  38. A pseudo-class is used to define a special state of an element.

  39. For example

  40. to Style an element when a user mouses over it, Style visited and unvisited links differently, Style an element when it gets focus

    a:hover {

    color: #FF00FF;

    }

  41. Z-index

  42. The z-index property specifies the stack order of an element.

  43. An element with greater stack order is always in front/top of an element with a lower stack order.

  44. Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).

  45. Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.

  46. Box model

  47. The CSS box model is essentially a box that wraps around every HTML element.

  48. The set of rules that governs the size, shape, spacing, borders, and margins of page elements. - It consists of: margins, borders, padding, and the actual content

  49. ways to add css and its precedence

  50. inline style - inline css ( html style attribute ) overrides css rules in style tag and css file

  51. Internal style

  52. External CSS

  53. rules that appear later in the code override earlier rules if both have the same specificity.

  54. a more specific selector takes precedence over a less specific one

  55. A css rule with !important always takes precedence.

  56. https://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css

  57. Flex box

    1. Parent flex container with display:flex

1. flex items are children of flex container

1. | Flex Container Props | Flex Item Props |

| :------------------- | :-------------: |

| flex-direction | order |

| flex--wrap | flex-grow |

| flex-flow | flex-shrink |

| flex-content | flex-basic |

| flex-items | align-self |

| flex-content | --|

  • align-self to align these items within their container.

  • justify-content- Instead of aligning each individual item, say we wanted to align all items together within the container. For that, we’ll use justify-content

  • space between - equal space between items

  • space around - equal space between border and items

  • svg vs canvas - https://www.geeksforgeeks.org/difference-between-svg-and-html-5-canvas

https://css-tricks.com/when-to-use-svg-vs-when-to-use-canvas/

  2. . CSS Position

    1. https://www.youtube.com/watch?v=GPadt8wmGXM

    2. https://www.youtube.com/watch?v=jx5jmI0UlXU

    3. static

      1. is default position of all html elements

      2. Static works just like html elements

      3. top bottom, left and right doesn't work on static

    4. Relative

      1. works same as static but with addition of top, bottom, left and right positioning of element

      2. basically relative helps you to move element relative to static i.e. where it is originally

      3. it overflows parent and other elements top, bottom, left and right of it

      4. but it does not affect document flow of other elements

      5. it should not be used

    5. Absolute

      1. no longer part of document flow

      2. it does not take full width but only width required for its content

      3. absolute completely removes element from document flow and rest of the things are rendered as if absolute element is not present in document

      4. top left right bottom - absolutely positions itself in some parent element it can reference

      5. parent element position shd be relative to use absolute in child element

      6. it looks for first element that is not static and sets its own position accr to that non static element

      7. if you want element inside div to be absolute then set div position as relative

      8. i.e. absolute is nothing but fixed position wrt to parent element

    6. Fixed

      1. it is position according to entire html page and has nothing to do with parent element

      2. no longer part of document flow

      3. they stay in same position when you scroll page i.e. not affected by scrolling

    7. Sticky

      1. combination of relative and fixed position

      2. fixed within boundary of parent div / section

      3. it moves until it reaches 0px of its parent

    8. floats and clears https://www.youtube.com/watch?v=3YW65K6LcIA

      1. float make all elements which are coded after it wrap around it.

      2. clear used to clear things from floating things

  3. In how many ways can we position an HTML element? Or what are the permissible values of the position attribute?

    1. static: Default value. Here the element is positioned according to the normal flow of the document.

    2. absolute: Here the element is positioned relative to its parent element. The final position is determined by the values of left, right, top, bottom.

    3. fixed: This is similar to absolute except here the elements are positioned relative to the element.

    4. relative: Here the element is positioned according to the normal flow of the document and positioned relative to its original/ normal position.

    5. inherit: Here the element inherits or takes the property of its parent

  4. How to specify the link in HTML and explain the target attribute?

    1. _self: This is a default value. It opens the document in the same window or tab as it was clicked.

    2. _blank: It opens the document in a new window or tab.

    3. _parent: It opens the document in a parent frame.

    4. _top: It opens the document in a full-body window