HTML 5

Top CSS Interview Questions And Answers

Question 1: 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.
 
Question 2: 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. 
Question 3: 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.
     
Question 4: 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
 
Question 5: 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
 
Question 6: 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

 
Question 7: What is class selector? 

Class selector is used, when applying 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
 
 
Question 8: 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

 
Question 9: 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
 
 
Question 10: Can you make a id selector particular to an element type? 

Yes, we can make a 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
 
Question 11: 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

 
Question 12: 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

 
Question 13: 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

 
 
Question 14: 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. 
Question 15: 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

 
 
Question 16: 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

 
 
Question 17: What are browser safe colors?
 
There are listed all browser safe colors-

image
image

Question 18: 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

 
Question 19: 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

 
 
Question 20: 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

 
 
Question 21: 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
 
 
Question 22: 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
 
 
 Question 23: 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
 
  
Question 24: 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

 
 
Question 25: 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

 
Question 26: 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

 
Question 27: 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
 
Question 28: 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
  
Question 29: 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

 
Question 30: 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>  
 
 You can enhance your knowledge more, by reading the following articles.
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs