Unlocking css: Some css interview questions

1. What is CSS selector

We use CSS selector to get a DOM element, so that we can apply some CSS over them or we can add some action on them.

e.g. we use # for id, dot for class, tag-name for tag etc.

2. What are CSS selector priorities

basically more specific element will have more priority then lesser one which is also called as specificity rule. e.g. ID is more specific then class or first-of-type is more specific then nth-of-type so previous will have more priority to get css applied then later one.

3. What is media-queries.

media-queries helps us to apply css for specific type of screen/device/resolution. using this we can create responsive design as well so our application will behave differently on different size of screen. e.g. @media only screen and (max-width: 600px and min-width: 320px)

4. What are grid structure in Tweeter Bootstrap

Bootstrap's grid system divides whole screen width in 12 columns. we can group the columns together to create wider columns for different screen sizes

e.g. xs (for phones - screens less than 768px wide), sm (for tablets - screens equal to or greater than 768px wide), md (for small laptops - screens equal to or greater than 992px wide), lg (larger screen)

5. What is BOX module

box-module says about in our content box first margin do comes, then border, then padding, then content

6. What is flex layout

Flex layout is recently added in CSS3 and most of the time it makes our life very easy while creating complex layout which was previously could only be done via javascript, display table or calc.

7. What is difference between position absolute, relative, static, fixed, sticky

• static: it takes place where the element should be present. it is default position.
• absolute: it takes place from adjacent non-static parent.
• relative: it takes place from position it has to be default.
• fixed: it takes place from view-port(visible screen)

8. what is difference between dispaly inline, inline-block, block

• block: it is multiline element
• inline: it is single line element and it honers line-hight etc.
• inline-block: it is single line element and it doesn't honers line-hight.

9. what does border-box do?

if box-sizing is set to border-box, width of item will be calculated by including border, padding and content.

10. difference between "px" , "em" , "rem", "%", "vh", "vw"

These are units of measurement in CSS, and each has its own characteristics and use cases. Here's a brief explanation of each:

• Pixels (px):

  • Definition: The pixel is the smallest unit of measurement on a screen.
  • Use Case: Often used for fixed-size elements where precise control over the size is needed.

• Ems (em):

  • Definition: The em is a relative unit that is based on the computed value of the font-size of the parent element.
  • Use Case: Useful for creating scalable layouts. When used for font sizes, 1em is equivalent to the current font size of the element.

• Root Ems (rem):

  • Definition: Similar to em, but the rem unit is based on the root (html) element's font size.
  • Use Case: Provides a consistent reference point across the entire document, making it useful for maintaining a consistent scaling factor.

• Percentage (%):

  • Definition: A relative unit, the percentage is often used to specify a size relative to the size of the parent element.
  • Use Case: Commonly used for widths and heights, especially in responsive design.

• Viewport Height (vh):

  • Definition: The vh unit represents a percentage of the viewport's height.
  • Use Case: Useful for sizing elements based on a percentage of the height of the viewport. For example, 50vh would be 50% of the viewport's height.

• Viewport Width (vw):

  • Definition: Similar to vh, the vw unit represents a percentage of the viewport's width.
  • Use Case: Useful for sizing elements based on a percentage of the width of the viewport. For example, 50vw would be 50% of the viewport's width.

These units provide flexibility in designing responsive and scalable layouts. Choosing the right unit depends on the specific requirements of your design and how you want elements to respond to changes in font sizes or viewport dimensions. Using relative units like em, rem, %, vh, and vw can help create designs that adapt well to different screen sizes and user preferences.

11. what is retina display, and pixel density

A Retina display is a term coined by Apple to describe a high-resolution display with pixel density so high that the individual pixels are difficult to discern with the naked eye when viewed at a normal viewing distance. The idea behind a Retina display is to make text and images appear smoother and more detailed, providing a better visual experience.

Pixel density, also known as dots per inch (DPI) or pixels per inch (PPI), is a measure of the number of pixels within a specific area on a display. It indicates how tightly packed the pixels are, influencing the level of detail and clarity of images and text on the screen. The higher the pixel density, the finer and crisper the displayed content.

Here's a brief overview of these concepts:

12. Retina Display:

• Definition: Retina display is a marketing term used by Apple for screens with a high pixel density, typically above 300 PPI. The term suggests that the human eye cannot discern individual pixels at a normal viewing distance.
• Features:
  • High resolution: Retina displays have a high number of pixels packed into a small physical space.
  • Smooth and detailed visuals: The high pixel density contributes to smooth, sharp, and detailed rendering of text and images.

13. Pixel Density (PPI/DPI):

• Definition: Pixel density refers to the number of pixels per inch on a display.
• Calculation: It is calculated by dividing the diagonal resolution of the screen (in pixels) by the diagonal size of the screen (in inches).
• Importance: Higher pixel density results in sharper and more detailed images, while lower pixel density may lead to visible pixels and a less crisp display.
• Common Values:
  • Low pixel density: Below 150 PPI
  • Medium pixel density: 150–300 PPI
  • High pixel density (Retina): Above 300 PPI

In practical terms, a Retina display is characterized by its high pixel density, ensuring that images and text appear incredibly sharp and clear. The concept has been adopted by other manufacturers, and similar high-density displays are now commonly found in various devices, including smartphones, tablets, and high-end laptops. The idea is to enhance the visual experience by minimizing the perception of individual pixels.

14. What is user agent CSS, How we senitize it.

15. What is web Accessibility. How we optimise page for deaf, blind, Color Blind people.

16. Below is dom Structure

<div class="a">
    <div class="b">
        Hi
    </div>
</div>

.a {
  border: 1px solid red;
  height: 100px;
  width: 100px;
}

.b {
  border: 1px solid blue;
  height: 50px;
  width: 50px;
}

Now Centrally allign class a inside body, b inside a and textNode Hi. Centralize meaning vertically and Horizontally. How many ways you can do it.

17. answer

I know 4 ways:

18. By using position absolute

.a {
    border: 1px solid red;
    height: 100px;
    width: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.b {
    border: 1px solid blue;
    height: 50px;
    width: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    display: table-column-group;
    padding-top: calc(25% - 8px);
    box-sizing: border-box;
    font-size: 16px;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}
.a {
    border: 1px solid red;
    height: 100px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.b {
    border: 1px solid blue;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

19. Using %age and var (complex)

.a {
  width: 100%;
}
.a>* {
    display: inline-block;
    border: 1px solid red;
    height: 100px;
    float: left;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
  --total-width-sum: (1 + 2 + 3 + 1);
}

.a>*:first-of-type {
  width: calc((100% / var(--total-width-sum)) * 1)
}

.a>*:nth-of-type(2) {
  width: calc((100% / var(--total-width-sum)) * 2)
}

.a>*:nth-of-type(3) {
  width: calc((100% / var(--total-width-sum)) * 3)
}

.a>*:last-of-type {
  width: calc((100% / var(--total-width-sum)) * 1)
}

20. Using flex

.a {
  width: 100%;
  display: flex;
}
.a>* {
    border: 1px solid red;
    height: 100px;
}
.a>*:first-of-type {
  flex: 1;
}
.a>*:nth-of-type(2) {
  flex: 2;
}
.a>*:nth-of-type(3) {
 flex: 3;
}
.a>*:last-of-type {
  flex: 1;
}