If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

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.

JS Animated. 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:

    JS_Animated-How_to_add_external_CSS_stylesheets_references_for_html_pages-1

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

    JS_Animated-How_to_add_external_CSS_stylesheets_references_for_html_pages-2

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

    JS_Animated-How_to_add_external_CSS_stylesheets_references_for_html_pages-3

    You will see the codes as follows:

    <link rel="stylesheet" href="css/search.css">
    

    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:

    JS_Animated-How_to_add_external_CSS_stylesheets_references_for_html_pages-4

    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:

    JS_Animated-How_to_add_external_CSS_stylesheets_references_for_html_pages-5

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

    JS_Animated-How_to_add_external_CSS_stylesheets_references_for_html_pages-6

    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:

    JS_Animated-How_to_add_external_CSS_stylesheets_references_for_html_pages-8

Feel free to check the detailed video tutorial below:

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