JS Animated. How to add external CSS stylesheets references for HTML pages

This tutorial will show you how to add external CSS stylesheets references for html pages.

1. First, let’s create a custom CSS file in css folder. Connect to FTP/File manager. In css folder, click on New file and add the file name that you prefer:

   

   In this case, we add mycustom.css. Here is the new CSS file:

   

2. Next, we need to connect the new custom CSS file to the .html file. Click on the .html file where you want to add new CSS class. In this case, we use index.html (for the home page):

   

   You will see the codes as follows:

   Copy one of the above lines to the new line. Then replace the path for href path with the new path of your new CSS file and Save the file:

   

   Now you can set the Custom CSS to the new css file.

3. Let’s try an example. We will add some content with custom CSS class to the index.html file. For example, above this text:

   

   Open index.html file. This is the new content with a new custom class pink:

   

   Then we need to open this custom css file that we have just created in css folder. Click on Edit and set your custom CSS codes to the file.

   In this case, I set it to pink color of text with this code:

   .pink {
   color: pink;
   }
   

   Save the file. Refresh the page to see the result:

   

Feel free to check the detailed video tutorial below: