What are the main differences between external, internal, and inline CSS?
External CSS: CSS is integrated by importing a css file.
Internal CSS: CSS is integrated by style tag into HTML document.
Inline CSS: CSS is integrated by style attribute into a HTML tag into HTML document.
What is the syntax for class and ID selectors?
Class selector:
.className {
// css attributes
}
Id selector:
#idName {
// css attributes
}
How would you apply a single rule to two different selectors?
selector1selector2 {
// css attributes
}
Given an element that has an id of title and a class of primary, how would you use both attributes for a single rule?
.primary #title {
// css attributes
}
What does the descendant combinator do?
Combinators allow us to combine multiple selectors differently than either grouping or chaining them, as they show a relationship between the selectors
Between a rule that uses one class selector and a rule that uses three type selectors, which rule has the higher specificity?
The last one.
From inside to outside, what is the order of box-model properties?
Content, Padding, Border and Margin box
What does the box-sizing CSS property do?
The box-sizing CSS property sets how the total width and height of an element is calculated.
What is the difference between the standard and alternative box model?
If you are using the standard box model, the size of the border is added to the width and height of the content box. If you are using the alternative box model then the size of the border makes the content box smaller as it takes up some of that available width and height of the element box.
Would you use margin or padding to create more space between 2 elements?
Margin.
Would you use margin or padding to create more space between the contents of an element and its border?
Padding.
Would you use margin or padding if you wanted two elements to overlap each other?
Margin.
What is the difference between a block element and an inline element?
Block elements will break onto a new line. The width and height properties are respected. Padding, margin and border will cause other elements to be pushed away from the box. The box will extend in the inline direction to fill the space available in its container. In most cases, the box will become as wide as its container, filling up 100% of the space available.
Inline element 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..
What is the difference between an inline element and an inline-block element?
Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides.
Is an h1 block or inline?
Block element.
Is button block or inline?
Is div block or inline?
Block element.
Is span block or inline?
Inline element.
What’s the difference between a flex container and a flex item?
The parent element is called the flex container. The element inside the flex container are called flex items.
How do you create a flex item?
By assigning display:flex attribute to the parent element.
What are the 3 values defined in the shorthand flex property?
Flex grow, Flex shrink and Flex basis.
How do you make flex items arrange themselves vertically instead of horizontally?
.container {
display: flex;
flex-direction: column;
}
What is the difference between justify-content and align-items?
Justify content and align-items work lining up items. The first one align across the main axis and the second one works along the cross axis.
How do you use flexbox to completely center a div inside a flex container?
.parent {
display: flex;
}
.son {
align-items: center;
justify-content: center;
}
What’s the difference between justify-content: space-between and justify-content: space-around?
Space-between consider space between elements. Space-around also consider space between elements and container too.