How to make CSS load from a subdomain?

GL

George L.

7 0
Asked
Updated
Viewed
16.5k times

I am trying to have my CSS files located on a subdomain off of my main domain. Do I need to put the CSS files inside the subdomain folder? How do I change the stylesheet link to reference the CSS file off of the subdomain?

<link rel="stylesheet" type="text/css" href="style.css" />
add a comment
1

3 Answers

  • Votes
  • Oldest
  • Latest
DM

digitalMedia

35 2
Answered
Updated

Wherever you're PHP or HTML file resides is the relative starting point. So, the reference in the <link> tag should start from there.

Now to answer your question first, if your CSS is going to be located on a subdomain, then you will want to use an absolute address as shown below:

<link rel="stylesheet" type="text/css" href="https://subdomain.website.com/folder/style.css" />

If your style is in the same directory the href attribute is style.css.

<link rel="stylesheet" type="text/css" href="style.css" />

If your style is in the directory within that starting point the href attribute is folder/style.css.

<link rel="stylesheet" type="text/css" href="folder/style.css" />

If your style is in the directory before that starting point the href attribute is ../style.css.

<link rel="stylesheet" type="text/css" href="../style.css" />

If none of these methods are working for you, then there is an error in what you've written.

  • 0
    Thank you so much for your help. I hope I can say it is working now. But not tonight. I am going to sleep now. I have read your explanation numerous time. It is worth reading. Thank you again. — George L.
  • 0
    Sleep helps. I take a nap in the middle of the afternoon if something starts taking me a while to figure out, then when I wake up it's always simple and rather than me being frustrated trying to figure it out, whoever I'm working with is frustrated that I'm sleeping instead. Either way, it gets done in the same amount of time. — joebert
add a comment
1
JO

joebert

184 4
Answered
Updated

Yes, the resources need to be in the subdomain folder relative to the page that's loading them. You shouldn't need to change that link.

Unless you're talking about setting up another subdomain that two domains can draw resources from, your link will look something like this

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

and you will place a single copy of each style element in the folder that "style" subdomain points to. Doing it this way has an added benefit of allowing browsers to load the resources only once for multiple subdomains in addition to you only needing to maintain a single copy of each file across domains.

  • 0
    Unfortunately, that was what I did but to no avail. I wonder what is wrong. Could it be the root is in public_html? — George L.
  • 0
    Start from the beginning, what have you done so far? — joebert
  • 0
    The style.css can not link to my .php page. — George L.
  • 0
    I wanted to follow up on the conversation above. I'm keen to move my css, image & js files to their own subdomain, but I'm wondering if anyone has any tips on how to simplify the process when initially developing a site locally / offline. (As a bit of background, I typically use Sublime for coding in conjunction with MAMP. All files are locally stored until the site is ready to go live, then I upload everything with Transmit). I understand, when using subdomains, the need to name the linked files as absolute links, however, that would seem like I would need to re-upload the css or js files after every single modification - even for local testing. Either that or I keep all the links local until I go live, then have to update all links before uploading? This seems super tedious. Does anyone have any advice? — User79000
  • 0
    You could point your subdomain to the same path on the server as your main domain. I am referring on the back-end server side, nothing on the public side or anything you could change with HTML/CSS. I am not sure for you situation if that is technically possible. If you are able to do that then you would only need to upload your files once. For example, with the hosting done at Ozzu here, we could do that. Alternatively on the server, assuming you have both the main domain and subdomain on the same server, you could symlink directories on your subdomain to link to the same assets internally on the server so that you also need to only upload once. Hope that helps some. — Brian Wozeniak
add a comment
0
JO

johnsonmillie536

0 0
Answered
Updated

It depends on where your CSS files are located in relation to your HTML file that is referencing them.

If your CSS files are located in the same directory as your HTML file, then the link you have provided is correct.

However, if your CSS files are located in a subdomain or a different directory, you will need to update the link to correctly point to the location of the files.

For example, if your CSS files are located in a subdomain called styles, the link would need to be updated to:

<link rel="stylesheet" type="text/css" href="styles/style.css" />

This will tell the browser to look for the style.css file in the styles subfolder.

Also, you can use an absolute path (with the full URL) like:

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

It's important to make sure that the link is correct and points to the correct location of the CSS files in order for the styles to be applied correctly to your website.

add a comment
0