MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack. MERN Stack Interview Part 8 CSS Questions.
Q71. Does the screen keyword apply to the device’s physical screen or the browser’s viewport?
It’s apply on browser’s viewport
Q72. How would you implement a web design comp that uses non-standard fonts?
Use @font-face and define font-family for different font-weights
Q73. How a browser determines what elements match a CSS selector?
If you apply CSS with this selector p span, browsers firstly find all the <span> elements and traverse up its parent all the way up to the root to find the <p> element. For a particular <span>, as soon as it finds a <p>, it knows that the <span> matches and can stop its matching.
Q74. How can you load css resources conditionally?
@import: allows to load stylesheet by using a path representing the location of the file.
@import “cdn.com/atom-one-light.min.css”;
@media (prefers-color-scheme: dark) { @import “cdn.com/atom-one-dark.min.css”;}
if(window.matchMedia('screen and (min-width: 1280px)')) {
document.write('<link rel="stylesheet" href="css/style.css">");
}Q75. Which property is used to change the face of a font? The font-family property is used to change the face of a font.
The font-family property is used to change the face of a font.
Q76. How is responsive design different from adaptive design?
Responsive design: uses CSS media queries to change styles based on the target device such as display type, width, height etc., and only one of these is necessary for the site to adapt to different screens.
Adaptive design: Adaptive works to detect the screen size and load the appropriate layout for it. Generally adaptive site uses six common screen widths 320px 480px 760px 960px 1200px and 1600px.
Q77. What is At-Rule?
At-rules are CSS statements that instructs CSS how to behave.
Example:
@charset
@import
@namespace
@media
@supports
@keyframes
@font-face
@page
Q78. Tell what each of these tags do?
<em>: The HTML <em> tag represents stress emphasis of its contents.
<abbr>: The HTML Abbreviation element (<abbr>) represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation.
<b>: The <b> tag specifies bold text without extra importance.
<link>: The HTML <link> tag is used for defining a link to an external resource. It is placed in in the <head> section of the HTML document.
<strong>: The <strong> element is used to identify text that is of greater importance than the surrounding text. By default, all browsers render <strong> text in a bold typeface.
<article>: The <article> tag specifies independent, self-contained content.
<i>: The content of the <i> tag is usually displayed in italic.
Q79. What is specificity? How to calculate specificity?
A process of determining which css rule will be applied to an element. It actually determines which rules will take precedence. Inline style usually wins then ID then class value, pseudo-class or attribute selector, universal selector (*) has no specificity. ID selectors have a higher specificity than attribute selectors.
/*wins*/
a#a-02 { background-image: url(n.gif); }
a[id="a-02"] { background-image: url(n.png); }
Contextual selectors are more specific than a single element selector The embedded style sheet is closer to the element to be styled. The last rule defined overrides any previous, conflicting rules.
p { color: red; background: yellow} p { color: green} // wins
A class selector beats any number of element selectors.
introduction { //wins html body div div h2 p {}}Q80. What is DOM reflow?
Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document.
MERN Stack Interview Part 8. MERN Stack Interview MongoDB Express React Node Javascript.
Read Also: MERN Stack Interview Questions & Answer Series Part 7