I managed to create a new app on Openshift and the basic template that they provided me with is working. The only thing I added to it is:
<head>
...
<link href="styles.css" rel="stylesheet">
</head>
and a file styles.css in the same directory as index.html. In the css file I just changed the footer to red. When I click on index.html my browser shows the changes, but when I upload the files to Openshift nothing changes and I get:
GET http://bgl-boardgamelab.rhcloud.com/styles.css 404 (Not Found)
I think I'm making some silly mistake, but can't figure what it is.
Turns out I had to add the following to my .initializeServer function to serve all my static files:
self.app.use(express.static(__dirname));
try
<link rel='stylesheet' href='styles.css' type='text/css' media='all' />
Try full path url like:
<link href="http://localhost/myproject/styles.css">
or
<link href="http://examplesite.com/styles.css">
Related
I made a portfolio page in Codepen and i'm trying to publish it with Gihub Pages.
I'm not able to make my CSS work. This is the link I made for the stylesheet:
<link rel="stylesheet" type="text/css" href="css/style.css" />
And this is the link for the repository: https://github.com/IgnacioGR/IgnacioGR.github.io
I'm new in this so i'm sure I missed something.
Your "css" file has a error, the file extension is "ccs" not "css"
look
I'm working on a project using arduino, node.js and socket.io. I am running it in localhost, however my external stylesheet wont load.
The error seems to be saying it cant get my css from this path http://localhost:1337/css/main.css
However if i keep the css in a style tag in the html file it all works fine, is there a way to keep the css external so it doesnt clutter my html file?
Heres how im loading in my css
<link rel="stylesheet" type="text/css" href="css/main.css">
Here is how my file structure looks
Here is my main.css file inside the css folder
my main.css file is within the css folder, i am working off of the interface.html file
Try this instead:
<link rel="stylesheet" type="text/css" href="./css/main.css">
notice the ./ in front of the href
otherwise include full path name:
<link rel="stylesheet" type="text/css" href="http://localhost:1337/css/main.css">
this is what i have tried and it is working for me
<link href="./main.css" rel="stylesheet" type="text/css" />
thanks
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.
The function signature is:
app.use(express.static(__dirname));
Then you can include like bellow
<html>
<link rel="stylesheet" href="/css/style.css">
</html>
The relative path kicks off from your html path so
<link rel="stylesheet" type="text/css" href="main.css">
should work (as your main.css is outside of the css folder). Alternatively, you could put the main.css file on the css folder and reference it with "css/main.css"
I was facing same problem as you are facing but i tired below code and it works.
body{
background-color: yellow;
}
h1{
color: red;
}
p{
color:green;
}
<html>
<head>
<link href="./external.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>This is my First page to test CSS</h1>
<p>The main motive to making this html file is to test my CSS skill.....</p>
</body>
</html>
Thanks,
hope it will help you......
I'm also facing this problem... But I found a solution and its working. Try the below code line:-
<link rel="stylesheet" type="text/css" href="css/main.css?v=<?php echo time(); ?>" />
For anyone else that's having this problem, I was having the same problem and found a solution. My localhost was apparently following a path to a cached CSS stylesheet file, even though it had been overwritten countless times.
Solution: Rather than opening the stylesheet directly from the folder to edit, I had to manually open it from my text editor dropdown menu. After hours of frustration, it was that simple. I use Sublime Text, if it makes any difference, but it seems to be a problem with the localhost, and I suspect clearing the cache would have had the same result.
I can't linked to my CSS file in my HTML file in localhost.
I have my index.html and styles.css in /var/www/html/project
I call it in the browser with localhost/project/index.html and only the html is printing.
When I just open the html in the browser, it's working fine.
I tried
<link rel="stylesheet" href="http://var/www/html/project/styles.css" media="all">
I also tried in the href
localhost/project/styles.css
or project/styles.css
or /project/styles.css
But nothing, what am I doing wrong ?
Thx
The path you put for your CSS file should be RELATIVE TO the location of your html file.
If your HTML file has the path /var/www/html/project/index.html, then it's location is the project folder. That folder becomes the "root" of your project, and the CSS path should be relative to it:
styles.css
Did you try:
<link rel="stylesheet" type="text/css" href="styles.css"/>
If your css file and your html file is in the same folder, you just need to reference it by name and the file extension, I think.
If the CSS file is in the project file (with the index.html file) your link should look like this:
<link rel="stylesheet" type="text/css" href="styles.css">
As an example for VS13 link the css as shown below:
<link href="~/MyFolder/Style.css" rel="stylesheet" />
I also found a solution. You don't need anything. Do
<style type="text/css" media="all">
/* Your code */
</style>
and
<script type="text/javascript" charset="UTF-8">
// Your code
</script>
Don't link them. Do it Internal. Thanks me later
So I added type = text/css and thx the CSS is working, but if I move my CSS in a CSS folder css/styles.css is not working
with my html file in /var/www/html/project/index.html
and my css file in /var/www/html/project/css/styles.css
But in any case images are not charging :
and I have my images in /var/www/html/project/img/banner.jpg
I am using Windows (7) trying to create an offline html page that should link to a separate CSS file located in same directory. I tried to use
<link rel="stylesheet" type="text/css" href="/styles.css" />
but no luck.
And I also want to import another css file named styles2.css within style.css. Didn't check yet but putting #import "style2.css"; on style.css may be not work as well. I can use absolute links like C:\Users\ELITEBOOK\Desktop\offline\style.css but it won't work if I move the folder anywhere else from Desktop. Any help? I mean, any code that calls/adds the link of the folder?
Use <link rel="stylesheet" type="text/css" href="./styles.css" /> instead. Note: href="/styles.css" changed to href="./styles.css", which is current directory of your script.
While the accepted answer is not wrong it's over-complicate things.
If your file is https://www.google.com/b/bananacream/bananas/index.html
<link rel="stylesheet" href="/style.css">
Will try to get https://www.google.com/style.css as the last / tells the file is located in the "root" folder.
<link rel="stylesheet" href="style.css">
Will try to get https://www.google.com/b/bananacream/bananas/style.css as nothing indicate what folder the file is located in it will use the same folder as the requesting file.
<link rel="stylesheet" href="./style.css">
Will try to get https://www.google.com/b/bananacream/bananas/style.css as ./ tell that the file is located in the same folder as the requesting file.
<link rel="stylesheet" href="../style.css">
Will try to get https://www.google.com/b/bananacream/style.css as ../ tell that the file is located in the previous folder as the requesting file.
<link rel="stylesheet" href="../../style.css">
Will try to get https://www.google.com/b/style.css as ../../ tell that the file is located in the folder two steps before as the requesting file.
A general complete answer:
to address through existing folder, use:
<link rel="stylesheet" href="./style.css">
to address through parent folder, use:
<link rel="stylesheet" href="../style.css">
to address through the internet( CDN ) use:
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3./css/bootstrap-theme.min.css"
>
to address through your hard drive use:
<link rel="stylesheet" href='file:///C:/mystyles.css'>
try this one, it worked for me.
<link rel="stylesheet" href="./main.css">
I have created
a static html page in a play 2.2.1 project.
My public folder looks like that:
These are my stylesheet links:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="assets/css/social-icons.css">
<link rel="stylesheet" href="assets/css/coming-soon-style.css">
However, when I open the site I only get the html.
I appreciate your answer!
UPDATE
My routes:
GET / controllers.Assets.at(path="/public", file="comingSoon.html")
GET /coming-soon_followUpPage.html controllers.Assets.at(path="/public", file="coming-soon_followUpPage.html")
Move all files/folders from /public/assets/ directory one level higher, so for an instance instead /public/assets/bootstrap it should be /public/bootstrap
As I can see you are using default route for assets, which means that every file/folder placed in /public folder will be available with assets/file or assets/folder within your templates.
If you are gonna to keep them in /public/assets/file.css style you just need to use proper path in your templates, ie.:
<link rel="stylesheet" href="assets/assets/bootstrap/css/bootstrap.min.css">
Anyway as you can see it doesn't make sense ;)
Hi you're linking in the wrong way your css files, you have :
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
With this you're searching on the same level the folder assets but that is the parent and you don't need to reference this then you only need:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
You also can try adding / at the begin of the path:
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">