Why isn't my CSS file being applied to my html? [duplicate] - javascript

This question already has answers here:
HTML not loading CSS file
(26 answers)
Closed 5 months ago.
I don't know why my html is not being formatted by my CSS. I made sure the name of my CSS file is the same as the one in the HTML file. There are also no errors in my CSS file, it has been validated. It's the same format as other projects I've done, same folder and everything, but for some reason it isn't working.
<head>
<meta charset="utf-8">
<title>Project 5: Javascript Arrays</title>
<link rel="stylesheet" href="project5.css">
<script src="project5.js"></script>
</head>

Make sure both files in the same folder and this code should work
<link rel="stylesheet" href="./project5.css">

This might happen if your css file is in another directory. If your project looks like this:
index.html
css/project5.css
You would need to use href="css/project5.css". Please make sure the filepaths are correct.

Related

How do I connect one CSS file as a stylesheet to multiple PHP files in different places for a blog type website?

I have a blog type website I am currently making that will have different pages in different folders
like for example, the index.php file is:
C:\xampp\htdocs\dashboard\index.php and a section file could be
C:\xampp\htdocs\dashboard\section\section-title.php
C:\xampp\htdocs\dashboard\section\section-title\section-articles
The stylesheet path is: C:\xampp\htdocs\dashboard\stylesheets\index.css
I'm looking to get one stylesheet to communicate with both of the php files mentioned above with the one index.css file. What can be done to accomplish this? There will be more files like the examples above where php files are a layer or two below the index.php file.
I apologize if enough information was not given, I am a bit new to webcoding so if a clarification is needed, I can provide more information
I'm open to using whatever is needed to get this accomplished. The website I am creating is using HTML, CSS, Javascript, PHP and Bootstrap 5
I'll also add for reference that I happen to have two php documents that I use to link my head code and my navbar code into the other php documents such as index.php. I'll list out how this is done. If it's possible, I would like the index.css document to be able to be linked through the bolded code below in the main-head.php document.
Code to link into document:
<?=include
("C:xampp\htdocs\dashboard\head-code\main-head.php")
?>
main-head.php code:
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">`
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Title</title>
<link rel="stylesheet" href="stylesheets\index.css">
<base href="https://indianrivernews.us/" target="_blank">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="C:\xampp\htdocs\dashboard\randomimages.js"></script>
You should add the css file to your main php file like index.php with link tag and use the sections php files with include in your index.
I don't think your main-head.php is referring to the correct file path.
It's looking in the head-code directory for a "stylesheets/index.css"
Try "../stylesheets.index.css" instead.
I hope I understood your problem right and this works!

How I use an external javasrript file inside .ts file without converting it? [duplicate]

This question already has answers here:
How to import js-modules into TypeScript file?
(7 answers)
Closed 3 years ago.
i have external javascript file. I want to use it in .ts file without converting it. Anyone have idea to use it inside typescript without converting.
Option 1
Place your script inside the src\assets folder.
Include the script in angular.json
"scripts": [
"src/assets/myscript.js"
]
Option 2
Alternatively, host your script via a CDN (or anywhere really):
https://www.cloudflare.com/myscript.js
Then reference that script as you normally would in your HTML:
Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.cloudflare.com/myscript.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>

HTML cannot load css and js file in iOS/OSX project

it work perfect when the css and javascript write in the HTML file, but it is not working after extracting the javascript code to a separate file. have some way to fix it? Thanks in advance!
Get it, We do not need to add the detail path to load the js/css file. No matter which folder u put your css/js file, just do like this:
<link rel="stylesheet" type="text/css" href="your.css">
<script src="your.js"></script>
don't do this:
<link rel="stylesheet" type="text/css" href="css/your.css">
<script src="js/your.js"></script>
If www has sub-folders, when drag it into Xcode, make sure select Create folder references for any added folders. This option will keep www structure. js/css files will loaded successfully.

Custom CSS Not Loading with Bootstrap 3 [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
For some reason my HTML file is not picking up my custom CSS files for Bootstrap. Code below:
<head>
<title>Site Name</title>
<!-- METAs -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<!-- Stylesheets -->
<link href="bootstrap.min.css" rel = "stylesheet">
<link href="styles.css" rel = "stylesheet">
</head>
<body>
This loads the default Bootstrap CSS, but not the styles.css file. The file is in the same directory, and there is code in it. For the life of me I can't figure this out and my only guess is it is somewhere in this head portion. I can provide other snippets if need be, and I have tried other paradigms like LESS with no luck either.
This snippet will eventually go into a PHP include file for easier editing. I have my java script saved in a similar type file at the foot of the site with the footer.
I was going to guess it was a host side issue until I tested it locally and the issue still did not resolve.
Any suggestions to help me keep my sanity would be most appreciated!
Are you positive that it isn't loading? What does the console say?
If it is throwing a 404, then there's something wrong with the path you're specifying.
If it isn't throwing a 404, then it is loading and just not overriding what you want it to override.

Linking javascript file to html

I'm new to javascript and trying to add this http://codepen.io/jklm313/pen/EarFd great map scrolling effect to my site. Css anf HTML read fine, but the js part doesn't want to work. Even if I put the js code in my html. This is the very typical beginning of my html:
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"/>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
I've searched for clues, but I can't seam to find the issue, is the code outdated or should I add something more? Thanks in advance
Test and make sure you are getting the js file loaded into the page. One method would be to place at the top of the script.js file :
alert('loaded');
If you get the alert box then you you have the correct path. If not then you know it is likely a path issue. You may need to make sure your file is in the same directory or else specify the directory in the src
I just glanced at the link and notice it is using the jquery library. Go to jquery.com to learn how to include that js file as well

Categories

Resources