CSS Interview Questions And Answers in 2022

1.
What is CSS?
  CSS is the acronym for "Cascading Style Sheet". CSS makes the appearance and structure of web pages more interactive. By using CSS it becomes easy to provide and manage the style definition of HTML elements. Like by using CSS, we can set the web page background color, border, set text color, font size and much more.
2.
What are the advantages of CSS?
  1. With the help of CSS, we can set the HTML element's style of all HTML pages in a single css file. So it saves time and maintenance is also very easy.
2. CSS is platform independent, It supports in almost all popular web browsers.
3. CSS has rich set of attributes than HTML. It helps to make the web page more interactive.
3.
Who invented CSS and when?
  CSS was invented by Hakon Wium Lie. It was first released on December 17th, 1996. It is maintained by a group of people within the W3C called the CSS Working Group.




4.
Define an ID selector with example?
  To define a style on an element based on that element id is called Id Selector. In the given example, input element has an id name 'btn'. To set the style on the button, we have specified the id as the selector, prefixed with the hash (#).

<style type="text/css">
#btn {   background-color: blue; }
</style>
<input type="button" value="Submit" id="btn" />
5.
Define attribute selector with example?
  An attribute selector is based on the attribute of the element. In the given example, we have set the text color on the text type input element. This is applied to all text type input elements.

<style type="text/css">
input[type = "text"]{   
color: #000000; 
}
</style>
6.
How to include a CSS file in the current style sheet?
  We can include a CSS file in the current style sheet by using @import rule. The @import rule must be included at the top of style sheet.

<style type="text/css">
@import 'menu.css';
@import 'footer.css';
h1{ color : blue;}
</style>
7.
Define some background properties?
  The background-color property is used to set the background color of an element.
The background-image property is used to set the background image of an element.
The background-repeat property is used to control the repetition of an image in the background.
The background-position property is used to control the position of an image in the background.
The background-attachment property is used to control the scrolling of an image in the background.
8.
Which text property is used to indent text of a paragraph?
  The text-indent property is used to set indentation of a paragraph.
9.
Which text property is used to set shadow around a text?
  The text-shadow property is used to set the shadow around a text.

<p style="text-shadow:4px 4px 8px blue;">
If your browser supports the
CSS text-shadow property, this text will have a blue shadow.
</p>
10.
What are the different properties of a hyperlink?




  These are the different properties of a hyperlink

:link - link property signifies unvisited hyperlinks.
:visited - visited property signifies visited hyperlinks.
:hover - hover signifies an element that currently has the user's mouse pointer hovering over it.
:active - active signifies an element on which the user is currently clicking.
11.
What is border-collapse property specify?
  The border-collapse property specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.

<style type="text/css">
table, td { border : 1px solid black;}
table.one {border-collapse:collapse;}         
table.two {border-collapse:separate;}
</style>
<table class="one">
<caption>Collapse Border Example
<tr>
<td class="a"> Cell A Collapse Example</td></tr>
<tr>
<td class="b"> Cell B Collapse Example
</td></tr>     
</table>
<table class="two">        
<caption>Separate Border Example         
<tr>
<td class="a"> Cell A Separate Example
</td></tr>       
<tr>
<td class="b"> Cell B Separate Example</td></tr>
</table>
12.
What is the use of padding property?
  The padding property allows you to specify how much space should appear between the content of an element and its border. The value of this attribute should be either in length, in percentage, or the word inherit.
13.
What is the use of Cursor property?
  The cursor property of CSS specifies the mouse cursor appearance when it point over an element.
Example - auto, crosshair, default, pointer etc.
14.
How to style a line in different ways?
  The outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element.

none: No border. (Equivalent of outline-width:0;)
solid: Outline is a single solid line.
dotted: Outline is a series of dots.
dashed: Outline is a series of short lines.
double: Outline is two solid lines.
groove: Outline looks as though it is carved into the page.
ridge: Outline looks the opposite of groove.
inset: Outline makes the box look like it is embedded in the page.
outset: Outline makes the box look like it is coming out of the canvas.
hidden: Same as none.
15.
How to set min and max height of a box?
  By using min-height and max-height properties, we can specify a minimum height and maximum height of an HTML element respectively.
16.
Define visibility property?
  The visibility property allows us to hide an element from view. We can use this property along with JavaScript to create a very complex menu and very complex web page layouts.

<p style="visibility:hidden;">
This paragraph should not be visible.
</p>

17.
What is pseudo class?
  CSS pseudo-class is used to add special effects to some selectors. We do not need to use JavaScript or any other script to use these effects.
Syntax of pseudo-class -
selector: pseudo-class {property: value}

Example - :link, :visited, :hover, :active, :first-child, :lang
<style type="text/css"> 
a:visited 
{
color: #006600
}      
</style>




18.
How many ways to integrate CSS in a web page?
  We can integrate CSS in three ways -

Inline - Styles are defined inside the HTML element.
Example-
<p style='color: red;'>

 


External - In this all the styles are defined in a separate css file which is linked to the webpage.
Example-
<link rel="stylesheet" type="text/css" href="/etutorialspoint/style.css" />

Internal - Internal styles are defined in the head section of the HTML document. Styles are defined within the style opening and closing tags.
Example-
<style media="screen" type="text/css">
p{ color: blue; }
</style>
19.
What is float property?
  The float property is used to positioning the HTML element to left, right or none.

.content { 
	float: right;
}
.menu{
float: left; 
}
20.
How to comment CSS code?
  These are the different ways to comment code in CSS.
1. Single Line Comment -
// This is single line comment.

2. Multi Line Comment -
/* This is multiline comment code */




21.
How to set background image in body element?
  We can set background image by using the background-image property.
body { 
	background-image : url( backgroundimage.jpg);
}
22.
How to repeat background image ?
  The background-repeat property controls the tiling of the background image. This property can be set to repeat to tile the image horizontally and vertically. The repeat-x is used to repeat image only horizontally and the repeat-y is used to repeat image only vertically.
23.
How to set dotted border of an element?
  The dotted attribute of the border-style property is used to set dotted border of an element.
div.box {
border-style: dotted; 
border-width: 1px;
border-color: blue;
}
24.
How to set border color?
 
div.box { border: 1px solid blue; }
25.
How to make text input border bottom in dashed format?
 
<style type="text/css">
#dashed{ border-bottom: dashed;
border-bottom-width: 1px solid black;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
}
</style>
<input type="text" name='first_name' id='dashed' />




