External CSS

We can write the ‘CSS’ code in different file and then import the file into ‘html’ document as shown in this section. In this way, we can manage the files easily.

The ‘CSS’ code is saved in the file ‘my_css.css’ which is saved inside the folder ‘asset/css’.


	      
 			1 /* asset/css/my_css.css */ 

 			2 

            3 h3.h3_blue{ 

            4     color: blue; 

            5 }

            6 h3.h3_red{ 

            7     color:red; 

            8 }

Next, we need to import the CSS file into the ‘html’ file as shown in Line 7.


	      
 			1 <!-- css.html --> 

            2  

            3 <!DOCTYPE html> 

            4 <html> 

            5 <head> 

            6 <title>CSS Tutorial</title> 

            7 <link rel="stylesheet" type="text/css" href="asset/css/my_css.css"> 

            8 </head> 

            9 <body> 

            10 

            11 <h3 class='h3_blue'> Heading 1 </h3> 

            12 <h3 class='h3_blue'> Heading 3 </h3> 

            13 <h3 class='h3_blue'> Heading 3 </h3> 

            14 

            15 

            16 <h3 class='h3_red'> Heading 1 </h3> 

            17 <h3 class='h3_red'> Heading 3 </h3> 

            18 <h3 class='h3_red'> Heading 3 </h3> 

            19 

            20 </body> 

            21 </html>

Previous Next