Starting to make our webpage pretty: text
A free video tutorial from Jonas Schmedtmann
Web Developer, Designer, and Teacher
4.7 instructor rating • 5 courses • 1,028,352 students
Learn more from the full courseBuild Responsive Real World Websites with HTML5 and CSS3
The easiest way to learn modern web design, HTML5 and CSS3 step-by-step from scratch. Design AND code a huge project.
11:51:39 of on-demand video • Updated October 2020
- Real-world skills to build real-world websites: professional, beautiful and truly responsive websites
- A huge project that will teach you everything you need to know to get started with HTML5 and CSS3
- The proven 7 real-world steps from complete scratch to a fully functional and optimized website
- Simple-to-use web design guidelines and tips to make your website stand out from the crowd
- Learn super cool jQuery effects like animations, scroll effects and "sticky" navigation
- Downloadable lectures, code and design assets for the entire project
- Get helpful support in the course Q&A
- Get access to my "Best Resources for Web Design and Development with HTML & CSS"
English Voiceover: In this lecture, we're going to start to write CSS for text formatting, so you can see how CSS works. It's really easy. So, we'll jump right into the CSS file here, to start write some code. CSS is written in rules. Each rule consists of a selector, and a declaration block. To exemplify that, we'll start formatting the main heading. So, H1 is the selector because it will select all H1 elements. This means that all H1 elements will be formatted with the code we will write in the declaration block, here in curly brackets. So, I will start with the text color. We will choose green in this example. So, color... And I just write, green and then semicolon. And you see the H1 element actually changed its color to green. So, to sum this up, the property here is color, and the value of the property here is the name, green. Next, we want to change the text size, right? So just write font size and brackets gives us some suggestions as we write. And now I will choose just 40 pixels. You see, it changed? Maybe 50 pixels. No, 40 pixels was better. You see we are already designing in the browser, we're changing the values of the attributes, and see which looks best. Now suppose we wanted to change the font family. Let's say, to Helvetica New. Let's do that. It's font family, right? And now just type, Helvetica New. And again, the H1 element changed its family. Now if that font is not available on your system, which is likely, if you're on windows. Let's tell the browser to use Arial instead. And to do so, we just write Arial after a comma here, and then the semicolon, as before. So Helvetica is the first choice, and Arial is the second choice. And now, let's go do the same thing for the H2 elements. We want them to look the same, but a smaller font size. So let's copy this H1 rule, and paste it down here, and change this to H2. Now these two look exactly the same. The H1 looks exactly the same as the H2 elements down here. Because for now we didn't change anything. So let's change this here to, let's say, 25. And that's a much better font size. Now, we repeated some rules here. You see? The H1 and the H2 have the same color and the same font family. And we should actually avoid that, because repeating code is bad practice. Instead of repeating, we can just group the common rules together. This is something we will be doing a lot, so just showing it to you. So, write H1 and H2, and the declaration block. So everything that is common here, I will cut and paste it up here. And the font family is also the same for these two. So, did you see what I did here? Now I can delete this from here, because it's already declared here in the common declaration. Now let's quickly format the paragraphs. I will first go back to the HTML file and delete this random text we put here, just to see how strong, and emphasize and underline works. As you can imagine, we'll use the P selector here. And I'll show you another bracket secret here. Instead of switching to the CSS file, you can edit CSS right here in the HTML file. Just click on the P tag, and then hit Command+E, or Control+E. Command+E. And this opens a CSS editing section right here in this file. This is called Quick Edit. Now hit new rule. Now it automatically puts the P selector and the declaration block here for us. OK, I want the font size... To, let's say, 18 pixels. Great. And let's justify this text. And for that, we use a text align property and set it to justify. Very well. We could also use right, center or left, but we want to justify here. I will also adjust the font family. Do you remember how to do that? It is font family and it was Helvetica New or as a second choice, Arial. All right. Maybe you noticed that the link text is still in original format down here. Now we could go ahead and format the A tag, right? That will show you a much better solution. So let's switch back to the CSS file. And at the beginning, I will add a rule for the body. And since everything is inside the body, this rule will apply to everything visible on the web page. So this means all elements that have no defined styles. So this is like a global rule. So, body, and that's it. So first thing, I could go ahead and copy the font family right into the body. Like this. OK, now you see that everything has the Helvetica New font family. Even the links, which I didn't even style yet. If I delete this font family declaration down here for the P element, it still looks the same because we defined that everything inside the body will have Helvetica New as font family. And I will do the same thing with the font size. We'll cut it here, paste it here in the body. So the paragraph is back to the 18 pixels, but now the links are also at 18 pixels. Now the reason this works, is because of CSS inheritance, which is a very important concept in CSS. We changed the font size in the body, and so the elements that are inside of the body inherit its style. So child elements inherit the properties from their parent elements. Unless we overwrite their styles, as we did right here in the H1 and H2. Sorry, in the H2 declarations. All right, I think this was a good introduction to CSS code. So, congratulations. You have created some nice, clean CSS code here without repetitions and have made the text look pretty good for now. Isn't that great? Now this was a lot of stuff to absorb, so feel free to go through it again and make sure you understand exactly what we did. Because it's very important that you understand everything from here because from now we will use these concepts for the next lectures.