26.
What is the difference between margin and padding?
  Margin defines the space between other elements and outside the element border, while padding defines the space inside of the element.
27.
What is the role of important declaration used in the CSS?
  Important declaration is a very powerful expression. If same, the CSS property applied to the same element is declared twice or more, than to make one declaration more effective, important keyword is added at the end of css property.
Example -
p {font-size: 10px;}
p{font-size:12px  !important; }
28.
How to add image in place of the bullet in the UL LI element?
 
<style type="text/css">
ul {
list-style-image:url('arrow.jpg'); } </style>

<ul> <li>Delhi</li> <li>Mumbai</li> <li>Pune</li> </ul>




29.
Which css property is used to show/hide the content?
  The CSS display property is used to show/hide content. This is commonly used with javascript.
30.
Which CSS property is used to increase space between two letters?
  The letter-spacing property is used to increase or decrease space between each letter in a text.
31.
Which CSS property is used to increase space between words?
  The word-spacing property is used to increase or decrease space between words.
32.
How to set CSS based on viewport size?
  The media queries are used to apply css based on viewport size.
Example-
To apply css on between device screen size 400px and 700px.
@media screen and (min-width: 400px) and (max-width: 700px) {
 h1 {  color: blue; } 
 }
33.
Define CSS3 Animation?




  CSS3 animation is used to animate the objects without using any animation application like flash etc.
34.
Define CSS3 fonts?
  CSS3 fonts is advanced feature of CSS3 which is used to improve the content font like - font-style, font-variant, font-weight, font-size, line-height, and font-family.
35.
What is text-overflow?
  The CSS3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.
36.
Define word-wrap?
  The word-wrap is a text effect used to break the continued text in another line.
37.
Define rotate method with its parameter type?
  Rotate method is used to rotate an object depending on its value. It accepts two types of values, one is positive for clockwise rotation and other is negative for anti-clock wise rotation.

#obj_rotate { 
transform: rotate(60deg);
-ms-transform: rotate(60deg);
-webkit-transform: rotate(60deg);




38.
What is the role of @font-face rule to import fonts?
  The @font-face rule is used to add a specific font, for this we need to provide a link to specific font so that it can be downloaded and used in the style sheet.

@font-face {
	Font-family : myfont;
	Src: url("gijmo.ttf"),
	       url("header.ttf");
}
39.
How to add transparency using css?
  By using CSS opacity property, we can control the amount of transparency on an element. The opacity value range is between 0.0 to 1.0, where 0.0 is invisible and 1.0 is opaque.




