I'm using a Mac and using textedit to create a website the old fashion way. I have a HTML file and a CSS file. I cannot link the CSS with the HTML. Here is the code for my files:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” href=“style.css” type="text/css" media="screen">
<title>William’s Physics Webpage</title>
</head>
<body>
<div class = “nav”>
<div class = “container”>
<ul>
<li> About Me </li>
<li> Why Physics? </li>
<li> Great Thinkers </li>
<li> Guest Page </li>
</ul>
</div>
</div>
</body>
</html>
Here is my CSS code:
body {
background-color:blue;
}
.nav ul {
display:inline;
}
As you can see, the back ground is supposed to be blue due to the CSS code, but it's not. The file name for my html file is main.html while the name of my css file is style.css
use proper " for style linking they are wrong "
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
If both of the files are in the same file directory, your code should work, unless you are trying to run it online.
Make sure to put the correct path to the file.
Look like media="screen" gives me some error, try media="print" or not use media at all like this:
<link rel="stylesheet" href="style.css" type="text/css">
Or the problem is that you used “ instead of " because you copied from somewhere and it pasted wrong. Try it out.
Please check the file path .. If your html and css file reside at same level means it should work fine.. or else if you have placed the css file inside css folder or some folder means.. your code would be like this
<head>
<link rel="stylesheet" href="flodername/style.css" type="text/css" media="screen">
</head>
Related
I've looked for problems in both my folder and in my code, but I can't see the problem. I put my CSS and HTML in the same folder. index.html0 is the name of my folder.
my code is:
<link rel="stylesheet" type="text,css" href="style.css">
I've also tried:
<link rel="stylesheet" type="text,css" href="index.html/style.css">
it still doesn't work. I'm at a loss.
<link href="cssFileName.css" type="text/css" rel="stylesheet"/>
You put a "," between text and css, it is a "/".
Another form of importing css is the use of
#import "styles.css"; Using a string
or
#import url("styles.css"); /* Using a url */
For further information pls refer to w3schools documentation https://www.w3schools.com/cssref/pr_import_rule.php
But Ideally try not to use the #import method for css try
<link rel="stylesheet" href="./style.css">
If the path of the stylesheet is entered incorrectly, this problem could arise. Use the following code in the HTML file if your stylesheet and HTML files are both in the same folder:
<link rel="stylesheet" type="text/css" href="style.css">
Make sure the names of the CSS file and the HTML file exactly correspond. Additionally, make sure the file is in the same location as the HTML file and has the.css extension rather than.css0.
You must give the right path to the stylesheet if the files are in different folders. For example:
<link rel="stylesheet" type="text/css" href="folder_name/style.css">
Update
CSS file (style.css):
body {
background-color: lightgray;
}
h1 {
text-align: center;
color: darkblue;
}
HTML file (index.html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/index.html0/style.css">
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is a sample HTML and CSS code.</p>
</body>
</html>
Output:
I am new to html and I tried to create my webpage with the html as follows
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1> My web page </h1>
</body>
</html>
And the following css
h1{
color: red;
}
I tried adding a class to the h1 and styling it that way but in vain. If i do the css in style tags inside my html file it works but i want to have it in a main.css file
I want the h1 to have the color red, also I would want the css in a separate file, no the same one as my html so that it will be clean
If I am not mistaken you did not link your css file to the index.html, try something like this
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
<link rel="stylesheet" type="text/css" href="./main.css">.
</head>
<body>
<h1> My web page </h1>
</body>
</html>
But try to replace ./main.css with the actual path of your main.css reffer to this for more info.
In the head section you have to link the html file to your css file.
Place the following code within <head> tags:
<link rel="stylesheet" href="[the path to your CSS file]">
It is usually this tag
<link rel="stylesheet" href="yourfilename.css">
But I think the problem you might be facing is the path of your css. Where is your css file located if it is inside a folder like a style folder then you would do something like this.
<link rel="stylesheet" href="style/yourfilename.css">
You need to import the css in the HTML file
Could anyone tell me why my page isn't linking to the CSS? I have both HTML and CSS file in the same folder.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type = "text/css" href="style.css">
<title> Flying Fish Painting Company </title>
</head>
<body>
<h1> Flying Fish Painting Company </h1>
</body>
</html>
And this is my CSS:
h1{
color:blue;
}
It works fine for me.
If I put both files in the same folder then it also works
<link rel="stylesheet" type="text/css" href="style.css">
if you put your CSS file in a different folder that time.
Syntax:
<link rel="stylesheet" type="text/css" href="foldername/filename.css">
You should write:
<link rel="stylesheet" type="text/css" href="css/style.css">
Could you check the spaces:
type = "text/css"
change to:
type="text/css"
Is this your exact html code or just an example?
There are a couple of spaces before and after your = on the type you should remove.
Personally I find it better to put all css in a subfolder. It shouldn't make a difference however it makes for easier organization.
For a single css style like that I would just put it in line the html unless this is something you want across several html files.
There is nothing wrong with this code except the spaces mentioned above. Works fine for me. Check for typos and make sure it is in the same folder.
My css doesnt work (html and css file are in the same folder) and i tried to give all the path ton href ,here is my files.First file is menu2.html and second is menu2style.css.Can anyone help?
html:
<head>
<title>
test menu
</title>
<style>
<rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
</style>
</head>
<body>
<nav>
PHOTO 1
PHOTO 2
PHOTO 3
PHOTO 4
PHOTO 5
</nav>
</body>
and css:
nav{ background-color:#99FF66;}
<style>
<rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
</style>
The style element is for inline style. Don't put HTML to load an external stylesheet in it. Remove <style> and </style>
<rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
HTML start tags require a type before you put any attributes. In this case you need a link element.
<link rel...
The URL to your CSS should be:
To your CSS, not to an HTML document.
Either relative to the root of your website (e.g. /css/styles.css) or relative to the current document (styles.css since you say they are in the same folder). Not the full path on your local filesystem.
You don't need a type attribute here either.
Thus:
<link rel="stylesheet" href="styles.css">
If you include an external stylesheet, you must not wrap the element in style tags.
<!-- styles in menu2style.css -->
<link rel="stylesheet" type="text/css" href="menu2style.css">
<!-- inline styles -->
<style>
nav { background-color:#99FF66;}
</style>
Make sure you have the correct path specified in the href attribute!
You can write your style in the head, by using style tag.
if you want to external css you should use only link tag. you go to wrong way, because you are write the link tag in style tag.
<link rel="stylesheet" type="text/css" href="Your_directory/menu2style.css">
you write the wrong extension of style css style.It should be the dot css(.css)
Hmm.. I think you need to see the basics of HTML/CSS...
Here's an example of full html document :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="path/to/your/file/styles.css">
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
You can see more examples here :
W3Schools
you have no need to write style tag
and you missing the link rel for add css style sheet
test menu
<***link*** rel="stylesheet" href="var/www/html/css_tests/menu2style.html" type="text/css">
<body>
<nav>
PHOTO 1
PHOTO 2
PHOTO 3
PHOTO 4
PHOTO 5
</nav>
</body>
test menu
<rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
<body>
<nav>
PHOTO 1
PHOTO 2
PHOTO 3
PHOTO 4
PHOTO 5
</nav>
</body>
test menu
<link rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.css">
<body>
<nav>
<img src="">PHOTO 1</A>
<img src="">PHOTO 2</A>
<img src="">PHOTO 3</A>
<img src="">PHOTO 4</A>
<img src="">PHOTO 5</A>
</nav>
</body>
The problem is with your link where you have given the path of your CSS file. It becomes difficult for the browser to understand what kind of path he has to point in order to get the relevant styles.
What I have done is I have created a separate file named menu2style.css and I have refered in my HTML page. This is a kind of using stylesheet, and it is called External Style.
Step 1: Create a file with named menu2style.css (css is the extension of stylesheet just in case if you are not aware of)
<style>
nav{
background-color:#99FF66;
}
</style>
Step 2: Refer the path of the CSS stylesheet that you just created in step1.
<link rel="stylesheet" type="text/css" href="C:/MyFolder/menu2style.css">
If you see above in the path I have given absolute path. This points the exact location in your file/ folder and renders the stylesheet from it onto a webpage.
Hope this helps.
Im just learning how to do this and im struggling with something that is very simple. I started building a website and I want to sync my CSS with my HTML. On my computer I started a file in my documents called 'development' and inside that folder another folder called 'practise' and inside that folder is my index.html, css folder (with my main.css file) and then my img folder. Here is my HTML code so far. Can anyone out there let me know why the css and html aren't reading one another?
p.s.- Ive tried
and
HTML :
<!DOC TYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Boast | Blah Blah </title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<header>
<h1> Ashcroft & Rowe </h1>
<h5> Blah Blah </h5>
<nav>
<h3>Ad<h3>
<h3Br<h3>
<h5>St<h5>
<h5>De<h5>
<h5>Com<h5>
</nav>
</header>
<body>
<section>
</body>
</html>
Thanks :)
Your CSS link is pointing at "theme.css". If your css file is called main.css and is in a folder try changing it to href="foldername/main.css"
You need to reference the full path from where your html file is.
If your html file is practice folder and the css file is in the css folder within the practice folder your link tag should look like this:
<link rel="stylesheet" type="text/css" href="css/theme.css">
Sounds like your folder structure looks like this:
development/
practise/
index.html
css/
main.css
so, two problems:
Your HTML refers to theme.css, not main.css
the theme.css is in a subfolder, but you refer to it without a folder prefix, so the HTML thinks it's next to the HTML.
Change
<link rel="stylesheet" type="text/css" href="theme.css">
to
<link rel="stylesheet" type="text/css" href="css/main.css">
And, while you're at it, put the <header> element inside the body element as #Serlite noted.