10 CSS Interview Questions
1. What is CSS?
CSS outlines the style of an HTML webpage. It is a language by which we can set the behavior of an HTML webpage. It describes how the HTML content will be shown on screen.
CSS controls the layout of several HTML web pages. CSS is referred to as the Cascading Style Sheet.
2. How can you integrate CSS on a web page?
There are three ways of inserting a style sheet:
1. Inline method - It is used to insert style sheets in HTML document
<div> <p style="color: maroon;"></p>
</div>
2. Embedded/Internal method - It is used to add a unique style to a single document
<head>
<title>CSS Refresher</title>
<style>
body {
font-family: sans-serif;
font-size: 1.2em;
}
</style>
</head>
3. Linked/Imported/External method - It is used when you want to make changes on multiple pages.
<head> <title>CSS Refresher</title> <link rel="stylesheet" href="/css/styles.css" />
</head>
3. Different kinds of selectors?
A selector in CSS is the bit before the curly bracket, for example, body or .nav-item, that selects the content you want to style. The different kinds of selectors include tags, classes & IDs:
- A tag references an HTML tag
- A class references the class attribute on an HTML tag
- Likewise, an ID references the id attribute on an HTML tag
<!-- tag --> <section> <!-- class --> <div class="button-cta"> <!-- id --> <a href="cta-click">Click me!</a> </div>
</section>
4. What are the limitations of CSS?
- Ascending by selectors is not possible
- Limitations of vertical control
- No expressions
- No column declaration
- Pseudo-class not controlled by dynamic behavior
- Rules, styles, targeting specific text not possible
5. What is CSS flexbox?
It allows you to design a flexible responsive layout structure without using any float or positioning property of CSS. To use CSS flexbox you need to define a flex container initially.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: #f4b042;
}
.flex-container > div {
background-color: #d60a33;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<p> Example of <em>flex</em>box.</p>
</body>
</html>
6. What is the difference between padding and margin?
In CSS, the margin is the property by which we can create space around elements. We can even create space to the exterior defined borders.
7. What is a CSS pseudo-class?
It is a class that is used to define a special state of an HTML element.
This class can be used by styling an element when a user snooped over it and also it can style an HTML element when it gets the focus.
selector:pseudo-class {
property:value;
}
8. Explain the concept of pseudo-elements in CSS?
It is a feature of CSS which is used to style the given parts of an element.
selector::pseudo-element {
property:value;
}
9. What are attributes and how are they used?
You already know about classes, which means you already know about attributes, seeing as a class is just one of the many attributes that HTML tags can have. There are a few that apply to all tags, like class and id, but a lot of tags have their own ones. For example, input tags can have a type (text, number, radio, etc) and a tags can have href.
You can target elements with particular attributes by using square brackets: [attribute="value"]. For example, you can target all input fields that are of type radio like so:
input[type="radio"] {
background-color: #eee;
}
10. What is the purpose of the z-index and how is it used?
The z-index helps to specify the stack order of positioned elements that may overlap one another. The z-index default value is zero and can take on either a positive or negative number.
An element with a higher z-index is always stacked above than a lower index.
Z-Index can take the following values:
- Auto: Sets the stack order equal to its parents.
- Number: Orders the stack order.
- Initial: Sets this property to its default value (0).
- Inherit: Inherits this property from its parent element.
Conclusion
This interview question and answer list will help you to crack the Web developer interview for fresher as well as experience level. These are the frequent questions asked in the interview.