I'm trying to link p1.css to p1.html, but for some reason it's not working. It's in a file on my desktop called 115, and in a file inside called css, but no matter what I add or take away it won't show up. What am I doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<title>CIS 115 - Project 1</title>
<p lang="en"></p>
<meta charset="utf-8">
<meta name="Project 1" content="">
<meta name="Kim Peoples" content="Kim Peoples">
<link rel="stylesheet" type="text/css" href="115/css/p1.css">
<script src="115/p1/p1.js"> </script>
</head>
this is the css, which is I'm in the process of making but I want to make sure it links first.
body {
background-color: green;
}
Im assuming that you are viewing/accessing your file via desktop. Though not clearly sure if you are using localhost server or not. Here's what I think what was your file tree flow..
/115
-/css
-- p1.css
-/p1
-- p1.js
- index.html
Then in your HTML, it should look like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CIS 115 - Project 1</title>
<meta name="description" content="Kim Peoples - CIS 115 Project">
<link rel="stylesheet" type="text/css" href="css/p1.css">
<script src="p1/p1.js"> </script>
</head>
Note: Since you are initiating the index inside your 115 folder, you don't have to include 115 folder to your internal files. Just simple append the folders of your media files and CSS/JS files.
first you have to press ctrl + u on browser window and check css path
has been coming or not? after click it css will be display properly
or not ?
if still issue then check with inspect element in browser. press f12
in browser window.
still issue then you can use element property in !important; in css
code
Maybe try ../115/css/p1.css?
Seems like your absolute path is incorrect.
Here is a link to more information about absolute paths and relative paths:
Absolute vs Relative Pathlinks
Hopefully this is helpful to you.
Happy Coding!
Related
<head>
<title> URL Practice </Title>
</head>
<body>
<img src = "./bloo/chicken.png">
</body>
I'm trying to learn how to do relative URL links and I've been trying to get it to link to an image from a folder that's inside the original file. It's not working and I don't understand why, I feel like I've tried every variation.
This is what I'm working with if that helps
Also I'm really new to this, so if you can explain it to me like you would a 3 year old, that would be awesome because that's probably where my level of expertise is.
I understand that the image is in the "bloo" folder. Your HTML file and the bloo folder are both children to the root folder. For you to link to link the image, you need to need to reference it like this
src="bloo/imagename.jpg"
it will reference it correctly that way.
So your code snipest will look like
<img src="bloo/chicken.jpg"/>
Good luck
No space shall be between "src", "=" and "bloo/chicken.png". Also u don't need that dot. you can install "VisualStudioCode" will be easier.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="MyImages/meme.jpg" alt="meme">
</body>
</html>
meme.jpg is inside MyImages folder
enter code here
HTML Input src Attribute
\
My understanding
So my understanding is, if you have a website with the following source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
<script src="script-head.js"></script>
</head>
<body>
<img width="400" src="image.jpg" />
<script src="script-closing.js"></script>
</body>
</html>
...the browser will queue the assets to be loaded in the following order (the order they appear in the page source):
style.css
script-head.js
image.jpg
script-closing.js
I have tested this simple HTML page in Chrome Dev Tools Network tab and the assets do load in that order.
All makes sense to me. So far so good.
The confusion
But in practice, I'm working on optimising the Largest Contentful Paint score of a website (if at all relevant, though I don't know how/why if we are just talking about page load, it's a Shopify website...). So I need to load the largest image on the screen quickly. And the loading isn't happening as I expect.
If we take this site as an example (this is not actually the site I am working on, but it seems to be happening on all the "larger" sites I've assessed. This one is Shopify too): https://www.luxyhair.com/
It has images (eg. //cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052) that are queued in the Network tab after JS scripts that are below it in the page source (eg. //cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370).
I'm not sure why this is happening.
<!doctype html>
<html lang="en">
<head>
....
<link href="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.css?v=10166822434284191108" rel="stylesheet" type="text/css" media="all" />
....
</head>
<body class="theme-index">
....
<img class="one-whole" src="//cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052" alt="" />
....
<script src="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370" type="text/javascript"></script>
....
</body>
</html>
My fundamental confusion here is why the browser is queuing assets not in the order they are listed in the HTML source.
How I can get an image to load before a bunch of JS scripts that are in the footer that aren't as important? I know about <link rel="preload"> but I can't use that as the image is defined in a page section that's not available for me to capture until after the <head> of the page (because of how Shopify's section templating engine works). I've tried inserting a <link rel="preload"> into the with an inline script, but as expected that hasn't worked. I have also tried adding importance="high" on the img tag. That also hasn't worked.
My CSS file somehow not loaded when i clicked my html file directly in my folder. But somehow with vscode when go live after compiling the scss to css it works fine.
do you guys have any idea why?
I place my css file in dist folder when using the Live Sass Compiler.
I tried open the html directly from folder using all the browser i have but the css not loaded.
body {
background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/dist/test.css">
</head>
<body>
<h1> TEST </h1>
</body>
</html>
Because you use absolute path, you should use relative path
instead of /dist/test.csstry dist/test.css
If you want to read more, here is an article about absolute/relative path:
https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
The preview work on vscode because vscode probably use a localserver to run your html file. something like localhost:3000/index.html. So in this case your html file is at the root of the domain, that's why the absolute path will be the same as the relative path
You can try this
<link rel="stylesheet" type="text/css" href="/dist/test.css"/>
you can try ./dist/test.css, this will also works fine
For some odd reason I am not able to see the background change to black in testIndex.html. What I have is shown below:
body {
background: #000000;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h3>Test test</h3>
</body>
</html>
I am using atom and these is no errors found in the styles.css... is there something I am doing wrong? I've read upon linking the CSS to HTML and by the looks of it I am doing it correctly. Just unable to see the changes made and both files have been saved too. I do have the styles.css in a different folder from the testIndex.html file.
Try this ../ is missing in you code.
<link rel="stylesheet" href="../css/styles.css">
You have missing relative file.
<link rel="stylesheet" href="../css/styles.css">
Here is all you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts
there (and so on...)
To move forward, just start with the first subdirectory and keep
moving forward
You need one more detail in your link tag <>:
link type = "text/css" rel="stylesheet" href="../css/styles.css"
add this to your html file:
<link rel="stylesheet" type="text/css" href="../css/styles.css">
TRY THIS
move the css folder to the pizza web folder and try
I'm having an issue with linking html and Css and have no idea why. I'm doing everything like the book and tutorials says. However, I'm not getting to do the external configuration of css.
This is the code(just a test):
<!DOCTYPE html>
<html lang = "eng">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheets" type="text/css" href="/styles.css">
</head>
<body>
<h1>test</h1>
</body>
</html>
and CSS:
body {
background-color:#CCCCCC;
}
h1 {
color:#0000EE;
}
Maybe I miss something, because when I do internal css (within my html code with ) it goes ok and the web browser is able to read that. It seems like the html is not linked with css, but it's even on the same folder so the path shouldn't be the problem.
I'm using Linux and Aptana Studio.
I've searched a lot the last 2 hours and cannot find where the mistake is.
I invite you to read this article Absolute and Relative Paths
Then we pass to your code:
<link rel="stylesheets" type="text/css" href="/styles.css">
Should be :
<link rel="stylesheet" type="text/css" href="styles.css">
Your styles.css should be in the same folder as your html file.
To verify that you have an error , check Console of your browser,you will be noticed that your file doesn't exist(404 error).
An other way to make your css working is to integrate it inside your page without separation:
Example:
<style type='text/css'>
body {
background-color:#CCCCCC;
}
h1 {
color:#0000EE;
}
</style>
If the other suggestions don't work, you can try re-saving the HTML and CSS sheets with "UTF-8" encoding and declare UTF-8 encoding in the HTML under the <head> with <meta charset="utf-8>"
The rel attribute should just have stylesheet in it, singular not plural as well
I had the same problem correct the correct directory structure solved my problem. This is a good visualiton on how to organize your directory structure.
http://rosebusch.net/jeff/miscellaneous/tree.html
That is, the index.html folder is on the same level as the CSS folder. If you want to put index.html in a HTML folder, to link to the CSS folder you would have to backout first by linking href="../css/stylesheet.css". The ".." will take you up a level.
Make sure style.css is in your root web directory since that is where you are calling it from
Don't put the / in front of styles.css and make sure they are in the same folder.
Try this instead:
<!DOCTYPE html>
<!-- Language was wrong? -->
<html lang = "en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Check the path to the file - I made it relative to where the HTML is -->
<!-- Correct the rel attribute's value too -->
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<h1>test</h1>
</body>
</html>
If all the above not working:
1- Make sure you have no inline/internal CSS > Delete all style code from the Html page (it ll prevent external css link)
If your CSS file are in another folder then use
<link rel="stylesheet" type="text/css" href="folder-name/styles.css">
I found out while Using Visual Studio Code and adding quotes that it was quoting automatically. So when I put in quotes and looked in the index.html of the index it was quoting the quotes (Bad News). Try link
<href=FILENAME.css rel=stylesheet type=text/css />
Hope this works! Also, if you want Multiple CSS files, organize them in a folder, if you do so in FILENAME put /FOLDERNAME/FILENAME.css
BUT make SURE it is under the main folder where your Index is!
just try tasking off the / in front of the style.css
Place your link in the head tag or body tag, it is best to put it in the head tag.