This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "Quotes & Attributes" Lesson
[00:00:02]
>> Estelle Weyl: Okay, so let's go back to generated content. So we have quotes. That was one of the options, which was beginning quote and end quote. And so here when you hit, it's supposed to have a quote, you can say the first quote at the opening is this type of quote and at the end is that type of quote.
[00:00:25] But if it's nested, give me option number three and number four. So the first one is typical US, which is double quotes on either side and then single quotes on a nested quote. In France, when you quote something, you would have angle brackets, a double angle bracket on the outside of a quote.
[00:00:45] And if there was a quote nested on the inside, you would have an angled apostrophe. And then you say basically quote before and quote after. So if you have a quote within a quote, and here's an example of it via CodePen. So as she lay on her pillow, she whispered in my ear, did you feed the cats?
[00:01:07] Cuz it's romantic. So here we have an inner quote and then the outer quote. And then if it's in French, [FOREIGN]. So the outer quote is a double angle bracket. You see here in the end and at the beginning. And then the inner quote, which is did you feed the cats, [FOREIGN], is a single quote.
[00:01:42]
>> Estelle Weyl: So you can actually go to CodePen and play around with that and switch your languages. Or actually, let's do change view and do editor view. And as you see here, it just says qqqq, right? And here it says language en, a quote that comes.
>> Estelle Weyl: I didn't know that that would be necessary, the greater than.
[00:02:12] I'll just try this. I don't know why I have the.
>> Estelle Weyl: It's still loading down below, and I won't be able to see live changes. So let's just move on from this, but you can play with it yourself later. So no-close-quote is basically saying, don't give a close quote.
[00:02:31] And so all these quotes, let's open in CodePen in a new window.
>> Estelle Weyl: So here,
>> Estelle Weyl: I'm seeing on every paragraph right after it, do not close the quote, right? No close quote. Except for the last of type, close the quote. So if I'm quoting a book, that would make sense, cuz the whole thing's a quote and then there's lots of quotes on the inside and we're good.
[00:03:05] So that's what no close quotes does, is it basically says don't close a quote. And then you can also do no quote and then before it doesn't have a quote, okay? So let's go back to generating content. Basically, you're never gonna use this. This is one of those things where you don't need to memorize it.
[00:03:23] Just know if you ever hit the issue, there's something about quotes, right? Okay, so let's go back to Attribute Values. We talked about this earlier. So here it says, any href that starts with http is usually an external link. Make the position relative. And then after it, put content of the attribute, the value of the href attribute.
[00:03:50] Position that absolutely, put it 1em from the top, left 0, background color black, color white, padding, line height. This is a local example of a quote because it's not doing anything and this is an external quote. So let me Google that for you. I saw someone with a let me Google that for you sticker.
[00:04:12] Let me Google that for you css generated content. Why did I position this relatively, does anyone know?
>> Estelle Weyl: Why did I position it relatively only on hover? So I positioned it relatively on hover, so first of all I positioned it relatively because here, the href itself, because this is positioned absolutely.
[00:04:36] And when you position something absolutely, it's relative to its parent or ancestor, nearest parent or ancestor that is either positioned fix or positioned absolute or relative but not static and static is the default. So I need to have it positioned relative or something similar. Otherwise, it would be in the upper left-hand corner of that whole slide.
[00:05:02] So that's why we did that. But why did I do it on hover? The reason I did it on hover only, and not always, is because if something is positioned relatively, it has a new stacking context. And so it'll appear like it has a higher [INAUDIBLE], and stuff will not be able to go on top of it.
[00:05:24] So only when I hover it do I actually give it a position of relative. Cuz if it had a position of relative all the time, it would basically be sticking on top of other content, if like I had a module over it. So let's play with this one.
[00:05:46]
>> Estelle Weyl: We're not gonna stop. We'll just take 30 seconds and play with it and see how you can style it. And just basically say, like if we do this and get rid of this part, then. We have to get rid of this part there. You see? You don't actually want to show that.
[00:06:07] But you do wanna show where this goes. So ten more seconds, and then we'll continue on to the next one.