CSS

Question 1

What is specificity?

Answer 1

When there are 2 or more CSS rules that point to the same element which one wins?

Question 2

What is the specificity order?

Answer 2

ID > CLASS > TYPE

Question 3

+ operator

What is this called?

example:

div + p {
background-color: yellow;
}

Answer 3

• “adjacent sibling selector”
• paragraph that come IMMEDIATELY after any image

<div>
<p>some text</p> // NO
<p>some text</p> // NO
</div>

<div>
<p>some text</p> // NO
</div>

<p>more text</p>

// YES

<p>some text</p>

// NO

Question 4

> operator

What is this called?

example:

div > p {
background-color: yellow;
}

Answer 4

• “child selector”

<div>
  <p>Paragraph 1</p>  // YES
  <p>Paragraph 2</p>  // YES  
    <span>
      <p>Paragraph 3 (inside).</p>   // NO
     </span>
  <p>Paragraph 4</p>  // YES
</div>

<p>Paragraph 5</p>

<p>Paragraph 6</p>

Question 5

“blank space operator”

What is this called?

example:

div p {
background-color: yellow;
}

Answer 5

• “descendant selector”
• descendant is anything within the element, even nested elements

<div>
  <p>Paragraph 1 in the div.</p>  // YES
  <p>Paragraph 2 in the div.</p>  // YES
    <span>
      <p>Paragraph 3 in the div (inside a section element).</p>  // YES
    <span>
  <p>Paragraph 4 in the div.</p>  // YES
</span></span></div>

<p>Paragraph 5. Not in a div.</p>

<p>Paragraph 6. Not in a div.</p>

Question 6

~ operator

example)

div ~ p {
background-color: yellow;
}

Answer 6

• “general sibling selector”
• siblings are elements on the same (tab) level

example 1)

<p>The general sibling selector (~) selects all elements that are next siblings of a specified element.</p>

<p>Paragraph 1.</p>

<div>
<p>Paragraph 2.</p> // NO
</div>

<p>Paragraph 3.</p>

// YES
<code>Some code.</code><p>Paragraph 4.</p> // YES

example 2)

div ~ p
{
color: red;
}

<div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</div>

<p>This is a paragraph.</p>

// YES

<p>This is a paragraph.</p>

// YES

Question 7

What is the CSS Box Model?

Answer 7

Margin –> Border –> Padding –> Content

Question 8

display inline vs inline-block?

Answer 8

• display:inline –> top/bottom margins & paddings not respected.
• display:inline-block –> top/bottom/margins/padding work

Question 9

display inline-flex vs flex?

Answer 9

display: flex; –> causes the flex CONTAINER to act as display: block
display: inline-flex; –> causes the flex CONTAINER to act as display: inline-block

Question 10

event delegation; explain it

Answer 10

if we have alot of elements handled in a similar way (alot of buttons for example), instead of assigning a handler to each of them, put a handler on their common ancestor (the container containing all the buttons)

Capture Phase:
window –> document –> html –> body –> div –> button

Target Phase

Bubble Phase:
button –> div –> body –> html –> document –> window

ex)

var container = document.getElementById('container');
container.addEventListener('click', function(event) {
  if (event.target.className == 'remove-button') {
    // do something
  }
});

Question 11

EM unit

Answer 11

• in relation to it’s parents

- ex) LI elements inside UL. each level of nesting gets 1.3em bigger

Question 12

REM unit

Answer 12

• “root em”
• the root element’s font-size (in most cases the HTML element)
• each level of nesting in a LI and UL list does “not” get bigger

Question 13

Staples of a Responsive Design

Answer 13

1) media queries

2) multiple column layout
ex)

.container {
column-count: 3;
column-width: 10em;
}

3) flexbox
4) grid
ex)

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

5) responsive images

img {
max-width: 100%;
}