Web Dev

CSS Complete Interview Guide 🎨

Ulugbek Eshnazarov 2026-07-095 daqiqaintermediatecss

Mundarija›

1. CSS nima?#

Savol#

CSS nima?

Javob#

CSS (Cascading Style Sheets) — HTML elementlariga dizayn, rang, o'lcham, joylashuv va animatsiyalar berish uchun ishlatiladigan stil tili.

HTML struktura yaratadi, CSS esa uning ko'rinishini boshqaradi.

2. CSS nimaning qisqartmasi?#

Savol#

CSS nimaning qisqartmasi?

Javob#

Cascading Style Sheets

Cascading → Ustuvorlik (Priority)
Style → Dizayn
Sheets → Stil fayllari

3. CSS qanday ishlaydi?#

Savol#

Browser CSS'ni qanday ishlaydi?

Javob#

Jarayon:

HTML yuklanadi
CSS yuklanadi
CSS Parser ishlaydi
CSSOM yaratiladi
DOM bilan birlashtiriladi
Render Tree hosil bo'ladi
Layout (Reflow)
Paint
Composite

4. CSS yozish usullari#

Savol#

CSS nechta usulda yoziladi?

Javob#

Inline CSS#

html

<h1 style="color:red;">Hello</h1>

Internal CSS#

html

<style>
h1{
color:red;
}
</style>

External CSS (Tavsiya etiladi)#

html

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

5. Selector nima?#

Savol#

Selector nima?

Javob#

Selector qaysi elementga style berilishini belgilaydi.

Misol

css

h1{
color:red;
}

Bu yerda h1 selector hisoblanadi.

6. Selector turlari#

Savol#

Asosiy selectorlar qaysilar?

Javob#

css

* {}

h1 {}

.class {}

#id {}

div p {}

div > p {}

div + p {}

div ~ p {}

input[type="text"] {}

7. Universal Selector#

Savol#

Universal selector nima?

Javob#

css

*{
margin:0;
padding:0;
box-sizing:border-box;
}

Barcha elementlarga style beradi.

8. Class va ID selector#

Savol#

Class va ID selector farqi?

Javob#

Class

css

.card{}

Bir nechta element uchun.

css

#header{}

Faqat bitta element uchun.

9. Specificity nima?#

Savol#

CSS Specificity nima?

Javob#

Qaysi style ustun kelishini aniqlovchi algoritm.

Priority

Inline Style

↓

ID

↓

Class

↓

Element

↓

Universal

10. !important nima?#

Savol#

!important nima?

Javob#

CSS priorityni majburan oshiradi.

css

color:red !important;

Faqat zarurat bo'lsa ishlatish tavsiya etiladi.

11. Box Model nima?#

Savol#

CSS Box Model nima?

Javob#

Har bir element:

Content

↓

Padding

↓

Border

↓

Margin

dan iborat.

12. Margin va Padding farqi#

Savol#

Margin va Padding farqi?

Javob#

Margin

→ Element tashqarisidagi bo'sh joy.

Padding

→ Element ichidagi bo'sh joy.

13. box-sizing nima?#

Savol#

box-sizing nima?

Javob#

Default

css

box-sizing:content-box;

Professional

css

box-sizing:border-box;

Border-box layoutni boshqarishni osonlashtiradi.

14. Display property#

Savol#

display property nima?

Javob#

Asosiy qiymatlar

css

block

inline

inline-block

flex

grid

none

contents

15. display:none nima qiladi?#

Savol#

display:none nima qiladi?

Javob#

Element DOMda qoladi.

Ammo sahifada ko'rinmaydi va joy ham egallamaydi.

16. visibility:hidden farqi#

Savol#

display:none va visibility:hidden farqi?

Javob#

display:none

✔ joy egallamaydi

visibility:hidden

✔ joy egallaydi

17. Position property#

Savol#

Position turlari?

Javob#

css

static

relative

absolute

fixed

sticky

18. Relative nima?#

Savol#

position:relative nima?

Javob#

Element asl joyini saqlaydi.

Lekin

css

top

left

right

bottom

orqali siljitiladi.

19. Absolute nima?#

Savol#

position:absolute qanday ishlaydi?

Javob#

Eng yaqin positioned parentga nisbatan joylashadi.

Agar positioned parent bo'lmasa

viewportga nisbatan ishlaydi.

20. Fixed nima?#

Savol#

position:fixed nima?

Javob#

Viewportga biriktiriladi.

Scroll qilganda ham joyidan siljimaydi.

21. Sticky nima?#

Savol#

position:sticky nima?

Javob#

Oddiy element sifatida ishlaydi.

Belgilanadigan nuqtaga kelgach fixed holatiga o'tadi.

22. Flexbox nima?#

Savol#

Flexbox nima?

Javob#

Bir o'lchamli layout tizimi.

Asosan:

Row
Column

uchun ishlatiladi.

23. Flex Container#

Savol#

Flex container qanday yaratiladi?

Javob#

css

display:flex;

24. justify-content#

Savol#

justify-content nima?

Javob#

Main Axis bo'yicha elementlarni joylashtiradi.

Misollar

css

center

space-between

space-around

space-evenly

flex-start

flex-end

25. align-items#

Savol#

align-items nima?

Javob#

Cross Axis bo'yicha joylashtiradi.

css

center

stretch

flex-start

flex-end

26. Gap nima?#

Savol#

gap nima?

Javob#

Elementlar orasidagi masofa.

css

gap:20px;

27. CSS Grid nima?#

Savol#

Grid nima?

Javob#

Ikki o'lchamli layout.

Rows + Columns bilan ishlaydi.

28. Flexbox va Grid farqi#

Savol#

Qachon Flex, qachon Grid ishlatiladi?

Javob#

Flex

✔ Bir yo'nalish

Grid

✔ Ikki yo'nalish

29. z-index nima?#

Savol#

z-index nima?

Javob#

Elementning qatlamini boshqaradi.

Katta qiymat tepada chiqadi.

30. Overflow nima?#

Savol#

Overflow nima?

Javob#

Elementdan tashqariga chiqqan kontentni boshqaradi.

css

visible

hidden

scroll

auto

31. Pseudo Class#

Savol#

Pseudo class nima?

Javob#

Holatni bildiradi.

css

:hover

:focus

:active

:first-child

:last-child

:nth-child()

32. Pseudo Element#

Savol#

Pseudo element nima?

Javob#

css

::before

::after

::placeholder

::selection

33. Transition nima?#

Savol#

Transition nima?

Javob#

Style o'zgarishini animatsiya qiladi.

css

transition:.3s ease;

34. Animation nima?#

Savol#

Animation nima?

Javob#

@keyframes orqali yaratiladi.

css

@keyframes fade{

from{}

to{}

}

35. Transform#

Savol#

Transform nima?

Javob#

css

translate()

rotate()

scale()

skew()

Elementning shakli yoki joylashuvini o'zgartiradi.

36. Media Query#

Savol#

Media Query nima?

Javob#

Responsive dizayn yaratish uchun ishlatiladi.

css

@media(max-width:768px){

}

37. rem va em farqi#

Savol#

rem va em farqi?

Javob#

rem

→ Root font-size

→ Parent font-size

38. vh va vw#

Savol#

vh va vw nima?

Javob#

→ Viewport Height

→ Viewport Width

39. CSS Variables#

Savol#

CSS Variable nima?

Javob#

css

:root{

--primary:#2563eb;

}

button{

background:var(--primary);

}

40. CSS Interviewlarda eng ko'p tushadigan savollar#

✅ Box Model

✅ Flexbox

✅ Grid

✅ Position

✅ Specificity

✅ Cascade

✅ Inheritance

✅ Display

✅ Visibility

✅ Opacity

✅ z-index

✅ Overflow

✅ Pseudo Class

✅ Pseudo Element

✅ Transform

✅ Transition

✅ Animation

✅ Responsive Design

✅ Media Queries

✅ CSS Variables

✅ BEM

✅ OOCSS

✅ Atomic CSS

✅ Tailwind CSS

✅ CSS Modules

✅ SCSS

✅ PostCSS

✅ Paint

✅ Reflow

✅ Repaint

✅ GPU Rendering

✅ Critical CSS

✅ Container Queries

✅ Clamp()

✅ Min()

✅ Max()

Keyingi bo'limlar#

CSS Architecture (BEM, OOCSS, SMACSS, ITCSS)
Advanced Flexbox
Advanced Grid
Modern CSS (Container Queries, Nesting, :has())
Responsive Design
CSS Performance
Browser Rendering
CSS Interview Questions (Junior → Senior)
FAANG CSS Questions
500+ CSS Interview Questions & Answers

Munosabat bildiring

Postga reaksiya bering

Ulugbek Eshnazarov

Dasturiy ta'minot muhandisi, texnologik bloger. Sun'iy intellekt, zamonaviy veb va foydali dasturlar yaratish haqida tajribalari bilan bo'lishadi.

Telegram GitHub

Muhokama0

No comments yet.

