Transcript from the "Styling a Blockquote" Lesson
[00:00:00]
>> Jen Kramer: So, we're continuing to on our little styling journey here. And, I had a request on the select channel to go ahead and style up one of the quotes. So, here on the page, I have this lovely block quote going on here. Let's think about ways that we could make that look even prettier.
[00:00:19] So this is a pretty common thing that you see done on, let's say, on newspaper sites. These are called pull quotes, often the newspapers will take a relevant quote from, especially a particularly long article, they'll pull it out, they'll put a nice pretty font on it, maybe make the font really big.
[00:00:37]
And so that is something that we can do something like that here with our CSS. So, does anyone wanna tell me how we could start by selecting the quote itself? Yeah.
>> Speaker 2: Can we just like block quote?
>> Jen Kramer: We can just like block quote.
>> Jen Kramer: Okay? So we'll go ahead and select blockquote, pick some curly brackets, and then, then the question will be, what should we do?
[00:01:06]
I'm gonna suggest that we go ahead and change the font to something different, so. So far we have this Arial font that's in use on our web page. What if we try something a little bit different here? So if I say my font family, is Georgia, instead.
>> Jen Kramer: And, these are called font stacks, by the way, if you ever hear that term, font stack, this is what they're talking about, all the different fonts.
[00:01:34] So VS code is suggesting Georgia, Times New Roman, Times and Sarif. And if you take a look at that font static, you'll notice that Times New Roman is in single quotes. Anyone have any idea why that one font name is in single quotes, when all the other ones are just sort of written there?
[00:01:51]
Yeah?
>> Speaker 3: It's more than one word?
>> Jen Kramer: Cuz it's more than one word. So if your font has more than one word in it, your font name, you're gonna need to put some quotes around it. If the font name is only one word long, then you don't need the quotes.
[00:02:05]
Okay, so we'll go on ahead and change the font family. How about we change the font size too?
>> Jen Kramer: We'll make this a little bit bigger. So size is interesting in CSS, there are lots of different ways that we can measure size. And I'm gonna try to teach you the ways that are most useful right now for the way people are coding web pages.
[00:02:28] So, there is a unit of measure that's called the REM, R-E-M. So what I'm going to do here is I'm going to make my font size 3REM, just like that, R-E-M. It's not a band from the 80s, it's not rapid eye movement, it is relative M's. Okay, great, so what's an M?
[00:02:50] An M is, a size that's established by your browser for the font size by default. Okay, so one m, in this particular case, in your browser happens to correspond to 16 pixels high. That's that ugly Times New Roman font that we've been working with, it's the same size font that we were working with, with Ariel.
[00:03:10] Some fonts look a little bigger, some look a little smaller, because m as a unit of measure, actually measures the width of the letter, m, m, lowercase m. [LAUGH] It's a lot of M's. So, some fonts tend to be a little bit, the font size looks a little bit bigger overall, but the width of the letter m is the method by which we're measuring things.
[00:03:37] So 3REM, we take 3 and we multiply it by 16, the size of this font would actually be 48 pixels, okay? So it's gonna be really, really big. The reason that we are not using 48 pixels, cuz wouldn't that seem to be easier? Is that we are gonna eventually, as web developers, work with a whole bunch of different devices, right?
[00:04:00] People are gonna maybe looking at our site on a phone, they may be looking on a tablet, they might be looking on a refrigerator, right? Game console, there's all kinds of crazy places they might be looking at it. And by using REM's, we're gonna be able to have this nicely adjust to whatever device that we're using.
[00:04:16]
Pixels maybe, maybe not, okay? So this tends to be an industry standard. So if you go ahead and save this.
>> Jen Kramer: And we go ahead and take a look at our web page.
>> Jen Kramer: There we go, we have a great big huge honking quote here, all right?
>> Jen Kramer: Now we might want to continue styling that a little bit.
[00:04:42]
Maybe we'd like to make it italic? Anybody wanna go for a italic? So we can say font style is italic.
>> Jen Kramer: Okay? Yeah.
>> Speaker 2: Is one M going to be different, depending on the font that you're using?
>> Jen Kramer: Yes.
>> Speaker 2: So if you're using Georgia, one M is different than the Times New Roman.
[00:05:09]
>> Jen Kramer: They're all 16 pixels, but the size that you see, maybe, it might look like George's a little bit bigger, Arials' a little bit smaller. So we have a nice little quote going on here. What if we center it on the web page?
>> Jen Kramer: Think we should center it?
[00:05:28]
Okay, let's center it and make it pretty. Text, the line is our property, center's our value.
>> Jen Kramer: Okay.
>> Jen Kramer: There we go.
>> Jen Kramer: And finally, how about that, my name there, that's kinda big, right? Usually the person who said it gets a tiny little font, whereas the quote gets a really, really big font.
[00:06:03]
True? Okay? So, how would we go about changing things, changing my name, so that it is something different? Yeah?
>> Speaker 3: You cite.
>> Jen Kramer: Yeah, so we can just go on ahead and list cite right here. And then, what do we do?
>> Speaker 3: Change font size?
>> Jen Kramer: Font size?
[00:06:33]
>> Jen Kramer: Maybe we'll go back to 1REM?
>> Jen Kramer: Okay. Maybe that's a little small? This is the other part of CSS, you never know if you get the right size right off the bat, right? So you just sort of experiment.