CSS Interview Questions And Answers

This article lists top CSS interview questions and answers. CSS stands for Cascading Style Sheets.

What is CSS?


CSS stands for Cascading Style Sheets. CSS is a designing language, used for creating HTML pages that are more attractive and presentable.
 

What are the advantages of using CSS? 

 
There are following advantages of CSS-
  • CSS saves time- We write a CSS once and use it again and again in our HTML projects.
  • Pages load faster- If we use CSS, it speeds up the Web page loading time, because we don't write HTML attributes for every HTML tag.
  • Easy maintenance- If we want to change the design of our Web page, it can be done by only changing it in CSS file.
  • Platform Independence- CSS is platform independent. 

What are the components of a CSS Style?


Components of CSS are listed below-
  • Selector- HTML tag at which style is to be applied.
  • Property- It is a style applied to the element. 
  • Value- It assigns the value to the property.
    CSS Style 

What is a type selector? 


Type selector is a selection HTML tag for applying the style.
 
Example  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5.   
  6.   
  7. h1 {  
  8.     color: lightblue;  
  9.     text-align: left;  
  10. }  
  11.   
  12. p {  
  13.     font-family: verdana;  
  14.     font-size: 20px;  
  15. text-align: center;  
  16. }  
  17. </style>  
  18. </head>  
  19. <body>  
  20.   
  21. <h1>c# corner</h1>  
  22. <p>community for developer</p>  
  23.   
  24. </body>  
  25. </html>  
Output
Type Selector in CSS 

What is a universal selector? 

 
A universal selector is used to select all HTML elements for styling.
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5.   
  6.   
  7. *{  
  8.     color: red;  
  9.     text-align: center;  
  10. }  
  11.   
  12. </style>  
  13. </head>  
  14. <body>  
  15.   
  16. <h1>c# corner</h1>  
  17. <p>community for developer</p>  
  18.   
  19. </body>  
  20. </html>  
Output
Universal Selector in CSS 

What is Descendant Selector? 


Descendant selector is used, when we apply a style in an element, which lies between a particular element.  

Example 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5.   
  6. h1{  
  7. color:red;  
  8. }  
  9. h1 em{  
  10.     color: blue;  
  11.       
  12. }  
  13.   
  14. </style>  
  15. </head>  
  16. <body>  
  17.   
  18. <h1>c# <em>Corner</em></h1>  
  19. <p>community for developer</p>  
  20.   
  21. </body>  
  22. </html>  
Output

Descendant Selector in CSS 

What is class selector? 


Class selector is used to applying a style to the element, using a class attribute.
 
Example 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5.   
  6. .heading{  
  7. color:red;  
  8. text-align:center;  
  9. }  
  10.   
  11.   
  12. </style>  
  13. </head>  
  14. <body>  
  15.   
  16. <h1 class="heading">c#corner</h1>  
  17. <p class="heading">community for developer</p>  
  18.   
  19. </body>  
  20. </html>  
Output
class selector in CSS 
 

Can you make a class selector particular to an element type? 


Yes, we can make a class selector for the particular element.

Example 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5.   
  6. h1.heading{  
  7. color:red;  
  8. text-align:center;  
  9. }  
  10.   
  11.   
  12. </style>  
  13. </head>  
  14. <body>  
  15.   
  16. <h1 class="heading">c#corner</h1>  
  17. <p class="heading">community for developer</p>  
  18.   
  19. </body>  
  20. </html>  
Output

 

What is ID selector? 

 
ID selector is the one, when we apply style, based on ID attribute.
 
Example 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5.   
  6. #heading{  
  7. color:red;  
  8. text-align:center;  
  9. }  
  10. #para{  
  11. color:blue;}  
  12.   
  13.   
  14. </style>  
  15. </head>  
  16. <body>  
  17.   
  18. <h1 id="heading">c#corner</h1>  
  19. <p id="para">community for developer</p>  
  20.   
  21. </body>  
  22. </html>  
