CSS

Question 1

What is the box model?

Answer 1

• Content
• padding
• border
• margin

div {
height: 100px;
width:100px;
padding: 10px;
border. 20px;
margin: 30px;
background-color: blue;
}

Question 2

What is the property box-sizing: border-box?

Answer 2

-Border becomes part of content and the overall box will shink containing the border into the content

Question 3

What is specificity?

Answer 3

-HTML elements can have multiple classes, they can have ids or be reference by their element type
-Now via css you can assign different values to the same element through multiple ways
-To decide what to apply specificity is used
First rule is CSS is cascading and will the last assignedment in the code
Second rule is what is more specific will override

Question 4

How to align a block element inside another element?

Answer 4

• Tables, Flex-box, Css gid, vanilla css
• position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%);

Question 5

What is the difference between static, relative, absolute and fixed position?

Answer 5

• By default everything is static
• By making an element relative you can move it with top: or bottom: without moving other static elements
• By making an element absolute it goes on another alignment layer bound by its parent element. So it will stack over other elements and the other elements are not shifted by it.
• By making an element fixxed it is like absolute but is bound to the page not the parent element.

Question 6

What is a shadow dom?

Answer 6

• CSS is global
• Scoped subtree within the element

var shadowRoot = shadowHost.createShadowRoot();

Question 7

How to build a triangle in css?

Answer 7

• Canvas or pure css can be used
• div mit border-top, bottom, right same amount
• border-top and border-bottom transparent
• border-right stays in color now it is a triangle

Question 8

What are pseudo-elements?

Answer 8

• pseudo elements are used to allow extra markup to an element without disturbing the environment
• Pseudo elements are accessed with :: after the elementname in css like p::after {content: “Injected text”}
• You could inject a tooltip in an element just by css without changing the html for it

Question 9

What are data attributed in HTML?

Answer 9

-To store data you can use data attributes
-div class=”profile” data-name”Sascha”>Profile /div>
-In css you can access this data with pseudo selectors
.profile.hover::before {
display: inline-block;
content: attr(data-name);

Question 10

What is a pixel unit in css?

Answer 10

-An absolute unit that is always the same size whereever it is defined

Question 11

What is a percentage unit in css?

Answer 11

-A percentage that is based of its parent element size

Question 12

What is a vw and vh unit in css?

Answer 12

-vw is each 1% of the entire screen width
-vh is each 1% of the entire screen heigth
.It is not restricted by parent elements and will stick to the screen size, so it can break out of wrappers

Question 13

What is a rem and em unit in css?

Answer 13

• rem and rem are relative of a defined font size
• rem stands for root size or the letter m
• em stands for parents size of the letter m
• You normally use rem because you can rely on a universal size and doesn’t need to consider parent elements
• ems are useful in cases like where you want to scale for example divs with their font

Question 14

What is the differrence between flexbox and css grid?

Answer 14

-Flexbox allows to align items flexibly within a container but only for one dimension (stacking or aligning)
| | |
-Css grid cares also about 2 dimensions (x- and y axis)
- | -
| | |
- —-