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;
}
Related
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.
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 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"/>
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 9 years ago.
Improve this question
<!doctype html>
<html>
<head>
<title>Single Column</title>
<link rel="stylesheet" type="text/css" href="single.css>
</head>
<body>
<div id="container">
<div id="content">
<h2>Here's some content</h2>
<p>This is where a story would go</p>
<h2>Here's more content</h2>
<p>This is another story</p>
</div> <!-- end content -->
</div> <!-- end container -->
</body>
</html>`
The code above is my HTML file and the code below is my css file. when i open the browser and search local host it displays the content but the font is not changing?
body
{
font-family: arial,helvetica,sans-serif;
}
#container
{
margin: 0 auto;
width: 600px;
background: #FFFFFF;
}
#content
{
clear: left;
padding: 20px;
}
You are missing the closing quote in your link href for css
<link rel="stylesheet" type="text/css" href="single.css">
^^ missing quote
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
So I am not entirely sure what exactly is happening here. I am fairly certain that all of my coding is correct, but for some reason it is not displaying properly on the web page. Here is a list of my code, and even a screen shot of what is happening. Google Chrome even shows that it received the code, but it is clearly not displaying.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Add Artec Racer</title>
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
<div class="main">
<h1>Some Information</h1>
</div>
</body>
</html>
CSS:
body
{
color: #000000;
}
body div.main
{
color: #202020;
width: 1000px;
margin: auto;
}
Any help would be fantastic, but here is the picture for what I am seeing. I am running Linux Mint, Apache 2, MySQL, and PHP5. I restarted Apache with no change in result. Here is what I am seeing:
http://i169.photobucket.com/albums/u209/eowdaemon/ChromeIssue.png
The screenshot you posted looks exactly like what your CSS should be producing.
If you're intending to have centered text, try adding text-align: center; to your body rule.
If that's not your intent, it's possible you're confusing color with background-color.
color changes text, while background-color changes the color of the background.
When you go to access your css file, it should be ../ not ./
<link rel="stylesheet" type="text/css" href="./css/main.css">
/*in the href, it should be:*/
<link rel="stylesheet" type="text/css" href="../css/main.css">