Output
 
ID selector in CSS 

Can you make an id selector particular to an element type? 


Yes, we can make an ID selector for a particular element type.
 
Example 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5.   
  6. h1#heading{  
  7. color:red;  
  8. text-align:center;  
  9. }  
  10.   
  11. </style>  
  12. </head>  
  13. <body>  
  14.   
  15. <h1 id="heading">c#corner</h1>  
  16. <p id="heading">community for developer</p>  
  17.   
  18. </body>  
  19. </html>  
Output
 

What is a child selector? 

 
A child selector is used to select the child element of HTML tag.
 
Example 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5.   
  6. body>p{  
  7. color:red;  
  8. font-size:30px;  
  9. }  
  10. </style>  
  11. </head>  
  12. <body>  
  13.   
  14. <h1 id="heading">c#corner</h1>  
  15. <p id="heading">community for developer</p>  
  16. <p>www.c-sharpcorner.com</p>  
  17.   
  18. </body>  
  19. </html>  
Output

child selector in CSS 

What is an attribute selector? 

 
We can apply the style to a particular attribute.
 
Example 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5.   
  6. input[type="text"]  
  7. {  
  8. color:red;  
  9. background-color:powderblue;  
  10. font-size:20px;  
  11. }  
  12. </style>  
  13. </head>  
  14. <body>  
  15.   
  16. <h1 id="heading">c#corner</h1>  
  17. <p id="heading">community for developer</p>  
  18. enter your name<input type="text"/>  
  19. </body>  
  20. </html>  
Output

attribute selector in CSS 

How to select all paragraph elements with a lang attribute? 

 
To select all paragraph elements with a lang attribute, p[lang] is used. 
 
Example  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5.   
  6. p:lang(it) {  
  7.     background: yellow;  
  8. }  
  9. </style>  
  10. </head>  
  11. <body>  
  12.   
  13. <h1 id="heading">c#corner</h1>  
  14. <p id="heading">community for developer</p>  
  15. <p lang=it>c-sharpcorner.com</p>  
  16. </body>  
  17. </html>  
Output

lang attribute in CSS 
 

What are the various ways of using CSS in an HTML page?

 
There are four ways to use CSS in HTML page-
  • Embedded CSS −  <style> Element: You can write your CSS rules into HTML document, using the <style> element.
  • Inline CSS − style Attribute: You can use style attribute of any HTML element to define the style rules.
  • External CSS −  <link> Element: <link> element can be used to include an external stylesheet file in your HTML document.
  • Imported CSS − @import Rule: @import is used to import an external stylesheet in a manner, similar to the <link> element. 

What is the purpose of % measurement unit?


% measurement unit is used to define the value in a percentage.
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. div{  
  6. width:20%;  
  7. background-color:lightblue;}  
  8.   
  9. p:lang(it) {  
  10.     background: yellow;  
  11. }  
  12. </style>  
  13. </head>  
  14. <body>  
  15. <div>  
  16. <h1 id="heading">c#corner</h1>  
  17. </div>  
  18. <p id="heading">community for developer</p>  
  19. <p lang=it>c-sharpcorner.com</p>  
  20. </body>  
  21. </html>  
Output

 
 

What is the purpose of cm measurement unit? 


To define the value in centimeter, cm measurement unit is used.
 
Example 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. div{  
  6. width:20%;  
  7. background-color:lightblue;  
  8. border-style: dotted;  
  9. border-width: 0.1cm;}  
  10.   
  11. p:lang(it) {  
  12.     background: yellow;  
  13. }  
  14. </style>  
  15. </head>  
  16. <body>  
  17. <div>  
  18. <h1 id="heading">c#corner</h1>  
  19. </div>  
  20. <p id="heading">community for developer</p>  
  21. <p lang=it>c-sharpcorner.com</p>  
  22. </body>  
  23. </html>  
Output

 
 

