external style sheets, specifying absolute or relative paths
This is basic relative URL syntax. There is nothing CSS specific about this.
Assuming this appears in http://example.com/foo/bar/index.html
href="/someDir/mystyles.css"
http://example.com/someDir/mystyles.css
href="./someDir/mystyles.css"
http://example.com/foo/bar/someDir/mystyles.css
href="someDir/mystyles.css"
http://example.com/foo/bar/someDir/mystyles.css
And you didn't mention href="../someDir/mystyles.css"
Which would be: http://example.com/foo/someDir/mystyles.css
How to write out the absolute path of a local file correctly when linking css file to html?
I guess this is a popular misconception between server-side and client-side execution context.
- The webserver provides an html document for
http://localhost/whatever/index.htm
- Your browser reads that document and it's href-attributes. It tries to download the linked files too.
href="styles/style.css"
a relative path. The browser will request the file athttp://localhost/whatever/styles/style.css
href="/styles/style.css"
a kind-of-absolute path. The browser will request the file at the root of the servers urlhttp://localhost/styles/style.css
href="http://localhost/foobar/styles/style.css"
an absolute path. The browser will try to download exactly from there.href="file:///C:\...."
a local path on your system. The server has nothing to do with it. The page may only work on your own system not when other people access it through the server from other computers.
Your browser should come some development tools. You can inspect what your browser is requesting and what your server is responding with that tools.
The answer is: use relative or kind-of-absolute urls here.
Why some professional web designers use absolute paths instead of relative paths (e.g for CSS, Javascript, images, etc.)?
Both of those are using ExpressionEngine CMS, it's probably the way the CMS links the stylesheets.
But really it's just a matter of preference. Personally I go with root relative /css/main.css
because this way if I'm developing locally + offline I don't have to worry about switching the WEB_ROOT constant to a local one ( less hassle + shorter ).
The only case I see for absolute is if the domain uses a CDN ( content delivery network ) and the domain is different from the origin domain.
Can't reference stylesheet using absolute directory path
The href
attribute of a style
tag is processed by a browser. Browser obviously doesn't have access to your server filesystem path /homepages/9/whatever
(even more, it will try to load http://yoursite/homepages/9/whatever
).
Change the value of href
attribute with something browser is able to load (e.g. http://yoursite/media/style.css
).
Using relative URL in CSS file, what location is it relative to?
According to W3:
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document
Therefore, in answer to your question, it will be relative to /stylesheets/
.
If you think about this, this makes sense, since the CSS file could be added to pages in different directories, so standardising it to the CSS file means that the URLs will work wherever the stylesheets are linked.
External stylesheet linking
The CSS path should be relative to your HTML file location.
If you HTML file is in /Users/btd/Desktop/html:css practice/
and your css is /Users/btd/Desktop/html:css practice/css/styles.css
Then the CSS relative path you need to put in the link tag will be: css/styles.css
relative file path to fonts in css file
URLs in CSS files are relative to the CSS file.
url('fonts/icomoon.eot?hsw0h3');
means http://example.com/css/fonts/icomoon.eot?hsw0h3
, but your screenshot of your directory structure shows you need http://example.com/fonts/icomoon.eot?hsw0h3
.
Add ../
or /
Solution to relative path to image in CSS file depending on what file that includes it
The only way is with absolute paths. This means that in your CSS you must define an absolute path for your images, for example:
background-image: url(/images/image.png);
What's the problem? You need to know the absolute path where your folders are. For example, if you have this URL: http://localhost/myFolder/images/image.png
, your CSS will be:
background-image: url(/myFolder/images/image.png);
But when you upload it to a production server like this: http://myserver.com/images/image.png
, your CSS must to change to something like this:
background-image: url(/images/image.png);
So the best way is to develop in the same environment that your production server. This will be with the URL http://localhost/images/image.png
(develop) and http://myserver.com/images/image.png
(production).
Another way is to making friendly URLs, that avoids to you to make custom folders, and you can have all in one folder and the URLs will be rewrited by the server.
Good luck.
list style image not working by external style sheet
You need to update the path to your image in your stylesheet. Paths in stylesheets are relative to the stylesheet.
You're using a relative path that starts in the directory it is defined in.
Your first, working, example suggests the following project structure.
img/
└── grey.png
index.html
img/grey.png
is defined in index.html
so the relative path starts looking for a directory named img
that index.html
is in. It finds it because both index.html
and the img
directory are in the same directory. Then continues on down the path to the file.
Your second, non-working, example suggests the following project structure.
css/
├── styletest.css
└── img/
└── grey.png
index.html
img/grey.png
is defined in styletest.css
so the relative path starts looking for a directory named img
that styletest.css
is in, which is in the css
directory. It doesn't find img
because it's not in the css
directory. It's a level up from the css
directory, like below.
css/
└── styletest.css
img/
└── grey.png
index.html
To move up a directory level from a current directory you need to use ../
. Now the system will move up and out of the css
directory and continue searching for the file from that directory and along the specified path.
Change from
list-style-image: url( 'img/grey.png' );
to
list-style-image: url( '../img/grey.png' );
Related Topics
Understanding Grid Negative Values
Add Outward Curving Border to Elements Like This: ◝◟_◞◜
How to Change the Inner White Color of Font Awesome's Exclamation Triangle Icon
Are Self-Closing Input Tags Valid in HTML 4
Center Navbar Links Without Brand Pushing It to the Right in Bootstrap 4
Failed to Load Resource, Plugin Handled Load on iOS
Different CSS for Each Browser
Table Headers Position:Sticky and Border Issue
Html5: Non-Replaced VS. Replaced Element
CSS Filter:Invert Not Working with Background-Color
Chrome Getusermedia Not Requesting Permission Locally
How to Create a Slanted Background with CSS
How to Display Text, a Dotted Line Then More Text Spanning the Width of the Page
Arabic Characters from HTML Content to PDF Using Itext
How to Set the HTML Options for Collection_Select in Rails
Strange Behaviour When Absolute Positioning an Input with Both Left and Right CSS Properties