Home Icon

Week 2 Exercises - CSS

  1. What are the main differences between external, internal, and inline CSS?

    2. The main diference is related to specificity of the rules (inline is the most specific but less practical) and loading time (external CSS will need to download the file first and then render the styles).

  2. What is the syntax for class and ID selectors?

    3. .class and #id

  3. How would you apply a single rule to two different selectors?

    4. .selectorOne, .selectorTwo {

  4. Given an element that has an id of title and a class of primary, how would you use both attributes for a single rule?

    5. #title.primary {

  5. What does the descendant combinator do?

    6. The descendant combinator allows the developer to change the style of a child element if is present in the parent element.

  6. Between a rule that uses one class selector and a rule that uses three type selectors, which rule has the higher specificity?

    7. The class selector rule because is more specific

  7. From inside to outside, what is the order of box-model properties?

    8. Content > padding > border > margin

  8. What does the box-sizing CSS property do?

    9. Changes the box-sizing property to the specified property (padding-box or border-box)

  9. What is the difference between the standard and alternative box model?

    10. When setting the width/height of the element, the standard box model only takes in consideration the content box, while the alternative box model takes in consideration the content box + padding + border

  10. Would you use margin or padding to create more space between 2 elements?

    11. Margin

  11. Would you use margin or padding if you wanted two elements to overlap each other?

    12. Margin

  12. What is the difference between a block element and an inline element?

    13. The inline element only takes the necessary width and doesn’t start in a new line. A block element always starts in a new line and as a margin before and after.

  13. What is the difference between an inline element and an inline-block element?

    14. An inline element does not respect the width/height properties, but the inline-block does

  14. Is an h1 block or inline?

    15. Block

  15. Is button block or inline?

    16. Block

  16. Is div block or inline?

    17. Block

  17. Is span block or inline?

    18. Inline

  18. Whats the difference between a flex container and a flex item?

    19. The flex container is the container where the flex properties are set and the flex item are the child elements inside the flex container

  19. How do you create a flex item?

    20. Set display: flex to the parent container of the flex item

  20. What are the 3 values defined in the shorthand flex property?

    21. Flex grow, shrink and basis

  21. How do you make flex items arrange themselves vertically instead of horizontally?

    22. Display: column

  22. What is the difference between justify-content and align-items?

    23. Justify-content defines the alignment along the main axis, while the align-items align the items on the cross axis

  23. How do you use flexbox to completely center a div inside a flex container?

    24. FlexContainer {Display: flex; Flex-direction: column; justify-content: center; align-items: center;

  24. Whats the difference between justify-content: space-between and justify-content: space-around?

    25. Space-between will distribute the space between the flex items without any space at the ends, while the space around will distribute the space evenly including the flexs items on the ends of the parent element

Header 1

Header 2

Header 3

Header 4