CSS

Question 1

What is the difference between auto-fill and auto-fit in CSS grid?

Answer 1

When the repeat() function is set to auto-fit or auto-fill, the grid container creates as many grid tracks (columns/rows) as possible without overflowing the container.

With auto-fit, when there are not enough grid items to fill the number of tracks created, those empty tracks are collapsed. When there aren’t enough grid items to fill all the columns in the row, those empty columns are collapsed. The space that was used by the empty columns becomes free space, which is then evenly distributed among existing items. By absorbing the free space, the items grow to fill the entire row.

With auto-fill, everything is the same as auto-fit, except empty tracks are not collapsed. They are preserved. Basically, the grid layout remains fixed, with or without items.

Question 2

What is the difference between em and rem?

Answer 2

While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.

Question 3

What is a pseudo-class and give some examples?

Answer 3

A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer. They tend to act as if you had applied a class to some part of your document, often helping you cut down on excess classes in your markup, and giving you more flexible, maintainable code.

Examples:
\:first-child
\:last-child
\:only-child
\:invalid
\:hover
\:focus
\:checked
\:empty

Preceding directly before an element before is optional but recommended if you want to be more specific.

Question 4

What is a pseudo-element and give some examples?

Answer 4

They act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements. Pseudo-elements start with a double colon ::

Examples:
\::first-line
\::before
\::after
\::selection

Question 5

What is the difference between the descendant combinator and child combinator?

Descendant:
li p { }
Child:
li > p { }

Answer 5

Descendant combinator matches all elements matched by the second selector regardless of the number of “hops” up the DOM.

Child combinator is stricter. Elements matched by the second selector must be the immediate children of the elements matched by the first selector.

Question 6

What are some elements use inline as their outer display type by default?

Answer 6

<a>, <span>, <em> and <strong></strong></em></span></a>

Question 7

How does a box with an outer display type of block behave?

Answer 7

• The box will break onto a new line.
• The box will extend in the inline direction to fill the space available in its container. In most cases this means that the box will become as wide as its container, filling up 100% of the space available.
• The width and height properties are respected.
• Padding, margin and border will cause other elements to be pushed away from the box

Question 8

How does a box with an outer display type of inline behave?

Answer 8

• The box will not break onto a new line.
• The width and height properties will not apply.
• Vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box.
• Horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box.

Question 9

What are some major breakpoints to use for media queries?

Answer 9

/* Extra small devices (phones, up to 480px) */
@media screen and (max-width: 767px) {...}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {...}

/* tablets/desktops and up  */
@media (min-width: 992px) and (max-width: 1199px) {...}

/* large like desktops and up */
@media screen and (min-width: 1200px) {...}

Question 10

What are the different background properties?

Answer 10

background-color
background-image
background-repeat
background-size
background-position

Question 11

What values can background-attachment be?

Answer 11

scroll: is the default value. It scrolls with the main view, but stays fixed inside the local view.
fixed: stays fixed no matter what. It’s kind of like a physical window: moving around the window changes your perspective, but it doesn’t change where things are outside of the window.
local: was invented because the default scroll value acts like a fixed background. It scrolls both with the main view and the local view.

Question 12

Describe background-size options.

Answer 12

There are four different syntaxes you can use with this property:

Keyword syntax:

• cover: tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
• contain: says to always show the whole image, even if that leaves a little space to the sides or bottom.

The default keyword — auto — tells the browser to automatically calculate the size based on the actual size of the image and the aspect ratio.

One-value syntax: If you only provide one value (e.g. background-size: 400px) it counts for the width, and the height is set to auto.

Two-value syntax: If you provide two values, the first sets the background image’s width and the second sets the height.

Multiple background syntax:
You can also combine any of the above methods and apply them to multiple images, simply by adding commas between each syntax

Question 13

Not a question, just take a look at an example of background shorthand.

Answer 13

body {
background:
url(sweettexture.jpg) /* image /
top center / 200px 200px / position / size /
no-repeat / repeat /
fixed / attachment /
padding-box / origin /
content-box / clip /
red; / color */
}