Other

Question 1

What is the order of execution for CSS?

Class selector, element selector, ID selector, Inline, *, !Important

Answer 1

1 !Important Will overrule everything

2 Inline style Higher order than other CSS but you should never use this

3 ID selector In case of multiple: Last selector applies

4 Class selector
In case of multiple: Last selector applies
Pseudo classes take preference over more generic element selectors!

5 Element selector
In case of multiple: Last selector applies
The element level is important. A lower level element takes precedence over a higher level element

6 Universal selector *

Question 2

What type of CSS properties do typically receive inheritance from their parents?

Answer 2

font-family
line-height
text-align
text-transform
color
font-size

The properties that do receive inheritance from their parents are mostly related to text

Question 3

Example of property that is not affected by inheritance

Answer 3

Properties like height, width, margin, padding, and border are not inherited properties.

A lot of selectors will not be affected by inheritance such as border. It would be unworkable otherwise

Question 4

Check whether HTML is valid

Answer 4

With W3C Validator you can check whether your HTML is valid

Question 5

Conflict in element?

Answer 5

In the Chrome browser inspect module you can check what is wrong with the element.
It could be referenced two times for example
Rule of thumb: When there’s conflict somewhere it’s typically the more complex class rule that is applied
Therefore: Keep your selector as simple as possible

Question 6

Compare two different pieces of code

Answer 6

Diffchecker

Question 7

Selector specificity

Ex:
Selector specificity: (0,1,0)
vs.
Selector specificity: (0,2,2)

Answer 7

Hoover over selector in Visual Code Studio and check number. When there’s conflict, the heighest number decides which takes preference

Question 8

Box model final element width

Answer 8

Left border + left padding + width + right padding + right border

Question 9

Box model final element heigth

Answer 9

top border + top padding + height + bottom padding + bottom border

Question 10

The specificity algorithm is basically a three-column value of which three categories?`

Answer 10

ID, CLASS, and TYPE