CSS · EASY CODEX

CSS Interview Questions — Easy

Q: What is CSS, and how do you link it to an HTML document?

- CSS: Cascading Style Sheets. Defines the presentation, design, and layout of an HTML document. - Linking Methods: 1. External (Preferred): <link rel="stylesheet" href="styles.css" inside <head. 2. I

Q: What are the different types of CSS selectors?

- Element Selector: Targets all matching HTML elements (e.g., p { }). - Class Selector: Targets elements with a matching class name, prefixed with a dot (e.g., .card { }). - ID Selector: Targets a sin

Q: Compare class, ID, and element selectors in terms of specificity.

- ID Selector: Highest specificity among the three. Represented as 0,1,0,0. - Class Selector: Moderate specificity. Includes classes, attributes, and pseudo-classes. Represented as 0,0,1,0. - Element

Q: Explain the standard CSS Box Model.

- Definition: Every element is rendered as a rectangular box consisting of four concentric layers. - Layers (from inside out): 1. Content: The actual text, images, or child elements. 2. Padding: Trans

Q: What does `box-sizing: border-box` do, and why is it preferred?

- content-box (Default): Set width and height apply only to the content. Adding padding or borders increases the element's actual physical size on screen (total width = width + padding + border). - bo

Core concepts, definitions, basic syntax, and first principles expected in round 1 screening.

50 Theory Questions5 Free Model Answers

THEORY QUESTIONS & SOLUTIONSShowing 5 of 50 questions

Q1What is CSS, and how do you link it to an HTML document?

CSS: Cascading Style Sheets. Defines the presentation, design, and layout of an HTML document.
Linking Methods:
1. External (Preferred): <link rel="stylesheet" href="styles.css"> inside <head>.
2. Internal: Inside a <style> block in <head>.
3. Inline: Directly inside the HTML element using the style attribute (e.g., <div style="color: red;">).

Q2What are the different types of CSS selectors?

Element Selector: Targets all matching HTML elements (e.g., p { }).
Class Selector: Targets elements with a matching class name, prefixed with a dot (e.g., .card { }).
ID Selector: Targets a single element with a matching ID, prefixed with a hash (e.g., #header { }).
Universal Selector: Targets every element on the page (e.g., * { }).
Attribute Selector: Targets elements based on attribute values (e.g., [type="text"] { }).

Q3Compare class, ID, and element selectors in terms of specificity.

ID Selector: Highest specificity among the three. Represented as 0,1,0,0.
Class Selector: Moderate specificity. Includes classes, attributes, and pseudo-classes. Represented as 0,0,1,0.
Element Selector: Lowest specificity. Includes elements and pseudo-elements. Represented as 0,0,0,1.
Result: ID rules override class rules, and class rules override element rules.

Q4Explain the standard CSS Box Model.

Definition: Every element is rendered as a rectangular box consisting of four concentric layers.
Layers (from inside out):
1. Content: The actual text, images, or child elements.
2. Padding: Transparent area surrounding the content, inside the border. Affected by background styles.
3. Border: Outer edge of the padding box.
4. Margin: Transparent space outside the border separating the element from adjacent sibling elements.

Q5What does `box-sizing: border-box` do, and why is it preferred?

content-box (Default): Set width and height apply only to the content. Adding padding or borders increases the element's actual physical size on screen (total width = width + padding + border).
border-box: Set width and height incorporate the content, padding, and border. Adding padding/border shrinks the content area but keeps the overall box size fixed.
Benefit: Simplifies layout calculations and prevents unexpected design overflows.

Unlock the remaining 45 CSS (Easy) questions

You've completed the 5 free sample questions. Get unrestricted lifetime access to every question, model answer, implementation challenge, and all 27+ technologies for a single payment.

Unlock Everything — Already Enrolled? Sign In

One-time settlement () · Lifetime access · Zero subscription

CROSS-DIFFICULTY NAVIGATION

Continue Preparing CSS

MEDIUM LEVEL

Mechanisms & Practical Patterns

HARD LEVEL

Internals & System Architecture