CSS

Question 1

pseudo classes

Answer 1

:hover
:visited
:focus
:nth-child(even)
:invalid:not(:focus)

Question 2

pseudo elements

Answer 2

a::first-letter
p::before
p::after

Question 3

specificity

Answer 3

Inline Styles: 1000
IDs: 100
Classes: 10
Pseudo-Classes: 10
Attributes: 10
Elements: 1
Pseudo-Elements: 1

whichever has highest total will apply

Question 4

css units

Answer 4

• px
• em- relative to font size
• rem - relative to root element font size

Question 5

block vs inline, inline-block

Answer 5

block elements start on new line and take entire width of parent

Question 6

Box model

Answer 6

vertical margins collapse

margin, border, padding, content

Question 7

Box sizing

Answer 7

width by default considers only the content not the padding and border

default - content-box
border-box- takes care of padding and border

Question 8

Position

Answer 8

default - static
fixed- fixed based on browser, pass left, right
relative - relative position, pass bottom, left
sticky - relative then fixed when scrolled
absolute - absolute to page, if parent is relative then absolute will be relative to that

float
left, right
clear: both
clear: right
clear: left

Question 9

flex

Answer 9

A layout model, also known as the Flexible Box Layout Module, particularly useful for building responsive designs with row or column layouts.

display: flex
flex-direction - row, column, row-reverse, column-reverse
justify-content - flex-start, flex-end, center, space-around, space-between, space-evenly
align-items - Determines how elements are positioned along the cross-axis - flex-start, flex-end, center, baseline, stretch
flex-wrap - wrap, nowrap, wrap-reverse

align-content: Determines how lines are positioned along the cross-axis when flex items are wrapping on multiple lines. Possible values are flex-start, flex-end, center, space-around, space-between, and stretch.

flex-flow: A shorthand for flex-direction and flex-wrap.
gap

Flex items

flex-grow
align-self
flex-basis
flex: <flex-grow>, <flex-shrink>, <flex-basis>
order</flex-basis></flex-shrink></flex-grow>

https://www.w3schools.com/css/css3_flexbox.asp

Question 10

Media queries

Answer 10

@media (max-width: 600px) {
  p {
    color: red;
  }
}

Question 11

transition

Answer 11

transition: width 1s linear 2s;
to add to multiple properties use comma separate property and other values or use all

Question 12

css animation

Answer 12

@keyframes animation-name {
  from {
    property: value;
    property: value;
  }

  50% {
    property: value;
    property: value;
  }

  to {
    property: value;
    property: value;
  }
}

Usage
animation: move 3s ease infinite alternate 2s;

animation-name
animation-duration
animation-fill-mode: forwards, backwards, both
animation-direction: normal, reverse, alternate, alternate-reverse
animation-iteration-count: number, infinite
animation-timing-function

Question 13

transform

Answer 13

transform: rotate(180deg), translate(20px)

Question 14

css grid

Answer 14

display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: 80px 200px;
justify-content: space-evenly;
align-content: center;

grid-template-areas
grid-area

use grid-template-areas with grid-template-columns when required. use . if nothing is there in area

For grid items

place the item from 1 to 5 column
grid-column: 1 / 5; 

start from 1 and span 3 columns
grid-column: 1 / span 3;

grid-area: footer;

template areas tell how much the spans each item should take
grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';

Question 15

CSS tooltip

Answer 15

<section>  
<div class="tooltip">
    Hover over me sf asdf safds
    <span class="tooltiptext">Tooltip text</span>
  </div>
</section>

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltiptext {
  display: block;
  background: black;
  padding: 5px 10px;
  border-radius: 5px;
  color: white;
  position: absolute;
  bottom: 125%;
  text-align: center;
  transform: translateX(50%);
}

.tooltip:hover .tooltiptext{
  display: block;  
}

.tooltip .tooltiptext::after{
 content: '';
  position: absolute;
  border: 6px solid black;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-color: black transparent transparent transparent
}

Question 16

Css Polyfill

Answer 16

if (!supportsCSSVariables()) {
  document.addEventListener("DOMContentLoaded", function() {
    const stylesheets = Array.from(document.styleSheets);
    stylesheets.forEach(sheet => {
      if (sheet.href) return; // Skip external stylesheets for simplicity
      Array.from(sheet.cssRules).forEach(rule => {
        if (rule.type !== 1) return; // Skip non-style rules
        const style = rule.style;
        for (let i = 0; i < style.length; i++) {
          const property = style[i];
          if (property.startsWith('--')) {
            const value = style.getPropertyValue(property);
            replaceCSSVariables(sheet, property, value);
          }
        }
      });
    });
  });

  function replaceCSSVariables(sheet, variable, value) {
    Array.from(sheet.cssRules).forEach(rule => {
      if (rule.type !== 1) return; // Skip non-style rules
      const style = rule.style;
      for (let i = 0; i < style.length; i++) {
        const property = style[i];
        const propertyValue = style.getPropertyValue(property);
        if (propertyValue.includes(`var(${variable})`)) {
          style.setProperty(property, propertyValue.replace(`var(${variable})`, value));
        }
      }
    });
  }
}