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>
  6. p:lang(it) {
  7. background: yellow;
  8. }
  9. </style>
  10. </head>
  11. <body>
  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>
  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.

More Interview Questions