Which HTML tag is used to define an internally embedded style sheet?
<style>
What is the difference between classes and ID's in CSS?
Use IDs for individual elements.
Use Classes for groups of elements.
IDs have higher priority as selectors.
What does * { box-sizing: border-box; } do? What are its advantages?
If you set a width, and add paddings and borders, the total width won’t change. It’s the innerwidth that’ll adapt.
You can play with the paddings and border values without worrying about expanding your box.
Convenient for column layouts. And you can mix percentage and pixel values, so you don’t have to rely on a child element for the padding.
What's the difference between a relative, fixed, absolute and statically positioned element?
position:static: it is the default value. The element stays in the flow.
position:relative: also stays in the flow, but you can use left/right/top/bottom to offset the element, without the other elements being affected by it. It also allows you to use the z-index. Relatively positioned elements act as a point of reference for absolute-positioned child elements.
position:absolute: it takes the element out of the flow. So the other elements act like it’s not there. That’s why absolute elements appear on top.
position:fixed: Fixed positioning is like absolute, as it takes the element out of the flow but the reference is the body, or the viewport. It's usually used for headers and overlays, because fixed elements don’t scroll.
What's the difference between display:inline and display:inline-block?
display:inline elements can’t have padding-top, padding-bottom, margin-top, margin-bottom.
display:inline-block elements can have padding-top, padding-bottom, margin-top, margin-bottom.
Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
The box model determines how much space an element will take on the screen.
It includes the height/width (applied or generated), the padding, and the borders.
The paddings and borders are usually set. The height/width is often flexible, and is determined by the inner text or child elements.
Describe BFC(Block Formatting Context) and how it works.
A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.
A block formatting context is created by one of the following:
- the root element or something that contains it
- floats (elements where float is not none)
- absolutely positioned elements (elements with
position: absoluteorposition: fixed) - inline-blocks (elements with
display: inline-block) - table cells (elements with
display: table-cell, which is the default for HTML table cells) - table captions (elements with
display: table-caption, which is the default for HTML table captions) - elements where overflow has a value other than visible
- flex boxes (elements with
display: flexordisplay: inline-flex)
What's the difference between em and rem?
em is relative to the font-size of its direct or nearest parent.
rem is only relative to the html (root) font-size.
What are Pseudo-classes are used to represent?
Pseudo-classes represent a special state of the selected element.Example :hover when the mouse hovers over an element.
What's the use of commas in media queries?
Commas act like a logical OR (||) , meaning that if any of the media queries is true the styles will be applied.
What does this media query apply to?
@media (orientation: portrait), handheld and (min-width: 800px) { }
To all media with either an orientation of portrait or handheld devices with a minimum width of 800px
Do @keyframes rules cascade?
@keyframes rules don't cascade
What is the default value of the position property?
static
What value of the white-space property will set the value of white-space-collapse to preserve and value of the text-wrap to none?
pre
What is the specificity calculation for an ID in CSS?
100
What is the valid syntax for using the import at-rule?
@import url("main.css") screen;
In h1 { color:blue; }, what is the part within the curly braces called?
Declaration
Write a selector that selects a <p> element that immediately follows an <h2> element
<h2> + p
Write a selector that will style only links that end with an .html file extension.
a[href$=".html"] { color:purple; }
What is the correct order when styling all four link states?
:link, :visited, :hover, :active
What effect does setting position: static have on an element with no other style rules applied?
It has no effect on the element
Describe Floats and how they work.
Float will “push” an element to the side you’ve chosen, either left or right.
That’s why you don’t have a float: center.
It’s simple to understand and see how it affects the targeted element.
But the issues come from the surroundings:
a parent with only floated childs will have a height of zero, as if the children weren’t there.
The text that follows a floated element will be wrapped around it.
If you have float: left, the text will use the remaining space on the right, and then the one remaining below.
A float will take an element out of the flow, a bit like position absolute or position fixed but not exactly.
The float is directly related to the clear property, which reintroduces the floated element in the flow, by placing a cleared element after the floated one.
Describe z-index and how stacking context is formed.
z-index is for visual depth. An element needs to be positioned (relative, absolute, fixed) for the z-index to work.
The natural depth depends upon a couple of things:
if an element is nested within another one, then it shows up on top of its parent.
if a sibling comes after another sibling, it’s on top as well.
position:absolute or position:fixed will upset this. They’ll show up on top regardless of their tree position.
When elements overlap you can use the z-index property to make sure they will “stack” upon each other.
The z-index value is relative. So an element with z-index:2 will stack on top of element with z-index:1.