A list of top frequently asked CSS interview questions and answers are given below.
1) What is CSS?
CSS, which stands for Cascading Style Sheets, is a widely used styling language employed in conjunction with HTML for website design. Additionally, it is compatible with various XML documents such as plain XML, SVG, and XUL. Further information...
2) What is the origin of CSS?
SGML (Standard Generalized Markup Language) serves as the foundation of CSS. It is a language responsible for specifying the structure of markup languages.
3) What are the different variations of CSS?
Following are the different variations of CSS:
- CSS1
- CSS2
- CSS2.1
- CSS3
- CSS4
4) How can you integrate CSS on a web page?
There are three methods to integrate CSS on web pages.
- Inline method - It is used to insert style sheets in HTML document
- Embedded/Internal method - It is used to add a unique style to a single document
- Linked/Imported/External method - It is used when you want to make changes on multiple pages.
- Bandwidth
- Site-wide consistency
- Page reformatting
- Accessibility
- Content separated from presentation
- 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 are the advantages of CSS?
6) What are the limitations of CSS?
7) What are the CSS frameworks?
CSS frameworks are the preplanned libraries which make easy and more standard compliant web page styling. The frequently used CSS frameworks are: -
- Bootstrap
- Foundation
- Semantic UI
- Gumby
- Ulkit
8) Why background and color are the separate properties if they should always be set together?
There are two factors contributing to this situation:
- It improves the readability of style sheets. The background property in CSS is intricate, and when intertwined with color, it adds another layer of complexity.
- Color is a property that is inherited, unlike the background property. This distinction can lead to additional confusion.
9) What is Embedded Style Sheet?
An Embedded style sheet is a technique for specifying CSS styles in conjunction with HTML. The entire stylesheet can be incorporated within an HTML document by utilizing the STYLE element. Additional information can be found below.
<style>
body {
background-color: linen;
}
h1 {
color: red;
margin-left: 80px;
}
</style>
10) What are the advantages of Embedded Style Sheets?
- You can create classes for use on multiple tag types in the document.
- You can use selector and grouping methods to apply styles in complex situations.
- No extra download is required to import the information.
11) What is a CSS selector?
It is a string that identifies the elements to which a particular declaration apply. It is also referred as a link between the HTML document and the style sheet. It is equivalent of HTML elements. There are several different types of selectors in CSS: -
- CSS Element Selector
- CSS Id Selector
- CSS Class Selector
- CSS Universal Selector
- CSS Group Selector
12) Name some CSS style components.
Some CSS Style components are:
- Selector
- Property
- Value
13) What is the use of CSS Opacity?
The CSS opacity attribute is employed to define the level of transparency of a particular element. Put simply, it determines the clearness of the image. From a technical perspective, Opacity refers to the extent to which light can pass through an object. For instance:
<style>
img.trans {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
</style>
14) Explain universal selector.
The universal selector matches any element type name instead of targeting specific element types.
<style>
* {
color: green;
font-size: 20px;
}
</style>
15) Which command is used for the selection of all the elements of a paragraph?
The p[lang] directive is employed to choose all elements within a paragraph.
16) What is the use of % unit?
It is used for defining percentage values.
17) Name the property used to specify the background color of an element.
The background-color attribute is utilized to define the background color of the element. For instance:
<style>
h2,p{
background-color: #b0d4de;
}
</style>
18) Name the property for controlling the image repetition of the background.
The background-repeat attribute duplicates the background image both horizontally and vertically. Certain images may be duplicated solely in a horizontal or vertical direction.
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
19) Name the property for controlling the image position in the background.
The background-position attribute is employed to specify the starting placement of the background image. By default, the background image is positioned at the upper-left corner of the web page.
You can set the following positions:
- center
- bottom
- left
- right
background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
20) Name the property for controlling the image scroll in the background.
The background-attachment attribute determines whether the background image remains stationary or scrolls along with the page content within the browser window. When set to fixed, the background image remains in place while the rest of the content scrolls during browsing. For a practical illustration, consider a scenario involving a fixed background image.
background: white url('bbb.gif');
background-repeat: no-repeat;
background-attachment: fixed;
21) What is the use of ruleset?
The ruleset is employed to recognize the possibility of connecting selectors with other selectors. It consists of two main components:
- Selector - This specifies the HTML element that you intend to customize.
- Declaration Block - Within this block, you can include multiple declarations, each separated by a semicolon.
22) What is the difference between class selectors and id selectors?
A class selector is applied to a group of elements, whereas an id selector is assigned to a unique single element, distinguishing it from the rest.
CSS Class Selector
<style>
.center {
text-align: center;
color: blue;
}
</style>
CSS Id Selector
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
More details...
23) What are the advantages of External Style Sheets?
- You can create classes for reusing it in many documents.
- By using it, you can control the styles of multiple documents from one file.
- In complex situations, you can use selectors and grouping methods to apply styles.
24) What is the difference between inline, embedded and external style sheets?
Inline Style Sheet is utilized to format a limited section of code.
Syntax
<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>
Embedded style sheets are inserted within the <head>...</head> tags.
Syntax
<style>
body {
background-color: linen;
}
h1 {
color: red;
margin-left: 80px;
}
</style>
By utilizing the "External" option, you can easily implement consistent styles across all pages on your website by making modifications to a single style sheet.
Syntax
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
25) What is RWD?
Responsive Web Design (RWD) refers to a method that ensures a webpage adapts seamlessly to various screen sizes and devices, such as smartphones, tablets, desktops, and laptops. This approach eliminates the need to design separate pages for individual devices.
26) What are the benefits of CSS sprites?
When a webpage contains numerous images that require individual HTTP requests, resulting in longer loading times, the technique of CSS sprites is employed to enhance loading efficiency. CSS sprites consolidate multiple small images into a single image, minimizing the quantity of HTTP requests and consequently decreasing the loading duration.
27) What is the difference between logical tags and physical tags?
- Physical tags are referred to as presentational markup while logical tags are useless for appearances.
- Physical tags are newer versions, on the other hand, logical tags are old and concentrate on content.
28) What is the CSS Box model and what are its elements?
The CSS box model is employed to specify the appearance and arrangement of CSS elements.
The elements are:
- Margin - It removes the area around the border. It is transparent.
- Border - It represents the area around the padding
- Padding - It removes the area around the content. It is transparent.
- Content - It represents the content like text, images, etc.
29) What is the float property of CSS?
The CSS float attribute positions an image to the left or right, allowing text to flow around it without affecting preceding elements.
To grasp its intention and beginnings, we can examine its print layout. Within the print layout, an image is positioned on the page so that text flows around it as required.
Its web design closely resembles a print layout as well.
30) How to restore the default property value using CSS?
In summary, there is no straightforward method to reset to the default settings that a browser employs.
The most suitable choice is to utilize the 'initial' property value, which reinstates the original CSS values instead of relying on the default styles set by the browser.
31) What is the purpose of the z-index and how is it used?
The z-index property is essential for determining the stacking order of positioned elements that might overlap on a webpage. By default, the z-index is set to zero, but it can be assigned a positive or negative numerical value for proper layering.
An element with a higher z-index is consistently positioned above an element with 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.
32) Explain the difference between visibility: hidden and display: none?
Using visibility: hidden will conceal the element from view, yet it will still reserve space and impact the document's structure.
<!DOCTYPE html>
<html>
<head>
<style>
h1.vis {
visibility: visible;
}
h1.hid {
visibility: hidden;
}
</style>
</head>
<body>
<h1 class="vis">It is visible</h1>
<h1 class="hid">It is hidden</h1>
<p>Note - Second heading is hidden, but it still occupy space.</p>
</body>
</html>
Using "display: none" conceals the element without taking up any space, ensuring that the document layout remains unaffected.
<!DOCTYPE html>
<html>
<head>
<style>
h1.vis {
display: block;
}
h1.hid {
display: none;
}
</style>
</head>
<body>
<h1 class="vis">It is visible</h1>
<h1 class="hid">It is hidden</h1>
<p>Note - Second heading is hidden and not occupy space.</p>
</body>
</html>
33) What do you understand by W3C?
<style>
body {
background-color: linen;
}
h1 {
color: red;
margin-left: 80px;
}
</style>
34) What is tweening?
It involves creating intermediary frames between two images.
It creates the perception that the initial image has seamlessly transitioned into the subsequent one.
It is a crucial technique employed in various forms of animations.
In CSS3, the Transforms module (including matrix, translate, rotate, and scale) enables the implementation of tweening effects.
35) What is the difference between CSS2 and CSS3?
The primary contrast between CSS2 and CSS3 lies in the fact that CSS3 is segmented into various categories referred to as modules. In contrast to CSS2, multiple browsers provide support for CSS3 modules.
In addition, CSS3 introduces fresh General Sibling Combinators that are tasked with selecting sibling elements associated with specified elements.