How CSS file upload to index.html file in Github? - html

I uploaded index.html and CSS file in githuib pages.
like the images I uploaded.
But I don't know for what reason the CSS didn't load into index.html.
I guess it is because of the problem of the link addresse, but I don't how to fix it.
To make the CSS file to index.html file, how do i fix my codes?
enter image description here

you probably do have some problem with the linking of the css file.
normally css file should be linked between the head tag like this:
<head>
<link rel="stylesheet "href="filename.css">
</head>
to extend on this, if you have deployed your website on github pages, to see the effects there you need to push your changes to github first.

i want to add to Liemannen loop answer,
sometimes we need to add "./" on the css link like this if for some reason the css is not loaded
< link rel="stylesheet" href="./stylesheet.css">

Related

How do I use external CSS in an HTML document in VSC?

I'm practicing using HTML in VSC. I want to use external CSS, since I've already figured out inline CSS and internal CSS. However, when I try to use external CSS, the page doesn't change.
I've tried different documents, and I've tried copying the code from documents that already work. I've tried typing the code into different spots etc. But nothing seems to work.
Any ideas why this might be happening? enter image description hereenter image description here
enter image description here
First of all you need to save both the files with .html or .htm extension for html file and .css for css file
Second the path of the css must be correct if both the html and css path are on same directory then code this
<link rel="stylesheet" href="./styles.css">
I think it works if not can you post the screenshot of the directory you are working and the css and html file
Thank You!!!

why does my css file when refreshed changes to index.html page in bracket editor

I am a newbie in Front end languages. I am having a difficulty with my CSS web display, whenever I get to write my CSS codes on Bracket editor,then get to link it with any of the html codes. For example using <link rel="stylesheet" href="css/mine.css>..then get to refresh the CSS.mine page, it automatically displays my index.html codes page, which is not related to what I expect, in terms of it loading to other html pages I linked it with or I'm working with.
Please any solution, on how to overcome this challenge?
Thanks
Hopefully I am getting it right, but normally the web browsers render the html files in the project folder, when it comes to css files, they are used for styling the html page, so you have to link the css file to the html file you want to render, for example index.html and index.css. Then in the head of the index.html you put the link tag
<link rel="stylesheet" href="index.css">
as an example. Then you save and reload(or if using any automated terminal just save). CSS files are only displayed in the linked html files, so this means

Problem with html and css linking them together

I just started using html and css and I have to do something with it but I am getting the error Unable to open 'style.css'. I don't know what the problem is since the path that I used is the same as the file path.
Make sure the CSS file and the HTML file are in the same folder.
based on your image it should be
href="mywebs\site\style.css"
if you want to link site/style.css to mywebs/smth.html you should go one folder back.
<link href="../site/style.css">
or put the site folder inside mywebs, because based on the picture the site folder is not inside mywebs folder.
Sometimes the file may missed directory. You can close and open the code editor and it will work. Also, make sure your html and css file is in same directory. If you css file is in a different directory then use the following code:
<link type="text/css" href=".../style.css"/>

CSS Won't Connect with My HTML

I am doing some HTML & CSS tutorials, and I am unable to get my CSS to appear when I load my web pages.
I linked my CSS to the HTML skeleton.
Can you help me figure out the error?
Screenshot of my HTML document:
Screenshot of my CSS:
Both of the files are stored in the same folder:
If anyone could let me know where I went wrong so I could continue my process, I would appreciate it.
The index.html and the styles.css are in the same folder, so you shouldn't point to a sub-directory for the css. Try this:
<link rel="stylesheet" href="styles.css">
as both index.html and css files are in same folder, you can use
<link rel="stylesheet" href="styles.css?v=1.1.2">
here, v is version declared, so whenever you make changes in your css file, simply change this version numbers to get refresh css and changes to take effect in browser without cleaning caches..
you can also move your css file in stylesheets folder and can keep index.html structure as it is.... basically it is good practice to keep files in subfolders so we can find them easily when searching... for e.g. all .css files in stylesheet folder, all images in images or img folder, all javascripts in js folder...
by the way, what is m.m in css file, in body styling ??

My bootstrap website is working locally, but fails to load css and images when trying to publish it

I'm pretty much new to all of this and for the past days I've been working on my first Website using bootstrap. Locally, this works fine, but right now, when trying to get it up online, it looks like this:
http://wearemanjaro.de
Just ugly html, no css nor any images are loading.
I made the link above link to the html which is in the /manjarowebsitebootrap/robots/index.html path. The CSS (bootstrap and custom) is in the following directory: /manjarowebsitebootstrap/css/...
The link to CSS in my html looks like the following:
<link rel="stylesheet" type="text/css" href="../css/custom.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
Same problem with the images in my ../img folder. It all works fine locally. I'd really love some help or advice :)
First thing you need to do is use an absolute instead of a relative path.
if your directory structure is:
-root
--docs
---doc1.php
--includes
---header.php
---footer.php
---css.css
--index.php
In your header, you link to my CSS file like so:
<link href="includes/styling.css" type="text/css" rel="stylesheet" />
you need to do like this :
<link rel="stylesheet" type="text/css" href="/root/includes/css.css" />
You also need to use developer tools on chrome that will help you to debug these things.
I saw there that the images are not uploaded so once you able to upload them you will start getting them on the Website if the path is correct.
and best of luck for the new world of web development.:)
Your file structure has changed from local to online/live. I inspected your page, placed in the CDN for Bootstrap and pow, the styling came alive.
Use the following CDN to replace your current src='' path for bootstarp in your html head to see what I mean.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
The next steps you should take: make note of where all your files are living on your server, you must place all associated files on the server, as specified by your code, i.e shows that you have a CSS folder.
Also is this HTML file located at the same level as the CSS folder or does this HTML file live in a folder of its own. If not your paths do not need to include the ../ portion and you should use just css/yourFileName.css