Up to this point you may be thinking, "This is all well and good, but my website looks about as exciting as a dry biscuit." Well, that's about to change as we learn about the many ways that you can stylize your HTML.
There are many ways to add styles to your HTML pages which include:
- Inline Styles
- Internal Styles
- External Styles
Let's learn about these below.
Inline Styles
Inline styles are about as personal as you can get with your HTML elements. It's like taking your div or p to a tailor and having it fit just right. But be warned, this suit only fits one. If you want another element to sport the same style, you'll have to duplicate it and manually add it yourself.
For instance, if you want to make a paragraph that is styled with red text, you would do it as follows:
<p style="color: red;">This is a red paragraph!</p>
And just like that, you've got a red paragraph. But remember, this styling only applies to this one paragraph. If you've got another paragraph that wants to be red, you'll have to add the style attribute to it too.
Internal Styles
Now, suppose you're throwing a grand soirée and you've decided that all the guests should be wearing red. Rather than telling each guest one by one (as we did with inline styles), we can make a blanket statement with an internal style sheet. In the land of HTML, this is done using the style tag within the head section of your document.
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This is a red paragraph!</p>
<p>This is another red paragraph!</p>
</body>
Here, we've declared that all p elements should be red.
External Styles
Now, suppose you're not just throwing a party, but you're the mayor of a town and you want to implement a town-wide dress code. It would be a bit impractical to announce the dress code at every house and party, right? That's where external styles come in. You can craft a separate style document and apply it across your website. This is done using an external CSS file.
First, we create a CSS file (let's call it styles.css) like this:
p {
color: red;
}
And then, we link this file in the head section of our HTML document:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>This is a red paragraph!</p>
<p>This is another red paragraph!</p>
</body>
With this approach, you've decreed a town-wide dress code, and every house (or HTML document, if you will) will adhere to it.
And there you have it, a simple and easy way to stylize your HTML. So go forth, and let your creativity run wild in the vast plains of HTML development!
Conclusion
And with that, we draw the curtain on our magnificent journey through the lush valleys and towering peaks of HTML. Over the course of this journey, we've come to understand HTML's core components, from the simplest of elements to the intricate dance of nesting tags. We've played with text, created lists, planted images, and even learned how to link different pages together. And, most importantly, we've delved into the art of styling our web pages, transforming them from monotonous textual deserts into vibrant, captivating edens.
The world of web development is a mighty one, filled with various libraries, frameworks, and tools to explore. And while HTML serves as the bedrock of this world, it's just the beginning. CSS will add flare to your pages, and JavaScript will breathe life into them, making them as a thrilling treasure hunt through an ancient castle.
So, consider this not as an end, but as the beginning of your own epic journey into the vast expanse of web development. The story of your journey is just starting to be written.
Remember, learning HTML is like learning a new language. It might seem daunting at first, and you may stumble over your words. But with each line of code you write, you're not just building a webpage, you're building your future. Don't fear the brackets and tags, embrace them. For they are the tools that will help you paint your dreams onto the canvas of the digital world.