CSS Concepts Flashcards Preview

Full Stack Interview Questions > CSS Concepts > Flashcards

Flashcards in CSS Concepts Deck (8):
1

What does "content" mean in &::before { content: ' ' } declaration

Content refers to the content created dynamically on the element that wraps the &::before and &::after selector. In this case, an empty content element is dynamically created in the browser. This is useful for borders in front of DOM elements.

2

What css property should you use to move elements to the right, or left

float e.g. .menu-btm {
float: right;
}

3

How would you write a media query adjust the DOM if the window is less than a certain size?

@media (min-width:600px) {

}

4

What css property should you use to set font?

font-family: 'Montserrat';

5

How do you keep elements from aligning to the edge of a window if you use float: left;?

.btn {
float: left;
padding: 2em;
}

6

What is the minimum list of elements for a simple overlay window that obscures the rest of the DOM beneath it?

.overlay {
position: absolute;
background: black;
padding: 2em;
width: calc(100%-4em);
height: calc(100%-4em);
}

7

The following will have a scrollbar, what should the width be to avoid a situation where the scrollbar is 104%?
.overlay {
position: absolute;
background: black;
padding: 2em;
width: 100%
height: 100%
}

.overlay {
...
padding: 2em;
width: calc(100%-4em);
height: calc(100%-4em);
}

Deduct the padding from the element using the calc method.

8

How do you access a nav element in javascript? What HTML attribute is used?