This question already has answers here:
How to import Google Web Font in CSS file?
(13 answers)
Closed 6 years ago.
I was working on an html page, got halfway through, and decided to start styling somethings. . . All of my styling worked fine! That is until I tried to get a Google Font. I followed all of the instructions and inserted everything into css correctly. However, when I view the page on Chrome, it only displays the "fallback" generic sans-serif font. Here is my css:
#page-first-open {
border: 1px solid black;
width: 1000px;
height: 500px;
text-align: center;
margin: auto;
position: relative;
top: 50px;
}
#import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open p {
font-size: ;
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
Could someone please tell me what I am doing wrong (If I a doing it wrong), or point me in the right direction of getting it to work?
Try to put your import on the top of your file, before any declaration.
Include the #import directive at the top of the file.
#import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open {
border: 1px solid black;
width: 1000px;
height: 500px;
text-align: center;
margin: auto;
position: relative;
top: 50px;
}
#page-first-open p {
font-size: ;
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
You can remove:
#import url(https://fonts.googleapis.com/css?family=Raleway);
And add:
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
To your <head>. Like so:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
Try to add the following in the head section of your html code and see if it fixed the problem:
<meta charset="UTF-8">
In addition, you need to move the #import to the top of the CSS file, so the font will load
Related
Hello Stack Overflow Community,
I would like to ask for help regarding my concern on CSS not showing in my HTML Display. I am still new to the Programming World. Please bear with me. I am doing a tutorial course in HTML YouTube by PinoyFreeCoder.
Here is the HTML that I made:
<title>PinoyFreeCoder Blog</title>
<style type="text/css">
body{background-color: #F5F5F5; margin-left: 20%; margin-right: 20%; border: 2px dotted black; padding:10px 10px 10px 10px;
font-family: sans-serif;}
</style>
<link rel="icon" href="Images/John Canero Logo.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="Style.css">**
</head>
<body>
<header id="main header">
<h1>PinoyFreeCoder.com</h1>
</header>
Here is the Style.css that I made:
*{
font-family: Arial, Helvetica, sans-serif;
}
#main-header{
text-align: center;
background-color: black;
color: white;
padding: 10px;
}
Thank you!
Here if you are applying styling in HTML page itself. Then, whatever CSS you want to give to your webpage you can mention it betweeen <style></style> tag.
<title>PinoyFreeCoder Blog</title>
<style>
body{background-color: red; margin-left: 20%; margin-right: 20%; border: 2px dotted black; padding:10px 10px 10px 10px;
font-family: sans-serif;}
</style>
<body>
<header id="main header">
<h1>PinoyFreeCoder.com</h1>
</header>
</body>
And if you are using external CSS then you have to attach the <link rel="stylesheet" href="styles.css"> between your <head></head> tag. Then only all the CSS written in your external stylesheet will be applied.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<h2>I am formatted with a linked style sheet.</h2>
<p>Me too!</p>
</body>
</html>
styles.css
body{
background-color: red;
}
So I'm new to programming and I've been learning on my own through the Odin Project. The first project I've been working on is a recreation of the Google search site. I've got some of the basic HTML layout but my CSS is not being applied, I originally started this project on codepin and everything worked. When I switched to vscode... nothing. Here's what I have so far for HTML and CSS.
.flex-container {
height: 100vh;
border: 3px solid blue;
display: flex;
justify-content: center; /* x-axis */
align-items: center; /* y-axis */
}
.flex-item {
font-size: 90px;
font-family: 'Noto Sans JP', sans-serif;
#G {
color: #4885ed;
}
#o {
color: #db3236;
}
#o1 {
color: #f4c20d;
}
#g {
color: #4885ed;
}
#l {
color: #3cba54;
}
#e {
color: #db3236;
}
.foot {
background-color: #A5A6A1;
height: 2em;
}
.ad {
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
<style>
#import url('https://fonts.googleapis.com/css2? family=Noto+Sans+JP&display=swap');
</style>
</head>
<body>
<div class ='flex-container'>
<!-- Try using 'span' instead of a div for 'Google'.-->
<div class='flex-item'>
<span id='G'>G</span>
<span id='o'>o</span>
<span id='o1'>o</span>
<span id='g'>g</span>
<span id='l'>l</span>
<span id='e'>e</span>
</div>
<input type="Search">
</div>
<footer class='foot'>
<span id='ad'>Advertising</span>
<span>Business</span>
<span>How search works</span>
</footer>
</body>
</html>
This is my first post so hopefully its a good question. Any and all help is appreciated. Thanks!
You forgot to link your css file to your html file. Add a link tag at the end of the head tag, in case you have the html and css files in the same directory and your css file's name is styles, you can do like this:
<head>
...
<link rel="stylesheet" href="styles.css">
</head>
The reason it works on Codepen is because they do the linking work for you, so the html, js and css file are automatically connected to each other
Looking at CSS code it seems like it is in different file. So in this case you have to link CSS to HTML file you can do this by using <link rel="stylesheet" href="yourfilepath"> inside head tag.
-- You have to call the css file that you made with:
<link rel="stylesheet" href="the file of the css">
enter image description here
The HTML:
<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
<script type="text/javascript" src="Jquery Cycle Slideshow/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="Jquery Cycle Slideshow/js/cycle2.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="cssforsliding.css">
</head>
<body>
The stylesheet:
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: black;
...
I am using notepad++ and I have saved my CSS file in the notepad++ documents file as cssforsliding.css and I believe I have linked my HTML and CSS correctly but it doesn't seem to be working!
Help would be greatly appreciated.
EDIT: Sorry I should have been clearer: the CSS part in my question is the CSS for an EXTERNAL CSS file. So I actually want to link my HTML to an EXTERNAL CSS file.
EDIT2: I have moved my css file inside another folder within the folder where my HTML (and CSS) is located and specify that folder in my HTML and now it works strangely! Thanks everyone :)
enter image description here
I can't try this solution at the machine I'm on (at work), but it might work if you just close the tag
<link rel="stylesheet" type="text/css" media="screen" href="cssforsliding.css" />
If not, it looks tidier and follows HTML5 in any case.
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="cssforsliding.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: black;
}
</style>
</head>
<body>
</body>
</html>
I am trying to apply a style for the HTML <head> tag. But it is not working.
Here is the code:
<?php
?>
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
home page
</head>
</html>
And here is the css/style.css part:
#head {
font-size: 15 px;
font-family: helvetica;
font-color: blue;
text-align: center;
};
You have four problems.
The property is color not font-color
There shouldn't be a space between the number and unit part of a length
You are trying to target an element with id="head" but no such element exists in the document
The head element cannot include free text, so the parsing rules for HTML convert the document into this DOM:
.
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
home page
</body>
</html>
… so the content isn't in the head anyway:
You could style elements in the head if it was valid HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo title</title>
<style>
head { display: block; }
head title { display: block; color: blue; }
</style>
</head>
<body>
<h1>Demo heading</h1>
This is generally a poor idea though. You should use proper semantic HTML in the body for content you want to display in the main viewport.
You should also make use of an HTML validator and a CSS validator.
I think this is what you were aiming for, head is not rendered :-)
header {
font-size: 15px;
font-family: helvetica;
color: blue;
text-align: center;
}
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<header>
home page
</header>
</html>
You're trying to modify the head tag. The head tag is hidden and contains information about the page like meta tags, the title, stylesheets, etc.
What you want to do is this:
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
<title>Home Page</title>
<style>
/* selecting the header tag*/
header {
font-size: 15 px;
font-family: helvetica;
color: blue;
text-align: center;
};
/* Selecting the header id */
#header {
font-size: 15 px;
font-family: helvetica;
color: blue;
text-align: center;
};
</style>
</head>
<body>
<header id="header">
This is the header
</header>
<div class="body-text">
</div>
<footer id="footer"></footer>
</body>
</html>
Here's a handy list of 30 CSS selectors. The article says you need to memorize them but I still reference this blog all the time when using very specific selectors.
I have a question or two about floating headers.
Currently, I'm working with two CSS files, bootstrap.min.css and main.css, the latter being a custom file, containing the following
* {
margin: 0;
padding: 0;
}
#heading {
padding: 0;
margin: 0;
border: 0;
background-color: #acc7dc;
height: 10%;
width: 100%;
z-index: 10;
position: fixed;
font-family: 'Merriweather', serif;
text-align: center;
}
which to the best of my understanding should start the heading block at the very top of the screen. However, sometimes when testing the HTML, there is a whitespace between the top of the screen and the header.
The HTML is structured like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/main.css" >
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<title>Trial</title>
</head>
<body>
<div id="heading">
<header>
<h1>Trial</h1>
</header>
</div>
</body>
</html>
I don't modify this behaviour anywhere else. Any ideas what the problem might be?
Since you are using Bootstrap you could utilize the .navbar-fixed-top class, that should correct for the gap . If you want to apply your own custom styes to the header, you would just need to apply both the class and the id styling:
<div class='navbar-fixed-top' id="heading">
<header>
<h1>Trial</h1>
</header>
</div>