This is the most silliest question but I dont know why I can't find the problem! Below is the code but css file is not loading.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
</head>
<body>
<section id="mainWrapper">
Hello
</section>
</body>
</html>
I checked the source in the browser, it cannot find the file specified! I tried to move file in the root and removed the folder name still the same. It is just the basic template that I was designing and I can't get CSS working!!!
Check the file name,sometimes when you rename via PC it tends to add layout.css.txt change the file name to just .css.
Move the file to the root where you have you HTML don't create any sub-folders for time being.
Please mention if your trying to upload to a server or just practicing,so we can give you precise instructions.
Try with full path
<link rel="stylesheet" type="text/css" href="http://domainname/css/layout.css" />
Also make sure file is accessible.
Another tip would be to check that the element ids that the CSS file is using are the same as those outlined in your index.html. If they are different the CSS will not be applied.
You can do it with specifying the path for it,
if you are using windows : go to your css file and click on properties where you will find the path for your css file, just copy and paste it in the below code.
Now confirm that with the path you have added the name of your file. Sometimes the relative paths are not working, you would need the full path. So, above is the procedure.
<link rel="stylesheet" type="text/css" href="add your full path here" />
Note: must see the name of file is included in the path you have copied if not do write it by your own.
Related
My External css file is not linked to my html page.
I had with inside a folder with path
->app-->css-->layout.css
->index.html
In my index.html file I linked it like
<link rel="stylesheet" type="type/css" href="app/css/layout.css">
it won't link it.
i searched for the file in the chrome (inspect-->sources) and the css file wasn't listed there
I then put the layout.css and index.html in the same path.
<link rel="stylesheet" type="type/css" href="layout.css">
it still didn't work. I checked in multiple browser like chrome and firefox as well but it didn't work.
Not sure if it is causing the error(most probably is), but type should be text/css instead of type/css.
Just replace the type/css to text/css and there is no need to write full path name in href.
You can directly use the command below to get the desired result
<link rel="stylesheet" type="text/css" href="layout.css">
Its a very common mistake that everyone do... Please notice that here type="text/css" not
type/css...
Regards,
Om Chaudhary
Instead of having to copy the css file over and over again when making a new subdirectory with a html file in it, I would like to have one css file that applies to all html files. How would I do this? I am managing my files through StackCP. My css file is in my public_html folder.
You can use a relative file path to link to your CSS file from other directories. Check out relative path to CSS file for more details on how to accomplish this.
Place
<link rel="stylesheet" type="text/css" href="https://example.com/stylesheet.css">
in your header.
Well, the way you do this is:
Step 1: Create your main.css (It shouldn't necessarily be main.css any name would work like style.css) file anywhere you want but it should be inside the public_html folder.
Step 2: Create your HTML files and include the link/path/URL of the CSS file in your head section of each HTML file. To do this you use the link tag
<link rel="stylesheet" href="main.css" />
The rel attribute in the link tag defines what type of file it is in your case you can put stylesheet and the href attribute defines the link/path/URL to your CSS file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!-- Content of the page -->
</body>
</html>
In the end, your HTML file should something like this.
I hope It helps.
So my CSS doesn't work for some reason. I have searched online and cannot find a problem with it but the CSS is not connecting to the HTML. Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="yee.css">.
</head>
<body>
<audio id="yee" src="C:\Users\Jake Coffey\Downloads\yee.wav" preload="auto"></audio>
<center><img src="https://vignette1.wikia.nocookie.net/smashbroslawlorigins/images/1/16/Yee.png/revision/latest/scale-to-width-down/280?cb=20140904202925" onclick="document.getElementById('yee').play();" /></center>
</body>
</html>
This maybe... never mind...
But I got this problem.
Try add / to your link tag end
<link rel="stylesheet" type="text/css" href="yee.css"/>
It's hard to answer because we can't see your file structure.
This href you are using href="css/yee.css" is assuming that your files look like this.
/ project-folder
index.html
/ css
yee.css
The href tells your HTML file where to look for the CSS file. If your CSS file is in the same folder as your HTML file try changing the href to href="yee.css"
Hope that helps!
EDIT:
https://codepen.io/718studio/project/editor/ABPvrZ/
Make sure that you type the href correctly :
href="yourfolder/yourcssstylename.css"
Try to make the link the same level as index.html directed to the css folder.
<link rel="stylesheet" href="yourfolder/css/styles.css">
or only ...href="css/styles.css"> and make sure delete / before css file name.
its always better to specify full address for css file like
href="http://localhost/public/css/yee.css"
and make sure you use correct protocol http:// or https for your server.
ps you can save your site directory as a constant, in order to not check links during deployment
I can't linked to my CSS file in my HTML file in localhost.
I have my index.html and styles.css in /var/www/html/project
I call it in the browser with localhost/project/index.html and only the html is printing.
When I just open the html in the browser, it's working fine.
I tried
<link rel="stylesheet" href="http://var/www/html/project/styles.css" media="all">
I also tried in the href
localhost/project/styles.css
or project/styles.css
or /project/styles.css
But nothing, what am I doing wrong ?
Thx
The path you put for your CSS file should be RELATIVE TO the location of your html file.
If your HTML file has the path /var/www/html/project/index.html, then it's location is the project folder. That folder becomes the "root" of your project, and the CSS path should be relative to it:
styles.css
Did you try:
<link rel="stylesheet" type="text/css" href="styles.css"/>
If your css file and your html file is in the same folder, you just need to reference it by name and the file extension, I think.
If the CSS file is in the project file (with the index.html file) your link should look like this:
<link rel="stylesheet" type="text/css" href="styles.css">
As an example for VS13 link the css as shown below:
<link href="~/MyFolder/Style.css" rel="stylesheet" />
I also found a solution. You don't need anything. Do
<style type="text/css" media="all">
/* Your code */
</style>
and
<script type="text/javascript" charset="UTF-8">
// Your code
</script>
Don't link them. Do it Internal. Thanks me later
So I added type = text/css and thx the CSS is working, but if I move my CSS in a CSS folder css/styles.css is not working
with my html file in /var/www/html/project/index.html
and my css file in /var/www/html/project/css/styles.css
But in any case images are not charging :
and I have my images in /var/www/html/project/img/banner.jpg
If I try and link my CSS to my HTML page with either cssstyle2.css ||fifastream1.0/cssstyle2.css or even %fifastream1.0%/cssstyle2.css it wont display any of the CSS on the webpage. (FF, IE, Chrome). I've uploaded my CSS page to stackoverflow before and apparently its fine.
Obviously its no good if I can only get my webpage to 'properly' work on my drive. Soo any idea's why FF, IE or Chrome cant pick up my CSS?
Been working on this for a few weeks now, as a complete beginner. Would be great help if someone could find the answer! I've searched and tried everything.
This is the link in the of the HTML (if this helps at all)
<!DOCTYPE html>
<html>
<head>
<link href="C:///*****/******/Desktop/FifaStream1.0/cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
<title> Fifa Stream </title>
</head>
<body>
When everything is in the same foldre you should use the following:
<link href="cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
When you're CSS file is in a different folder use:
<link href="folder/cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
If your CSS file is one directory above the html file then use:
<link href="../cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
To have relative referencing, ur CSS needs to be in at least somewhat referential place. for example, if the page is in Users/whatever/index.html, your CSS would be in Users/whatever/css/style.css. Then your reference would be to "css/style.css"
A quick reference guide:
<!--
./filename or filename = same folder as page location
../filename = folder above that of page folder location
/filename = root folder of project
-->
If your CSS file is in a completely different location than your page file, it can't possibly be found unless you provide the full path as you had to.