Are you preparing for CSS and don’t know where to start? Well, then you are in the right place! In this blog, we have prepared a list of CSS Interview Questions that are most likely to be asked by the interviewers. This helps the students prepare thoroughly for the technical interview.
1. What is the use of Opacity in CSS?
The CSS opacity property is used to specifies the clarity of the image. In technical terms, Opacity is defined as the degree to which background element is allowed to show through an object. For example:
<style>
img.transparent {
opacity: 0.5;
filter: alpha(opacity=32); /* For IE8 and earlier */
}
</style>
2. Name some CSS style components.
Some CSS Style components are:
-
- Selector
- Property
- Value
3. Explain the universal selector.
The universal selector works by matching the names of any of the element type instead of selecting any particular elements of a specific type.
<style>
* {
color: green;
font-size: 20px;
}
</style>
4. Name the property for avoiding image repetition in the background?
The “background-repeat” property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically.
<style>
body {
background-image: url(“water1.png”);
margin-left:100px;
}
</style>
5. Name the property for avoiding scrolling of image in the background.
The background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in the browser window. if you set the background image to fix, then the image will not move during scrolling in the browser. Let’s take an example with the fixed background image.
background: white url(‘water.png’);
background-repeat: no-repeat;
background-attachment: fixed;
6. What is the RGB stream?
RGB is a system of representing a certain colour in CSS. There are three streams in this nomenclature of representing a colour, namely the Red, Green and Blue stream. The intensity of the three colours is represented in numbers ranging from 0 to 256. This allows CSS to have a wide range of colours spreading across the entire spectrum of visible colours.
7. What are CSS Sprites?
CSS sprites combine multiple images into one single larger image. It is a commonly-used technique for icons (Gmail uses it). This is how you could implement it:
- Use a sprite generator that packs multiple images into one and generates the appropriate CSS for it.
- Each image would have a corresponding CSS class with
background-image,background-positionandbackground-sizeproperties defined. - To use that image, add the corresponding class to your element.
8. Mention a few benefits of using CSS Sprites.
CSS sprites come with their own advantages. Here are a few of them –
- Reduce the number of HTTP requests for multiple images (only one single request is required per sprite sheet). But with HTTP2, loading multiple images is no longer much of an issue.
- Advance downloading of assets that won’t be downloaded until needed, such as images that only appear upon pseudo-states{:hover}. Blinking wouldn’t be seen.
9. What is the float property used for in CSS?
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though it still remains a part of the flow (in contrast to absolute positioning). Below is the usage of float
float: none;
float: left;
float: right;
10. Name a few prominent CSS frameworks.
Below are the prominent CSS frameworks in the web development industry today:
- Bootstrap
Bootstrap is the most popular CSS framework for developing responsive and mobile-first websites. The newest version of Bootstrap is Bootstrap (4.4.x) . - Foundation
Foundation is a responsive front-end framework. Foundation provides a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation, and other interface elements, as well as optional functionality provided by JavaScript extensions. - Semantic UI
Semantic UI is a modern front-end development framework, powered by LESS(CSS-preprocessor) and jQuery. It has a sleek, subtle, and flat design look that provides a lightweight user experience. - Ulkit
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
We have a blog of Top 30 CSS Interview Questions that are most likely to be asked by the interviewers. If you want to prepare deeply well for your interviews, you can also visit Technical Interview Questions to learn more. For more updated interview questions you can visit our website www.codingtag.com.
Coding Tag 