🎤 Top 81 Interview Questions
These are the most commonly asked Java interview questions — tap to reveal the answer.
Cascading Style Sheets — HTML ELEMENTS ki VISUAL PRESENTATION (COLORS, FONTS, LAYOUT, SPACING) CONTROL karta hai — CONTENT (HTML) aur STYLING (CSS) ko SEPARATE karta hai.
Jab MULTIPLE RULES, EK HI ELEMENT PAR APPLY hote hain, "CASCADE" (PRIORITY ORDER) DECIDE karta hai KAUN SA RULE WINS — SPECIFICITY, SOURCE ORDER, aur !important ke HISAAB SE.
INLINE (style ATTRIBUTE, DIRECT ELEMENT PAR), INTERNAL (<style> TAG, <head> mein), EXTERNAL (SEPARATE .css FILE, <link> SE) — EXTERNAL, BEST PRACTICE hai, MAINTAINABILITY ke liye.
PATTERNS JO, HTML ELEMENTS ko, STYLE karne ke liye, TARGET karte hain — jaise ELEMENT SELECTOR (p), CLASS SELECTOR (.classname), ID SELECTOR (#idname).
Class (.name), MULTIPLE ELEMENTS PAR, REPEAT ho sakti hai. ID (#name), EK PAGE PAR, SIRF EK ELEMENT ke liye, UNIQUE HONI CHAHIYE — ID ki SPECIFICITY bhi ZYAADA hoti hai.
HAR HTML ELEMENT, EK "BOX" hai, JISKE 4 LAYERS hain — CONTENT (ACTUAL text/image), PADDING (CONTENT ke AROUND SPACE), BORDER (PADDING ke AROUND LINE), MARGIN (BORDER ke BAAHAR SPACE).
ELEMENT ki TOTAL WIDTH/HEIGHT mein, PADDING aur BORDER ko, AUTOMATICALLY INCLUDE kar leta hai — DEFAULT (content-box) mein, PADDING/BORDER, WIDTH ke UPAR, EXTRA ADD hote hain, JO AKSAR CONFUSING hota hai.
FALLBACK MECHANISM ke liye — AGAR PEHLA FONT, USER ke SYSTEM PAR AVAILABLE NA ho, Browser, LIST mein, NEXT FONT TRY karta hai, aur AAKHIR mein, GENERIC FONT (jaise sans-serif) USE hota hai.
em, PARENT ELEMENT ke FONT-SIZE ke RELATIVE hai (NESTED elements mein, COMPOUND ho sakta hai). rem, ROOT (<html>) ke FONT-SIZE ke RELATIVE hai — CONSISTENT, PREDICTABLE SIZING deता hai.
EK LAYOUT MODEL, ONE-DIMENSIONAL (ROW YA COLUMN) LAYOUTS ke liye — ELEMENTS ko, EASILY, ALIGN, DISTRIBUTE, aur SPACE karne DETA hai, TRADITIONAL float-based LAYOUTS se BAHUT SIMPLER.
justify-content, MAIN AXIS PAR (DEFAULT: HORIZONTAL) ITEMS ko ALIGN karta hai. align-items, CROSS AXIS PAR (DEFAULT: VERTICAL) ITEMS ko ALIGN karta hai.
DECIDE karta hai KI FLEX ITEMS, ROW (HORIZONTAL, DEFAULT) mein ARRANGE HONGE, YA COLUMN (VERTICAL) mein.
flex-grow, EXTRA SPACE hone PAR, ITEM KITNA GROW karega. flex-shrink, SPACE KAM padने PAR, ITEM KITNA SHRINK karega. flex-basis, ITEM ki INITIAL, DEFAULT SIZE.
EK LAYOUT MODEL, TWO-DIMENSIONAL (ROWS aur COLUMNS, DONO EK SAATH) LAYOUTS ke liye — COMPLEX, GRID-BASED DESIGNS (jaise MAGAZINE LAYOUTS) EASILY BANANE DETA hai.
GRID mein, KITNE COLUMNS HONGE, aur HAR COLUMN ki WIDTH KYA HOGI — jaise grid-template-columns: 1fr 2fr 1fr; TEEN COLUMNS BANATA hai, DIFFERENT PROPORTIONS ke SAATH.
"FRACTIONAL UNIT" — AVAILABLE SPACE ka EK PROPORTIONAL HISSA — jaise 1fr 2fr, DOOSRE COLUMN ko, PEHLE SE, DUGNI SPACE DETA hai.
Flexbox, ONE-DIMENSIONAL LAYOUTS ke liye (EK ROW YA EK COLUMN). Grid, TWO-DIMENSIONAL LAYOUTS ke liye (ROWS aur COLUMNS, DONO EK SAATH CONTROL karne ke liye).
cover, IMAGE ko, POORE CONTAINER ko COVER karte hue, SCALE karta hai (KUCH HISSA CROP ho sakta hai). contain, POORI IMAGE ko, CONTAINER ke ANDAR FIT karta hai (KUCH EMPTY SPACE reh sakti hai).
ELEMENT ke CORNERS ko, ROUNDED bana deta hai — jaise border-radius: 50%, EK SQUARE ELEMENT ko, PERFECT CIRCLE mein CONVERT kar deta hai.
box-shadow: offsetX offsetY blur spread color; — ELEMENT ke AROUND, EK SHADOW EFFECT ADD karta hai, DEPTH/ELEVATION ka VISUAL ILLUSION DETA hai.
CSS RULES JO, SPECIFIC CONDITIONS (jaise SCREEN WIDTH) ke HISAAB SE, APPLY hote hain — jaise @media (max-width: 768px) { ... } — MOBILE PAR, DIFFERENT STYLES APPLY karne DETA hai.
PEHLE, SMALLEST SCREEN (MOBILE) ke liye STYLES LIKHNA, PHIR min-width MEDIA QUERIES SE, BADE SCREENS ke liye, PROGRESSIVELY, ENHANCEMENTS ADD karna.
vw = VIEWPORT WIDTH ka 1%. vh = VIEWPORT HEIGHT ka 1% — SCREEN SIZE ke RELATIVE, DYNAMIC SIZING ke liye USEFUL (jaise FULL-SCREEN SECTIONS).
EK PROPERTY (jaise color, width) ke CHANGE ko, INSTANT ke BAJAYE, SMOOTH, GRADUAL tareeke SE, EK SPECIFIED DURATION mein, ANIMATE karta hai.
transition, EK STATE se DUSRE STATE (jaise hover) tak, SIMPLE, ONE-TIME CHANGE ANIMATE karta hai. animation (@keyframes ke SAATH), COMPLEX, MULTI-STEP, REPEATING SEQUENCES CREATE kar sakta hai.
EK ANIMATION SEQUENCE DEFINE karta hai — DIFFERENT "STAGES" (0%, 50%, 100%) PAR, ELEMENT ka STATE KYA HOGA, SPECIFY karta hai.
EK ELEMENT ke SPECIAL "STATE" ko TARGET karta hai — jaise :hover (MOUSE HOVER PAR), :first-child (PEHLA CHILD), :nth-child(2) (SPECIFIC POSITION).
Pseudo-element (::before, ::after), ELEMENT ke ANDAR, EK "VIRTUAL" ELEMENT CREATE karta hai. Pseudo-class, EXISTING ELEMENT ke STATE ko TARGET karta hai.
> DIRECT CHILD SELECT karta hai. + IMMEDIATELY NEXT SIBLING SELECT karta hai. ~ SAARE FOLLOWING SIBLINGS SELECT karta hai.
--variable-name: value; SE DEFINE, var(--variable-name) SE USE — REUSABLE VALUES (jaise COLORS) DEFINE karne DETA hai, EK JAGAH CHANGE karने SE, POORI SITE mein UPDATE ho jaata hai.
INLINE styles SABSE ZYAADA SPECIFIC hain, PHIR IDs, PHIR CLASSES/ATTRIBUTES/PSEUDO-CLASSES, PHIR ELEMENT SELECTORS — HIGHER SPECIFICITY WALA RULE, WINS (!important ko CHHOD KAR).
EK RULE ko, NORMAL SPECIFICITY RULES ko, OVERRIDE karne ki FORCE deta hai. AVOID karna CHAHIYE kyunki YE CODE ko DEBUG karna MUSHKIL bana deta hai — SPECIFICITY "WAR" SHURU ho jaati hai.
display: none, ELEMENT ko COMPLETELY REMOVE kar deta hai (LAYOUT SPACE bhi NAHI LETA). visibility: hidden, ELEMENT ko INVISIBLE banata hai, LEKIN LAYOUT SPACE STILL OCCUPY karta hai.
EK LINE of TEXT ki HEIGHT — READABILITY IMPROVE karta hai (BAHUT TIGHT/LOOSE LINE SPACING, PADHNA MUSHKIL banaता hai).
AGAR TEXT, CONTAINER mein FIT NAHI hota (overflow: hidden aur white-space: nowrap ke SAATH), TEXT ko "..." (ELLIPSIS) SE TRUNCATE kar deta hai.
DECIDE karta hai KI FLEX ITEMS, EK SINGLE LINE mein FORCE-FIT HONGE, YA MULTIPLE LINES mein WRAP HO SAKTE hain, AGAR SPACE KAM PADE.
align-items, PARENT (container) PAR SET hota hai, SAARE CHILDREN PAR APPLY hota hai. align-self, EK SPECIFIC CHILD PAR SET hota hai, US EK ITEM ke ALIGNMENT ko OVERRIDE karta hai.
GRID LAYOUT ko, "VISUALLY", NAMED AREAS SE, DEFINE karne DETA hai — jaise "header header" "sidebar content" — CODE ko VERY READABLE bana deta hai.
GRID/FLEX ITEMS ke BEECH, SPACING ADD karta hai — MARGINS SE BEHTAR hai kyunki YE, OUTER EDGES PAR, EXTRA SPACE NAHI ADD karta.
EK SMOOTH TRANSITION, DO YA ZYAADA COLORS KE BEECH, EK STRAIGHT LINE ke ALONG — background PROPERTY mein USE hota hai, SOLID COLORS ke BAJAYE.
Background IMAGE, CONTAINER ke ANDAR, KAHA POSITION hogi — jaise center, top left, ya SPECIFIC PIXEL/PERCENTAGE VALUES.
SPECIFIC SCREEN WIDTHS, JAHA LAYOUT, EK "STYLE" SE DUSRE mein SWITCH karta hai — jaise 768px (TABLET), 1024px (DESKTOP) — MEDIA QUERIES mein USE hote hain.
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); — AUTOMATICALLY, AVAILABLE SPACE ke HISAAB SE, KITNE COLUMNS FIT HONGE, DECIDE karta hai, BINA MEDIA QUERIES LIKHE.
ANIMATION ki SPEED CURVE — ease, linear, ease-in, ease-out — ANIMATION START/END PAR, FASTER/SLOWER hogi, YA CONSTANT SPEED SE CHALEGI.
translate() (MOVE), rotate() (ROTATE), scale() (RESIZE), skew() (SLANT) — ELEMENT ko, LAYOUT FLOW ko AFFECT kiye BINA, VISUALLY MODIFY karta hai.
EK PARENT ke, SPECIFIC POSITION PAR, CHILDREN SELECT karta hai — jaise :nth-child(odd) SAARE ODD-POSITIONED children SELECT karta hai, jaise ZEBRA-STRIPED tables ke liye.
ELEMENTS ko, UNKE ATTRIBUTES/VALUES ke BASIS PAR, TARGET karte hain — jaise input[type="email"] { ... } SIRF EMAIL INPUTS ko STYLE karta hai.
clamp(min, preferred, max) — EK VALUE (jaise FONT-SIZE) ko, EK MINIMUM aur MAXIMUM ke BEECH, RESPONSIVELY, SCALE karne DETA hai, BINA MULTIPLE MEDIA QUERIES ke.
Elements ko, VIEWPORT SIZE ke BAJAYE, UNKE PARENT CONTAINER ki SIZE ke HISAAB SE, STYLE karne DETE hain — TRULY MODULAR, REUSABLE COMPONENTS ke liye.
EK "PARENT SELECTOR" — EK ELEMENT ko, USKE SPECIFIC CHILDREN ke BASIS PAR, SELECT karne DETA hai (jaise div:has(img) — SAARE div JINME img HAI) — PEHLE SIRF JavaScript SE POSSIBLE THA.
DIFFERENT BROWSERS ke DEFAULT STYLES (jaise margin, padding) ko, EK CONSISTENT BASELINE PAR, LAANE ke liye — DEVELOPER, EK PREDICTABLE STARTING POINT SE, STYLING SHURU kar sakta hai.
KUCH PROPERTIES (jaise color, font-family), PARENT ELEMENT SE, CHILD ELEMENTS mein, AUTOMATICALLY "INHERIT" ho jaati hain, AGAR CHILD PAR EXPLICITLY OVERRIDE NA ki JAAYE.
static (DEFAULT, NORMAL FLOW), relative (NORMAL FLOW SE, OFFSET), absolute (NEAREST POSITIONED ANCESTOR ke RELATIVE), fixed (VIEWPORT ke RELATIVE, SCROLL PAR STATIC), sticky (SCROLL tak relative, PHIR fixed).
word-break: break-all, WORDS ko, KISI BHI CHARACTER PAR, FORCE-BREAK kar sakta hai. overflow-wrap: break-word, SIRF TAB BREAK karta hai JAB WORD, CONTAINER mein FIT NAHI hota.
CUSTOM, WEB FONTS (jo USER ke SYSTEM PAR PRE-INSTALLED NAHI hain) ko, SERVER SE LOAD karके, PAGE PAR USE karne DETA hai.
flex-grow: 1; flex-shrink: 1; flex-basis: 0%; — ITEM ko, AVAILABLE SPACE, EQUALLY (DOOSRE flex: 1 items KE SAATH) SHARE karne DETA hai.
VISUAL ORDER ko, HTML SOURCE ORDER SE, INDEPENDENTLY, CHANGE karne DETA hai — jaise order: -1, EK ITEM ko, SABSE PEHLE, VISUALLY, DIKHAta hai.
EK SPECIFIC GRID ITEM ko, KAHA se KAHA tak (KITNE COLUMNS/ROWS SPAN karega), EXPLICITLY POSITION/SIZE karne DETE hain.
Explicit tracks, grid-template-columns/rows SE, MANUALLY DEFINE ki jaati hain. Implicit tracks, GRID, AUTOMATICALLY CREATE karta hai, AGAR CONTENT, DEFINED GRID SE ZYAADA hai.
background PROPERTY mein, COMMA-SEPARATED VALUES SE — jaise MULTIPLE GRADIENTS/IMAGES, EK DUSRE ke UPAR, LAYER ho sakte hain.
border, ELEMENT ki BOX-MODEL SPACE mein SHAAMIL hota hai (LAYOUT AFFECT karta hai). outline, ELEMENT ke BAAHAR, LAYOUT ko AFFECT kiye BINA, DRAW hota hai — FOCUS INDICATORS ke liye COMMON.
@media (min-width: 768px) and (max-width: 1024px) — EK SPECIFIC RANGE (jaise TABLET) TARGET karne ke liye, DO CONDITIONS ko AND SE COMBINE kiya ja sakta hai.
FONT SIZES, FIXED BREAKPOINTS ke BAJAYE, clamp() YA VIEWPORT UNITS SE, SCREEN SIZE ke SAATH, SMOOTHLY, CONTINUOUSLY SCALE karte hain.
ANIMATION ke, START SE PEHLE, YA END ke BAAD, ELEMENT ki STYLING KYA HOGI — jaise forwards, ANIMATION ke LAST KEYFRAME ki STYLING, RETAIN karta hai.
Browser ko, ADVANCE mein, BATATA hai KI EK ELEMENT, JALD hi, ANIMATE/CHANGE HONE WALA hai — Browser, PERFORMANCE OPTIMIZATIONS (jaise GPU LAYER) PRE-EMPTIVELY kar sakta hai.
EK SPECIFIC CONDITION ko EXCLUDE karta hai — jaise li:not(:last-child) SAARE list items SELECT karta hai, SIRF LAST ONE ko CHHOD KAR.
SAARE ELEMENTS ko, EK SAATH, TARGET karne ke liye — COMMONLY, CSS RESETS mein (jaise * { margin: 0; padding: 0; }) USE hota hai.
EK NESTED GRID ko, PARENT GRID ke, ROWS/COLUMNS ko, DIRECTLY INHERIT karne DETA hai — NESTED COMPONENTS ko, PARENT ke SAATH, PERFECTLY ALIGN karna EASY banaता hai.
EK ELEMENT ka WIDTH-TO-HEIGHT RATIO MAINTAIN karta hai (jaise 16/9) — RESPONSIVE VIDEOS/IMAGES ke liye, PADDING-HACK TRICKS ki zaroorat NAHI, MODERN APPROACH.
SPECIFICITY CONFLICTS ko, EXPLICIT "LAYER ORDER" SE, MANAGE karne DETE hain — LARGE PROJECTS mein, DIFFERENT CSS SOURCES (RESET, FRAMEWORK, CUSTOM) ke BEECH, PREDICTABLE PRIORITY.
OVERLAPPING ELEMENTS ka STACKING ORDER (KAUN SA UPAR DIKHEGA) — SIRF POSITIONED ELEMENTS (position NOT static) PAR EFFECTIVE hota hai.
px, FIXED SIZES ke liye. %, PARENT ke RELATIVE. rem, CONSISTENT, ROOT-RELATIVE SIZING (FONTS/SPACING) ke liye. vw/vh, VIEWPORT-RELATIVE, FULL-SCREEN LAYOUTS ke liye.
uppercase (SAB CAPITAL), lowercase (SAB SMALL), capitalize (HAR WORD ka FIRST LETTER CAPITAL) — TEXT ko, ORIGINAL CONTENT CHANGE kiye BINA, VISUALLY TRANSFORM karta hai.
display: flex; justify-content: center; align-items: center; — EK CLASSIC, COMMON PATTERN, ELEMENTS ko, POORI TARAH, CENTER karne ke liye.
EK TRACK (COLUMN/ROW) ki, MINIMUM aur MAXIMUM SIZE, SPECIFY karta hai — jaise minmax(100px, 1fr), TRACK ko, KAM SE KAM 100px, aur ZYAADA SE ZYAADA, AVAILABLE SPACE tak, FLEXIBLE rakhta hai.
max-width: 100%; height: auto; — IMAGE ko, CONTAINER se BADI hone se ROKTA hai, aur ASPECT RATIO MAINTAIN karte hue, RESPONSIVELY, SCALE karta hai.
EK COMPLETELY CUSTOM, PRECISE, ANIMATION SPEED CURVE DEFINE karne DETA hai — PRE-DEFINED (ease, linear) se ZYAADA CONTROL.
h2 + p, SIRF h2 ke IMMEDIATELY BAAD, PEHLE p ko SELECT karta hai. h2 ~ p, h2 ke BAAD, SAARE p SIBLINGS ko SELECT karta hai.
USER ke OS/BROWSER ka DARK/LIGHT MODE PREFERENCE — @media (prefers-color-scheme: dark) SE, AUTOMATICALLY, DARK THEME STYLES APPLY kiye ja sakte hain.
LEFT/RIGHT ke BAJAYE, TEXT DIRECTION (LTR/RTL) ke HISAAB SE, AUTOMATICALLY ADAPT hote hain — INTERNATIONALIZATION (jaise ARABIC, RTL LANGUAGES) ke liye IMPORTANT.
SOURCE ORDER — AGAR DO RULES ki SPECIFICITY SAME hai, JO RULE, CSS mein, BAAD mein LIKHA GAYA hai, WOHI WINS ("LAST RULE WINS").