4.1 Text styling - Video Tutorials & Practice Problems

<v Instructor>We'll start with little text styling,</v> specifically we'll style the block quote that appears on the "Moby-Dick" page with the quote of the first paragraph in the book. Let's take a look at that. Here we go. Here it is. Call me Ishmael, et cetera. Let's make this block quote stand out a little more, first by changing the font style to an italic font. The way to do that is with the style attribute. Let's get rid of this here because we're about to add the styling. Remember this was a comment giving us a note. Basically, reminding us to do some styling but we're about to do that. So we can get rid of that now. And the block quote is right here and here's how it works. The style attribute has a value that is a string containing the style rules. In this case, font-style: italic. Let's take a look at the effect of that. There we go. You can see it switch from the regular font style to italic. Take a look at this. In fact, we can just get rid of it. This is a real useful way to learn what the style rules do. It's just get rid of them, watch the change, store it. And there it goes. Let's make it a little bigger too. I'm gonna use a font size of 20 pixels. And these rules have to be separated by semicolons. Actually, let's take a look at this and see here. Look at that. Not only did it not make it bigger, but it actually undid the italics. It's because there's a syntax error. We need a semicolon separating these. And it's a good idea to put a semicolon to the end, even though it's not necessary. This way, if we add extra rules, we won't run into the problem we just saw. Look at that. Little bigger. Let's add some extra styling to this iconic first line, "Call me Ishmael." Ordinarily, there would be no way to do this, but we anticipated this issue by putting in span here. So if we wanted to style this and didn't have a span, adding a span would be the right thing to do. So the span doesn't actually show up, right? There's no way to see that there's a span here without inspecting it. If we inspect the source, we can see that there's a span but it doesn't have any effect on the appearance. But here, we're gonna add a rule: style= Well, let's go back to the normal font style, (keyboard typing) which is the way you emphasize something when it's already italic. In fact, we can just do one at a time. This is great. One of the things that's nice in the screen cast is you can do one at a time. It's a lot of overhead in a written tutorial. As you can see here, it just changes to the normal font. And let's make the font size a little bigger even than 20 pixels (keyboard typing) to 24 pixels. See, it's bigger now. And let's change the font weight to bold. (keyboard typing) This is basically the same as strong. Here we go. And finally, let's change the color (keyboard typing) with the color attribute, color. There are couple ways to do this. Now, I can just say color red. Let's just really bring it out. Like that. But there's another way to do this that's very general. There's a convention of using what are known as hexadecimal codes. So there are three attributes. There's red. Looks like this: RR, GG, BB. Red, green, and blue. And each of these is a number in the hexadecimal system which is base 16. So that's between zero up to the letter F. So that's zero, one, two, three, four, five, six, seven, eight, nine, A, B, C, D, E, F. Those are the 15 numerals in hexadecimal. So this red here is a hexadecimal number between 00 and FF. So let's see what 000000 looks like. We have to prepend this here. It's got the number sign. So this is the way to specify the color. This will look black. This is no red, no green, no blue. We can dial this all the way up to FF, which is 255. It's just 16 squared minus one. And now, it's red. So that's the same as saying red is a word. We can also make it green, like this. That's pure green or we can make it pure blue and we can do anything in between. So say FFCC17. Happens to look like that. Now, you don't have to memorize these. What you do in real life is you use a color picker. There's a link in the book and you can also just go to Google and type HTML color picker or something like that. CSS color picker would also work. I should also mention that this convention of using capital letters is a little bit older. Nowadays, people usually use lower case letters like this. (keyboard typing) So this is red. By the way, there's also a shorthand. When these numbers are the same, you can say just F00 like this. This is the same as FF0000. So this will be red. You can see it's the same. See if you can guess what this is. Red, green, and blue, all dialed up to maximum. It's white. It disappears. As a final change, let's align these headers here, A Softcover Book Report and Moby-Dick (or, The Whale) so that they're in the center of the page. You could do that with text-align: center. (keyboard typing) So if we wanna center just one of them, we can do this. Like that. We can do both of them and copy it here. Later on, we'll actually switch this up to use the header. So it'll be the same. But this is what you do if you want just one at a time. Like that. You can see it centers it. Now, you may wonder where all these style rules come from. How do you learn more about what these style rules are, and how to change them? And the answer is, there are lots of resources on the web for this. For example, in Learn Enough HTML to Be Dangerous. There's a link to this page. This is a CSS reference. What we're doing here is basically inline CSS. So CSS is what happens when you put it into a separate file but these inline styles are basically CSS rules. So we've got these different properties. If you click on one of them like color, then it tells you some of the possibilities here.