Blog

Web Dev

CSS Complete Interview Guide 🎨

Ulugbek Eshnazarov 2026-07-095 daqiqaintermediatecss

Mundarija›

1. CSS nima?#

Savol#

CSS nima?

Javob#

CSS (Cascading Style Sheets) — HTML elementlariga dizayn, rang, o'lcham, joylashuv va animatsiyalar berish uchun ishlatiladigan stil tili.

HTML struktura yaratadi, CSS esa uning ko'rinishini boshqaradi.

2. CSS nimaning qisqartmasi?#

Savol#

CSS nimaning qisqartmasi?

Javob#

Cascading Style Sheets

Cascading → Ustuvorlik (Priority)
Style → Dizayn
Sheets → Stil fayllari

3. CSS qanday ishlaydi?#

Savol#

Browser CSS'ni qanday ishlaydi?

Javob#

Jarayon:

HTML yuklanadi
CSS yuklanadi
CSS Parser ishlaydi
CSSOM yaratiladi
DOM bilan birlashtiriladi
Render Tree hosil bo'ladi
Layout (Reflow)
Paint
Composite

4. CSS yozish usullari#

Savol#

CSS nechta usulda yoziladi?

Javob#

Inline CSS#

html

<h1 style="color:red;">Hello</h1>

Internal CSS#

html

<style>
h1{
color:red;
}
</style>

External CSS (Tavsiya etiladi)#

html

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

5. Selector nima?#

Savol#

Selector nima?

Javob#

Selector qaysi elementga style berilishini belgilaydi.

Misol

css

h1{
color:red;
}

Bu yerda h1 selector hisoblanadi.

6. Selector turlari#

Savol#

Asosiy selectorlar qaysilar?

Javob#

css

* {}

h1 {}

.class {}

#id {}

div p {}

div > p {}

div + p {}

div ~ p {}

input[type="text"] {}

7. Universal Selector#

Savol#

Universal selector nima?

Javob#

css

*{
margin:0;
padding:0;
box-sizing:border-box;
}

Barcha elementlarga style beradi.

8. Class va ID selector#

Savol#

Class va ID selector farqi?

Javob#

Class

css

.card{}

Bir nechta element uchun.

css

#header{}

Faqat bitta element uchun.

9. Specificity nima?#

Savol#

CSS Specificity nima?

Javob#

Qaysi style ustun kelishini aniqlovchi algoritm.

Priority

Inline Style

↓

ID

↓

Class

↓

Element

↓

Universal

10. !important nima?#

Savol#

!important nima?

Javob#

CSS priorityni majburan oshiradi.

css

color:red !important;

Faqat zarurat bo'lsa ishlatish tavsiya etiladi.

11. Box Model nima?#

Savol#

CSS Box Model nima?

Javob#

Har bir element:

Content

↓

Padding

↓

Border

↓

Margin

dan iborat.

12. Margin va Padding farqi#

Savol#

Margin va Padding farqi?

Javob#

Margin

→ Element tashqarisidagi bo'sh joy.

Padding

→ Element ichidagi bo'sh joy.

13. box-sizing nima?#

Savol#

box-sizing nima?

Javob#

Default

css

box-sizing:content-box;

Professional

css

box-sizing:border-box;

Border-box layoutni boshqarishni osonlashtiradi.

14. Display property#

Savol#

display property nima?

Javob#

Asosiy qiymatlar

css

block

inline

inline-block

flex

grid

none

contents

15. display:none nima qiladi?#

Savol#

display:none nima qiladi?

Javob#

Element DOMda qoladi.

Ammo sahifada ko'rinmaydi va joy ham egallamaydi.

16. visibility:hidden farqi#

Savol#

display:none va visibility:hidden farqi?

Javob#

display:none

✔ joy egallamaydi

visibility:hidden

✔ joy egallaydi

17. Position property#

Savol#

Position turlari?

Javob#

css

static

relative

absolute

fixed

sticky

18. Relative nima?#

Savol#

position:relative nima?

Javob#

Element asl joyini saqlaydi.

Lekin

css

top

left

right

bottom

orqali siljitiladi.

19. Absolute nima?#

Savol#

position:absolute qanday ishlaydi?

Javob#

Eng yaqin positioned parentga nisbatan joylashadi.

Agar positioned parent bo'lmasa

viewportga nisbatan ishlaydi.

20. Fixed nima?#

Savol#

position:fixed nima?

Javob#

Viewportga biriktiriladi.

Scroll qilganda ham joyidan siljimaydi.

21. Sticky nima?#

Savol#

