Linking both CSS and Bootstrap in HTML file - html

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.

Related

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?

Cannot link CSS to HTML

Please help to check why I cannot link club.css to index.html.
index.html (Please note: I have to use the direct local path as the CSS link, or it will show that "some content has been disabled in this document.")
<head>
    <meta charset="utf-8">
    <title>The California Corgi Dog Club</title>
    <link rel="stylesheet" type="text/css" href="C:\Users\leeson\Desktop\CS651 Web Systems\assignment\assignmentfall2021-Rijutady\clubProject\club.css" />
</head>
club.css (Please note that the css file is under Encoding utf-8)
h1 {
    background-color: skyblue
}
The Simple Answer
Using a relative path should resolve your issue for most situations.
<link rel="stylesheet" type="text/css" href="./club.css"/>
The Alternative
You could also include the CSS directly into the HTML document, however this is not always ideal or recommended. Here's an article on that.
<style>
h1 {
background-color: skyblue
}
</style>
#NullPointDev's answer is correct. Use Relative path to your projects. It will make your work easier without errors. I just put some additional information for make your project easier.
If both HTML and CSS files in same directory, You can link your CSS like this,
<link rel="stylesheet" type="text/css" href="club.css"/>
If the CSS file is located in another directory in the directory which the HTML file located, you can use this method.
<link rel="stylesheet" type="text/css" href="name_of_the_subdirectory/club.css"/>
If the CSS file located in out of the directory which the HTML file located, Use ../ to go back.
<link rel="stylesheet" type="text/css" href="../club.css"/>
Read this Article for more info. Relative Path | W3 Schools
Now you know all the basics of Relative path. Wish you all the best.
no ,
it will be <link rel="stylesheet" type="text/css" href="club.css" />
if its under the clubproject
The solution code for your question is:
<link rel="stylesheet" type ="text/css" href = "club.css">
Your mistake : You have written the complete folder path instead of relative file path.
Advice: Have a look to the below link to clear concept.
https://www.w3schools.com/html/html_filepaths.asp
I prefer simple solution which is using relative path.
club.css
<link rel="stylesheet" type="text/css" href=".\club.css" />
Where is the problem:
URLs cannot contain spaces

Why isn't the style showing (colors, font,etc..) when I link my stylesheet to w3.css?

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>

Css doesn't work properly when is in other folder

I've using bootstrap and file and folders is like this
root/css/..
When I include <link id="bs-css" href="css/bootstrap.min.css" rel="stylesheet"> it is working for files in root folder. But if I have file in another folder and trying to include css doesn't work. It doesn't show any style. For example
root/users/profile.php
then I include in profile.php like this
<link id="bs-css" href="../css/bootstrap.min.css" rel="stylesheet">
I've also tryed full path again didn't work properly. But if I put inside /users/ css file or full folder is working href="css/bootstrap.min.css"
You can change the link to be the full path from your URL like this:
<link id="bs-css" href="yoursite.com/css/bootstrap.min.css" rel="stylesheet">
That should work from any page.
Try using href="/css/bootstrap.min.css" This should work no matter where your php or html file is located. This is called a relative path. So..
<link id="bs-css" href="/css/bootstrap.min.css" rel="stylesheet">
As long as css is a direct child of the root, this should find it.

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

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.