Scribd
Upload
5 views

CSS Interview Questions

The document provides a comprehensive overview of CSS, covering basic to advanced concepts including types of CSS, positioning, units of measurement, and layout models like Flexbox and Grid. It explains key differences between CSS properties and methods, such as id vs class, pseudo-classes vs pseudo-elements, and visibility vs display. Additionally, it discusses the use of media queries and the behavior of elements in relation to z-index and dimensions.

Uploaded by

Vaishnavi Kharbal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

CSS Interview Questions

The document provides a comprehensive overview of CSS, covering basic to advanced concepts including types of CSS, positioning, units of measurement, and layout models like Flexbox and Grid. It explains key differences between CSS properties and methods, such as id vs class, pseudo-classes vs pseudo-elements, and visibility vs display. Additionally, it discusses the use of media queries and the behavior of elements in relation to z-index and dimensions.

Uploaded by

Vaishnavi Kharbal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Basic CSS Questions

1. What is CSS?

Answer:
CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation of HTML elements. It allows
developers to style web pages using colors, fonts, layouts, and animations.

2. What are the different types of CSS?

Answer:

1. Inline CSS – Applied directly to an element using the style attribute.

html

CopyEdit

<p style="color: blue;">Hello, World!</p>

2. Internal CSS – Defined within a <style> tag inside the <head>.

html

CopyEdit

<style>

p { color: red; }

</style>

3. External CSS – Stored in a separate .css file and linked using <link>.

html

CopyEdit

<link rel="stylesheet" href="styles.css">

3. What is the difference between relative, absolute, fixed, and sticky positioning?

Answer:

Position Behavior

relative Positioned relative to its normal position.

absolute Positioned relative to the nearest positioned ancestor (or <html> if none).

fixed Stays fixed relative to the viewport, even when scrolling.

sticky Switches between relative and fixed based on the scroll position.

Example:

css

CopyEdit
.position-relative { position: relative; top: 10px; left: 20px; }

.position-absolute { position: absolute; top: 0; left: 0; }

.position-fixed { position: fixed; top: 0; width: 100%; }

.position-sticky { position: sticky; top: 10px; }

4. What is the difference between em, rem, px, and % in CSS?

Answer:

 px (Pixels): Fixed size.

 em: Relative to the font-size of the parent element.

 rem: Relative to the root <html> font-size.

 %: Relative to the size of the parent element.

Example:

css

CopyEdit

html { font-size: 16px; }

.parent { font-size: 20px; }

.child { font-size: 2em; } /* 2 * 20px = 40px */

.child-rem { font-size: 2rem; } /* 2 * 16px = 32px */

5. What is the difference between id and class in CSS?

Answer:

 id (#id-name): Unique, can be used only once per page.

 class (.class-name): Can be used multiple times on different elements.

Example:

css

CopyEdit

#unique-id { color: blue; }

.common-class { color: red; }

html

CopyEdit

<p id="unique-id">This is an ID</p>

<p class="common-class">This is a class</p>

<p class="common-class">This is another class</p>


Intermediate CSS Questions

6. What are pseudo-classes and pseudo-elements in CSS?

Answer:

 Pseudo-classes (:) define a special state of an element.

 Pseudo-elements (::) style specific parts of an element.

Examples:

css

CopyEdit

/* Pseudo-class */

a:hover { color: red; } /* When mouse hovers over a link */

/* Pseudo-element */

p::first-letter { font-size: 2em; } /* Makes first letter bigger */

7. What is Flexbox in CSS?

Answer:
Flexbox is a layout model for arranging elements efficiently.

Example:

css

CopyEdit

.container {

display: flex;

justify-content: space-between; /* Aligns items with equal spacing */

align-items: center; /* Aligns items vertically */

8. What is the difference between nth-child() and nth-of-type()?

Answer:

 :nth-child(n) selects the nth child regardless of its type.

 :nth-of-type(n) selects the nth child of a specific type.

Example:

css
CopyEdit

/* Selects the second child (any element) */

p:nth-child(2) { color: red; }

/* Selects the second `<p>` element */

p:nth-of-type(2) { color: blue; }

9. What is the difference between max-width and min-width?

Answer:

 max-width: Limits the maximum width of an element.

 min-width: Ensures the minimum width of an element.

Example:

css

CopyEdit

.container {

max-width: 800px;

min-width: 400px;

width: 100%;

10. What is a Media Query in CSS?

Answer:
Media queries allow CSS to adapt based on screen size.

Example:

css

CopyEdit

@media (max-width: 768px) {

body { background-color: lightgray; }

This applies styles only when the viewport is 768px or smaller.

Advanced CSS Questions

11. What is Grid Layout in CSS?


Answer:
CSS Grid is a two-dimensional layout system.

Example:

css

CopyEdit

.container {

display: grid;

grid-template-columns: 1fr 2fr 1fr;

gap: 10px;

12. What is the difference between visibility: hidden; and display: none;?

Answer:

 display: none; – Removes the element completely from the layout.

 visibility: hidden; – Hides the element but it still takes up space.

Example:

css

CopyEdit

.hidden { visibility: hidden; }

.none { display: none; }

13. What is the difference between opacity: 0; and visibility: hidden;?

Answer:

 opacity: 0; – The element is invisible but still takes up space and is clickable.

 visibility: hidden; – The element is hidden but takes up space.

Example:

css

CopyEdit

.hidden-opacity { opacity: 0; }

.hidden-visibility { visibility: hidden; }

14. How does z-index work in CSS?


Answer:
z-index controls the stacking order of elements. Higher values appear above lower values.

Example:

css

CopyEdit

.box1 { position: absolute; z-index: 1; }

.box2 { position: absolute; z-index: 2; } /* Box2 appears above Box1 */

15. What is the difference between grid and flexbox?

Answer:

Feature Grid Flexbox

Layout 2D (rows + columns) 1D (row or column)

Alignment Precise control More dynamic

Use Flexbox for aligning elements, and Grid for overall page layout.

You might also like