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>
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;
}
I'm trying to make a fairly simple site which there's a div with some text inside, centered both horizontally and vertically on the page.
I wouldn't have thought this would be that difficult to do, but something quite weird's happening. Here's the source that does work. Let's call this source A.
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Garby</title>
</head>
<body>
<div class="wrap">
<div class="content">Test</div>
</div>
</body>
</html>
and here's the source that doesn't work. Let's call this source B.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Garby</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="content">Test</div>
</div>
</body>
</html>
They both use the same stylesheet, which is here:
* {
font-family: 'Josefin Sans';
margin: 0;
padding: 0;
}
div.wrap {
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
}
div.content {
border: 1px solid red;
text-align: center;
width: 100%;
}
And the problem is that the div.wrap is only vertically aligned when I link to the stylesheets outside of the html head tags. This is the only difference between the source that works and the source that doesn't.
I know that you're meant to include source inside the head tags and that's why I think it's so strange that it only works when I do the opposite of this.
I would include a link to some exampls on jsfiddle or something, but the problem is how I'm including the stylesheets, which jsfiddle doesn't let me change.
I've tried this on all of the browsers I have (Opera, Firefox, and Chrome,) and the problem persists between them.
Is this some sort of HTML bug? Or am I making some obvious mistake?
Here are some screenshots.
Source A:
Source B:
I viewed the source in a web browser, and even when I link to the stylesheet outside the head, it seems to put it in there. So, in both examples, when actually viewed, the stylesheet is automatically being put in the head tags.
If my question isn't clear, it's basically this:
Why is this strange behavior happening, and how can I fix it?
It's not strange but your HTML is invalid by doing it that way in A.
Browsers are required to do the best they can with invalid markup. The problem with that, of course, is that you are relying on the browser to guess correctly at your intentions so don't write invalid markup.
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 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 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">