I typed the below code in the section of the HTML. However, the CSS code and the bootstrap is not being recognised by the HTML.
<link href="C:\Users\Robert\Desktop\Websites\public_html\Main.css" rel="stylesheet">
<link rel="stylesheet" href="C:\Users\Robert\Desktop\bootstrap-3.3.4-dist\css\bootstrap.css">
<link rel="stylesheet" href="Main.css">
What am I doing wrong pls?
You can find this answer very easy by using google.
I would do the following. Create on your desktop a directory website. In this directory create a directory called "css", "js", "img". Create in the directory "website" index.html and enter this in the document:
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
Try making a container in your html file like:
<div class="container">
some text...
</div>
Use inspect element in firefox and you can see if your browser reads your css file.
Related
I have separated some HTML files other than index.html and CSS too. It is working well in VS code but on creating Git Hub pages only index.html file is running.
Here is my repository:- https://github.com/shashi-singh18/BlogWritingSite
please help!
Change you links to the following structure
src='./css/utils.css'
Your current paths force your index.html to search for a sub-directory "BlogWritingSite" which does not exist at that reference level.
I saw your repository and noticed some errors when linking your css file in index.html
<link rel="stylesheet" href="/BlogWritingSite/css/utils.css">
<link rel="stylesheet" href="/BlogWritingSite/css/style.css">
<link rel="stylesheet" href="/BlogWritingSite/css/mobile.css">
change for
<link rel="stylesheet" href="./css/utils.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/mobile.css">
and
change the name of your css folder to lowercase letters
after
CSS
fixer
css
I think the error is in the address of the CSS files
Here, you should have given the address of each CSS file, relative to the index.html file and not the project directory as a whole
Try changing these link tags to this and tell me if it works.
<link rel="stylesheet" href="./CSS/utils.css">
<link rel="stylesheet" href="./CSS/style.css">
<link rel="stylesheet" href="./CSS/mobile.css">
If I take css script from this example W3Schools and I put it into 2 external css file (font.css and menu.css) and then I called them in html, the arrow from Dropdown menu disappear.
The content from https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css is in font.css and the entire content of tag <style> is in menu.css.
I can't include web link because I don't have access to internet where I want to create this.
The code ended like this:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="font.css" >
<link rel="stylesheet" type="text/css" href="menu.css" >
</head>
<body>
<!–– Rest of the code...-->
</body>
</html>
its not enough to copy content of https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css to your css file! since there is some linked fonts and images that directed by "Relational Path"
in this case you have to use External CSS URL replaceing with your local css file
means;
replace
<link rel="stylesheet" type="text/css" href="font.css" >
with
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
or if you want to use offline , you have to download FontAwesome toolkit from
https://fontawesome.com/download
and use it in your source code
there is sample files in downloaded archive file...
I initially was loading a page
somePage
And the index.html would render with styling
<head>
..
<link rel="stylesheet" type="text/css" href="app/themes/basic_themes/blabla/base_theme/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/themes/defaults/generated.css">
<link rel="stylesheet" type="text/css" href="app/themes/basic_themes/blabla/generated.css">
<link rel="stylesheet" type="text/css" href="app/themes/brands/blabla/generated.css">
<script src="/js/libs/jquery.min.js"></script>
</head>
The above code works fine in production. However someone made some changes and deleted the app folder and refactored the code to this:
somePage
And the index.html to
<head>
..
<link rel="stylesheet" type="text/css" href="themes/basic_themes/blabla/base_theme/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="themes/defaults/generated.css">
<link rel="stylesheet" type="text/css" href="themes/basic_themes/blabla/generated.css">
<link rel="stylesheet" type="text/css" href="themes/brands/blabla/generated.css">
<script src="/js/libs/jquery.min.js"></script>
</head>
Now index.html cannot find the css styling. I tried different relative and absolute paths but nothing seems to work.
Any help?
EDIT: My folder structure is:
When I load my page localy http://localhost:56071/blabla/en/ and then click to navigate to "somePage" I end up on http://localhost:56071/tos/blabla/en/ a page with text and no styling. However, if I try to navigate to http://localhost:56071/themes/basic_themes/blabla/base_theme/bootstrap.min.css it returns a 404. BUT I can access my .css file through this link http://localhost:56071/blabla/en/themes/basic_themes/blabla/base_theme/bootstrap.min.css Can someone explain whats happening here?
Please help, i really cannot see what i am doing wrong. I have tried all permutations and still cannot link so have started to write css code in html. Not what i want to do. Been looking at it too long and hoping someone can see my error. Thnks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
My file tree is my directory folder name of the project then a sub folder css, then the style.css
Assuming your index file is in the root directly below the css file, you need to write "./css/style.css" - you're definitely not pointing to the right location.
<link href="./css/style.css" type="text/css" rel="stylesheet">
Try This:
<link href="../css/style.css" type="text/css" rel="stylesheet">
OR
<link href="/ProjectName/css/style.css" type="text/css" rel="stylesheet">
If you want to link to your stylesheet and it is not working, navigate to your stylesheet (it should look like http://www.example.com/css/style.css) and then copy the URL to your <link rel="stylesheet"> tag so it looks like this:
<link rel="stylesheet" type="text/css" href="http://www.example.com/css/style.css">
instead of this:
<link href="css/style.css" type="text/css" rel="stylesheet">
Hope this helps!
I have a problem where my css does not affect my html. I made a fiddle here
It worked when I wasn't trying to connect an external stylesheet and used style tags,
Thanks in advance to anyone who can help.
btw i tried
<link rel="stylesheet" type="text/css" href="index.css">
and it did not work.
Make sure you are linking it in your 'head' section of the HTML such as this:
<head>
<link href="index.css" type="text/css" rel="stylesheet" />
</head>
Also be sure to close the tag and that the style sheet you are linking is named 'index.css'
Edit:
HTML is split up into two main section tags: body and head. In a normal HTML page, the structure is like so:
<html>
<head>
</head>
<body>
</body>
</html>
The code I referenced at the beginning of this answer should be placed into the head section of the HTML page.
The fact that you are linking to simply index.css worries me. Is index.css in your site root? If so, specify that:
<link rel="stylesheet" type="text/css" href="/index.css">
As stated also by BuddhistBeast, check to make sure it's in between the head tags:
<head>
<link href="index.css" type="text/css" rel="stylesheet" />
</head>
Also check that you are referencing it correctly. If it is all in one folder, then
<link href="index.css" type="text/css" rel="stylesheet" />
is correct.
If it's in its own folder, named "css" for example, it should be written as:
<link href="css/index.css" type="text/css" rel="stylesheet" />
You put #button instead of input, #button in the css.