Text Formatting

Quick reference

• 00:05 Okay in this video I wanna talk about text formatting,
• 00:07 there's a lot of things you can do to text.
• 00:09 In fact we've already looked at one, this color we can change this to black.
• 00:15 That's a sort of text formating.
• 00:16 There's all kinds of other text formatting options and
• 00:19 the first one I want to talk about is text align.
• 00:23 And text align can be center, can be left or it can be right.
• 00:27 So if we If we give this a center boom.
• 00:29 It goes center.
• 00:30 If we change this to a right obviously it goes right.
• 00:33 We do the same thing for left.
• 00:36 So that's very useful for a lot of things.
• 00:39 Another thing is text decoration.
• 00:42 And you can have none.
• 00:44 You can do a overline, line-through, or underline.
• 00:47 So if we give this an underline.
• 00:50 Save this.
• 00:52 Reload, boom.
• 00:53 We get We can underline.
• 00:54 Likewise, we can do line dash through, get our semicolon, and it goes through.
• 01:02 We can do over line and it's above.
• 01:08 So, text decoration, likewise you can do none to remove any sort of
• 01:12 decoration you may have assigned somewhere else and, boom, there you go.
• 01:17 Another kind of weird one is the text transformation and
• 01:20 that's just text dash transform and
• 01:23 this changes the case of text, upper case, lower case, or you can capitalize it.
• 01:28 Our text right now is already capitalized, so if we give this a lower case and
• 01:32 save this, see it's already uppercase.
• 01:35 Boom!
• 01:36 And the CSS transforms it.
• 01:38 So that's really weird.
• 01:39 So the options here are uppercase, lowercase, and capitalize.
• 01:44 If you look at capitalize, boom, there we go.
• 01:48 So let's go back to our index page and let's change,
• 01:51 hello world to give this a lowercase W, to see what happens.
• 01:54 Boom. It stays the same because it's
• 01:56 capitalizing it.
• 01:57 Change that back.
• 01:59 Now if we go to uppercase and
• 02:04 that changes every letter to uppercase, so I've always found that one interesting.
• 02:10 You can transform your text.
• 02:12 That's almost like a computer programing type of things, so
• 02:15 the next thing I want to look at is text dash indent and
• 02:19 we can give this just say 50 pixels If we save this, come back.
• 02:25 It's kinda hard to tell cuz we're centered.
• 02:26 So, let's go ahead and remove our center.
• 02:29 And you can see now this is bopped in 50 pixels.
• 02:34 If we change this, if we remove it completely.
• 02:40 Well, mine pops back over.
• 02:41 So again, let's align the center.
• 02:44 Align, that's sort of kind of interesting.
• 02:46 The next one I want to look at is letter-spacing.
• 02:50 And let's say 10 pixels.
• 02:52 And this is sort of like the transform.
• 02:55 It actually does something to our text.
• 02:57 You can see now each one of these is spaced out.
• 03:01 You can make it more dramatic.
• 03:03 Boom, so, that's kinda weird, it's like transforming our stuff.
• 03:08 So, sort of similar is word-spacing and let's give this 10 pixels.
• 03:14 You can see that the space between these two words.
• 03:18 Let's go a 100 pixel, make it more dramatic.
• 03:21 Boom, so again sort of like transforming our text, which is really kind of cool.
• 03:26 And the last one I wanna look at is text shadow and
• 03:29 this is one of my favorite ones.
• 03:30 We can go text dash shadow and let's go three pixel,
• 03:36 two pixel and let's call this red.
• 03:40 And if we look at this, boom, we get this cool shadow.
• 03:44 If we change this to, let's say, CCCCCC we get this kind of really neat shadow and
• 03:52 you can play around with the depth of this stuff, by playing with these two numbers.
• 03:56 In fact we give this a 30, it really pushes it over.
• 04:00 If we give this a 20, it goes down.
• 04:06 So that's the direction, so we can give this a one and
• 04:10 a one and you can just barely see it there.
• 04:15 So really a nice effect.
• 04:17 In fact, you can give this a third property.
• 04:19 Let's change this from three to three.
• 04:21 Save it.
• 04:23 Okay, so you can see it a little bit more clearer.
• 04:25 Now, if we give this another property, let's say ten pixels right here,
• 04:29 what this is gonna do is it makes it blurrier.
• 04:33 You see how it sort of diffused it a little bit?
• 04:35 And you can sort of play with this, in fact if we make this,
• 04:41 let's just call this black, to make it look so you can really see it.
• 04:45 See it makes it sort of blurry and the amount of blurriness
• 04:49 is this third property right here, so say it's really really blurry there.
• 04:54 Really neat.
• 04:54 I like the text shadow feature.
• 04:56 And so we went through a lot of stuff in this video.
• 04:59 Threw it at you really fast, but a lot of useful stuff.
• 05:01 And that's all for this video.

Lesson notes are only available for subscribers.