CSS is a language with a bunch of topics. There is a developer who knows all unlikely. Honestly, we don't need to know it to do our job. But there is a piece of without that we can't do. It is the goal of my questions. CSS If you can't answer some questions, don't worry. It means you have a chance to level up your knowledge 😉 What will the specificity be of the following selector? :is(#container, .content, main) { color: red; } The pseudo-class function helps browsers select the highest from a given selectors list. In our example, a higher selector is . The specificity of this selector is . It will be used for the whole at-rule. :is() #container 0, 1, 0, 0 The computed value of the property is . True or false? color red <body> <span id="container" class="container">content</span> </body> .container { color: red; } :where(#container) { color: blue; } True. The pseudo-class function nulles specificity. So, the selector has more specificity. It's why the computed value of the property is . :where() .label color red What is the computed value of the property? background-color <body> <div id="container" class="container">content</div> </body> @layer basic, components; .container { width: 1rem; height: 1rem; } @layer components { .container { background-color: pink; } } @layer basic { #container { background-color: blue; } } Layers are defined in order of priority. The last is more high. So the answer is . pink What is the mistake in the following code? .container { display: inline; width: 1rem; height: 1rem; } If the element has the and properties don't have an effect. So we shouldn't define them. display: inline width height What is the algorithm for calculating the computed value of the property of the element? width .child <body> <!-- case #1 --> <div class="parent"> <div class="child">content</div> <div class="child">content</div> </div> <!-- case #2 --> <div class="parent parent-flex"> <div class="child">content</div> <div class="child">content</div> </div> </body> .parent { display: block; } .parent-flex { display: flex; } In the case #1, the elements are block-level elements. Their property is equal to the property of the parent element. .child width width In the case #2, the elements are flex items. Their property is calculated depending on content. .child width What is the computed value of the property of the pseudo-elements? display .parent { display: inline-grid; } .parent::before { content: ""; display: inline; } .parent::after { content: ""; display: flex; } and . The or values transform values of the property of the child elements to block alternatives. block flex grid inline-grid inline-* display .parent { display: inline-grid; } .parent::before { content: ""; display: inline; /* display: block will be here */ } .parent::after { content: ""; display: flex; /* display: flex will be here */ } What is the difference between the default position of the child elements in the case of the parent element with and in the case with ? display: flex display: grid The child elements inside the parent element with display one by one in line. In contrast, the elements will be displayed one below the other in the case with . display: flex display: grid What is the computed value of the and properties of the elements? width height .child <body> <div class="parent"> <div class="child">content</div> <div class="child">content</div> </div> </body> .parent { display: grid; width: 100rem; height: 20rem; } The property of the element is equal to the property of the parent element. So, the computed value of the property is , i.e . width .child width width 100rem 100 * 16 = 1600px The property of the child element inside of the parent with fills all space. If the parent has a few items, space will be shared between them equally. So, the computed value of the property of the child element is , i.e . height display: grid height 20rem / 2 = 10rem 10 * 16 = 160px I use like a browser's default font size. 16px The margins of the element end up outside of the parent element in all cases. True or false? .child <body> <div class="parent"> <div class="child">content</div> </div> </body> /* case #1 */ .parent { display: inline-flex; } .child { display: block; margin-block: 1rem; } /* case #2 */ .parent { display: grid; } .child { display: block; margin-block: 1rem; } False. Margins of the child elements don't end up outside the parent element with , , and . display: flex display: inline-flex display: grid display: inline-grid Does margin collapsing work inside elements with and ? display: inline-flex display: inline-grid No, it doesn't work. Margins will be summed up inside of the element with , , and . display: flex display: inline-flex display: grid display: inline-grid The position of the pseudo-element is centered horizontally and vertically. True or false? .container { display: grid; height: 100dvh; } .container::before { content: ""; width: 1rem; height: 1rem; margin: auto; } True. Browsers will share all space between the childs and the parent's borders evenly. What is the computed value of the property? min-width <body> <div class="parent"> <div class="child">content</div> </div> </body> body { display: block; } .parent { display: grid; /* min-width: ? */ } .child { /* min-width: ? */ } The initial value is . So the computed value of the element is . min-width auto min-width .child auto But if the , , , or value is defined for the element the computed value of its child elements is . block inline inline-block table table-* min-width 0 body { display: block; } .parent { display: grid; /* min-width: 0 */ } .child { /* min-width: auto */ } How can we use the property to replace the property? gap margin .parent { display: inline-flex; } .parent::before, .parent::after { content: ""; width: 1rem; height: 1rem; background-color: #222; } .parent::before { margin-right: 1rem; } .parent::after { margin-left: 1rem; } We should define the property for the element. gap .parent .parent { display: inline-flex; gap: 1rem; } .parent::before, .parent::after { content: ""; width: 1rem; height: 1rem; background-color: #22; } The computed value of the property is . True or false? display block .container { position: absolute; display: inline; } True. If the or value is defined, browsers will transform all values of the property to block alternatives. absolute fixed inline-* display .container { position: absolute; display: inline; /* display: block will be here */ } Why is the computed value of the property of the element equal to ? height .parent 0 <body> <div class="parent"> <div class="child">content</div> </div> </body> .child { position: fixed; } The element with or is removed from the normal document flow. So, the parent elements don't see it. It's why the computed value of the property is . position: absolute position: fixed height 0 What does the property do in the following example? isolation <body> <div class="parent"> <div class="child"> <span>content</span> </div> </div> </body> .parent { background-color: purple; } .child { position: relative; isolation: isolate; } .child::after { content: ""; background-color: green; position: absolute; inset: 0; z-index: -1; } We should remember which stacking context is used by browsers when using the property. z-index By default, a root-stacking context is the element. It's why the pseudo-element is behind the element without . html .parent isolation: isolate We create a new stacking context with the property for the element. So, the pseudo-element displays behind the text but in front of the element. isolation .child .parent What is the position of the pseudo-element? .container { display: grid; place-items: center; position: relative; height: 100dvh; } .container::before { content: ""; width: 1rem; height: 1rem; position: absolute; bottom: 0; } First, the pseudo-elements are displayed in the center because is applied. place-items: center It shifts by Y axis to the bottom parent border after , are applied because the , , and properties are more priority than the property. position: absolute bottom: 0 top right bottom left place-items Might the computed value of the property be more than the computed value of the property? flex-basis max-width The property has priority over the property, but its value must also be in the range of values of the and properties. So the answer is no, it can't. flex-basis width min-width max-width What is the computed value of the property? padding :root { --padding-vertical-start: 1rem; --padding-horizontal-end: 2rem; --padding-vertical-end: 3rem; } .container { padding: var(--padding-vertical-start) var(--padding-horizontal-end) var(--padding-vertical-end) var(--padding-horizontal-start); } We should define all parts of the shorthand when using CSS Custom Properties. If we don't make it, browsers can't apply values. It happens in our example. The shorthand requires four values. But the developer-defined only 3. Browsers can't set paddings. So, the computed value is . padding 0 Why will the computed value of the property be for the element? background-color green p body { background-color: green; } p { --background-color: inherit; background-color: var(--background-color, inherit); } A CSS custom property inherits a value from the same custom property defined for parent elements. If a custom property is omitted, browsers will use fallback. In our example, the property is omitted from parent elements. So browsers use the fallback, i.e. the keyword that inherits the value from the property of the element. --background-color inherit green background-color body Make the property safe with vestibular motion disorders. scroll-behavior html { scroll-behavior: smooth; } We should wrap the code using the media feature. It'll help to display smooth scrolling only if users allow it in OS settings. prefers-reduced-motion @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } What is the computed value of the property? font-size html { font-size: calc(1rem + 1px); } Default browser font size is in most cases. If it isn't changed, the computed value of the property will be . 16px font-size 17px
