I have following scenario.
I have Created a Web folder on my desktop which contains the html file Test.html and another folder styles which contains the myStyle.css file.
I am trying to link .css file with my html using the following code but it is not working.
How can i do this ?
Here is my Code :
<head>
<link href="Web/styles/myStyle.css" rel="stylesheet" type="text/css">
</head>
Test.html is inside the Web folder, so you don't have to enter the Web folder when you look relative to the HTML document.
You are trying to read $HOME\Desktop\Web\Web\styles\myStyle.css.
Remove the Web/ portion of the URI.
href="styles/myStyle.css"
You should also have a space between attributes.
rel="stylesheet" type="text/css"
Seems like your folder structure is something like this:
Web
|--styles
| |--myStyle.css
|--Test.html
If you reference the stylesheet from Test.html, you should specify the path relative to the location of Test.html. Specifying Web is not a good idea, because the directory that contains Test.html - which is Web - does not have a subdirectory called Web.
If the structure is the way I have shown above, the path should be styles/myStyle.css.
First of all you need to enclose My first WebPage in a title tag:
<title>My first WebPage</title>
Then what you need to do is specify the href attribute as a relative path, so assuming that your css is in a directory called styles the link would be:
<link href="styles/myStyle.css" rel="stylesheet" type="text/css">
Also, make sure there is a space between " and type in your link tag.
I hope this helps
Related
I have been styling my HTML with inline <style></style> tags in the <head> section. When I tried to move styles to CSS file for the first time from HTML file but, I cannot get my link to work.
I have created a new folder and inside this folder a new HTML file and CSS file are present. I am using VS Code.
I have tried pasting my HTML and my CSS into CodePen and it renders, so I know it's not an issue of the CSS itself not being correct.
My HTML file looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Try this again</title>
<link rel="Hope this works" href="newcssstyle.css" type="text/css">
</head>
<body>
<h1> Here we go </h1>
</body>
</html>
My CSS file looks like:
h1{
font-family: Arial, Helvetica, sans-serif;
color: blue;
}
Why does linking a CSS file not work?
In your example, you only have to change the rel="Hope this works" to rel="stylesheet" in order for it to recognize it as a stylesheet, as demonstrated in the following:
<link rel="stylesheet" href="newcssstyle.css" type="text/css">
Setting the rel attribute value to stylesheet distinguishes the difference between, say, a stylesheet link and an icon image link. You can see all the possible values for the rel attribute on MDN.
Furthermore, if it still doesn't work, ensure that the file "newcssstyle.css" is in the same directory as the referenced HTML file. If you put it in a folder such as "stylesheets", ensure that you add the relative folder path to your HTML file.
For example, if you had a directory like this:
Parent Directory Name:
index.html
Stylesheets:
newcssstyle.css
Then you would reference "newcssstyle.css" (relative to "index.css") as href='Stylesheets/newcssstyle.css'
Whereas, in a directory like this:
Parent Directory Name:
Html_files:
index.html
Stylesheets:
newcssstyle.css
Then you would reference "newcssstyle.css" as href='../Stylesheets/newcssstyle.css' instead (where .. means "go up one level to the parent directory").
element creates relationship between current and external documents.
Important point about i the attribute which stands for relationship. This attribute define how the linked document is related to the current document. How it is read..
Also please make sure your .css file has the same name as Your href.
You can read more about it here -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
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.
I've downloaded a style sheet that I want to use for a personal HTML webpage of mine. Quick question about implementing said style sheet. A screenshot of the folder is here:
http://imgur.com/94m11mz
I know to have an external style sheet I need to use the link tag, something akin to:
<link rel="stylesheet" href="external_style_sheet.css" type="text/css">
My questions are these:
1) Would href= "name of the .css files?" i.e href="default.css"
2) I'm not sure what to do with 2 .css files. Do I link to both of them? Meaning do I have 2 link tags? One going to default.css and one going to fonts.css? Such as:
<link rel="stylesheet" href="fonts.css" type="text/css">
<link rel="stylesheet" href="default.css" type="text/css">
3) Do I need to include all of the folders/.css files in the same folder as my HTML document? Or can I move that to a different folder if I explicitly type out the location to in href="name of .css file here" thing?
You can move them to your own folder, for example:
<link rel="stylesheet" href="css/fonts.css" type="text/css">
<link rel="stylesheet" href="css/default.css" type="text/css">
And yes you need one link tag per css file you want to include in your html file(s).
You will need two link tags as they are different files, the folder structure depends on how you think it is appropriate.
Generally it is a relative path like '..css/yourstylesheet.css'
href takes the virtual path. thats like say you have css folder in your root directory and the css file present in that then href = "css{your css filename}".
Question 1: Would href= "name of the .css files?" i.e href="default.css"
Yes you should name css with .css extension
<link rel="stylesheet" href="external_style_sheet.css" type="text/css">
Question 2: I'm not sure what to do with 2 .css files. Do I link to both of
them? Meaning do I have 2 link tags? One going to default.css and one
going to fonts.css?
Yes, you can use two link tags but keep in mind if you have same class or id name in the two stylesheet it will take the style of last stylesheet.
For eg:
if you have <div class="sample"> hi </div> in your html
and in your default.css if you have .sample{color:red;} and in your font.css you have .sample{color:blue} then the text "hi" will appear blue in color as you have linked font.css second.
Question 3: Do I need to include all of the folders/.css files in the same
folder as my HTML document? Or can I move that to a different folder
if I explicitly type out the location to in href="name of .css file
here" thing?
It is highly recommended to keep all .css extension files under a single folder. so that you can search for the stylesheet easily if you have large sum of files in your site.
And you should link like wise the stylesheet if you have it in a separate folder.
Folder Name: CSS
File Name : Default.css
<link rel="stylesheet" href="CSS/Default.css" type="text/css">
My html and css won't link the css is suppose to make the Hayes and Ash words red on the header. My code:
<!DOCTYPE html>
<html style="background-color:#FFA100;>
<head>
<link rel="stylesheet" type="text/css" href="C:\Documents and Settings\Test.DOBRUSKY\Desktop\stylesheet.css"/>
<title>Hayes and Ash</title>
</head>
<body>
<h1>Hayes and Ash<h1>
<div id="hayes">
<img src="http://i.imgur.com/xXSDVAm.jpg?1"/>
<p>I am Hayes harharhar</p>
</div>
<div id="ash">
<img src="http://i.imgur.com/zcBLpU6.jpg?1"/>
<p>This is Ash I am very fluffy!</p>
</div>
</body>
</html>
The href link:
href="C:\Documents and Settings\Test.DOBRUSKY\Desktop\stylesheet.css"
should be a URL, not a local file system path. And it can be relative to the location of the HTML document, such as:
href="stylesheet.css"
or
href="http://www.example.com/somewhere/out/there/stylesheet.css"
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Link the css file this way as show above and check it also
Close the h1 tag
<h1> Hayes and Ash </h1>
The color may be applied to all the text in the body.
You are making a direct reference to your local computer in your link statement.
C:\Documents and Settings\Test.DOBRUSKY\Desktop\stylesheet.css
The best practice is to put your style sheets in a folder inside your project, then reference the style sheet there. Your href reference would look like this if you put your style sheet in a folder named "styles".
href="~\styles\stylesheet.css"
You can of course put your stylesheet inside your project's main folder if you want but it's nice to have the folder structure for adding more css files to your project.
Check out Method 3 in the following article.
http://html.net/tutorials/css/lesson2.php
That same problem happened to me two days ago.
I tried many different ways to type in the src. None of them worked. Double checked them and triple checked them, in case of missing character or typo error.
Finally, the problem I found was that I created the directories and files with powershell. CSS file had no issue, but the html file didn't like to be created from the powershell (I don't know the reason for that) (that problem didn't occur using the terminal at Macbookpro). So I opened a notepad, and pasted the exact same code from the previous file (the one created using echo command at powershell), saved it as .html and then, the css file linked with the html and styled it just fine.
My folder structure:
de/
index.html
en/
index.html
hu/
index.html
img/
image.png
style/
stylesheet.css
How can I link to the css file in the style folder & the image in the img folder within the html file inside the de folder, whithout having to type the entire hostname like http://myhost.com/style/style.css?
Is it even possible?
../style/stylesheet.css
../img/image.png
You can use a relative path: ../style/style.css
The css file can be link in the html file as
<link href="../style/stylesheet.css" rel="stylesheet" type="text/css">
you don't have to type the domain, you should use
<link href="/style/stylesheet.css" rel="stylesheet" type="text/css">
but dont forget the first / as this will mean that the address is on the same domain as the page.
this will also save you from maintenance problems if you ever change the directory structure of your website.