I have linked a CSS file to different HTML files around my site. The CSS file is stored in the root of my site. The file only works with the homepage, in the root folder (cPanelX file manager). The other pages will not display the main CSS. My HTML linking code follows. It is from the sub-pages, not in the site's root folder (even though the code is the same on the homepage HTML file). How do I get the sub-pages to display the main CSS?
<link href="homepagecss.css" rel="stylesheet" type="text/css">
I am really new to this, and any help would be appriciated.
Add a /
<link href="/homepagecss.css" rel="stylesheet" type="text/css">
Related
I was trying to build a simple html page on github that can be used as a linking to some of my program there inside. I have build a index.html for my github.io page, so, I tried to display it but with no success. In fact the html code cannot find the css file. Any suggestions or experience in that?
Thanks
PS: the link is albz.github.io
or: https://github.com/albz/albz.github.io
several path options, local and absolute
In your _site directory the index.html is at the same level as main.css
Therefor, in the head section you should change:
<link rel="stylesheet" href="/_site/main.css"></head>
to:
<link rel="stylesheet" href="/main.css"></head>
I have Index.cshtml file and I want to include login.css file there. Index.cshtml lives on Views/Home. I created login.css file in Views/Home/css folder. Here is how I linked it on Index.cshtml:
<link href="css/login.css" rel="stylesheet" type="text/css">
But it doesn't work. When I writes styles inside Index.cshtml, it works perfectly. Where I made a mistake?
Typically you would not put your css in the Views folder. This would belong at the root of the website project(wwwroot). This way you would reference your external styles like this:
<link href="~/css/login.css" rel="stylesheet" type="text/css">
You can juste drags you file css file into yous cshtml file and VS to the work for u
I have a style.css and a html files.
When I upload them to the server I see the headlines in the style I want but on my desktop I don't.
Both of my files are on the desktop
On the <head> I have this line in my html file:
<link rel="stylesheet" href="/style.css">
What can I do to connect the files and see the style applied when I'm offline working on my desktop? and also online in my website
i want to add i just removed the / and it works offline on my desktop (just href="style.css") but not online - but i want to be able to see it both online and both offline ---- and online its not in the same file
** edit : now i see that what works on both is if i put my spesific website adress - than it works on both online and offline :
but if i will want to ever change my website adress it would be hard to change on each page thats why i want it to be : href="/style.css and not the website adress
If you are working locally without a webserver you need to link your css files like this:
<!-- Windows -->
<link rel="stylesheet" href="C:\Path\to\File\main.css">
<!-- Linux & Stuff -->
<link rel="stylesheet" href="/path/to/file/main.css">
Additionally you could use the relative path to your file:
<!-- if it's in the same folder -->
<link rel="stylesheet" href="main.css">
<!-- if it's in the css folder -->
<link rel="stylesheet" href="css/main.css">
<!-- if it's in the parent folder -->
<link rel="stylesheet" href="../main.css">
your question is still not clear, but generally, your question seems to be based on the linking of the style sheet with your HTML file to see the results of your code on your personal laptop and the server both. The best practice to do that is to maintain a file structure which keeps the project organized, for example, there is a folder named "main" which is my project folder which further contains your subfolders like CSS and js, and inside these folders, you should keep your CSS and js files respectively.
A simple project file structure is,
main
|
|-css
|-style.css
|-js
|-script.js
|-file.html
If you follow the file structure to link your files, you won't go wrong, it doesn't matter whether you are on your personal desktop or on the server.
One thing i understood is that when you are working locally you have html files and the css file on the desktop. First of all i would recommend you to make a new folder and copy all your related files whether it be html files, css files or js files in that folder. It is a better way to encapsulate all your project files in a single folder.
Moving on to the css issue - you said that it works when you remove /. It works because since your files are all on desktop they are on same directory structure.
Enough for clarification I want you to follow these steps:-
First make a folder and copy your html files, css files and js files in it. Lets name the folder as website.
Create a folder named css inside the website folder. Copy all the css files in that css folder.
Inside your html files, inside the write <link rel="stylesheet" href="css/style.css"> provided that the name of css file is style.css and you want to include this particular file in your html.
And regarding your online issue, I am not able to understand it. If you clarify a bit more i may be able to help.
Your files should have the same relative path on your desktop and server, so that you can use that same relative path for both. The relative path is based on the location of your HTML file in both.
If you have a folder on your desktop that has 2 files:
index.html
style.css
Inside of index.html, you'll reference your stylesheet using <link rel="stylesheet" href="style.css">
If you have a folder on your desktop that has 1 file and 1 folder containing a file:
index.html
css/ (contains file: style.css)
Inside of index.html, you'll reference your stylesheet using <link rel="stylesheet" href="css/style.css">
Since you said that <link rel="stylesheet" href="style.css"> works correctly on your server, that means that your HTML and CSS files are contained in the same parent folder. On your local, you need to make sure that the same is true. That parent folder can be located anywhere - Documents, Desktop, a random subfolder - but as long as it contains that HTML file and that CSS file (and neither of them are nested in another contained folder), that <link rel="stylesheet" href="style.css"> will work for both.
Note: You can change the folder structure of either server or desktop, or both - but the relative paths must match, so that your relative link works for both.
give like this
<link rel="stylesheet" href="style.css">
I am creating a website using dreamweaver, and i faced a problem with linking a css file to an html page.
In this site, the index.html is linked to style.css and it's working properly, but when i link the page Products.html to styleproducts.css, the html page appears not linked to any style page.
I have placed style.css and styleproducts.css in a folder named "css" and i placed Products.html in a folder named "pages".
Here's the link code written in Product.html:
<link href="css/styleproducts.css" rel="stylesheet" type="text/css">
Any help would be appreciated!!
Your path is wrong try out this
<link href="../css/styleproducts.css" rel="stylesheet" type="text/css">
Your Product.html is in another folder. So you need to leave the folder with "../" than enter "css"
I am having trouble referencing an external css program (specifically a background image from a url) into my html file. I was able to implement css internally, so the url linking to the website is not the problem. I have seen similar posts talking about similar situations, but I wasnt able to solve my problem from them. I am very new to this so I am guessing it's probably something very stupid and simple, but after several hours I must admit defeat and succumb to the all-knowing online community.
So, here is my Practice.css code:
body{
background-color: whitesmoke;
background-image: url("https://static.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg");
background-repeat: no-repeat;
background-size: 1400px 750px;}
Here is my Practice.html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/Practice.css"/>
</head>
<body>
</body>
</html>
'CSS' is the name of the folder the Practice.css is in.
Thanks in advance.
Your css file can be anywhere else on the web. But when you're dealing with file referenced directly on the computer you might have some problems.
To make sure everything works fine try to make sure your css folder is no the same root as your html index file.
BUT your specific case your link to css should be
<link rel="stylesheet" type="text/css" href="../CSS/Practice.css"/>
Once the HTML folder and CSS folder share the same root the html file and css file are disconnected directly. The path should point first to the root where the HTML and CSS folder are which is ../ then point to the css folder and file ../CSS/Practice.css
I can guess by the comments that your .html and .css files are in HTML and CSS directories respectively. Both of these are in the directory ComputerPrograms. Hence, the reference to .css from your html page is wrong. It should be:
<link rel="stylesheet" type="text/css" href="../CSS/Practice.css"/>