Linking css and html files - html

I am at my wit's end trying to link my CSS stylesheet to my HTML file, any and all help would be greatly appreciated!
they are in the same folder
my ide of choice is notepad++ (if that makes a difference)
the naming of each file is correct
I have tried multiple browsers
my code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Christian Potts' Virtual Resume</title>
<style>
<link rel = "stylesheet"
type = "text/css"
href = "style.css" />
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
stylesheet:
/* style.css */
h1 {
color: Blue;
}

Remove the <style> tags around your <link> tag.
The <style> tag is used to define style information for an HTML document as known as CSS.
Inside the <style> element you specify how HTML elements should render in a browser by writing CSS.
In a <style> your write pure CSS. You can't link your stylesheet inside a <style> tag.
You should end up with this:
<!DOCTYPE html>
<html>
<head>
<title>Christian Potts' Virtual Resume</title>
<link rel="stylesheet"
type="text/css"
href="style.css" />
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

Remove <style> tag which is wrapped around <link> tag.

Your tag should be in the head tag, not the style tag
So it would be as followed:
<!DOCTYPE html>
<html>
<head>
<title>Christian Potts' Virtual Resume</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

Related

Why isn't this page's background black?

What am I not seeing here?
HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
</head>
<body>
</body>
</html>
CSS: (css/style.css)
body{
background-color:black;
}
I already double-checked the file structure. What am I missing?
Don't give your link element a closing tag. Either leave it as <link attributes='values'> or make it self closing: <link attributes='values'/>
body{
background-color:black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
</body>
</html>
Less typing if you leave the / off self closing tags. In HTML5 this is ok, however there are other versions of HTML and XML that require all tags to be formally closed.
link: Are (non-void) self-closing tags valid in HTML5?.
Update: Despite this, most browsers still render correctly when the link element is closed incorrectly. And that wasn't the problem here.

background not setting up

Hello I am trying to set an image as a background using a css file in an index.html, however I use the css declaration the image will not be displayed even if you put it on html, can you please help me figure it out, thank you
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Solution</title>
<style>
body{
background: url("img/notarde.png")
}
</style>
</head>
<body>
HI
</body>
</html>
CssFile
body{
background: url("img/notarde.png")
}
If you have your style in <style></style> it is not needed to add the same content in a CSS file to do it.
However, if you wants to use an external CSS file you can add this line between the <head></head> :
<link rel="stylesheet" type="text/css" href="THE_PATH_OF_YOUR_FILE">
Your code works, it must be the path of the image that went wrong.
See it here
You need to include the stylesheet in the index.html file.
<link rel="stylesheet" type="text/css" href="[your css file path]">
I hope that helps :D
Have you referenced the CSS file in your HTML Page?
<link rel="stylesheet" type="text/css" href="mystyle.css">
Specify the CSS file name and path in href like href="CSS/filename.css"
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Solution</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
HI
</body>
</html>

I can't find out what is wrong with my background

So I want to set the file wallpaper.png as the backgound of the page, the image is in the same folder with the html and css files.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheethome" href="stylesheethome.css"/>
<title>Prism</title>
</head>
<body>
</body>
</html>
And the css:
body {
background-image: url("wallpaper.png");
}
the problemi is with this-
rel="stylesheethome
change it to--
stylesheet... hope this works..
After changing it is working I tried it.
Your body is empty, that's the same for zero pixel height. You can try like this:
html, body {
height: 100%;
}
Good luck.
Try to set stylesheet for rel in your <link> and check your file names.
<link type="text/css" rel="stylesheet" href="stylesheethome.css" />
Try this. I changed the rel attribute value from stylesheethome to stylesheet.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheethome.css"/>
<title>Prism</title>
</head>
<body>
</body>
</html>
stylesheethome is not a valid rel attribute value.
Hope this helps.

I can't use CSS code in HTML doc?

I am super new to HTML and CSS and I ran into a problem when I try to link CSS code in HTML. The code doesn't show the background color like it should. HTML Code:
<!doctype html>
<html>
<body>
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
<body>
</html>
CSS code:
body {
background: #999;
}
I have them both in the same folder. I am lost and confused so any help would be greatly appreciated!
CSS files should be included in the head section. If you have them in the same folder you need to change the href aswell.
<!doctype html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<body>
</html>
You have to use href="main.css"
By using styles/ the browser searches for a folder called styles in the same folders and can't find it so no CSS will be applied
Try adding the link element to head tag instead of body tag.

how to give css link to HTML code?

my code
<html>
<head>
<title></title>
<link rel="style" href="style.css">
<script language="javascript" src="JS/CommonCharFunction.js"> </script>
</head>
<body>
code
</body>
</html>
but my code is not working.i have to include style to html form
how to include inline css
If you want to add css inline, you can try the style tag inside the head tag: http://www.w3schools.com/tags/tag_style.asp
You can include inline style by adding a style attribute to an element like so:
<body style="background-color: white;">
But I think you need to ask about how to add an external style sheet.
<link rel="stylesheet" type="text/css" href="Content/style.css">
Of course you can also use the embedded style
<title></title>
<style>
body{
background-color:white;
}
</style>
<html>
<head>
<title></title>
<link rel="style" href="style.css">
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript" src="JS/CommonCharFunction.js"> </script>
</head>
<body>
code
</body>
</html>
Pay attention to the link-tag
<link rel="stylesheet" type="text/css" href="style.css" />
the attribute rel must have the value stylesheet
the attribute type must be given and the value must be text/css