Post
Ask Question

CSS Interview Questions And Answers

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 the 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.          h1 {    
  6.          color: lightblue;    
  7.          text-align: left;    
  8.          }    
  9.          p {    
  10.          font-family: verdana;    
  11.          font-size: 20px;    
  12.          text-align: center;    
  13.          }    
  14.       </style>  
  15.    </head>  
  16.    <body>  
  17.       <h1>c# corner</h1>  
  18.       <p>community for developer</p>  
  19.    </body>  
  20. </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.          color: red;    
  7.          text-align: center;    
  8.          }    
  9.       </style>  
  10.    </head>  
  11.    <body>  
  12.       <h1>c# corner</h1>  
  13.       <p>community for developer</p>  
  14.    </body>  
  15. </html> 
Output
 
Universal Selector in CSS
 

What is the Descendant Selector? 

 
A 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.          h1{    
  6.          color:red;    
  7.          }    
  8.          h1 em{    
  9.          color: blue;    
  10.          }    
  11.       </style>  
  12.    </head>  
  13.    <body>  
  14.       <h1>c# <em>Corner</em></h1>  
  15.       <p>community for developer</p>  
  16.    </body>  
  17. </html> 
Output
 
8
 

What is the class selector? 

 
The 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.          .heading{    
  6.          color:red;    
  7.          text-align:center;    
  8.          }    
  9.       </style>  
  10.    </head>  
  11.    <body>  
  12.       <h1 class="heading">c#corner</h1>  
  13.       <p class="heading">community for developer</p>  
  14.    </body>  
  15. </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.          h1.heading{    
  6.          color:red;    
  7.          text-align:center;    
  8.          }    
  9.       </style>  
  10.    </head>  
  11.    <body>  
  12.       <h1 class="heading">c#corner</h1>  
  13.       <p class="heading">community for developer</p>  
  14.    </body>  
  15. </html> 
Output
 
 

What is the ID selector? 

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

What is a child selector? 

 
A child selector is used to select the child element of the HTML tag.
 
Example 
  1. <!DOCTYPE html>    
  2. <html>  
  3.    <head>  
  4.       <style>    
  5.          body>p{    
  6.          color:red;    
  7.          font-size:30px;    
  8.          }    
  9.       </style>  
  10.    </head>  
  11.    <body>  
  12.       <h1 id="heading">c#corner</h1>  
  13.       <p id="heading">community for developer</p>  
  14.       <p>www.c-sharpcorner.com</p>  
  15.    </body>  
  16. </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.          input[type="text"]    
  6.          {    
  7.          color:red;    
  8.          background-color:powderblue;    
  9.          font-size:20px;    
  10.          }    
  11.       </style>  
  12.    </head>  
  13.    <body>  
  14.       <h1 id="heading">c#corner</h1>  
  15.       <p id="heading">community for developer</p>  
  16.       enter your name<input type="text"/>    
  17.    </body>  
  18. </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 the % 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.          p:lang(it) {    
  9.          background: yellow;    
  10.          }    
  11.       </style>  
  12.    </head>  
  13.    <body>  
  14.       <div>  
  15.          <h1 id="heading">c#corner</h1>  
  16.       </div>  
  17.       <p id="heading">community for developer</p>  
  18.       <p lang=it>c-sharpcorner.com</p>  
  19.    </body>  
  20. </html> 
Output
 
 

What is the purpose of the cm measurement unit? 

 
To define the value in the centimeter, the 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.          p:lang(it) {    
  11.          background: yellow;    
  12.          }    
  13.       </style>  
  14.    </head>  
  15.    <body>  
  16.       <div>  
  17.          <h1 id="heading">c#corner</h1>  
  18.       </div>  
  19.       <p id="heading">community for developer</p>  
  20.       <p lang=it>c-sharpcorner.com</p>  
  21.    </body>  
  22. </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, the 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.       </style>  
  10.    </head>  
  11.    <body>  
  12.       <div>  
  13.          <h1 id="heading">c#corner</h1>  
  14.       </div>  
  15.       <p id="heading">community for developer</p>  
  16.    </body>  
  17. </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, the 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 the 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.    </body>  
  15. </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, the 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.    </body>  
  16. </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, the 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, the 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.          p.sansserif {    
  9.          font-family: Arial, Helvetica, sans-serif;    
  10.          }    
  11.       </style>  
  12.    </head>  
  13.    <body>  
  14.       <h1>c# corner</h1>  
  15.       <p class="serif">community for developers</p>  
  16.       <p class="sansserif">c-sharpcorner.com</p>  
  17.    </body>  
  18. </html> 
Output
 
font-family in CSS
 

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

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

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

 
To create a small-caps effect, the font-variant property is used. 
 
Example
  1. <!DOCTYPE html>    
  2. <html>  
  3.    <head>  
  4.       <style>    
  5.          .italic {    
  6.          font-style: italic;    
  7.          color:red;    
  8.          }    
  9.          .oblique {    
  10.          font-style: oblique;    
  11.          font-variant: small-caps;    
  12.          }    
  13.       </style>  
  14.    </head>  
  15.    <body>  
  16.       <h1 class="italic">c# corner</h1>  
  17.       <p class="oblique">c-sharpcorner.com</p>  
  18.    </body>  
  19. </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.          .italic {    
  6.          font-style: italic;    
  7.          color:red;    
  8.          font-weight: bold;    
  9.          }    
  10.          .oblique {    
  11.          font-style: oblique;    
  12.          font-weight: 900;    
  13.          }    
  14.       </style>  
  15.    </head>  
  16.    <body>  
  17.       <h1 class="italic">c# corner</h1>  
  18.       <p class="oblique">c-sharpcorner.com</p>  
  19.    </body>  
  20. </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, the 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.       <p>    
  12.          c# corner    
  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.       </p>  
  53.    </body>  
  54. </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.       <p>c# corner</p>  
  12.       <p class="lm">www.c-sharpcorner.com</p>  
  13.    </body>  
  14. </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.          p.padding2 {    
  9.          padding-bottom: 50%;    
  10.          }    
  11.       </style>  
  12.    </head>  
  13.    <body>  
  14.       <p>c# corner</p>  
  15.       <p class="padding">community of dvelopers</p>  
  16.       <p class="padding2">c-sharpcorner.com</p>  
  17.    </body>  
  18. </html> 
Output
 
padding-bottom in CSS
 

Which property specifies the top padding of an element?

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


Similar Articles