Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
Take a look at my code. Tell me what I am doing wrong.
CSS File - Name style.css
#color{
background-color: #yellow;
}
HTML File
<!DOCTYPE html>
<html> <link rel=”stylesheet” href=”css/style.css” type=”text/css”>
<head>
</head>
<body>
<div id=“color”> color </div>
<p>My first paragraph.</p>
</body>
</html>
Is my HTML link wrong?
This is the updated HTML File
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="color"> color </div>
<p>My first paragraph.</p>
</body>
</html>
It's either : background-color:yellow; or background-color:#FFE51E; but not background-color:#yellow;
Plus you are using the wrong quotation marks : ” instead of " and you have to put link tags in head tags.
Which gives us this :
jsfiddle
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="color"> color </div>
<p>My first paragraph.</p>
</body>
</html>
the # symbol us used for the hexadecimal color like #fff if you wanna one of the colors by name you just use the name without any symbol:
background-color: yellow;
Working jsfiddle
CSS:
#color{
background-color: yellow;
}
HTML:
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="color"> color </div>
<p>My first paragraph.</p>
</body>
</html>
your doing wrong in your css background-color: #yellow; is wrong. It should be background-color: yellow; or background-color: #FFFF00;.
you are using External Styling of CSS so add a link to it in the <head> section of the HTML page
If this still doesn't work check the path of your css. Are you sure this is a correct path?
href="css/style.css"
Here's a tutorial how to use background-color http://www.w3schools.com/cssref/pr_background-color.asp and here's the list of colors in css http://www.w3schools.com/html/html_colornames.asp
I actually fixed it by taking out the path for the link. I had copied it on by accident and that was why it wasn't working. Here is the working code.
#color{
background-color:yellow;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="color"> color </div>
<p>My first paragraph.</p>
</body>
</html>
What you are asking is how to link style sheet in text editor. If you use text editor , first thing you should do is to put all the (.css, .js, .html) into one folder. Then you can use only your file name with the extension to link. This is the easiest way if you use text editor. In this case I think you have linked external stylesheet properly. I guess thr problrm is with 'background-color:yellow;' don't use # with color name.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I am trying to write this html code but the CSS attributes just don't affect my code.
HTML file:
.hello{
background color: #333;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="hi.css">
</head>
<body>
<div class="hello">
<p> hi </p>
</div>
</body>
</html>
background color is not valid. It should be background-color
.hello{
background-color: #333;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="hi.css">
</head>
<body>
<div class="hello">
<p> hi </p>
</div>
</body>
</html>
You should add a - between background and color. You are providing different CSS attributes instead of one.
Do this:
.hello {
background-color: #333; // Add an hyphin
}
Try this
.hello {
background-color: #333;
}
So I'm basically wondering if the code I wrote is supposed to just pop up a page with "This web page uses an external style sheet", in blue font. I've been trying for hours to get my CSS to link to my HTML code and finally I did but all it was, was blue font. P.S I'm supposed to turn this in tonight so need to be sure!
What it looks like
<!DOCTYPE html>
<html lang="en">
<head>
<title>External Styles</title>
<meta charset="utf-8">
<link rel="stylesheet" href="color.css">
</head>
<body>
<p>This web page uses an external style sheet.</p>
</body>
</html>
css:
body { backround-color: #0000FF;
color: #FFFFFF;
}
No it is not. It suppose to show with White Color font with a light background.
This is some other css or browser plugin's impact.
You can try on the fiddle first to verify what it can look like at a clean state.
https://jsfiddle.net/
First of all you have wrongly typed background-color.
The code you provided is giving you the Blue background with white text.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Fiddle</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="txtPopup">
<p>This web page uses an external style sheet</p>
</div>
</body>
</html>
CSS Code
body {
color: #FFFFFF;
background-color: #0000FF
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
So I've tried linking in the head of the html page and using the #import in my css file, but the font I'm trying to use still will not load. I also checked to make sure I'm not running any plugin that could be causing the problem, so I'm really not sure what to do. If anyone could help me solve this that would be wonderful.
<!Doctype html>
<html>
<head>
<link type="text/css" rel="stylsheet" href="anagram.css">
</head>
<body>
<p>Look here!</p>
</body>
</html>
#import url(http://fonts.googleapis.com/css?family=Tangerine);
p {
font-family:'Tangerine';
font-size:48px;
}
You can't place CSS randomly in your HTML file like that. It needs to be in a <style> tag, or an external stylesheet. Move your styling into a <style> tag, which needs to be inside the <head> as well.
<html>
<head>
<title>My website... whatever</title>
<style>
#import url(http://fonts.googleapis.com/css?family=Tangerine);
p { font-family: 'Tangerine'; }
</style>
</head>
<body>
<p>My font is called Tangerine</p>
</body>
</html>
...or, what I find easier when using Google Fonts is to link the font's stylesheet, and then just reference it in my stylesheet. When using Google Fonts, this is the default option.
<html>
<head>
<title>My website... whatever</title>
<link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
<style>
p {
font-family: 'Tangerine';
font-size: 100%;
font-weight: 400;
}
h1 {
font-family: 'Tangerine';
font-weight: 700;
font-size: 150%;
}
</style>
</head>
<body>
<h1>I'm thick and large.</h1>
<p>I'm small and thin.</p>
</body>
</html>
If you use this method, make sure to include it before your CSS, like above. Both still need to be inside the <head> section.
The above also shows you how Google can import multiple weights of a font, and how to use them in your stylesheet. In this example, paragraphd use the thinner version of the font, while the <h1> headings use a thicker version of the font, also at a larger size.
You can't just choose whatever weight you want though. Tangerine for example only has 400 and 700, so I've imported both of them. Only import those you are going to use though, as importing too many will slow down the website unnecessarily.
Hope this helps.
This works. Your HTML is just badly formed.
<!Doctype html>
<html>
<head>
<style>
#import url(http://fonts.googleapis.com/css?family=Tangerine);
p {
font-family:'Tangerine';
font-size:48px;
}
</style>
</head>
<body>
<p>Look here!</p>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to reference
/* background color */
body
{
background: FCFFD1;
}
/* h1 color */
h1
{
color: purple;
}
in my HTML document. This is in a seperate .css file as an external style sheet.
I want put it into this:
<body class="body">
<center><h1>ACME PRODUCTS</h1></center>
I'm not sure what I'm doing wrong.
You will first need to create a stylesheet for your CSS and then save it, for e.g. style.css. Once you've done that, add the following code inside the <head></head> tags in your HTML document:
<link rel="stylesheet" type="text/css" href="style.css">
Your final code inside the HTML document should look like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="body">
<center><h1>ACME PRODUCTS</h1></center>
</body>
</html>
Use this in your head tag: <link rel="stylesheet" type="text/css" href="name.css">
You should check CSS selectors.
In your example code you have class specified for body HTML tag but you never call it in CSS (notice that classes are referenced like ".body"). So class atribute on body tag is not needed here. Also you should use "background-color" and not only "background".
Check this examples.
And finally check this example to learn how to link CSS to your HTML.
I'd edit your code as following:
/* background color */
body
{
background-color: #FCFFD1;
}
/* h1 color */
h1
{
color: purple;
}
and
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<center><h1>ACME PRODUCTS</h1></center>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Okay, so Codecademy gave me this code to create what looks like box using div and background-colors:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<div></div>
</body>
</html>
and the css...
div {
background-color: #cc0000;
height: 100px;
width: 100px;
}
It worked fine. I got a red box. Afterwards I tried to do it on my own but its not working. My code's pretty much exactly the same but don't know what's going on. Here's mine:
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href"boxes.css"/>
<title> Boxes </title>
</head>
<body>
<div></div>
</body>
</html>
the css...
div {
background-color: #2D1132;
height: 100px;
width: 100px;
}
If someone could explain how I can make this work that would be great!
You have not referenced the stylesheet correctly.
<link type="text/css" rel="stylesheet" href"boxes.css"/>
Should be:
<link type="text/css" rel="stylesheet" href="boxes.css"/>