Post
Ask Question

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 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 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

    Internal style sheet is used for applying the style on 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

    External style sheet is used for making the changes in the layout of the whole website, using a 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 afterwards.
  • 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 

CSS selector is used for selecting the HTML element to change their style.
  • The element Selector 

    In CSS, we use the name of 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
 

Similar Articles