Separating Languages & Code Files

HTML & CSS are pretty much embedded into each other, however, for better organization and cleaner code, how would I be able to identify the difference between CSS and HTML in my HTML doc? In other words, I would like to know how to separate these languages into different folders and/or files, while also linking them together for the overall project. (I know codePen auto links these files, but i’d like to know for outside use.) Thanks in advance to those who attempt to answer this.

You could put the css code into a file with .css extension, and link to it in the html file in the <head> part, like this:

 <link rel="stylesheet" href="mystyle.css"> 

Read more here:
and here:
to know more about all this.

Also if you use codepen you could download the files and open the html to see how the other files are linked to it. To download the files in codepen go to the right bottom of the page, click on export and then Export .zip

1 Like

You can do so easily by creating those folders and files yourself. Actually, that’s what most web applications do, they separate CSS and HTML.

The common practice is to put the HTML files in the root of your project folder and the CSS files into a “css” folder. So, if you have a project folder called “my-app”, your directory structure looks like this:


Of course, you can name the folders whatever you prefer. In your HTML, you than link to the stylesheet using <link rel="stylesheet" href="css/styles.css"> and that’s it.

1 Like

Thank you! I’ll be sure to look into it!