CSS Interview Questions
A List of CSS interview questions along with their answers and Code that are commonly asked by companies:
1. What is CSS, and what does it stand for?
Answer: CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the presentation of a document written in HTML.
2. Explain the concept of the "box model" in CSS. With a code example.
Answer: The box model in CSS describes the layout of elements on a web page, including content, padding, border, and margin.
/* Code: The box model includes content, padding, border, and margin. */
.box {
width: 200px;
padding: 20px;
border: 2px solid #333;
margin: 10px;
}
3. How can you hide an element on a web page?
Answer: You can set the CSS
display property of the element to none. This will remove the element from the normal flow of the document, effectively hiding it. Here's an example:/* Code: Using display: none; or visibility: hidden; */
.hidden-element {
display: none;
}
# CSS Visibility Property :
.hidden-element {
visibility: hidden;
}
# CSS Opacity Property:
.hidden-element {
opacity: 0;
}
4. Explain the difference between
inline and block elements with examples.Answer: Inline and block elements are two types of HTML elements that define the structure of a web page. The main difference between them lies in how they are displayed and how they interact with surrounding elements.
/* Code: */
<p>This is an <strong>inline</strong> element within a paragraph.</p>
<a href="https://www.example.com">Visit Example.com</a>
Block Elements:
- Definition: Block elements, on the other hand, start on a new line and take up the full width available. They create a "block" that forces a line break after the element.
- Examples:
<div>,<p>,<h1>to<h6>,<ul>,<li>
<div>This is a block element that starts on a new line.</div>
<p>This is a paragraph, which is also a block element.</p>
The
<div> and <p> elements are block elements. They each start on a new line and take up the full width of their container.5. How do you center an element horizontally and vertically in CSS?
Answer: To center an element both horizontally and vertically in CSS, you can use a combination of the following techniques. Let's assume you want to center a
<div> element with the class "centered-element" :/* Code: Using flexbox or grid layout */
.centered-element {
display: flex;
justify-content: center;
align-items: center;
}
This uses the flexbox layout, setting the container (
display: flex;) to have both horizontal (justify-content: center;) and vertical (align-items: center;) centering.# Grid:
.centered-element {
display: grid;
place-items: center;
}
This method uses CSS Grid, with
place-items: center; ensuring both horizontal and vertical centering.# Absolute Positioning:
.centered-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This method uses absolute positioning combined with the
transform property to move the element to the center. The top: 50%; and left: 50%; set the reference point to the center of the element, and transform: translate(-50%, -50%); centers it precisely.# CSS Grid with Auto Margin:
.centered-element {
display: grid;
margin: auto;
}
Selectors and Specificity:
6. Differentiate between class and ID selectors. Provide examples.
Answer: Class and ID selectors are used to apply styles to HTML elements. They differ in their usage and specificity.
/* Code: */
.button {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}
/* Applying the class to an HTML element */
<button class="button">Click me</button>
In this example, the class selector
.button is used to style a button with a specific set of properties.7. Explain the importance of specificity in CSS.
Answer: Specificity determines which styles are applied when conflicting rules exist.
8. What is the importance of the
!important declaration in CSS?Answer: The
!important declaration in CSS is a powerful and occasionally controversial tool that is used to give a specific style rule precedence over others. When applied to a style property, !important ensures that the associated value will take precedence, even if other conflicting rules are present in the stylesheet or are applied inline. While it can be useful in certain situations, its use should be approached with caution due to its potential to override the normal cascading order of styles./* Code It gives a style rule more weight, making it more specific and overriding other styles. */
.important-rule {
color: red !important;
}
9. How can you select all direct child elements of a parent?
Answer: To select all direct child elements of a parent in HTML using CSS, you can use the child combinator (
>) in your CSS selector. This allows you to target only the immediate children of a specified parent element. Here's an example:/* Code: Using the child combinator ">" */
.parent > .child {
/* styles for direct child elements */
}
10. Explain the difference between descendant and child selectors.
Answer: In CSS, descendant and child selectors are both used to target specific elements within the document structure, but they differ in terms of the depth of the relationship between the selected elements. Here's an explanation of the difference between descendant and child selectors:
/* Code: Descendant selects all matching elements, while child only selects direct children. */
.parent .descendant {
/* styles for all descendants */
}
.parent > .child {
/* styles for direct children */
}
Like
Share
Tags
Share
Tags