HTML 5  

Deep Dive With CSS - Introduction

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>  
    4.   
    5. <h1 style="color:blue;margin-left:20px;">c# corner.</h1>  
    6. <p>c-sharpcorner.com</p>  
    7.   
    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>  
    3.   
    4. <head>  
    5.     <style>  
    6.         body {  
    7.             background-color: lightblue;  
    8.         }  
    9.           
    10.         h1 {  
    11.             color: blue;  
    12.             margin-left: 50px;  
    13.         }  
    14.     </style>  
    15. </head>  
    16.   
    17. <body>  
    18.   
    19.     <h1>c# corner</h1>  
    20.     <p>c-sharpcorner.com</p>  
    21.   
    22. </body>  
    23.   
    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>  
    3.   
    4. <head>  
    5.     <link rel="stylesheet" type="text/css" href="mystyle.css">  
    6. </head>  
    7.   
    8. <body>  
    9.   
    10.     <h1>C# corner</h1>  
    11.     <p>c-sharpcorner.com</p>  
    12.   
    13. </body>  
    14.   
    15. </html>  
    CSS code (mystyle.css)
    1. body {  
    2.     background - color: lightblue;  
    3. }  
    4.   
    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>  
  3.   
  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>  
  13.   
  14. <body>  
  15.     <h1 style="color:pink;">C# corner</h1>  
  16.     <h1>C# corner</h1>  
  17.     <h1>C# corner</h1>  
  18. </body>  
  19.   
  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>  
    3.   
    4. <head>  
    5.     <style>  
    6.         p {  
    7.             color: blue;  
    8.         }  
    9.     </style>  
    10. </head>  
    11.   
    12. <body>  
    13.   
    14.     <p>c# corner</p>  
    15. </body>  
    16.   
    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>  
    3.   
    4. <head>  
    5.     <style>  
    6.         #para {  
    7.             background-color: yellow;  
    8.             color: red;  
    9.         }  
    10.     </style>  
    11. </head>  
    12.   
    13. <body>  
    14.   
    15.     <h1 id="para">c# corner</h1>  
    16.     <p>c-sharpcorner.co</p>  
    17.   
    18. </body>  
    19.   
    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>  
    3.   
    4. <head>  
    5.     <style>  
    6.         .center {  
    7.             text-align: center;  
    8.             color: red;  
    9.         }  
    10.     </style>  
    11. </head>  
    12.   
    13. <body>  
    14.   
    15.     <h1 class="center">c# corner</h1>  
    16.     <p class="center">c-sharpcorner</p>  
    17.   
    18. </body>  
    19.   
    20. </html>  
    Output
     
     
     
  • Grouping selector
     
     In CSS, we can select the multiple elements using the name of elements 
     
    Example
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5.     <style>  
    6.         h1,  
    7.         h2,  
    8.         p {  
    9.             text-align: center;  
    10.             color: red;  
    11.         }  
    12.     </style>  
    13. </head>  
    14.   
    15. <body>  
    16.   
    17.     <h1>c# corner</h1>  
    18.     <p>c-sharpcorner</p>  
    19.   
    20. </body>  
    21.   
    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>  
  3.   
  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>  
  15.   
  16. <body>  
  17.   
  18.     <h1>C# corner</h1>  
  19.   
  20. </body>  
  21.   
  22. </html>  
Output
 
 

Conclusion

 
In this article, we studied Introduction to CSS.

Membership not found