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.
Related
I am working with my first CSS assignment and i need to use and EXTERNAL css file. Everything is saved on my hard drive. I my HTML is not picking up my stylesheet and i have no clue what im doing wrong.
Code:
Browser console:
Well the better way to ask would be to to post the code in the question itself, but no worries! As much as I can see, there are 2 errors in the code:
You have used the link tag within the style tag. Everything within the style tag is read as CSS and not HTML. So the link tag is considered as invalid CSS. Solution: remove the style tag.
Your css file is styles.css and you have linked stylesheet.css. Solution: Change the name of the linked file to styles.css.
So, the code should be:
<head>
<title>Page Title</title>
<link rel="stylesheet" href="C:\users\dilli\CTS 110\Project 1\CSS\styles.css">
</head>
Is it possible to have a common code file in HTML? For instance we are creating some web pages using HTML and need to set a common background. But after it is specified it is too tiresome to change it in every page. It would be quick if they all shared a script to a common file having the code for background color. The following code's location will be shared by all other web pages. So is this possible?
<html>
<style>
body
{
background-image:url("Brown_wall.jpg");
}
</style>
</html>
Create a CSS file with your background image and link it to your html. This will work for every file in the current directory. Anything above or below will need to be modified just a tad.
The link tag is what you're looking for. This article on MDN goes over the specifics of adding stylesheets to your HTML where you would only have to change that one file to see the change reflected in every page that includes it. It also makes your HTML files shorter and less redundant! Here's an example. You'd save these files in the same directory.
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Hello <span>world</span>!</p>
</body>
</html>
style.css
p span {
color: green;
}
How do I link a CSS sheet to a HTML sheet.
I have
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>
<h1> Hi </h1>
</body>
</html>
And my CSS page is
h1 {
color: orange;
text-align: center;
}
my CSS page is called "CSS" and HTML page is called "HTML"
I right clicked the HTML Doc and pressed open with google chrome i only see a black heading level 1 of "Hi"
Your CSS file needs to be in the same folder as your html page. It also needs to be the exact same case, capital CSS lowercase css extension. (CSS.css)
folder/index.html
folder/CSS.css
A few things could be the issue here:
Keep your filenames lowercase. Linux servers are case sensitive where windows servers are not. Keeping your filenames in lowercases avoids problems should you ever need to switch.
Make sure you have a doctype set up, otherwise your browser will revert to quirks mode and likely cause problems.
Make sure your files are in the appropriate locations. Because your html links directly to CSS.css and uses no relative pathing, they should be within the same folder.
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
Hey here's my html code , I haven't even bothered started to write my site yet because I can't connect to the css and I have no clue why. I'm using Aptana studio 3 btw
<head>
<title>blah blah blah</title>
<link rel="stylesheet" type="text/css" href="website/style.css" />
</head>
<body>
<h1>blah blah blah</h1>
<div>Just a row of information. Yeah nothing more </div>
</body>
I've read a few of the questioned related but nothing helped me. If I read correctly they need to be in the same root folder to be connected to one another correct ? I'm a beginner at this but I didn't think I was going to have this much trouble already.
I recommend you to create a specific CSS folder, inside the folder where your HTML files are. (html > css)
Then you will can call your CSS like this:
<link rel="stylesheet" href="css/your-file.css" />
They don't need to be in the same folder, but the CSS does need to be where it is being called from.
<link rel="stylesheet" type="text/css" href="website/style.css" />
This is telling the browser that your site is set up thus:
wwwroot (or whatever folder the site is in)
|_ index.htm (or whatever the page you pulled the above code from)
|_ website
|_ style.css
If you're going to use a relative URL (like you are in the code supplied), then you need to make sure that the path is correct relative to the file your link is in.
If that's going to get ... interesting ... then you are probably going to be better off giving a fully qualified URL for the CSS file, e.g.:
<link rel="stylesheet" type="text/css"
href="http://www.example.com/folderwithcss/style.css" />
Note:
The line break is not strictly needed, I'm just not a fan of side scrolling in an answer when it can be avoided.
Please don't actually use a folder called "folderwithcss"... just use "css" or "resources" or some similar depending on what you do/don't toss in there.