Separating Languages & Code Files

Separating Languages & Code Files
0.0 0

#1

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.


#2

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: https://www.w3schools.com/html/html_head.asp
and here: https://learn.shayhowe.com/
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
imagen


#3

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:

my-app/
  css/
    styles.css
index.html
other.html

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.


#4

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