position:sticky nima?

Javob#

Oddiy element sifatida ishlaydi.

Belgilanadigan nuqtaga kelgach fixed holatiga o'tadi.

22. Flexbox nima?#

Savol#

Flexbox nima?

Javob#

Bir o'lchamli layout tizimi.

Asosan:

Row
Column

uchun ishlatiladi.

23. Flex Container#

Savol#

Flex container qanday yaratiladi?

Javob#

css

display:flex;

24. justify-content#

Savol#

justify-content nima?

Javob#

Main Axis bo'yicha elementlarni joylashtiradi.

Misollar

css

center

space-between

space-around

space-evenly

flex-start

flex-end

25. align-items#

Savol#

align-items nima?

Javob#

Cross Axis bo'yicha joylashtiradi.

css

center

stretch

flex-start

flex-end

26. Gap nima?#

Savol#

gap nima?

Javob#

Elementlar orasidagi masofa.

css

gap:20px;

27. CSS Grid nima?#

Savol#

Grid nima?

Javob#

Ikki o'lchamli layout.

Rows + Columns bilan ishlaydi.

28. Flexbox va Grid farqi#

Savol#

Qachon Flex, qachon Grid ishlatiladi?

Javob#

Flex

✔ Bir yo'nalish

Grid

✔ Ikki yo'nalish

29. z-index nima?#

Savol#

z-index nima?

Javob#

Elementning qatlamini boshqaradi.

Katta qiymat tepada chiqadi.

30. Overflow nima?#

Savol#

Overflow nima?

Javob#

Elementdan tashqariga chiqqan kontentni boshqaradi.

css

visible

hidden

scroll

auto

31. Pseudo Class#

Savol#

Pseudo class nima?

Javob#

Holatni bildiradi.

css

:hover

:focus

:active

:first-child

:last-child

:nth-child()

32. Pseudo Element#

Savol#

Pseudo element nima?

Javob#

css

::before

::after

::placeholder

::selection

33. Transition nima?#

Savol#

Transition nima?

Javob#

Style o'zgarishini animatsiya qiladi.

css

transition:.3s ease;

34. Animation nima?#

Savol#

Animation nima?

Javob#

@keyframes orqali yaratiladi.

css

@keyframes fade{

from{}

to{}

}

35. Transform#

Savol#

Transform nima?

Javob#

css

translate()

rotate()

scale()

skew()

Elementning shakli yoki joylashuvini o'zgartiradi.

36. Media Query#

Savol#

Media Query nima?

Javob#

Responsive dizayn yaratish uchun ishlatiladi.

css

@media(max-width:768px){

}

37. rem va em farqi#

Savol#

rem va em farqi?

Javob#

rem

→ Root font-size

→ Parent font-size

38. vh va vw#

Savol#

vh va vw nima?

Javob#

→ Viewport Height

→ Viewport Width

39. CSS Variables#

Savol#

CSS Variable nima?

Javob#

css

:root{

--primary:#2563eb;

}

button{

background:var(--primary);

}

40. CSS Interviewlarda eng ko'p tushadigan savollar#

✅ Box Model

✅ Flexbox

✅ Grid

✅ Position

✅ Specificity

✅ Cascade

✅ Inheritance

✅ Display

✅ Visibility

✅ Opacity

✅ z-index

✅ Overflow

✅ Pseudo Class

✅ Pseudo Element

✅ Transform

✅ Transition

✅ Animation

✅ Responsive Design

✅ Media Queries

✅ CSS Variables

✅ BEM

✅ OOCSS

✅ Atomic CSS

✅ Tailwind CSS

✅ CSS Modules

✅ SCSS

✅ PostCSS

✅ Paint

✅ Reflow

✅ Repaint

✅ GPU Rendering

✅ Critical CSS

✅ Container Queries

✅ Clamp()

✅ Min()

✅ Max()

Keyingi bo'limlar#

CSS Architecture (BEM, OOCSS, SMACSS, ITCSS)
Advanced Flexbox
Advanced Grid
Modern CSS (Container Queries, Nesting, :has())
Responsive Design
CSS Performance
Browser Rendering
CSS Interview Questions (Junior → Senior)
FAANG CSS Questions
500+ CSS Interview Questions & Answers

Munosabat bildiring

Postga reaksiya bering

Ulugbek Eshnazarov

Dasturiy ta'minot muhandisi, texnologik bloger. Sun'iy intellekt, zamonaviy veb va foydali dasturlar yaratish haqida tajribalari bilan bo'lishadi.

Telegram GitHub

Muhokama0

No comments yet.