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.