40.
What are the font-size measurement units?
  These are the following font-size measurement units -
em - A relative measurement multiplier of the parent element's computed font size.
pt - An absolute measurement point unit, 72 points per inch.
pc - An absolute measurement pica unit, 12 points per pica
in - An absolute measurement inch unit.
mm - An absolute measurement millimeter unit.
cm - An absolute measurement centimeter unit.
41.
What is fixed positioning?
  The element position is calculated much like it is with absolute positioning, but this is always in relation to the browser window.
42.
Define clear property.
  The clear property instructs the browser to place the clear element after the floating elements.
#div6 { background-color: lightgray; clear: both; }
43.
What is transition-duration?
  The transition-duration is used to define the time of corresponding transitions to take effect.
44.
What is Universal Selector?
  The universal selector matches any element type. It can be implied (and therefore omitted) if it isn't the only component of the simple selector.
*.warning {
? declarations
}




45.
How can we apply CSS on group elements?
  We can group selectors using comma (,) separator. In this same style apply to all group elements.
46.
How can we apply style on anchor link?
  By using link pseudo-class, we can add style on the link.
A:link {
	Color: # cccccc;
} 
47.
What is visited pseudo-class?
  The pseudo-class matches link elements that are determined to have been visited.
48.
Define scale() method?
  The scale() method is used to increase or decrease an object size depending on its value passed in the parameter.
49.
Define @charset?
  We use the @charset at-rule to specify the character encoding of an external style sheet. The at-rule must be followed by a quoted string value and a semicolon.
50.
What is @import?
  The @import at-rule is a mechanism for importing one style sheet into another. It should be followed by a URL value and a semicolon.
51.
What is @media?
  We can use the @media at rule to specify that one or more rule sets in a style sheet will apply only to certain media types.




CSS Related Articles

CSS Simple Menu Navigation Bar
Simple Show Hide Menu Navigation
Bootstrap datepicker example
Bootstrap modal popup example on page load
HTML Table Alternate Row Color using PHP
Polling System using PHP, MySQL and Ajax
Star rating system using PHP, jQuery and Ajax

CSS Interview Questions And Answers in 2022

1.
What is CSS?
  CSS is the acronym for "Cascading Style Sheet". CSS makes the appearance and structure of web pages more interactive. By using CSS it becomes easy to provide and manage the style definition of HTML elements. Like by using CSS, we can set the web page background color, border, set text color, font size and much more.
2.
What are the advantages of CSS?
  1. With the help of CSS, we can set the HTML element's style of all HTML pages in a single css file. So it saves time and maintenance is also very easy.
2. CSS is platform independent, It supports in almost all popular web browsers.
3. CSS has rich set of attributes than HTML. It helps to make the web page more interactive.
3.
Who invented CSS and when?
  CSS was invented by Hakon Wium Lie. It was first released on December 17th, 1996. It is maintained by a group of people within the W3C called the CSS Working Group.




