How do I set up a main css file for all html files?

Question

Instead of having to copy the css file over and over again when making a new subdirectory with a html file in it, I would like to have one css file that applies to all html files. How would I do this? I am managing my files through StackCP. My css file is in my public_html folder.

score 1 · Answer 1 · answered May 21 '20 at 00:24

1

You can use a relative file path to link to your CSS file from other directories. Check out relative path to CSS file for more details on how to accomplish this.

answered May 21 '20 at 00:24

Brenden Price

517
2
9

score 1 · Answer 2 · answered May 21 '20 at 00:25

1

Place

<link rel="stylesheet" type="text/css" href="https://example.com/stylesheet.css">

in your header.

answered May 21 '20 at 00:25

learningtoanimate

949
6
22

this answer feels incomplete. The OP probably needs some understanding about what to put in the `href` attribute and why. If they copy paste this as is, obviously it won't work. :) – Pure Function May 21 '20 at 00:55

score 0 · Accepted Answer · answered May 21 '20 at 01:26

Well, the way you do this is:

Step 1: Create your main.css (It shouldn't necessarily be main.css any name would work like style.css) file anywhere you want but it should be inside the public_html folder.

Step 2: Create your HTML files and include the link/path/URL of the CSS file in your head section of each HTML file. To do this you use the link tag

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

The rel attribute in the link tag defines what type of file it is in your case you can put stylesheet and the href attribute defines the link/path/URL to your CSS file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <!-- Content of the page -->
  </body>
</html>

In the end, your HTML file should something like this.

I hope It helps.

How do I set up a main css file for all html files?

3 Answers3