What are browser safe colors?

 
There are listed all browser safe colors-

image
image

Which property is used to set the background color of an element?

 
To set the background color of an element, background-color property is used. 
 
Example 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. div{  
  6. width:20%;  
  7. background-color:lightblue;  
  8.   
  9. }  
  10. </style>  
  11. </head>  
  12. <body>  
  13. <div>  
  14. <h1 id="heading">c#corner</h1>  
  15. </div>  
  16. <p id="heading">community for developer</p>  
  17. </body>  
  18. </html>  
Output

background-color in CSS 

Which property is used to set the background image of an element? 


To set the background image of an element, background-image property is used.
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. body  {  
  6.     background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/olympics_logo.png");  
  7. background-repeat: no-repeat;  
  8.     }  
  9. </style>  
  10. </head>  
  11. <body>  
  12. <br>  
  13. <h1>c# corner</h1>  
  14.   
  15. </body>  
  16. </html>  
Output

background-image in CSS 
 

Which property is used to control the repetition of an image in the background? 


To repeat an image in background, background-repeat is used. 
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. body  {  
  6.     background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/olympics_logo.png");  
  7. background-repeat: repeat-y;  
  8.     }  
  9. </style>  
  10. </head>  
  11. <body>  
  12. <br>  
  13. <h1>c# corner</h1>  
  14.   
  15. </body>  
  16. </html>  
Output

background-repeat in CSS 
 

Which property is used to control the position of an image in the background? 

 
To set the position of the background image, background-position property is used. 
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. body  {  
  6.     background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/olympics_logo.png");  
  7. background-repeat: no-repeat;  
  8. background-position: center;  
  9.     }  
  10. </style>  
  11. </head>  
  12. <body>  
  13. <br>  
  14. <h1>c# corner</h1>  
  15.   
  16. </body>  
  17. </html>  
Output
background-position in CSS 
 

Which property is used to control the scrolling of an image in the background? 


To fix in the background, background-attachment property is used. 
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. body  {  
  6.     background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/olympics_logo.png");  
  7. background-repeat: no-repeat;  
  8. background-position: center;  
  9. background-attachment: fixed;  
  10.     }  
  11. </style>  
  12. </head>  
  13. <body>  
  14. <br>  
  15. <h1>c# corner</h1>  
  16. </body>  
  17. </html>  
Output
background-attachment in CSS 
 

Which property is used to change the face of a font?

 
To change the font, font-family property is used. 
 
Example 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. p.serif {  
  6.     font-family: "Times New Roman", Times, serif;  
  7. }  
  8.   
  9. p.sansserif {  
  10.     font-family: Arial, Helvetica, sans-serif;  
  11. }  
  12. </style>  
  13. </head>  
  14. <body>  
  15.   
  16. <h1>c# corner</h1>  
  17. <p class="serif">community for developers</p>  
  18. <p class="sansserif">c-sharpcorner.com</p>  
  19.   
  20. </body>  
  21. </html>  
Output
 
font-family in CSS  

Which property is used to make a font italic or oblique?


To make a font italic or oblique, font-style property is used. 
 
Example 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5.   
  6.   
  7. .italic {  
  8.     font-style: italic;  
  9.     color:red;  
  10. }  
  11.   
  12. .oblique {  
  13.     font-style: oblique;  
  14. }  
  15. </style>  
  16. </head>  
  17. <body>  
  18.   
  19.   
  20. <h1 class="italic">c# corner</h1>  
  21. <p class="oblique">c-sharpcorner.com</p>  
  22.   
  23. </body>  
  24. </html>  
Output

font-style in CSS 
 

Which property is used to create a small-caps effect?


To create a small-caps effect, font-variant property is used. 
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5.   
  6.   
  7. .italic {  
  8.     font-style: italic;  
  9.     color:red;  
  10. }  
  11.   
  12. .oblique {  
  13.     font-style: oblique;  
  14. font-variant: small-caps;  
  15. }  
  16. </style>  
  17. </head>  
  18. <body>  
  19.   
  20.   
  21. <h1 class="italic">c# corner</h1>  
  22. <p class="oblique">c-sharpcorner.com</p>  
  23.   
  24. </body>  
  25. </html>  