4.
Define an ID selector with example?
  To define a style on an element based on that element id is called Id Selector. In the given example, input element has an id name 'btn'. To set the style on the button, we have specified the id as the selector, prefixed with the hash (#).

<style type="text/css">
#btn {   background-color: blue; }
</style>
<input type="button" value="Submit" id="btn" />
5.
Define attribute selector with example?
  An attribute selector is based on the attribute of the element. In the given example, we have set the text color on the text type input element. This is applied to all text type input elements.

<style type="text/css">
input[type = "text"]{   
color: #000000; 
}
</style>
6.
How to include a CSS file in the current style sheet?
  We can include a CSS file in the current style sheet by using @import rule. The @import rule must be included at the top of style sheet.

<style type="text/css">
@import 'menu.css';
@import 'footer.css';
h1{ color : blue;}
</style>
7.
Define some background properties?
  The background-color property is used to set the background color of an element.
The background-image property is used to set the background image of an element.
The background-repeat property is used to control the repetition of an image in the background.
The background-position property is used to control the position of an image in the background.
The background-attachment property is used to control the scrolling of an image in the background.
8.
Which text property is used to indent text of a paragraph?
  The text-indent property is used to set indentation of a paragraph.
9.
Which text property is used to set shadow around a text?
  The text-shadow property is used to set the shadow around a text.

<p style="text-shadow:4px 4px 8px blue;">
If your browser supports the
CSS text-shadow property, this text will have a blue shadow.
</p>
10.
What are the different properties of a hyperlink?




  These are the different properties of a hyperlink

:link - link property signifies unvisited hyperlinks.
:visited - visited property signifies visited hyperlinks.
:hover - hover signifies an element that currently has the user's mouse pointer hovering over it.
:active - active signifies an element on which the user is currently clicking.
11.
What is border-collapse property specify?
  The border-collapse property specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.

<style type="text/css">
table, td { border : 1px solid black;}
table.one {border-collapse:collapse;}         
table.two {border-collapse:separate;}
</style>
<table class="one">
<caption>Collapse Border Example
<tr>
<td class="a"> Cell A Collapse Example</td></tr>
<tr>
<td class="b"> Cell B Collapse Example
</td></tr>     
</table>
<table class="two">        
<caption>Separate Border Example         
<tr>
<td class="a"> Cell A Separate Example
</td></tr>       
<tr>
<td class="b"> Cell B Separate Example</td></tr>
</table>
12.
What is the use of padding property?
  The padding property allows you to specify how much space should appear between the content of an element and its border. The value of this attribute should be either in length, in percentage, or the word inherit.
13.
What is the use of Cursor property?
  The cursor property of CSS specifies the mouse cursor appearance when it point over an element.
Example - auto, crosshair, default, pointer etc.
14.
How to style a line in different ways?
  The outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element.

none: No border. (Equivalent of outline-width:0;)
solid: Outline is a single solid line.
dotted: Outline is a series of dots.
dashed: Outline is a series of short lines.
double: Outline is two solid lines.
groove: Outline looks as though it is carved into the page.
ridge: Outline looks the opposite of groove.
inset: Outline makes the box look like it is embedded in the page.
outset: Outline makes the box look like it is coming out of the canvas.
hidden: Same as none.
15.
How to set min and max height of a box?
  By using min-height and max-height properties, we can specify a minimum height and maximum height of an HTML element respectively.
16.
Define visibility property?
  The visibility property allows us to hide an element from view. We can use this property along with JavaScript to create a very complex menu and very complex web page layouts.

<p style="visibility:hidden;">
This paragraph should not be visible.
</p>

17.
What is pseudo class?
  CSS pseudo-class is used to add special effects to some selectors. We do not need to use JavaScript or any other script to use these effects.
Syntax of pseudo-class -
selector: pseudo-class {property: value}

Example - :link, :visited, :hover, :active, :first-child, :lang
<style type="text/css"> 
a:visited 
{
color: #006600
}      
</style>




18.
How many ways to integrate CSS in a web page?
  We can integrate CSS in three ways -

Inline - Styles are defined inside the HTML element.
Example-
<p style='color: red;'>

 


External - In this all the styles are defined in a separate css file which is linked to the webpage.
Example-
<link rel="stylesheet" type="text/css" href="/etutorialspoint/style.css" />

Internal - Internal styles are defined in the head section of the HTML document. Styles are defined within the style opening and closing tags.
Example-
<style media="screen" type="text/css">
p{ color: blue; }
</style>
19.
What is float property?
  The float property is used to positioning the HTML element to left, right or none.

.content { 
	float: right;
}
.menu{
float: left; 
}
20.
How to comment CSS code?
  These are the different ways to comment code in CSS.
1. Single Line Comment -
// This is single line comment.

2. Multi Line Comment -
/* This is multiline comment code */




21.
How to set background image in body element?
  We can set background image by using the background-image property.
body { 
	background-image : url( backgroundimage.jpg);
}
22.
How to repeat background image ?
  The background-repeat property controls the tiling of the background image. This property can be set to repeat to tile the image horizontally and vertically. The repeat-x is used to repeat image only horizontally and the repeat-y is used to repeat image only vertically.
23.
How to set dotted border of an element?
  The dotted attribute of the border-style property is used to set dotted border of an element.
div.box {
border-style: dotted; 
border-width: 1px;
border-color: blue;
}
24.
How to set border color?
 
div.box { border: 1px solid blue; }
25.
How to make text input border bottom in dashed format?
 
<style type="text/css">
#dashed{ border-bottom: dashed;
border-bottom-width: 1px solid black;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
}
</style>
<input type="text" name='first_name' id='dashed' />




26.
What is the difference between margin and padding?
  Margin defines the space between other elements and outside the element border, while padding defines the space inside of the element.
