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
Related
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 have linked the w3.css stylesheet in my html (as suggested at w3schools) to utilize their responsive template but it doesn't appear to be working. I have linked it as such within the head tag of my html:
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
Am I missing something?
Make sure your CSS code is in your .css file, and your HTML and CSS files are in the same directory if you are using <link href="File.css" rel="stylesheet"> and not writing the directory.
Also, don't forget to put your link tags between opening and closing head tags.
It should look like the example I posted below.
If it's still not loading then it would to do with the location of your stylesheets(css).
Example - href="path/to/stylesheet"
The path would start from the current directory your HTML is in... so if you had index.html in the root directory and your css files a sub-directory then the example would look like this.
Example - href="css/w3.css"
Example - href="css/w3-theme-brown.css"
//HTML
<head>
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
</head>
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">
For the index file
<link rel="stylesheet" href="css/stylesheet.css"/>
That works fine no problem here though.
The rest of my html documents are in a folder called "pages". Here though it cant find my CSS sheet. I tried
<link rel="stylesheet" href="../oliverteglhus.dk/css/stylesheet.css"/>
Does not work. Sorry for this noob question. It's just bugging me.
it should be:
<link rel="stylesheet" href="../css/stylesheet.css"/>
If the rest of your documents are in a folder that is in the same directory as your index file, then you only need to go up one directory to find your CSS file:
<link rel="stylesheet" href="../css/stylesheet.css"/>
So, if your directory structure looks like this:
-index.html
-pages
page1.html
page2.html
etc...
-css
stylesheet.css
To load the stylesheet.css from CSS folder in page1.html, you have to use like
<link rel="stylesheet" href="../css/stylesheet.css"/>
Check this answer for a more detailed explanation