Next up, I wanted to change the font of my site. At the moment, I just have one font used across the entire site. I prefer to use free fonts that don't require any licensing since this is just a personal project (and I suggest using legit free fonts to avoid getting in trouble). So I went to Google Fonts to find some fonts. I chose Share Tech Mono. You might notice a Get Font button in the page. Select that and choose Get Embed. Once you do, follow what the site tells you. in my case it says this:
Also, make sure to add a backup font just in case your chosen font doesn't work for any reason. W3Schools has a list of them: W3Schools Websafe Fonts
So now my HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Retrofuture</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
</head>
<body>
<h1> WELCOME </h1>
<p> Lorem ipsum </p>
</body>
</html>
and my CSS like this:
/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color." */
body {
background-color: #0b0e14;
color: #FF0000;
}
.share-tech-mono-regular {
font-family: "Share Tech Mono", monospace, "Courier New", monospace;
font-weight: 400;
font-style: normal;
}
Wow, looks kinda cool already! But my title (which I wrote ''Welcome'' for now) is placed at the left, when I want it to be in the middle. I tried looking online and apparently the < centre > tag is now outdated thanks to HTML5, and I only want my title (which is using h1) to be in the centre. If you want all your h1s to be aligned a certain way, then you can certainly just declare it in CSS and be done with it. I'm personally not sure if I will use h1 again, but I thought: what if I need to, and it has to be aligned differently?
This is where you need a class, which is what you'll use your CSS pretty much all the time. A class is basically a set of attributes for an element. For example, I want my title to be center-aligned. If I want all my titles to do that from here on out, I need to make a class for it. Classes just need to be made once so that they're reusable. If I wanted certain things (like headings, or images,etc.) to be center aligned aside from titles, I can use that class too.
Just remember that the class will apply everything that is inside it. If you wanted one heading to be centered and also apply the colour red, you can create a class for that. But if you also want another heading to be centered and you want it to be blue, you need to create another class just to create blue text. So be careful of how you use it.
I named it like this in CSS (also all these classes that you name specifically, needs to have a period (.) in front of it). This is called a class selector.
.main-title {
text-align: center;
}
In HTML, you need to refer to your class so that it knows that this particular tag needs this class. I wrote this inside the h1 tag:
<h1 class="main-title"> WELCOME </h1>