Let’s make a website. Episode VIII — Intermission
The bonus track.
How’s everyone doing? :)
Last time, we made a Pokédex. It was awesome. I hope you liked it! It was basically a way to put into practice all the things we learned since the beginning of the series.
This brings us to today’s article. Many times in the previous posts, I skipped over some concepts and details to get to the point. If you’re already a seasoned web developer and are just reading this series because you love my jokes, you might have raised an eyebrow quite a few times.
Why does he never write the
<!DOCTYPE>tag? Why is there no<head>tag in his code? What is love?— Haddaway
In this article, I will go over some of these concepts, in no specific order. It’s kinda like the cherry on top of the other HTML and CSS articles, before we move on to the next big technology: JavaScript.
<head> and <title>
The head of your page
Have you noticed? Ever since the first article, we keep writing our page like this:
<html>
<body> </body>
</html>
And then we put our awesome content between <body> and </body>. Which is great. Remember that in the second article I said this about <body>:
<body>tells the browser: “Everything between my opening and closing tag is the actual content of the page.”— Me, a long time ago
In other words, you put in your <body> tag the content which will be visible on your page.
Now, I’m gonna blow your mind and tell you that there’s also a <head> tag.
In simple terms, <body> is to the visible content what <head> is to the “behind the scenes” stuff. This is where you would put it:
<html>
<head>
</head>
<body>
</body>
</html>“But what is this behind the scenes stuff you’re talking about?”, you ask (or maybe you don’t but let’s pretend you do).
There’s a lot of stuff that you can write there. We’ll start with a simple example: <title>.
Your page title
<title> is a tag that you use to specify the… title (yes) of your page. This is the text that appears on your browser tabs.
In this screenshot, you can see that the <title> of the Wikipedia main page is “Wikipedia”.
This is how you would write it in <html>:
<html>
<head>
<title>Wikipedia</title>
</head>
<body>
</body>
</html>Pretty simple, isn’t it?
Of course, <title> isn’t the only tag you would put in <head>. There are many others, and in this article we’ll see some of them in the following parts.
<!DOCTYPE>
We won’t spend too much time on this one. Just like the <head> you learned about in the previous part, I’ve omitted this tag on purpose until now.
HTML has evolved multiple times through the years, introducing new tags with each new version. <!DOCTYPE> stands for document type, and simply tells your browser which version of the HTML specification should be used to read your code. For HTML 5 (the current version), you just need to write html.
<!DOCTYPE> must be located before any other tag, just like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>CSS in its own file
Remember your old pal CSS?
Until now, we just added our CSS rules inside the <style> tag. It’s alright for simple projects, but it can get messy quick once you start having a lot of rules. Imagine having 1000 style rules with no clear organization, between your <style> and </style> tags. This would be nightmarish.
Fortunately, your browser is nice enough to allow you to put your CSS code in its own CSS file. It’s called a stylesheet. Remember when I said in Episode VI that CSS stands for Cascading Style Sheets but we shouldn’t care because f*ck it? Well, you now know what the sheet part is. You also know what the style part is (think about all those style rules you wrote). We’ll talk about the cascading part later in this article.
So yeah, a stylesheet is just a file with the .css extension, just like an HTML file has a .html extension. You write a CSS file just like you would write code in a <style> tag. For example, this is a valid CSS file:
h1 {
font-family: Verdana;
}Let’s say this file is called style.css. That’s good and all, but how do we tell the browser to use it for our web page?
This is where the <link> tag comes in. This tag is set in the <head> tag (just like <title>) and allows you to tell the browser to use your stylesheet. You use it this way:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
Quite a weird syntax, I’ll admit it. Note that you can actually remove the type attribute, like this:
<link rel="stylesheet" href="style.css">Which already looks clearer. Nowadays, most browsers won’t care if you omit the type attribute. The rel attribute just tells the browser that the file we’re referencing is a stylesheet. The href attribute is the same as the one we used for the <a> tag in Episode III. Basically, you just indicate the name of the file used as a stylesheet.
And just like that, your browser will use your CSS file. You can safely remove your old <style> tag now that you put all of its contents in the style.css file.
The good thing with stylesheets is that it allows you to separate the content (HTML) from the design (CSS), even in your code. You can open your HTML file in one tab of your code editor, and then open your CSS file in another tab. You can then display them side by side, just like this:
In the same way, let’s say you need to change the design of your page. With a <style> tag, you would need to open your HTML file, then look for the tag. It can be cumbersome when your page starts getting pretty big, with multiple lines of code. With a separate CSS file, you just open it and apply your changes there. You don’t even have to open your HTML file, since you’re just applying modifications to your page design. You’re not changing its content. It feels much more efficient to develop this way.
Speaking about CSS, let’s have a look at some of the stuff I kinda skipped over in the previous articles.
CSS: The forgotten ones
class vs id
This one is pretty simple. You know how you can add a class attribute to your tags, to be able to identify them in CSS? Just like this:
<p class="cool-story blue-text"></p>You can have multiple classes for a single tag, and multiple tags can use the same class.
Well in HTML, there’s a similar attribute called id. It has the same goal: identifying a tag. The difference being that you can only use one ID per tag, and two tags can’t share the same ID. Kinda like a specific class made just for one item.
This is how you use it:
<p id="first-paragraph"></p>
<p id="second-paragraph"></p>In the same way that you can apply style rules to tags with classes using the “dot”, like this:
.blue-text {
color: blue;
}You can apply style rules to a specific ID using the pound sign, like this:
#first-paragraph {
font-family: Georgia;
}The more I build websites, the more I find myself using classes only for styling. I still use IDs though, but it’s mainly when I want to identify a tag which I will use in my JavaScript code.
His JavaWhat?
— You?
JavaScript (JS) is the third pillar of the Web, with HTML and CSS. While you use HTML to describe your page content and CSS to describe your page design, you use JS to describe your page behavior and interactions.
We’ll talk about this technology in a future article. For now, let’s go back to CSS.
Nested CSS rules
There’s one last thing I wanna talk about today: the nested rules in CSS. This is the cascading part of CSS.
Let’s say you’ve got this code:
<html>
<body>
<div class="first-block">
<h1>It's a title</h1>
<p>This is a paragraph in the first block.</p>
</div> <div class="second-block">
<h1>It's also a title</h1>
<p>This is a paragraph in the second block.</p>
</div>
</body>
</html>
And you want your title and paragraph text to be red, but only in the <div> with the first-block class.
How would you do that (without modifying the HTML code)?
Well, in CSS, you can nest rules. This is how you would write them:
.first-block h1,
.first-block p {
color: red;
}Your browser will then understand that only the <h1> and <p> text whose parent tags have the first-block class should be red. Here’s the result:
You can nest as much as you want. Which means this is valid CSS:
.first-block .other-class .yet-another-class p {
border: 1px solid red;
}Only the <p> whose parent container have the yet-another-class class, which themselves have the other-class class, which themselves have the first-block class will have a 1px wide red border.
OMG.
Here you see that it can get complex pretty quick. As a general rule, I try to keep my nesting no more than 3 levels deep. Otherwise, it can soon become a real mess.
Let’s wrap this up.
Alright! Quite a lot of theory today, but I felt like these points, while not mandatory, needed to be covered. If you’ve started looking at the code of some websites, you’ve probably already encountered some of the concepts we learned today.
Last time, I talked about the developer tools and how we were gonna learn all about it in this part…
…well looks like we won’t so sorry, not sorry, but we will in the next part! It just felt weird to teach you about these tools before you even heard about stylesheets or the <head> tag.
As for the little contest where I suggested you could send me your creations… To this day I have only received a single submission! Let’s keep the contest running until the next article. Feel free to send me your awesome pages!
And that’s it for today! I feel like I don’t say it enough, but thanks a lot for reading and following these articles. I love your little comments giving me feedback, it feels great to know that these posts are really useful and interesting to people.
See you next time!
The next article is (finally) available here!
Note: This post is part of a series.
- Let’s make a website. (Episode I)
- Let’s make a website. Episode II — HTML
- Let’s make a website. Episode III — Your first page
- Let’s make a website. Episode IV — Images
- Let’s make a website. Episode V — The code editor
- Let’s make a website. Episode VI — CSS
- Let’s make a website. Episode VII — Let’s make a Pokédex!
- Let’s make a website: the JavaScript adventures.
- Let’s make a website: the JavaScript adventures — The variables
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