27.
What is the role of important declaration used in the CSS?
  Important declaration is a very powerful expression. If same, the CSS property applied to the same element is declared twice or more, than to make one declaration more effective, important keyword is added at the end of css property.
Example -
p {font-size: 10px;}
p{font-size:12px  !important; }
28.
How to add image in place of the bullet in the UL LI element?
 
<style type="text/css">
ul {
list-style-image:url('arrow.jpg'); } </style>

<ul> <li>Delhi</li> <li>Mumbai</li> <li>Pune</li> </ul>




29.
Which css property is used to show/hide the content?
  The CSS display property is used to show/hide content. This is commonly used with javascript.
30.
Which CSS property is used to increase space between two letters?
  The letter-spacing property is used to increase or decrease space between each letter in a text.
31.
Which CSS property is used to increase space between words?
  The word-spacing property is used to increase or decrease space between words.
32.
How to set CSS based on viewport size?
  The media queries are used to apply css based on viewport size.
Example-
To apply css on between device screen size 400px and 700px.
@media screen and (min-width: 400px) and (max-width: 700px) {
 h1 {  color: blue; } 
 }
33.
Define CSS3 Animation?




  CSS3 animation is used to animate the objects without using any animation application like flash etc.
34.
Define CSS3 fonts?
  CSS3 fonts is advanced feature of CSS3 which is used to improve the content font like - font-style, font-variant, font-weight, font-size, line-height, and font-family.
35.
What is text-overflow?
  The CSS3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.
36.
Define word-wrap?
  The word-wrap is a text effect used to break the continued text in another line.
37.
Define rotate method with its parameter type?
  Rotate method is used to rotate an object depending on its value. It accepts two types of values, one is positive for clockwise rotation and other is negative for anti-clock wise rotation.

#obj_rotate { 
transform: rotate(60deg);
-ms-transform: rotate(60deg);
-webkit-transform: rotate(60deg);




38.
What is the role of @font-face rule to import fonts?
  The @font-face rule is used to add a specific font, for this we need to provide a link to specific font so that it can be downloaded and used in the style sheet.

@font-face {
	Font-family : myfont;
	Src: url("gijmo.ttf"),
	       url("header.ttf");
}
39.
How to add transparency using css?
  By using CSS opacity property, we can control the amount of transparency on an element. The opacity value range is between 0.0 to 1.0, where 0.0 is invisible and 1.0 is opaque.




40.
What are the font-size measurement units?
  These are the following font-size measurement units -
em - A relative measurement multiplier of the parent element's computed font size.
pt - An absolute measurement point unit, 72 points per inch.
pc - An absolute measurement pica unit, 12 points per pica
in - An absolute measurement inch unit.
mm - An absolute measurement millimeter unit.
cm - An absolute measurement centimeter unit.
41.
What is fixed positioning?
  The element position is calculated much like it is with absolute positioning, but this is always in relation to the browser window.
42.
Define clear property.
  The clear property instructs the browser to place the clear element after the floating elements.
#div6 { background-color: lightgray; clear: both; }
43.
What is transition-duration?
  The transition-duration is used to define the time of corresponding transitions to take effect.
44.
What is Universal Selector?
  The universal selector matches any element type. It can be implied (and therefore omitted) if it isn't the only component of the simple selector.
*.warning {
? declarations
}




45.
How can we apply CSS on group elements?
  We can group selectors using comma (,) separator. In this same style apply to all group elements.
46.
How can we apply style on anchor link?
  By using link pseudo-class, we can add style on the link.
A:link {
	Color: # cccccc;
} 
47.
What is visited pseudo-class?
  The pseudo-class matches link elements that are determined to have been visited.
48.
Define scale() method?
  The scale() method is used to increase or decrease an object size depending on its value passed in the parameter.
49.
Define @charset?
  We use the @charset at-rule to specify the character encoding of an external style sheet. The at-rule must be followed by a quoted string value and a semicolon.
50.
What is @import?
  The @import at-rule is a mechanism for importing one style sheet into another. It should be followed by a URL value and a semicolon.
51.
What is @media?
  We can use the @media at rule to specify that one or more rule sets in a style sheet will apply only to certain media types.




CSS Related Articles

CSS Simple Menu Navigation Bar
Simple Show Hide Menu Navigation
Bootstrap datepicker example
Bootstrap modal popup example on page load
HTML Table Alternate Row Color using PHP
Polling System using PHP, MySQL and Ajax
Star rating system using PHP, jQuery and Ajax