0

I have the next structure of the project folder:

# A needed clarification. The output you see below is not the whole project, 
# it's just a necessary part that needs to be shown.

.
├── 1_introduction
│   └── ...
├── 2_growing_and_shrinking
│   ├── css-tricks_lesson
│   │   └── ...
│   ├── theory.txt
│   └── TOP_lesson
│       ├── flex-basis
│       │   └── index.html
│       ├── flex-grow
│       │   └── index.html
│       └── flex-shrink
│           └── index.html
├── 3_axes
│   └── ...
├── 4_alignment
│   └──...
└── common-styles.css

Now I want to link common-styles.css to all the index.html.

That's how my current solution looks like, but using triple double dots to go back and link styles don't look good:

<link rel="stylesheet" href="../../../common-styles.css">

So I also tried to use the absolute(in relation to the main/initial project folder) path like the VSCode suggests when I type / in the href="", but it doesn't work at all:

<link rel="stylesheet" href="/foundations/3_flexbox/common-styles.css">

I surely tried to find an answer, but all the similar posts about 'linking CSS to HTML suggest using what I just used: two dots to go to the parent directory one level above.

So the second option does not work somehow, even though it was a suggestion by the VSCode. Do I need to configure something in there?
If it's not a problem with the code editor, how to make it work without writing the whole path from /home/myuser/.../common-styles.css and without using multiple stepbacks?

curioushuman
  • 207
  • 3
  • 11
  • ../ means go up 1 directory. ../../../ means go up three directories. If you want to use an absolute path it should start with https://www... – DCR Apr 24 '23 at 20:24
  • Are you using a webserver that would understand what `"/"` means in this context? – JonSG Apr 24 '23 at 20:25
  • @DCR Yeah, I know how it( "../") works and as I said, it works, but this doesn't seem to be a good solution. And when I use a suggestion of the VSCode it doesn't work(I explained it above). – curioushuman Apr 24 '23 at 20:27
  • When you say "and link styles don't look good" do you mean it doesn't work so the page doesn't look good, or do you mean it's just ugly in the source with all those `../../..`? – Stephen P Apr 24 '23 at 20:29
  • 1
    @JonSG Nope, there is no additional configuration, I open an html file without a local/remote server(no need to have one for this occasion). – curioushuman Apr 24 '23 at 20:30
  • What's the url of website? – DCR Apr 24 '23 at 20:31
  • @StephenP, yes, it works, but it just doesn't seem to be the right way. I'm not even talking about ugliness, even though it actually is, the problem is it's very confusing, when instead of name of the directories "../" are used. – curioushuman Apr 24 '23 at 20:34
  • As DCR said earlier, `../` means the _parent_ directory of the current directory, so if you're looking at index.html in the flex-shrink directory then `../` means the parent of flex-shrink, which is TOP_lesson — this _**is**_ the way you refer to higher level directories. Maybe it's confusing (to you) for now, but with experience you know exactly what it means. I tend to use absolute paths (start with `/`) but the problem is that can mean a different thing in an IDE compared to an actual webserver or a `file://` URL. So... _exactly_ how are you trying to view the pages? – Stephen P Apr 24 '23 at 20:42
  • @StephenP, thank you, but I've been using Linux for pretty sufficient amount of time to get used to it. As I said already, this line `` works just fine, but I'd like to find a better way to make it work + understand why the VSCode's suggestion doesn't work. And as I also mentioned above, yes, I use plain file overview here: `file://` – curioushuman Apr 24 '23 at 20:51
  • I don't undertand the suggestion at all, where is the foundations folder in relation to those you have shown us, and 3_flexbox doesn't look like the sort of folder where you'd put a communal css file. Where is 3_flexbox in relation to the structure you have shown us? – A Haworth Apr 24 '23 at 21:20
  • @AHaworth, `3_flexbox` directory is where the `common-styles.css` is stored. On the output `.` stands for it. – curioushuman Apr 25 '23 at 11:38
  • We can’t know where the css file is stored without seeing more of the folder structure. – A Haworth Apr 25 '23 at 11:59

1 Answers1

0

Could you provide some additional information on what type of project this is?

For example, in a typescript/javascript project, you can configure this with your .tsconfig or .jsconfig file (what's a .jsconfig/.tsconfig file?) with shorthand paths as follows:

{
    "baseUrl": ".",
    "paths": {
          "@/*": ["./src/*"],
          "@/styles": [./src/styles/*]
        },
    ...otherConfigOptions
}

This would allow you to import from anywhere within your project using something like import * from @/styles/common-styles.css if your common-styles.css file is in the styles folder.

However, this depends a bit on your project and other options also exist

S. Goodluck
  • 31
  • 2
  • Hi there, there is no javascript at all. It's a "project", notes of studying some matter. – curioushuman Apr 24 '23 at 20:29
  • Since you are asking for clarification this should be a comment on the question, not an answer. – Stephen P Apr 24 '23 at 20:30
  • I don't have enough stackoverflow points to comment directly yet on this account or I would have! @curioushuman you could try `` – S. Goodluck Apr 24 '23 at 20:40
  • @S.Goodluck, yeah, that's funny thing about stack overflow, you can't even command. And this suggestion is also not correct in my particular case. See the other answer to my question, there was the exact same suggestion. – curioushuman Apr 24 '23 at 20:47
  • 1
    Without seeing more of your project structure, I think their answer is probably what you need (or at least in the right direction). The "/common-styles.css" would work if that file were at the root of the project. Starting the path with "/" means "from the current root directory". Each "../" means "up from the current directory". If your CSS file is a bit nested, you could do "/TopLevelFolder/common-styles.css" as the import because that says "from the root, into TopLevel" Good luck on getting an answer that feels better! The wonderful world of webdev is confusing – S. Goodluck Apr 24 '23 at 21:17
  • @curioushuman I just did some digging on the net after reading the comments. I found this blog post with looks both accurate and relevant to the issue you're having: https://learntheweb.courses/topics/paths-folders/ (specifically https://learntheweb.courses/topics/paths-folders/#why-doesnt-it-work-on-my-local-website) Good luck! – S. Goodluck Apr 24 '23 at 21:25