DEV Community

Cover image for Link CSS and Js Files With an HTML File.
Raghav Khanna
Raghav Khanna

Posted on

3

Link Js to Html Link CSS and Js Files With an HTML File.

When you’re working with HTML, styles, and scripts and you’re working on a big project, I really recommend separating files in different folders. Have all of your CSS files in one folder and all your JavaScript files in another folder. Do the same for your HTML files.
To link a CSS file with your HTML file, you have to write the next script on your HTML file inside the head tag.

link rel=¨stylesheet¨ type=¨text/css¨ href=¨..[folder_name][file_name].css¨> */

If you have the CSS file in the same folder as your HTML file, you only have to write the name of your CSS file, like this (I recommend having the files in different folders associated by the type):

<
link rel=¨stylesheet¨ type=¨text/css¨ href=¨[file_name].css¨>

If you’re working with a bootstrap theme, you can add the link of the file:

<
link rel=¨stylesheet¨ type=¨text/css¨ href=¨[url_bootstrap_theme]¨>

To link a Js file with your HTML, you only have to add the source of the script inside the body tag or outside; it doesn’t matter.

<
script src="..[folder_name][file_name].js">

If you have the Js file in the same folder as your HTML file you only have to write the name of your Js file, like this (I recommend having the files in different folders associated by the type):
script src="[file_name].js">
If you are working with libraries, like jQuery, you can add the URL of the library in the source.
script src="[url_of_the_js_library]">
I hope this post helped you.

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (1)

Collapse
 
erraghavkhanna profile image
Raghav Khanna

Be sure to open the tags🤣

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay