Advanced CSS

Question 1

What does the CSS position property determine?

Answer 1

The CSS position property determines how an element is positioned within the document. The top, right, bottom, and left properties define the specific placement.

Question 2

What are the five position types in CSS?

Answer 2

Static: Default; positioned according to normal document flow.
Relative: Positioned relative to its normal position; offsets can be applied.
Absolute: Positioned relative to the nearest positioned ancestor; removed from normal flow.
Fixed: Positioned relative to the viewport; does not move when scrolling.
Sticky: Toggles between relative and fixed based on scroll position.

Question 3

What are media queries used for in CSS?

Answer 3

Media queries enable responsive design by applying styles based on device characteristics, like width or resolution.

Question 4

How can media queries be used in CSS?

Answer 4

Apply styles conditionally with @media and @import.
Target specific media with the media= attribute.
Detect media states using JavaScript (e.g., matchMedia()).

Question 5

What are common media query breakpoints and their associated devices?

Answer 5

320px–480px: Mobile devices
481px–768px: Tablets
769px–1024px: Small screens, laptops
1025px–1200px: Desktops
1201px+: TVs and extra-large screens

Question 6

What is CSS Grid Layout?

Answer 6

CSS Grid Layout is a two-dimensional layout system for arranging items in rows and columns.

Question 7

What are the features of CSS Grid?

Answer 7

Grid Template (Columns, Rows)
Auto Rows and Columns
Gap and Lines
Justify Items

Question 8

What is CSS Flexbox?

Answer 8

CSS Flexbox is a one-dimensional layout system for efficiently aligning items in containers.

Question 9

What are the key features of Flexbox?

Answer 9

Flexibility in space distribution
Arrangement and alignment of items
Control over order and spacing

Question 10

What are the main Flexbox properties?

Answer 10

Direction: Defines the main-axis (row or column layout).
Wrap: Controls whether items wrap or stay on one line.

Question 11

What does CSS animation do?

Answer 11

CSS animations allow dynamic transitions between states using the @keyframes rule.

Question 12

Name a few examples of CSS animations.

Answer 12

2D Transform – Translate
2D Transform – Rotate
3D Transform – TranslateX

Question 13

What is the @keyframes rule used for?

Answer 13

The @keyframes rule defines animation states, allowing transitions like changing a div’s background color gradually from red to yellow in 4 seconds.

Question 14

What are CSS gradients used for?

Answer 14

CSS gradients provide smooth transitions between colors.

Question 15

What are the types of CSS gradients?

Answer 15

Linear: Moves in a specific direction (e.g., top, left, diagonal).
Radial: Expands from a center point.
Conic: Rotates around a center point.

Question 16

Give an example of a linear gradient in CSS.

Answer 16

A linear gradient transitioning from red to green starting at the top.