HTML - Fonts: A Beginner's Guide to Styling Text on the Web
Hello, aspiring web developers! Today, we're going to dive into the exciting world of HTML fonts. As your friendly neighborhood computer teacher, I'm here to guide you through the ins and outs of making your web text look fantastic. Let's get started!
What are HTML Fonts?
Before we jump into the nitty-gritty, let's understand what we mean by "fonts" in HTML. In simple terms, fonts are the styles of text that you see on a webpage. They can be big, small, bold, italic, or even fancy cursive styles. HTML provides us with ways to control how our text looks, making our web pages more visually appealing and easier to read.
Web Safe Fonts
Now, let's talk about something called "Web Safe Fonts." Imagine you're writing a letter to a friend. You want to make sure they can read it, right? Well, web safe fonts are like using a common handwriting style that everyone can understand.
Web safe fonts are fonts that are likely to be present on most computers and devices. By using these, we can ensure that our web pages look similar across different systems.
Here's a table of some common web safe fonts:
| Font Name | Example |
|---|---|
| Arial | This is Arial |
| Verdana | This is Verdana |
| Helvetica | This is Helvetica |
| Times New Roman | This is Times New Roman |
| Courier | This is Courier |
Examples of HTML Fonts
Let's get our hands dirty with some code! Here are a few examples of how we can use fonts in HTML:
Example 1: Basic Font Setting
<p style="font-family: Arial, sans-serif;">This text is in Arial font.</p>In this example, we're telling the browser to display the text in Arial font. The "sans-serif" part is a fallback in case Arial isn't available on the user's device.
Example 2: Using Multiple Fonts
<p style="font-family: 'Times New Roman', Times, serif;">This text could be in Times New Roman, Times, or a serif font.</p>Here, we're providing multiple font options. The browser will try to use Times New Roman first, then Times if the first isn't available, and finally, any serif font if neither of the first two are present.
Example 3: Combining Font Styles
<p style="font-family: Arial, sans-serif; font-size: 18px; font-weight: bold;">This text is Arial, larger, and bold.</p>In this example, we're not just setting the font family, but also its size and weight. This gives us more control over how our text appears.
Setting Font Color
Now, let's add some color to our lives... er, I mean, our text!
Example 4: Coloring Text
<p style="color: blue;">This text is blue!</p>Simple, right? We use the color property to set the text color.
Example 5: Using Hexadecimal Colors
<p style="color: #FF5733;">This text has a custom color.</p>Hexadecimal colors give us more precise control over the color. In this case, we're using a specific shade of orange.
HTML
Now, I have a little story for you. Once upon a time, there was an HTML element called <basefont>. It was used to set a default font for an entire HTML document. However, like many things in technology, it became outdated and is no longer supported in HTML5.
Instead of <basefont>, we now use CSS to set default fonts for our entire document. Here's how we do it:
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333333;
}
</style>This CSS code, placed in the <head> section of your HTML document, sets a default font (Arial), size (16 pixels), and color (dark gray) for all text in the <body> of your webpage.
Conclusion
And there you have it, folks! We've journeyed through the world of HTML fonts, from web safe options to setting colors and styles. Remember, the key to mastering fonts is practice. Try out different combinations, play with sizes and colors, and see what looks best for your web pages.
As we wrap up, here's a little tip from my years of teaching: Don't be afraid to experiment! The beauty of web development is that you can always undo and try again. So go forth, be bold with your fonts, and happy coding!
Credits: Image by storyset