I'm trying to add Google API fonts to my webpage to learn more about HTML and I can't get any of the API fonts to load. I've been trying with the Santina font, but it always reverts back to my "default" Courier New font. The code worked when I added an #import statement to the top of the CSS document, so I believe the link is correct, but the HTML doc doesn't seem to link the API font to the CSS page. Am I overriding the CSS doc somehow?
My HTML doc:
<!DOCTYPE html>
<html>
<head>
<title>Generic Website Name</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Sansita:400"
ref="stylesheet" type="text/css">
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color:hsl(189,58%,71%);">
<h1 id="title">Title</h1>
<hr>
<h3 class="headermain">Salutations!</h3>
<p class="paramain">Welcome to the Website</p>
Google!
</body>
</html>
The CSS Doc:
#title {
font-family:"Sansita", Courier New;
font-style: normal;
color: #f0f0f0;
text-align: center;
font-size: 5vw;
letter-spacing: 3px;
}
.headermain {
color: #020202;
text-align: left;
font-size: 26px;
font-family: Calibri;
}
.paramain {
color: #010101;
text-align: left;
font-size: 26px;
font-family: Calibri;
}
Edit: added better spacing for code
You've got ref="stylesheet" instead of rel="stylesheet"
Doh.
#title {
font-family:'Sansita', times, sans-serif;
font-style: normal;
color: #f0f0f0;
text-align: center;
font-size: 5vw;
letter-spacing: 3px;
}
.headermain {
color: #020202;
text-align: left;
font-size: 26px;
font-family: Calibri;
}
.paramain {
color: #010101;
text-align: left;
font-size: 26px;
font-family: Calibri;
}
<!DOCTYPE html>
<html>
<head>
<title>Generic Website Name</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Sansita:400" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color:hsl(189,58%,71%);">
<h1 id="title">Title</h1>
<hr>
<h3 class="headermain">Salutations!</h3>
<p class="paramain">Welcome to the Website</p>
Google!
</body>
</html>
Related
I'm using in my website roboto font family with bootstrap-4 roboto font doesn't working. It's working this case: I am write like this "font-family:"roboto-bold"; It's not working this case when I write with "sans-serif" font "font-family: 'roboto-bold',sans-serif;"
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#400;500&display=swap');
#font-face {
font-family: 'roboto-bold',sans-serif;
src: url('./fonts/roboto/Roboto-Bold.woff') format('woff2'),
url('./fonts/roboto/Roboto-Bold.woff') format('woff');
font-weight: bold;
font-display: swap;
unicode-range: U+000-5FF;
}
body {
font-family: 'roboto-bold',sans-serif;
}
h2 {
/* font-family: 'Roboto'; */
font-family: 'roboto-bold',sans-serif;
font-size: 47;
color: red;
}
.tab-title{
font-size: 30px;
text-align: center;
font-family: 'roboto-bold',sans-serif ;
color: aqua;
}
<!doctype html>
<html lang="en">
<head>
<title>Doora Invoice</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="demostyle.css">
</head>
<body>
<main>
<h2>hello</h2>
<h3 class="tab-title"> overview</h3>
<p>Hello</p>
</main>
</body>
</html>
see this if you want to change weight in font you have to specify in & select from google fonts family.and want to change font family name visit this link
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap');
/*#font-face {
font-family: 'Roboto',sans-serif;
src: url('https://fonts.googleapis.com/css2?family=Roboto:wght#400;500&display=swap');
font-weight: bold;
font-display: swap;
unicode-range: U+000-5FF;
} */
body {
font-family: 'Roboto',sans-serif;
}
h2 {
/* font-family: 'Roboto'; */
font-family: 'Roboto',sans-serif;
font-size: 47;
color: red;
font-weight: 400;
}
.tab-title{
font-size: 30px;
text-align: center;
font-family: 'Roboto',sans-serif;
color: aqua;
font-weight: 700;
}
<!doctype html>
<html lang="en">
<head>
<title>Doora Invoice</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="demostyle.css">
</head>
<body>
<main>
<h2>hello</h2>
<h3 class="tab-title"> overview</h3>
<p>Hello</p>
</main>
</body>
</html>
I'm creating my personal website but having trouble understanding why navigation bar size changes when I change from one HTML file to another HTML file. For example, when I click Photography_Color HTML, the navigation bar becomes bigger compared to the Main HTML. All the HTML files are using the same CSS, so I'm not sure what the problem is.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="testing.css">
<!--SOCIAL MEDIA ICON STYLESHEET-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>J[a]Son | Art & Code </title>
<div class="top">
<div class = "center">
<h>J[a]son</h>
<p>Personal Blog</p>
</div>
<nav class = "top_child">
<div class = "logos">
</div>
<div class = "nav">
<ul>
<li>HOME</li>
<li>PHOTOGRAPHY
<ul class="photography_1">
<li>Colour</li>
<li>Black</li>
</ul>
</li>
<li>CODING</li>
<li>ABOUT</li>
</ul>
</div>
</nav>
</div>
</head>
CSS:
body {
background-color: black; /*rgb(241, 233, 233);*/
}
html, body {
height: 90%;
margin: 0;
padding: 0;
}
.top {
margin: auto;
padding: 1.0em;
overflow: hidden;
background-color: black;
top: 0;
display: block;
position: sticky;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
z-index: 100;
clear: both;
overflow: hidden;
}
.top p {
color: white;
font-size: 10px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.center {
text-align: center;
}
.center a{
color: rgb(224, 224, 228);
font-size: 1.5em;
}
.center a:hover{
text-decoration: none;
color: rgb(224, 224, 228);
}
.nav {
float: right;
position: relative;
list-style: none;
display: block;
}
.nav li {
display: inline;
list-style: none;
position: relative;
}
.photography_1 {
display: none;
}
.photography_1 li a {
/*display: block;*/
text-decoration: none;
color: white;
border-top: 1px solid white;
background: rgb(221, 215, 215);
white-space: nowrap;
top: 20px;
left: 25px;
}
You need to move your div with the class of top, out of the tag and inside a tag.
The element is a container for metadata (data about data) and is placed between the tag and the tag.
The tag defines the document's body. It contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="top">
<!-- Put the rest of whats inside the top div here -->
</div>
</body>
</html>
I'm trying to build my own website.I am new to html/css and I've been dealing with this problem for a while now . Whenever i try to create clickable text , it doesn't work. i want it to be clickable to open up another html file , but it's not working at all , any advice ?
Ok so it seems that the tabs work and lead to another html file only when css isn't linked to the main html i dont know why its like that .
.Home {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
top: -140px;
padding-left: 800px;
font-size: 15px;
text-decoration: none;
}
.Projects {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
top: -160px;
padding-left: 900px;
font-size: 15px;
text-decoration: none;
}
.About {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
top: -180px;
padding-left: 1025px;
font-size: 15px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="Home_css.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="Home"> <b>HOME</b></div>
<div class="Projects"><b>PROJECTS</b></div>
<div class="About"><b>ABOUT</b></div>
</body>
</html>
What i expected was for the tabs to be clickable and lead to another html file , but none of them are responding could it be that i did something wrong in the css ?
Because of top:-140px & negative values we cannot see div elements
Also set padding values to low so no need to scroll page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="Home_css.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="Home"> <b>HOME</b></div>
<div class="Projects"><b>PROJECTS</b></div>
<div class="About"><b>ABOUT</b></div>
</body>
</html>
.Home a, .Home a:link {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
font-size: 15px;
text-decoration: none;
}
.Projects a, .Projects a:link {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
font-size: 15px;
text-decoration: none;
}
.About a, .About a:link {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
font-size: 15px;
text-decoration: none;
}
Please check the link
Check here
Most likely you have another element above the links. Right-click on a faulty link, and select "Inspect element". This will open the development toolbar of your browser, with the element you right-clicked selected.
The selected element will either be the anchor, or it will be another element. If it's not the anchor, it means it's the element sitting above the anchor which prevents your click from going through.
Screenshot of my page. I want to know how I can position the text 'Github' under 'John Doe'.
body {
background-color: #000000;
height: 700px;
}
h1 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 50px;
color: #ffffff;
}
h3 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
br {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
.container {
height: 100%;
width: 100%;
display: flex;
position: sticky;
align-items: center;
justify-content: center;
}
My HTML File:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css"> </link>
<title> John Doe </title>
</head>
<body>
<div class="container">
<h1>John Doe</h1>
</div>
<div class="conatiner2">
<h3> Github </h3>
</div>
</body>
</html>
I describe my problem more in detail. The name John Doe is centred. And I want the text 'Github' directly under it. But how can I achieve that? When I try to do it, 'Github' is centred but on the end of the page. Can someone help me please? Btw I never used CSS before.
Is this something you wanted? I have put the the Github under Text 'John Doe'.
body {
background-color: #000000;
height: 700px;
}
h1 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 50px;
color: #ffffff;
margin: 0;
line-height: 48px;
}
h3 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
margin: 0;
}
br {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
.container {
height: 100%;
width: 100%;
display: flex;
position: sticky;
align-items: center;
justify-content: center;
flex-direction: column;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css"> </link>
<title> John Doe </title>
</head>
<body>
<div class="container">
<h1>John Doe</h1>
<h3> Github </h3>
</div>
</body>
</html>
Or something like this?
body {
background-color: #000000;
height: 700px;
}
h1 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 50px;
color: #ffffff;
}
h3 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
br {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
.container {
height: 100%;
width: 100%;
display: flex;
position: sticky;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container2 {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css"> </link>
<title> John Doe </title>
</head>
<body>
<div class="container">
<h1>John Doe</h1>
</div>
<div class="container2">
<h3> Github </h3>
</div>
</body>
</html>
Use the same container class for Github as you did for John Doe (classes are not unique and can be shared among multiple elements)
<div class="container">
<h3> Github </h3>
</div>
Also remove height: 100%; from your CSS file under .container in order to get the text to appear closer together. Both will be centered on the page based on your current setup.
A couple of changes...
1) Move the 'Github' text into the same container as 'John Doe' so that they are formatted together.
2) Remove all of this:
display: flex;
position: sticky;
align-items: center;
justify-content: center;
flex-direction: column;
3) Replace it with...
text-align center: // (centers the text)
margin: 0 auto; // (centers the content to the middle of the screen)
body {
background-color: #000000;
height: 700px;
}
h1 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 50px;
color: #ffffff;
}
h3 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
br {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
.container {
height: 100%;
width: 100%;
text-align: center;
margin: 0 auto;
}
My HTML File:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css"> </link>
<title> John Doe </title>
</head>
<body>
<div class="container">
<h1>John Doe</h1>
<h3>Github</h3>
</div>
</body>
</html>
I'm trying to get my text elements centered like they would be in MS word.
I am currently using: text-align: center; to center the text but the result looks like it is flushed left in the center of the page rather than centered the way I want.
Here is the CSS and HTML:
#onp {
text-align: center;
font-family: gothambold;
font-size: 20px;
letter-spacing: 20px
}
h1 {
font-size: 80px;
font-family: gothambold;
text-align: center;
}
#font-face {
font-family: gothambold;
src: url(gothambold.ttf)
}
#font-face {
font-family: gothamlight;
src: url(gothamlight.ttf)
}
#linklist {
text-align: center;
width: 500px;
height: 50px;
padding-top: 30px;
margin: auto;
}
#linklist p {
display: inline;
padding-right: 40px;
font-family: gothambold;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>x - home</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color:#ffeeee;">
<h1>XXX XXXXXX</h1>
<p id="onp"> online portfolio</p>
<div id="linklist">
<p>photography</p>
<p>design</p>
<p>case study</p>
<p>contact</p>
</div>
</body>
</html>
I want to fix this issue before moving on and I've been trying for a while with no luck.
Cheers
EDIT: After running the snippet on this website, the text looks fine. On my machine with the font that I'm using, the text definitely looks flushed. What is causing this?
It's because your padding-right: 40px; I changed to 20px but also added padding-left: 20px; and a lime border so you can see whats going on.. hope that helps:
#onp {
text-align:center;
font-family: gothambold;
font-size: 20px;
letter-spacing: 20px
}
h1 {
font-size: 80px;
font-family: gothambold;
text-align: center;
}
#font-face {
font-family: gothambold;
src: url(gothambold.ttf)
}
#font-face {
font-family: gothamlight;
src: url(gothamlight.ttf)
}
#linklist {
text-align: center;
width: 500px;
height: 50px;
padding-top: 30px;
margin: auto;
}
#linklist p {
display: inline;
padding-right: 20px;
padding-left: 20px;
font-family: gothambold;
border: solid 1px lime;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>x - home</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color:#ffeeee;">
<h1>XXX XXXXXX</h1>
<p id="onp"> online portfolio</p>
<div id="linklist">
<p>photography</p>
<p>design</p>
<p>case study</p>
<p>contact</p>
</div>
</body>
</html>
Remove padding-right from #linklist p and add padding-left in #linklist p + p, it's added padding <p> elements that are placed immediately after <p>
#onp {
text-align:center;
font-family: gothambold;
font-size: 20px;
letter-spacing: 20px
}
h1 {
font-size: 80px;
font-family: gothambold;
text-align: center;
}
#font-face {
font-family: gothambold;
src: url(gothambold.ttf)
}
#font-face {
font-family: gothamlight;
src: url(gothamlight.ttf)
}
#linklist {
text-align: center;
width: 500px;
height: 50px;
padding-top: 30px;
margin: auto;
}
#linklist p {
display: inline;
font-family: gothambold;
}
#linklist p + p {
padding-left: 40px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>x - home</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color:#ffeeee;">
<h1>XXX XXXXXX</h1>
<p id="onp"> online portfolio</p>
<div id="linklist">
<p>photography</p>
<p>design</p>
<p>case study</p>
<p>contact</p>
</div>
</body>
</html>