Syncing html with css first time - html

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.

Related

I can't link my CSS to my HTML and it is driving me crazy

I am trying to link my CSS file to my HTML code and I can't get it to work. I have one big folder for a practice project I am working on called "Larry's Lawn Care" in that folder there are two sub folders one called "HTML" and one called "CSS" where I have a file called "index.css"
p{
font-size: 900px;
}
<!DOCTYPE html>
<html>
<head>
<title>Lary's Lawn Care</title>
<link rel="stylesheet" type="text/css" href="CSS/index.css"/>
</head>
<p>Test</p>
</html>
I have tried linking using href="/CSS/index.css href="CSS/index.css" href="index.css" and href="/index.css" and none of them have worked
If your html file in in the HTML folder, you have to give the full relative path to the CSS:
<link rel="stylesheet" type="text/css" href="../CSS/index.css"/>
Here the ".." before the CSS is saying "go one folder up", which would be your folder project that hold the HTML and CSS folders.
Here is what I think the structure of the project looks like:
Larry's Lawn Care
HTML
index.html
CSS
index.css
You have to move up the directory:
"../CSS/index.css"
Using .. moves up one level in the current directory.

Css in a separate file doesn't apply to index.html

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

Issue with CSS/ HTML Link

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.

CSS not linked to HTML page

Good morning guys,
I am playing around building a small website. In the html I have my link to my CSS file but for some reason the CSS is not being shown on the page.
The link tag looks as follows:
<link rel="stylesheet" href="./styles/style.css" type="text/css">
The site does not contain any styles that I have built. Am I doing something wrong here?
Folder Structure 1
index.html
styles (folder)
style.css
If this the folder structure then your link tag should be
<link rel="stylesheet" href="styles/style.css" type="text/css" />
Folder Structure 2
index.html
style.css
If your folder structure is like the above then the link tag should be
<link rel="stylesheet" href="style.css" type="text/css" />
Folder Structure 3
HTML (folder)
index.html
styles (folder)
style.css
If your folder structure is like above then the link tag should be
<link rel="stylesheet" href="../styles/style.css" type="text/css" />
This might help you. For any error check the browser console.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Try to include the code to head as I show above for mystyle.css rewrite your own css file make sure to have the same name as your css file is check if a letter is capital .
I saw also you write text/css instead of test.css which is correct .

Don't know why the css isn't linking?

So I'm about to start to code a website using Sublime Text, but I have not touched code in a couple of months (5-7) so I am trying to get used to it again. So I have created my HTML and CSS page, but even though the CSS link is right, it is not displaying in browser. I know once you tell me I will be kicking myself but why is it not showing up?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<title>Home</title>
</head>
<body>
<h1>GymHub</h1>
</body>
</html>
Your code assumes that your folder structure is like this (where your css file is a sibling to the html):
index.html
home.css
However, make sure that if your project setup is in a way that your css is in a folder, you should reflect that in the code:
index.html
-- css
home.css
And you would then put this in your html file:
<link rel="stylesheet" type="text/css" href="/css/home.css">
you have to create a root-directory with the exact adress of the css file , but maybe its because you forgot to make a backslash at the end of the link ( i am not sure )
You are missing the slash in link tag. Try this. Also make sure css file is in same directory.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css"/>
<title>Home</title>
</head>
<body>
<h1>GymHub</h1>
</body>
</html>