1. What are the five different position values?
   static, relative, fixed, absolute, sticky
2. Which position do HTML elements have by default?
   static
3. Explain how position: relative; works.
   The element is positioned relative to its normal position.
   Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
4. An element with position: fixed; is positioned relative to what?
   the viewport
5. How is an element with position: absolute; positioned?
   It is is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
   However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
6. Does an element with fixed positioning scroll?
   It always stays in the same place even if the page is scrolled.
7. How does an element with position: sticky; work?
   It is positioned based on the user's scroll position.
8. A sticky element toggles between which two positioning properties?
   relative and fixed, depending on the scroll position
   It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
9. Which property specifies the stack order of an element (which element should be placed in front of, or behind, the others) when elements are overlapping?
   the z-index property
10. Which CSS property controls what happens to content that is too big to fit into an area?
    CSS overflow property
11. Which overflow value creates a scrollbar in order to see the overflow content?
    scroll
12. What are the four float property values?
    left, right, initial, inherits
13. Which property allows you to wrap text around an image?
    the float property
14. Which property specifies what elements can float beside the cleared element and on which side?
    CSS clear property
15. Explain the Clearfix Hack.
    If an element is taller than the element containing it, and it is floated, it will overflow outside of its container.
    Then we can add overflow: auto; to the containing element to fix this problem.
16. What is the major difference between display: inline; and display: inline-block;?
    Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
    Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
17. What is one common use of display: inline-block;?
    to display list items horizontally instead of vertically
18. How do you horizontally center a block element (like <div>)?
    use margin: auto;
19. What are three ways to center an element vertically in CSS?
    use top and bottom padding, use the line-height property with a value that is equal to the height property, use positioning and the transform property
20. What is a combinator?
    something that explains the relationship between the selectors
21. What are the four different combinators?
    descendant selector (space)
    child selector (>)
    adjacent sibling selector (+)
    general sibling selector (~)
22. What is a descendant selector?
    matches all elements that are descendants of a specified element
23. What is a child selector?
    selects all elements that are the children of a specified element
24. What is an adjacent sibling selector?
    selects an element that is directly after another specific element
25. What are Pseudo-classes?
    used to define a special state of an element
26. Give three examples of what a pseudo-class can be used for.
    Style an element when a user mouses over it
    Style visited and unvisited links differently
    Style an element when it gets focus
27. Which pseudo-class allows you to style an <a> element when a cursor is over it?
    :hover
28. What are Pseudo-elements?
    They are used to style specified parts of an element.
29. What are the opacity property values and which is more transparent?
    The opacity property sets the opacity level for an element and describes the transparency level.
    1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
30. The opacity property is often used together with which selector to change the opacity on mouse-over?
    :hover
31. When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. What can happen to text inside a transparent element?
    Text inside a fully transparent element can be hard to read.
32. What is an image sprite and why are they used?
    a collection of images put into a single image
    It reduces the number of server requests and saves bandwidth so it takes less time to load.
33. What is an attribute selector?
    It is used to select elements with a specified attribute.
34. When expressing length in CSS, do you use whitespace between the number and the unit?
    No
35. What are the two types of length units?
    absolute and relative
36. What are two common length units?
    px, em
37. In CSS, are negative lengths are allowed?
    for some CSS properties
38. What is specificity?
    a score/rank that determines which style declaration is ultimately applied to an element when there are 2 or more CSS rules that point to the same element
39. Every selector has its place in the specificity hierarchy. What are the four categories which define the specificity level of a selector?
    1. inline styles
    2. IDs
    3. Classes, pseudo-classes, attribute selectors
    4. Elements and pseudo-elements
40. If the same rule is written twice into the external style sheet, which rule will be applied?
    the latest rule wins