CSS

Question 1

What does CSS stand for?

Answer 1

Cascading Style Sheets.

Question 2

What is the purpose of CSS?

Answer 2

To style and layout HTML elements.

Question 3

What is the difference between class and ID selectors?

Answer 3

ID is unique (#id), class can be reused (.class).

Question 4

What is the difference between inline, internal, and external CSS?

Answer 4

Inline is in the tag, internal is in <style>, external is in a separate .css file.</style>

Question 5

What is specificity in CSS?

Answer 5

The rules that determine which CSS rule is applied.

Question 6

What is the universal selector?

Answer 6

* – it selects all elements.

Question 7

What does the > selector do?

Answer 7

Selects direct child elements.

Question 8

What does the + selector do?

Answer 8

Selects the next sibling element.

Question 9

What does the ~ selector do?

Answer 9

Selects all subsequent siblings.

Question 10

What is an attribute selector?

Answer 10

Selects elements based on attributes, e.g., [type='text'].

Question 11

What are the parts of the CSS box model?

Answer 11

Content, padding, border, and margin.

Question 12

What does box-sizing: border-box do?

Answer 12

Includes padding and border in the element’s total width and height.

Question 13

What is the difference between margin and padding?

Answer 13

Margin is space outside, padding is space inside the border.

Question 14

How do you center a block element?

Answer 14

margin: auto and define width.

Question 15

How do you center an inline element?

Answer 15

Use text-align: center on the parent.

Question 16

What are the values of the position property?

Answer 16

static, relative, absolute, fixed, sticky.

Question 17

What does position: absolute mean?

Answer 17

Element is positioned relative to the nearest positioned ancestor.

Question 18

What does position: fixed mean?

Answer 18

Element stays fixed relative to the viewport.

Question 19

What does position: relative mean?

Answer 19

Element is positioned relative to its normal position.

Question 20

What does position: sticky do?

Answer 20

Element toggles between relative and fixed depending on scroll position.

Question 21

What is Flexbox used for?

Answer 21

To layout elements in a flexible and responsive way.

Question 22

What does justify-content control?

Answer 22

Alignment of items on the main axis.

Question 23

What does align-items control?

Answer 23

Alignment of items on the cross axis.

Question 24

What does flex-grow do?

Answer 24

Defines the ability of a flex item to grow.

Question 25

What does `flex-shrink` do?

Answer 25

Defines the ability to shrink if needed.

Question 26

What is CSS Grid?

Answer 26

A 2D layout system for arranging elements in rows and columns.

Question 27

What does `grid-template-columns` do?

Answer 27

Defines the column structure.

Question 28

What does `grid-gap` or `gap` do?

Answer 28

Defines spacing between grid items.

Question 29

How do you span multiple columns in grid?

Answer 29

Use `grid-column: start / end`.

Question 30

Can Grid and Flexbox be used together?

Answer 30

Yes, you can nest one inside the other.

Question 31

What properties are inherited by default?

Answer 31

Text-related properties like font, color.

Question 32

How can you increase specificity?

Answer 32

Use more specific selectors or add `!important`.

Question 33

What does `!important` do?

Answer 33

Forces a rule to override all others.

Question 34

How to override CSS from a library?

Answer 34

Use more specific selectors or `!important`.

Question 35

What is the order of specificity?

Answer 35

Inline > ID > class > element selector.

Question 36

What is a media query?

Answer 36

Used to apply styles based on screen size or device.

Question 37

How to target mobile devices?

Answer 37

`@media (max-width: 600px) {}`

Question 38

Can you combine media queries?

Answer 38

Yes, using `and`, `or`, `not`.

Question 39

What is the difference between `em` and `rem` in media queries?

Answer 39

`em` is relative to parent; `rem` is relative to root.

Question 40

What is the difference between transition and animation?

Answer 40

Transition is triggered by change; animation runs automatically.

Question 41

What is `@keyframes` used for?

Answer 41

To define the steps of an animation.

Question 42

How do you make a smooth hover effect?

Answer 42

Use `transition` with duration.

Question 43

What does `animation-fill-mode: forwards` do?

Answer 43

Keeps final state after animation ends.

Question 44

What is the difference between px, %, em, and rem?

Answer 44

`px` is fixed; `%` is relative to parent; `em` and `rem` are relative to font sizes.

Question 45

When should you use `vh` and `vw`?

Answer 45

To size elements relative to viewport height/width.

Question 46

What does `calc()` do in CSS?

Answer 46

Performs calculations to set property values.

Question 47

How does stacking context work?

Answer 47

It's a 3D concept that determines element visibility using `z-index`.

Question 48

What is reflow and repaint?

Answer 48

Reflow recalculates layout; repaint redraws pixels.

Question 49

How to make a website responsive?

Answer 49

Use flexible layouts, media queries, and relative units.

Question 50

What is the default position of an element?

Answer 50

`static`.

Question 51

How to hide an element but keep it in the flow?

Answer 51

Use `visibility: hidden`.

Question 52

How to hide it and remove from flow?

Answer 52

Use `display: none`.

Question 53

What does `opacity: 0` do?

Answer 53

Hides element visually but it's still clickable.

Question 54

What is the difference between `none`, `hidden`, and `opacity: 0`?

Answer 54

`none` removes, `hidden` hides visually but keeps space, `opacity` keeps space and interaction.

Question 55

What is a pseudo-element?

Answer 55

`::before`, `::after` – lets you style part of an element.

Question 56

What is a pseudo-class?

Answer 56

`:hover`, `:nth-child`, `:focus` – applies styles based on state.