CSS · EASY CODEX
CSS Interview Questions — Easy
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:
- External (Preferred):
<link rel="stylesheet" href="styles.css">inside<head>. - Internal: Inside a
<style>block in<head>. - Inline: Directly inside the HTML element using the
styleattribute (e.g.,<div style="color: red;">).
- External (Preferred):
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):
- Content: The actual text, images, or child elements.
- Padding: Transparent area surrounding the content, inside the border. Affected by background styles.
- Border: Outer edge of the padding box.
- 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): Setwidthandheightapply only to the content. Adding padding or borders increases the element's actual physical size on screen (total width = width + padding + border).border-box: Setwidthandheightincorporate 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.
₹399 India / $9 International · One-time settlement · Zero subscription