How do I specify relative paths for content such as CSS? - html

When I am linking to any file I have to specify the absolute path looking like this
<link rel="stylesheet" type="text/css"
href="F:/XmppOld/XAMPP2/htdocs/MAIN_SITE_LAYOUT/css/stylemainpage.css" />
I would like to narrow it down to
<link rel="stylesheet" type="text/css" href="/css/stylemainpage.css" />
I'm not sure how to. I tried placing stylemainpage.css inside the page being viewed, but it didn't work.

The path depends on where you have placed your HTML files
HTML
index.html
CSS
style.css
CSS path in your HTML file would be - <link href="../CSS/style.css" rel="stylesheet"/>
Edit: in your case the path should be -
<link href="../css/stylemainpage.css" rel="stylesheet" type="text/css" />

Try using <link rel="stylesheet" type="text/css" href="css/stylemainpage.css"/> (without the leading slash before css)

<link rel="stylesheet" type="text/css" href="css/stylemainpage.css"/>
put your css into css folder

Keep the CSS file and the HTML pgae in the same folder, then just include the CSS filename. If you want to keep the CSS file in some other folder under the same server root and still want to use relative path names, use .. and /. Use .. to move up a level, and / to move down a level.

Related

CSS style sheet not found

i spent the last hour figuring out why my style sheet is working.
enter image description here
I tried every possible way, but none of it works.
It just shows error 404 when i check it in the developer mode of my browser.
I tried
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="./style.css" type="text/css" rel="stylesheet" />
<link href="../style.css" type="text/css" rel="stylesheet" />
<link href=".../style.css" type="text/css" rel="stylesheet" />
I also placed the the css file in the same file as my header.php.
The path to the css file is a relative path from the file that's called from the browser, and that's most likely not header.php.
If you start the path with a / it's considered relative to the webroot, so you probably want /css/style.css. Note that you cannot go up (using ../) from the webroot.
../ is meant to go back a folder so if my folder layout is
Root
css
style.css
includes
header.php
I have ho down a folder and enter the css folder like:
<link rel="stylesheet" href="../css/style.css">
You are using many link tag to integrate the css file in you html file. You should use one tag and it would be a relative path like the following <link rel="stylesheet" href="/css/style.css">

How do I link my CSS to the HTML file in Github Pages?

I need some help here.. I tried different links but it does not load the CSS file..
<link rel="stylesheet" type="text/css"
href="https://github.com/cengizkirazjs.github.io/cengizkiraz.github.io/styles.css">
This is the page and the outcome: https://cengizkirazjs.github.io/cengizkiraz.github.io/
Any advice? Its my first time linking CSS with HTML on Github!
As it was said in the comments, what do you think about changing file path a bit?
In your code we have this line
<link rel="stylesheet" type="text/css" href="cengizkiraz.github.io/styles.css">
It contains an absolute path. If you want to stick to this method, maybe just add a protocol, like this
<link rel="stylesheet" type="text/css" href="https://cengizkiraz.github.io/styles.css">
But it would be better if you use relative paths
In this case, our <link> will look like this
<link rel="stylesheet" type="text/css" href="styles.css">
It means that HTML will search for this file in folder, where .html file is saved. Looks slightly better, doesn't it?

Linking both CSS and Bootstrap in HTML file

I'm linking my .CSS file and Bootstrap 4.2.1 to my HTML file. The .CSS Isn't linking correctly. What is the correct way to link my .css to an HTML file? Bootstrap works but not CSS
I have tried changing the order of the links.
I have also made sure my HTML and CSS files are in the same folder
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="stlye.css"/>
you wrote stlye instead of style? maybe it's just the mispelling
or you might need to specify the path for your css
something like this before your css file ~/filename.css
<link rel="stylesheet" href="stlye.css"/> should be <link rel="stylesheet" href="style.css"/>
You spelt style wrongly. Also make sure style.css is in the same folder/path as your index.html (or whichever .html page you are using), else be sure to specify the path like so: /example/style.css.
Check that the style file exists and you are importing your stylesheet with the correct name and relative path. That means use <link rel="stylesheet" href="style.css"/> if your css is in the same folder of your html file. Otherwise provide the correct route for your file. For example would be <link rel="stylesheet" href="./app/assets/style.css"/> if your css is inside app/assets folder.

I’m having trouble linking my CSS file to my html

I created the CSS folder and named it. I added this to my header in HTML but the changes aren’t happening.
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css" />
You mentioned you've created a CSS folder. Then include that folder name in the href
<link rel="stylesheet" type="text/css" href="CSS_FOLDER_NAME/haiku-styles-shaun.css" />
Probably your CSS file isn't in the same directory as your HTML file, you provided the wrong name of your CSS file (also check that your CSS file's extension is .css). Solve these and try again.
You have to include each file you need separately.
e.g.:
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myButton.css" />
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myPhoto.css" />
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myFooter.css" />
Most user don't need all their style definition at the same time. To save bandwidth you have to choose.
You said that you created a folder but you didn't write it on the path. Try adding the css folder before the file name like this:
<link ref="stylesheet" type="text/css" href="folder/file.css" />
Furthermore I suggest you to include versioning in your css to avoid browser caching when you refresh. To do that every time you update your css change the number at the end in the link:
<link ref="stylesheet" type="text/css" href="folder/file.css?v=1" />
The <link> tag is used to link to external style sheets. You have to use something like this :
<link rel="stylesheet" type="text/css" href="Folder-Name/Stylesheet-Name.css">
Make sure that your href address is setup properly otherwise it won't load in your HTML page .
Note: The element is an empty element, it contains attributes only.
Note: This element goes only in the head section, but it can appear any number of times.
In HTML the <link> tag has no end tag. In XHTML the tag
must be properly closed.

css path relative not taking

i have css path /opt/ion/node/service/public in this path cc.css
i want to move that css to /opt/ion/node/service/views/pages but it is not taking
whenever i am hitting the server it is pointing to public so my html is not picking the css file
help me out in changing the file path of css
<link rel="stylesheet" type="text/css" href="cc.css" />
as i am using the href so always it is pointing to public
<link rel="stylesheet" type="text/css" href="../views/pages/cc.css" />
Maybe?