I have been trying to link my external styles sheet to my html for a while now and I can't seem to make it happen. I have both files saved in the same folder on my desktop and am using text wrangler to write. I can see what the page should look like when I pull it up in finder but when I open the site in a browser it only responds to my html.
This is what I am working with(updated):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nathan Langer</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="website/style.css"/>
</head>
<header>
<h3>For proffesional and creative video and media production</h3>
</header>
<body>
<div id="name">
<h1>Nathan Langer</h1>
</div>
</body>
<footer>
<nav>
Resume
Portfolio
What I Do
</nav>
</footer>
</html>
This is my css:
body {
background-image: url(images/cool.png);
background-repeat: no-repeat;
background-position: center;
}
#name {
text-align: center;
font-size: 50px;
color: white;
}
nav {
position: center;
}
nav a:hover {text-decoration:none ;}
nav a:visited {color: rgb(256,256,256) ;}
nav a:link {
text-decoration:none ;
color: rgb(256,256,256) ;
}
Everything looks good. The only problem that I see is that you are probably using an invalid path to the directory where the css file is stored: (Example: its in a directory called "folder")
<link rel="stylesheet" type="text/css" href="folder/style.css"/>
Here is a brief description of other file paths:
./ means the current directory
../ means the parent of the current directory, not the root directory
/ is the root directory
myfile.text is in the current directory, as is ./myfile.text
../myfile.text is one level above you and /myfile.text lives in your root directory.
To avoid this issue you can put a direct link to the stylesheet like this:
<link rel="stylesheet" type="text/css" href="http://www.website.com/style.css"/>
Well, can you give us your css file as well?
OLD POST ingnore this part
For all I can say now is that you forgot to close the tag. So replace it with this one
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
after that, for changing your h1 style in css do
h1 {
color:#FF0000;
font-size: 30px;
}
That should do the trick!
NEW PART (after the css was given)
Now it looks like you have following folder struture (like user3291093 stated)
index.html (or whatever your page is called)
website (folder)
|
----> style.css
----> images (folder)
|
----> cool.png
I have tested your code on my computer and your code is working if I put it in the aboce folder structure. You should check your source code in a web browser (Chrome, Firefox) and see if the link to the css file is really working (Or use the Dev tool of your browser)
Hope this helps :)
Related
I just started to implement a website. I have no host yet. First I would like to try some things locally on my own laptop.
I would like to use external css.
A simple version of the index file to show the problem looks like:
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
The test.css looks like this:
<style>
h1 {
color: red;
}
</style>
The problem is that the html file does not find the css file (the header will be black instead of red) although they are located in the same directory. I tried some variants but it did not help.
If I add the same css code inline, then it works.
This should be very easy, but I fail to see why the html file does not find the external file.
I tried this on firefox and IE.
Hope somebody could help me.
you missed open html tag
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
remove style from your css file
h1 {
color: red;
}
So as you can see here, I have used image tag to add an SVG that in my github repository, but I am unable to see it, when I turn on the live preview it just shows an image icon in the place of my actual logo, I have also tried to add the file using CSS but it has the same problem.
https://github.com/Alucard2169/Third.git here is the link to my GITHUB repo, as you can see I have put all my media file in side the media folder.
.main_heading::before {
content: url(media/logo.svg);
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=default-width, initial-scale=1">
<meta charset="UTF-8">
<meta lang="en">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<img src="media/logo.svg">
</div>
<h1 class="main_heading">
A history of everything you copy
</h1>
<article class="main_content">Clipbord allows you to track and organize everything you copy instantly access your clipboard on all your devices.</article>
<bottoom class="ios">
Download for iOS
</bottoom>
<bottom class="mac">
Download for Mac
</bottom>
</header>
</body>
</html>
When linking a file in css through url(), you have to give ./. This is shown below, but this only works if your html file is outside the media folder.
.main_heading::before {
content: url(./media/logo.svg);
display: block;
}
Your img tag should have a self closing tag like this: <img src="./logo.png" />.
But in this case, both your html and img files should be in same folder.
This is my HTML Code
.jumbotron
{
background-image: url("file://C:\xampp\htdocs\CSProject\images\Psi.png");
height: 250px;
width: 250px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="jumbotron">
</div>
</body>
</html>
I haven't been able to find any solutions as to why this background image won't show.
Thanks for any help or info.
The URL for background-image needs to path from your CSS file, not from your root directory.
So if your CSS file is contained in the folder CSProject, try changing:
.jumbotron {
background-image: url("images/Psi.png");
}
It has something to do with your image path...like Erez recommended i would use a relative path.
If your HTML code and 'images' folder are within the 'CSProject' folder, then reference that image like
background-image:url('/images/Psi.png');
Which brings me to my next point, why is your file-path using backslashes? it should be
/htdocs/CSProject/images/Psi.png
I am learning to work with html and css through making an about me page. I've created a folder called blog and in there I have a file called index.html and a folder called css. In the css folder I have a file called style.css.
For some reason I can't find the error in my code that won't allow me to link my stylesheet to my index file. I am testing out the code on safari by simply opening the file.
here is my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Stephanie CD</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>Hey! I'm Stephanie</h1>
<p>how are you doing?</p>
</body>
</html>
Here is my style.css file:
h1 {
color: blue;
}
body {
background: url("http://i.imgur.com/Gm84ZeZ.jpg?1");
background-size: cover;
background-position: center;
text-align: center;
}
I simply restarted everything, made new files, and now it works. Don't know what went wrong.
thanks
I tested my suggestion in Chrome and found that the resource in the funky quotes was not being requested.
The test is to try to load with and without the funky quotes and see which file actually attempts to load, create a HTML document with just this:
<link href=“css/style-1.css” rel=“stylesheet”>
<link href="css/style-2.css" rel="stylesheet">
and then watch the Network tab in your developer tools to see which file is actually requested by the browser.
This still may not be your specific issue but it worked for me (i.e. style-2.css attempted to load but style-1.css did not).
my case was different.
p{
background: red;
color: white;
}
h1{
background: lightblue;
color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css files\style.css" type="text/css" rel="stylesheet">
<!--**IMPORTANT** while on pc I had to mention the full relative
path to get the desired output.
link href="C:\Users\Arun\Documents\css files\style.css"
type="text/css" rel="stylesheet" THIS WORKED.-->
</head>
<body>
<p>this is a simple paragraph.</p>
<p>this is a simple paragraph.</p>
<p>this is a simple paragraph.</p>
<p>this is a simple paragraph.</p>
<p>this is a simple paragraph.</p>
<h1>hello, hi</h1>
</body>
</html>
This is probably a really simple problem that I'm guessing has a very obvious but stupid solution but I am not seeing it. I am trying to get an image to become a tiled background and for some reason the image is not appearing nor am I getting errors. I have checked permissions and set all files and folders to 777. Can someone point out the problem for me thanks.
My CSS file:
body {
background-image: url("images/main_background.png");
}
My HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/layout.css">
</head>
<body>
<div id="main_container">
</div>
</body>
</html>
Your image is in images folder and css is in css folder.
images/main_background.png means that images folder is inside the css folder, but it is not.
write this:
body {
background-image: url("../images/main_background.png");
}
OR
body {
background-image: url("/images/main_background.png");
}