Check out a free preview of the full CSS In-Depth, v2 course:
The "Strings & Special Characters" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle reviews what makes for a valid string in the the content attribute.

Get Unlimited Access Now

Transcript from the "Strings & Special Characters" Lesson

[00:00:02]
>> Estelle Weyl: So generating Content Strings. So we talked about this a little bit before, and if you remember we did a Unicode example. So to have interactive content, you need to have the content attribute and it has to have something in it, or an empty string, but an empty string has to be quotes or the keyword none.

[00:00:19] Or any of the other types, which we talked about quote no quote, and stuff like that. So you can have the empty one, which is just two quotes. You can have any type of text, like we showed the example earlier of parenthesis.pdf. And then, a Unicode character, which starts with a slash, and then the number of that Unicode character.

[00:00:40] You can have attribute href or counter, so we've already gone over all of those. I just wanted to have one slide that. So let's talk about special characters, cuz we had this special character 2603. Let's find out what 2603 is. So 275D is this quote, 275E is this quote.

[00:01:08] This here is not a live slide, so I can't change them on the fly on this one. Here, the special character 2709 is the little email. 2706 is a telephone and 231A is now a watch.
>> Estelle Weyl: No, cuz that says add to calendar. They didn't have a calendar icon when I did this, I couldn't find a calendar icon.

[00:01:40] I don't use emoticons, barely, I use 1, which is this, and that's it. So I'm not really good with the emoticon things, but I do like the snowman. So 2603 is a snowman and I created this calendar many, many years ago. And You could just put in a character here, and then figure out what it was.

[00:02:03] So if we did this, I can't grab it. Why can't I grab it? Anyone know why I can't grab this?
>> Speaker 2: [INAUDIBLE]
>> Estelle Weyl: Yep.
>> Estelle Weyl: So I can't grab any of these to actually stick in there. So let's just do 2603 invert, okay, so the one you put in the top is if it was ampersand number sign and then it tells you what it is and then it converts it to CSS and JavaScript for you.

[00:02:35] The thing is with UTF-8, you don't really have to do this. You could actually just grab this one. I can grab, cuz it's actually text and if I just put this up here, if it was a live slide, it would work. So let's put it down here and convert, okay.

[00:02:53] Let's put it on a slide that is actually live.
>> Estelle Weyl: Here, and content, I'm just gonna put that here.
>> Estelle Weyl: And hover over it.
>> Speaker 2: Semicolon.
>> Estelle Weyl: Thank you. There we go, so you see it there? Because it's UTF-8, I don't actually need to put the slash u, but you can.

[00:03:23]
>> Estelle Weyl: Okay, so here's a nice use of a generated content. So so far we've been using strings, but you can also use it for graphic design. This is progressive enhancement. It informs someone that it's a quote. This text is still there. How am I informing them that it's a quote visually?

[00:03:47] Basically, put a little arrow underneath it inside a bubble. So the quote, I put a border radius of 20 pixels, and then after it, I put generated content of an empty string. And I basically, put a square that has a 20 pixel border up it. So that means it's actually 40 pixels by 40 pixels.

[00:04:10] And then, I made all four corners or four sides of that square, you know the four. So it has a height of 0 and a width of 0, which means it's just four triangles coming in the middle, because when you have a border, the boarders come in at an angle, right?

[00:04:29] They come in towards the center point. It's a, what is it, an isosceles triangle when all three sides are the same? Trigonometry-
>> Group: Equilateral.
>> Estelle Weyl: Equilateral, thank you. You all are closer to your trigonometry class than I am. I had foster kids, but they weren't old enough to actually learn equilateral triangles.

[00:04:51] They don't teach that to six and seven year olds. Okay, so all the borders are transparent except for the top one which I made red. So if you have a square, and it has triangles on each side, you decide which one you wanna show. In this case, I only wanna show the top one, cuz it's an angle pointing down.

[00:05:13] This is not a live slide, but the next slide is, so I'm just gonna change it from red to blue, from transparent to blue. And let's get rid of this line here, so it can pop up a little bit. And yellow, and green. Okay, so we have a Google square down at the bottom, but I only want the red to show.

[00:05:36] If I do border color of red, that won't work, cuz all four will be red, so that's why I did transparent, there we go. So that means the one on top is red, the left and right are transparent and the bottom is transparent. If I want to put the quote on the side and that would have been on the left side so the position would have been left would be negative 20.

[00:06:19]
>> Speaker 4: 120.
>> Speaker 5: Negative 20.
>> Estelle Weyl: Thank you. I was like, why is that not working? Negative 20, negative 40. Yeah, there we go, and then bottom, it would have been top 20 there. So if it was coming out from the side, let me just do relative left 40 pixels, so you can see it.

[00:06:52] So if I want to put it on the side, I would just put that negative side triangle, and put it on the side.