Here is a comprehensive set of 10 CSS interview questions with examples and detailed explanations. These questions will help you understand various CSS concepts, properties, and best practices.
1. What is CSS?
Answer:
CSS stands for Cascading Style Sheets. It is used to style and layout web pages, including altering colors, fonts, and spacing of HTML elements.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Welcome to CSS Styling</h1>
<p>This is an example of a styled paragraph.</p>
</body>
</html>Explanation:
body { background-color: lightblue; }sets the background color of the webpage to light blue.h1 { color: white; text-align: center; }sets the heading color to white and aligns it centrally.p { font-family: verdana; font-size: 20px; }applies the Verdana font and a larger size to the paragraph text.
2. What is the CSS box model?
Answer:
The CSS box model is a box that wraps around HTML elements, consisting of the following parts: content, padding, border, and margin.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
padding: 20px;
border: 10px solid black;
margin: 15px;
}
</style>
</head>
<body>
<div>This is a box model example.</div>
</body>
</html>Explanation:
width: 200px;sets the content width.padding: 20px;adds space inside the border, around the content.border: 10px solid black;defines a 10px black border around the padding.margin: 15px;adds space outside the border, separating the box from other elements.
3. How do you apply CSS to a specific element?
Answer:
You can apply styles to specific elements using element selectors, class selectors, or ID selectors.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue; /* Element Selector */
}
.highlight {
background-color: yellow; /* Class Selector */
}
#unique {
font-weight: bold; /* ID Selector */
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p class="highlight">This paragraph is highlighted.</p>
<p id="unique">This paragraph has a unique style.</p>
</body>
</html>Explanation:
h1 { color: blue; }targets allh1elements..highlight { background-color: yellow; }targets any element with thehighlightclass.#unique { font-weight: bold; }targets the element with the idunique.
4. What is the difference between a class and an ID in CSS?
Answer:
- A class can be applied to multiple elements, and is denoted by a
.(dot) in CSS. - An ID is unique to a single element and is denoted by a
#(hash) in CSS.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: lightgreen;
}
#unique-box {
background-color: pink;
}
</style>
</head>
<body>
<div class="box">I am a box with a class.</div>
<div id="unique-box">I am a unique box with an ID.</div>
</body>
</html>Explanation:
.box { background-color: lightgreen; }applies the same style to all elements with the classbox.#unique-box { background-color: pink; }applies the style to the element with the IDunique-box.
5. What are the different types of CSS?
Answer:
CSS can be applied in three different ways:
- Inline CSS: Applied directly within an HTML element’s
styleattribute. - Internal CSS: Defined in the
<style>section within the<head>of an HTML document. - External CSS: Linked via a separate
.cssfile.
Example:
<!DOCTYPE html>
<html>
<head>
<!-- Internal CSS -->
<style>
p {
color: green;
}
</style>
<!-- Linking External CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 style="color: blue;">Inline CSS Example</h1> <!-- Inline CSS -->
<p>This is styled using internal CSS.</p>
</body>
</html>Explanation:
- Inline CSS: The color
blueis applied directly to theh1usingstyle="color: blue;". - Internal CSS: The color
greenis applied to allpelements within the<style>tag in the<head>. - External CSS: Additional styles would be defined in the external file
styles.css.
6. What is the !important rule in CSS?
Answer:
The !important rule in CSS overrides all other declarations, giving a style higher priority than even inline styles.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red !important;
}
p {
color: blue;
}
</style>
</head>
<body>
<p>This text will be red due to the !important rule.</p>
</body>
</html>Explanation:
- Although
color: blue;is specified, the!importantrule oncolor: redtakes precedence, rendering the text in red.
7. What are pseudo-classes in CSS?
Answer:
A pseudo-class is used to define a special state of an element, such as :hover, :focus, or :active.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="#">Hover over this link.</a>
</body>
</html>Explanation:
a:hover { color: red; }changes the color of the link to red when the user hovers over it.
8. What are pseudo-elements in CSS?
Answer:
A pseudo-element is used to style specific parts of an element, such as ::before, ::after, or ::first-letter.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<p>This is an example of using pseudo-elements.</p>
</body>
</html>Explanation:
p::first-lettertargets the first letter of the paragraph, making it blue and larger in size.
9. What is the difference between position: relative and position: absolute?
Answer:
relative: The element is positioned relative to its normal position in the document flow.absolute: The element is positioned relative to its nearest positioned ancestor (non-static), or the document body if none exists.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.relative {
position: relative;
top: 20px;
left: 20px;
}
.absolute {
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="relative">This is relatively positioned.</div>
<div class="absolute">This is absolutely positioned.</div>
</body>
</html>Explanation:
- The
.relativediv moves 20px down and right from its original position. - The
.absolutediv is positioned 50px down and right relative to the body.
10. What is the difference between display: none and visibility: hidden?
Answer:
display: none: The element is removed from the document flow and will not take up any space.visibility: hidden: The element is still in the document flow but invisible to the user.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
visibility: hidden;
}
.none {
display: none;
}
</style>
</head>
<body>
<div class="hidden">I am hidden but still take up space.</div>
<div class="none">I am completely removed
from the page.</div>
</body>
</html>Explanation:
- The
.hiddendiv is invisible but still occupies space on the page. - The
.nonediv is completely removed from the layout, so it doesn’t occupy space.
