CSS

Question 1

What is a box model?

Answer 1

A box that wraps around every HTML element. It consists of content, padding, border & margins.

Question 2

What is specificity?

Answer 2

When the browser decides which CSS property value is most relevant and applies it.
For ex., CSS of an ID overrides CSS
of a class unless !important is used

Question 3

What is Static positioning?

Answer 3

Default position, element remains in the natural flow of the page. Top, bottom, left, right, and z-index don’t apply.

Question 4

What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?

Answer 4

Resetting - is meant to strip all default browser styling on elements. For e.g. margins, paddings, font-sizes of all elements are reset to be the same. You will have to redeclare styling for common typographic elements.

Normalizing - Normalizing preserves useful default styles rather than “unstyling” everything. It also corrects bugs for common browser dependencies.

Question 5

Describe floats and how they work

Answer 5

Floated elements remain a part of the flow of the page, and will affect the positioning of other elements will affect the positioning of other elements. (e.g. text will flow around floated elements)

Question 6

Describe z-index and how stacking context is formed.

Answer 6

The z-index property in CSS controls the vertical stacking order of elements that overlap. z-index only affects elements that have a position value which is not static.