Introduction
CSS stands for Cascading Style sheet.CSS is a presentation language that is used to format, layout, and style documents that are in HTML. CSS can be used to change the border, color, backgrounds, margins, fonts, icons, padding, and many other properties. CSS is the most used language on the web; the reason behind this is that it makes web pages more presentable.
In this blog, we have consolidated the top 30 CSS interview questions. But before that, we will discuss what CSS is.
Beginner-Level CSS Interview Questions
1. Name some CSS Frameworks.
CSS framework is a library used to design a website easily, and more functional frameworks come with more features and additional javascript-based functions. Some of them are Foundation, Blueprint, Bootstrap, Gumby, etc.
2. What are the different types of CSS?
The different types of CSS are-
Inline- It is used to style a specific HTML element.
Embedded- Also known as Internal CSS, it is used to add <style> tag in the <head> section of HTML.
Linked- Also known as External CSS, it is used to link the webpage to an external .css file.
3. Define Universal Sector.
The universal selector selects all the elements and applies the CSS properties to them.
Syntax:
* { style properties }
Example:
* {
color: blue;
}4. What is the CSS Ruleset?
A CSS ruleset is used to apply a set of properties with some definite values to a single or a specific set of elements in the linked HTML page.
There are two parts of the CSS ruleset-
Declaration Block- Contain one or more declarations that are separated by semicolon and specify the CSS property and property's value applied to the element.
Selector- Indicates the HTML element that is needed to be styled.
5. What are the elements of the CSS Box Model?
The CSS box model is used to create the design and layout of the web pages. The box contains multiple properties like Content, Padding, Border, and Margin.
Content- The text and the images appear in the content of the box.
Padding- Clears an area around the content.
Border- It is a border that goes around the padding and content.
Margin- Clears an area outside the border.
Both padding and margin are transparent.
6. What are the advantages of using CSS?
Below are some of the advantages of CSS-
Multiple device compatibility
Better website speed
Easy to maintain
Flexible positioning of design elements
Offline Browsing
7. What is VH/VW in CSS?
VH stands for viewport height, and VW stands for viewport width. They are used to measure CSS units. It is used to improve the responsiveness of the design. The measure VW is equal to 1/100 of the width of the viewport. Similarly, VH is equal to 1/100 of the height of the viewport.
8. What are the different components of CSS style?
The components of CSS style are:
Selectors- The target is a class name, element name, and id name.
Property- The name of the attribute to be styled like border, background color, position, etc.
Values- values allocated to the property.
9. What is the difference between a class and an ID?
Class is an attribute that defines a group of HTML elements to apply unique styling and formatting to those elements. Class is not unique and has multiple elements.
The ID selectors style the element with the specified ID. ID is unique, and it can be assigned to a single element.
10. Is it possible to make a class selector for a particular elements? If so how?
Yes, it is possible to make a class selector for a particular element- write a period (.) character, followed by the name of the class.
Also see, Power Electronics Interview Questions
Intermediate Level CSS Interview Questions
11. How to use External Style Sheet?
An external style sheet defines the style for many HTML pages.
Add a link to the <head> section of each HTML page to use external style sheet.
Example:
<head>
<link rel=”stylesheet” href=”mystyles.css”>
</head>12. How to use grouping in CSS?
Grouping is used for applying CSS styles for more than one HTML element, and this can be done with a single declaration.
Example:
h2,h3
{
Color: #FFFFFF;
}13. What is the difference between reset and normalize CSS?
Reset CSS: It aims to remove all built-in browser styling. For example, margins, paddings, and font sizes of all elements are reset to be the same.
Normalize CSS: It aims to make built-in browser styling consistent across browsers and correct bugs for common browser dependencies.
14. Define gradients in CSS.
The gradient is a property of CSS that allows displaying smooth transformation between more than one specified color.
There are three types of gradients:
Linear- Goes down/up/left/right/diagonally
Radial- Defined by the center
Conic- Rotated around a center point
15. What is the use of the “float” property in CSS?
The float property allows an HTML element to be positioned horizontally. It can only take “left” or “right” values.
Example:
h1,h2
{
Float: left;
}16. Explain the different types of selectors in CSS?
A CSS selector is a string that identifies the elements to which a particular CSS property is applied. The different types of selectors are:-
- Universal Selector: The universal selector selects all the elements and applies the CSS properties to them.
- Element Type Selector: It matches one or more HTML elements of the same element type.
- ID Selector: It matches the HTML element with an ID attribute the same as the selector value.
- Class Selector: It matches all page elements with their class attribute same as the selector value.
- Descendant Combinator: The descendant combinator combines two or more selectors so that elements can be selected more specifically. It selects all HTML elements: children, grandchildren, great-grandchildren, and so on.
- Child Combinator: A child combinator targets immediate child elements of a parent element.
- General Sibling Combinator: It matches elements based on sibling relationships. The selected elements stay beside each other in the HTML document.
- Adjacent Sibling Combinator: It targets an element that must be an immediate sibling.
- Attribute Selector: It targets elements based on HTML attributes' presence and/or value.
- Pseudo-class: It uses a colon character to identify a pseudo-state that an element might be in, for example, the stage of being hovered.
Style Code:
<style>
/* universal selector */
* {
color: blue;
}
/* element type selector */
p {
font-weight: 900;
}
/* id selector */
#idElement {
color: green;
}
/* class selector */
.classElement {
padding: 20px;
width: 120px;
height: 50px;
background-color: green;
text-align: center;
border: 2px solid blue;
margin: 10px;
color: white;
align-items: center;
display: flex;
}
/* descendant combinator */
#container > .classElement {
background-color: yellow;
color: black;
}
/* child combinator */
div > p {
font-size: 1.2rem;
}
/* general sibling combinator */
h1 ~ p {
text-align: center;
}
/* adjacent sibling combinator */
p + p {
text-indent: 2.4em;
margin-bottom: 0;
}
/* attribute selector */
input[type="text"] {
background-color: black;
color: white;
font-weight: bold;
font-size: 1.4rem;
width: 200px;
}
/* Pseudo-class */
h1:hover {
background-color: red;
}
</style>
Body Code:
<body>
<h1>CSS Selector</h1>
<p>Element type Selector</p>
<p id = "idElement">ID Selector</p>
<div class="classElement">Class Element 1</div>
<div class="classElement"><p>Class Element 2</p></div>
<div class="classElement">Class Element 3</div>
<div id = "container">
<div class="classElement">Class Element 4</div>
<div class="classElement"><p>Class Element 5</p></div>
</div>
<p>Adjacent sibling combinator</p>
<p>Adjacent sibling combinator</p>
<input type="text" placeholder = "Attribute Selector"/>
</body>
Output:
17. What are the different ways to hide the element using CSS?
The different ways to hide the element using CSS are:
(display: none)- The element will not exist in the DOM if this property is used and it is not available for screen users.
(visibility: hidden)- The element will be present in the DOM bus is not shown on the screen, and it is available to the screen users.
(position: absolute)- Make it available outside the screen.
18. Explain browser style sheets, user style sheets, and author style sheets in brief.
Browser style sheets: The browsers, by default, apply style sheets to all web pages. This style sheet varies from browser to browser. Common characteristics in all browser style sheets include black text, blue links, purple visited links, etc. The author style sheet overrides the browser's style sheet.
User style sheets: Most browsers allow users to set their style sheets within their browser. These style sheets will override the browser's default style sheets - for that user only.
Author style sheets: The style sheet created by the developer is the author style sheet. Choosing fonts, colors, etc., in CSS is done using author style sheets.
19. What do CSS Custom properties variables mean?
Custom properties are also called CSS variables or cascading variables, and they are defined by users that contain some specific values to be reused throughout a document. -- notion is used to set the value, and the values are accessed using the var() function.
20. Mention the difference between the nth-child() and nth-of-type() selectors?
The nth-child() pseudo-class matches an element based on a number, where the number represents the number of siblings that exist before the element in the document tree.
The nth-of-type() pseudo-class matches an element based on a number, where the number represents the element's position within only those of its siblings of the same element type.
Style Code:
p {
font-size: 2rem;
font-weight: bold;
}
/* works if the second child element is of type p */
p:nth-child(2) {
color: red;
}
/* does not work as the fourth child element is not of type p */
p:nth-child(4) {
color: blue;
}
/* applied to second p element */
p:nth-of-type(2) {
color: green;
}
Body Code:
<h1>A</h1>
<p>B</p>
<p>C</p>
<h1>D</h1>
<p>E</p>
Output:
Advanced Level CSS Interview Questions
21. Name media types allowed by CSS.
Media type specifies how a document is to be presented on different media. Given below is a list of various media types−
- All- Used for all media type devices.
- Aural- Used for speech and sound synthesizers.
- Braille- Used for braille tactile feedback devices.
- Embossed- Used for paged braille printers.
- Handheld- Used for small or handheld devices — usually small screen devices such as mobile phones or PDAs.
- Print- Used for printers.
- Projection- Used for projected presentations, for example projectors.
- Screen- Used primarily for color computer screens.
- Tty- Used for media using a fixed-pitch character grid — such as teletypes, terminals, or portable devices with limited display capabilities.
- Tv- Used for television-type devices — low resolution, color, limited-scrollability screens, sound available.
22. How does !important work in CSS?
!important gives the highest priority to the style rule and overrides the cascaded property.
Style Code:
p {
font-size: 2rem;
font-weight: bold;
color: red;
}
.important {
color: blue !important;
}
Body Code:
<p>Coding</p>
/* color is blue instead of red */
<p class="important">Ninjas</p>
Output:
23. What are the benefits of CSS Sprites?
CSS image sprites are used for merging multiple images into a single larger image. The main advantages of using sprites are:
- Reduces the number of HTTP requests to get data of multiple images as they are acquired only by sending a single request.
- Helps in downloading assets in advance that help display icons or images upon hover or other pseudo-states.
- The browser makes separate calls to get the image for each of them when there are multiple images. Using sprites, the images are combined in one, and we can call for that image using one call.
24. Explain the difference between margin and padding?
Margin is applicable outside the element and affects the distance with the nearby elements.
Padding is applicable inside elements and affects how far the element's content is away from the border.
25. Define z-index
Z-index is used to specify the stack order of elements that overlap each other. Its default value is zero and can take both negative and positive values. A higher z-index value is stacked above the lower index element. It takes the following values- auto, number, initial, and inherit.
26. What are the limitations of CSS?
Some of the limitations of CSS include difficulties adapting to a browser as different browsers tend to interpret the CSS differently, limited layout options, inability to generate dynamic content, inability to perform any logical operations, etc.
27. What is a CSS Preprocessor?
A CSS Preprocessor extends the basic functionalities of CSS as it is a kind of scripting language. Saas, Less and Stylus are some of the popular CSS preprocessors. It allows you to use various programming elements like functions, variables, code nesting, inheritance etc.
28. What is the difference between inline, inline-block, and block?
The inline elements dont always start from a new line. They can start from the same line beside the contents and tags. Some of the inline elements include <a>, <span> , <strong>, <img>, <cite>, <button>,etc.
while
The inline-block elements are similar to inline elements but we can apply padding, margins, and set their height and width.
while
The block elements always begin from a new line. Examples of block elements include <div>, <p>, etc. They need space for an entire row or width.
29. What are Pseudo elements?
In CSS, the pseudo elements style specific parts of an element. For example, you can capitalize the first letter of an element or insert some content before, or after some specified element.
The syntax of a pseudo element can be seen as:
selector::pseudo-element {
property: value;
}
Some of the pseudo-elements defined in CSS include:
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::file-selector-button, etc.
30. What are Pseudo classes?
In CSS, a pseudo-class defines a special state of an element.
The syntax of a pseudoclass is as follows:
selector:pseudo-class {
property: value;
}
You can express a pseudo class adding a colon (:) after a selector in CSS, followed by a pseudo-class such as "hover", "focus", or "active", like this:
a:hover { /* style */ }.
Some of the examples of pseudoclasses include:
- :fullscreen
- :modal
- :picture-in-picture
- :autofill, etc.
Frequently Asked Questions
What are basic questions of CSS interview?
The basic questions of the CSS interview will be defining CSS, what are the types of selectors in CSS, what are the elements of the CSS Box Model, the difference between CSS3 and CSS2, give advantages of CSS, and many more.
What type of questions are in CSS?
The type of questions that are asked more frequently in CSS are What are the types of CSS? What uses of an embedded style sheet? How to use selectors in CSS, Which stage is used to add border images to an HTML element, etc.
What is CSS used for?
CSS is a style sheet or presentation language that stands for Cascading Style Sheet and is used to Style HTML documents. CSS is designed specifically to separate the presentation and content, including color, fonts, and layout.
Conclusion
In this article, we discussed the top 30 CSS interview questions for 2023. We started with the beginner-level questions and then discussed intermediate level questions and then advanced-level questions. We hope that we have expanded your knowledge of CSS Interview questions.
Check out more articles based on interview questions:
