Why does this code show the page differently?

HTML & CSS
1

This code:


<base href="[var.base_url]/">
<link href="[var.base_url]/themes/default/css/main.css" rel="stylesheet" type="text/css" media="all" />

And this code:


<base href="[var.base_url]/">
<link href="../themes/default/css/main.css" rel="stylesheet" type="text/css" media="all" />

show the page differently. Why? Aren’t they pointing to the same css file?

2

I’m not quite sure what you’re doing here, because [var.base_url] isn’t (X)HTML as far as I’m aware, but I would guess that the difference is that …/ refers to the parent directory, which is different to what you’ve put in the first bit of code.

3

The following are equivalent (assuming that [var.bas_url] has a proper absolute address substituted for it in the final HTML:

<link href="[var.base_url]/themes/default/css/main.css" rel="stylesheet" type="text/css" media="all"/>

<base href="[var.base_url]">
<link href="/themes/default/css/main.css" rel="stylesheet" type="text/css" media="all"/>

Your second version is equivalent to the following:

<link href="[var.base_url]/../themes/default/css/main.css" rel="stylesheet" type="text/css" media="all"/>

which since that address is unreachable from HTML is equivalent to not specifying the link tag at all.