Output

font-variant in CSS
 

Which property is used to increase or decrease how bold or light a font appears? 


To increase or decrease how bold or light a font appears, font-weight is used. 

Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5.   
  6.   
  7. .italic {  
  8.     font-style: italic;  
  9.     color:red;  
  10.     font-weight: bold;  
  11. }  
  12.   
  13. .oblique {  
  14.     font-style: oblique;  
  15.     font-weight: 900;  
  16. }  
  17. </style>  
  18. </head>  
  19. <body>  
  20.   
  21.   
  22. <h1 class="italic">c# corner</h1>  
  23. <p class="oblique">c-sharpcorner.com</p>  
  24.   
  25. </body>  
  26. </html>  
Output

font-weight in CSS 

Which property is used to control the flow and formatting of text?

 
To control the flow and formatting of the text, white-space property is used. 
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. p {  
  6.     white-space: nowrap;  
  7. }  
  8. </style>  
  9. </head>  
  10. <body>  
  11.   
  12. <p>  
  13. c# corner  
  14. c# corner  
  15. c# corner  
  16. c# corner  
  17. c# corner  
  18. c# corner  
  19. c# corner  
  20. c# corner  
  21. c# corner  
  22. c# corner  
  23. c# corner  
  24. c# corner  
  25. c# corner  
  26. c# corner  
  27. c# corner  
  28. c# corner  
  29. c# corner  
  30. c# corner  
  31. c# corner  
  32. c# corner  
  33. c# corner  
  34. c# corner  
  35. c# corner  
  36. c# corner  
  37. c# corner  
  38. c# corner  
  39. c# corner  
  40. c# corner  
  41. c# corner  
  42. c# corner  
  43. c# corner  
  44. c# corner  
  45. c# corner  
  46. c# corner  
  47. c# corner  
  48. c# corner  
  49. c# corner  
  50. c# corner  
  51. c# corner  
  52. c# corner  
  53. </p>  
  54.   
  55. </body>  
  56. </html>  
Output
white-space in CSS 

Which property specifies the left margin of an element?


To specify the left margin of an element, margin-left is used. 
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. .lm{  
  6.     margin-left: 5cm;  
  7. }  
  8. </style>  
  9. </head>  
  10. <body>  
  11.   
  12. <p>c# corner</p>  
  13. <p class="lm">www.c-sharpcorner.com</p>  
  14. </body>  
  15. </html>  
Output
margin-left in CSS  

Which property specifies the bottom padding of an element?


To specify the bottom padding of an element, padding-bottom property is used. 
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. p.padding {  
  6.     padding-bottom: 2cm;  
  7. }  
  8.   
  9. p.padding2 {  
  10.     padding-bottom: 50%;  
  11. }  
  12. </style>  
  13. </head>  
  14. <body>  
  15.   
  16. <p>c# corner</p>  
  17.   
  18. <p class="padding">community of dvelopers</p>  
  19.   
  20. <p class="padding2">c-sharpcorner.com</p>  
  21.   
  22. </body>  
  23. </html>  
Output

padding-bottom in CSS 

Which property specifies the top padding of an element?


To specify the top padding of an element, padding-top property is used. 

Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. p.padding {  
  6.       
  7.     padding-top: 2cm;  
  8. }  
  9.   
  10. </style>  
  11. </head>  
  12. <body>  
  13.   
  14. <p>c# corner</p>  
  15.   
  16. <p class="padding">community of dvelopers</p>  
  17.   
  18. <p class="padding2">c-sharpcorner.com</p>  
  19.   
  20. </body>  
  21. </html>  
padding-top in CSS
 
 You can enhance your knowledge more, by reading the following articles.