What is CSS?
  • CSS stands for Cascading Style Sheets.
  • CSS is used to define a display property of our HTML tag or element.
  • CSS is a powerful language that makes our website more beautiful and attractive along with making it more user-friendly.
Why we use CSS?
There are the following advantages of CSS.
  • CSS saves time. We write a CSS code only 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 have to 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 making certain changes in the CSS file.
  • Platform Independence. CSS is platform-independent.
How to use CSS in our project?
There are three ways to use CSS in our project.
  • Inline Style
    Inline style is used for changing the property of particular elements or HTML tags.
    Example
    1. <!DOCTYPE html>
    2. <html>
    3. <body>
    5. <h1 style="color:blue;margin-left:20px;">c# corner.</h1>
    6. <p>c-sharpcorner.com</p>
    8. </body>
    9. </html>
    Output
  • Internal style sheet
    An internal style sheet is used for applying the style on a single page only or it may be used whenever we require to change the style of a particular HTML page.
    Example
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <style>
    6. body {
    7. background-color: lightblue;
    8. }
    10. h1 {
    11. color: blue;
    12. margin-left: 50px;
    13. }
    14. </style>
    15. </head>
    17. <body>
    19. <h1>c# corner</h1>
    20. <p>c-sharpcorner.com</p>
    22. </body>
    24. </html>
    Output

  • External style sheet
    An external style sheet is used for making the changes in the layout of the whole website, using single or multiple style sheets.
    HTML code
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <link rel="stylesheet" type="text/css" href="mystyle.css">
    6. </head>
    8. <body>
    10. <h1>C# corner</h1>
    11. <p>c-sharpcorner.com</p>
    13. </body>
    15. </html>
    CSS code (mystyle.css)
    1. body {
    2. background - color: lightblue;
    3. }
    5. h1 {
    6. color: navy;
    7. margin - left: 20 px;
    8. }
Cascading Order
There are certain rules for cascading order.
  • Inline style (inside an HTML element) goes first.
  • External and internal style sheets (in the head section) are applied afterward.
  • Browser default is taken if no style is defined.
Inline CSS has the highest priority than external or internal styling.
Applying the style of internal or external CSS depends on which style is written at last.
Example
HTML code
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <title>order CSS </title>
  6. <link rel="stylesheet" type="text/css" href="mystyle.css">
  7. <style type="text/css">
  8. h1 {
  9. color: red;
  10. }
  11. </style>
  12. </head>
  14. <body>
  15. <h1 style="color:pink;">C# corner</h1>
  16. <h1>C# corner</h1>
  17. <h1>C# corner</h1>
  18. </body>
  20. </html>
CSS code
  1. h1{
  2. color: blue;
  3. }
Output
CSS Syntax and Selectors
In CSS, selecting the particular element follows the following rules.
  • Selecting the element
  • Declaration of property
CSS Selectors
A CSS selector is used for selecting the HTML element to change their style.
  • The element Selector
    In CSS, we use the name of the element for selecting the particular element.
    Example
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <style>
    6. p {
    7. color: blue;
    8. }
    9. </style>
    10. </head>
    12. <body>
    14. <p>c# corner</p>
    15. </body>
    17. </html>
    Output
  • The id Selector
    For selecting the element using the id attribute, the id should be unique for that particular element.
    Example
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <style>
    6. #para {
    7. background-color: yellow;
    8. color: red;
    9. }
    10. </style>
    11. </head>
    13. <body>
    15. <h1 id="para">c# corner</h1>
    16. <p>c-sharpcorner.co</p>
    18. </body>
    20. </html>
    Output
  • The class selector
    In CSS, by selecting the element using the class attribute, we can select multiple elements for styling.
    Example
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <style>
    6. .center {
    7. text-align: center;
    8. color: red;
    9. }
    10. </style>
    11. </head>
    13. <body>
    15. <h1 class="center">c# corner</h1>
    16. <p class="center">c-sharpcorner</p>
    18. </body>
    20. </html>
    Output
  • Grouping selector
    In CSS, we can select the multiple elements using the name of elements
    Example
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <style>
    6. h1,
    7. h2,
    8. p {
    9. text-align: center;
    10. color: red;
    11. }
    12. </style>
    13. </head>
    15. <body>
    17. <h1>c# corner</h1>
    18. <p>c-sharpcorner</p>
    20. </body>
    22. </html>
    Output
CSS Comments
In any language, comments are used to explain the code or functionality of the code.
Example
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <style>
  6. h1 {
  7. color: red;
  8. /* This is a single-line comment */
  9. }
  10. /* This is
  11. a multi-line
  12. comment */
  13. </style>
  14. </head>
  16. <body>
  18. <h1>C# corner</h1>
  20. </body>
  22. </html>
Output

Conclusion

In this article, we studied Introduction to CSS.