0:00
Yo guys, what the hell's going on? Welcome to your 29th CSS beginner's tutorial. And
0:12
in this video, we're going to take a look at text decoration. That's coming up
0:17
All right, so what the hell is text decoration? Well, to show you that, I'm going to view
0:22
this in a browser. And we'll get it up in Chrome. Okay, so we've got the two articles
0:29
here. Now, you see this blue link? It's underlined and blue. And we know that's the default browser
0:33
styles, right? But if I inspect this element here, this link, we can see that it's got
0:39
a text decoration of underline. So that underline there is caused by this text decoration property
0:46
And there's a few different keywords we can use to give it different decorations. So let's
0:52
take a look at a few of those. So we'll target our A tag, and we'll say text decoration
0:59
none. Okay, so that is now going to say you don't want that underline. You want no text
1:07
decoration. And by the way, that's the name of the property here, text-decoration. Okay
1:13
so let's save that and view it in a browser. And now we strip off that underline in style
1:24
So we'll view this again in the Chrome DevTools. And you can see now text decoration none
1:29
It's overridden this text decoration underline. And that kind of proves an important point
1:33
You can only have one text decoration. You can't have multiple text decoration rules
1:38
where you give it an underline and an overline or anything else. It has to have one or the
1:43
other. Okay, so let's have a look what else we can do. If I delete this, and we go back
1:51
to the start, I get a drop down list. And that's brackets telling me all the available
1:55
values for this property. And the first one is inherit. And that's basically saying, look
2:00
whatever styles this is inheriting indirectly, just apply those for the text decoration
2:05
So say, for example, we give the article tag here, and we give that, let's do it here
2:13
an article property of text decoration overline. Yeah. Oops. That's saying that every element
2:25
within the article now through inheritance is going to inherit this text decoration property
2:30
of overline. Now, if we say just inherit, what we're saying is we're overriding that default
2:38
browser style, because we're giving it a specific value here. We're saying inherit. Now, we're going
2:42
to inherit the style that is passed on through this article tag. So that should be overline
2:48
Let's save it and view it in the browser. Google Chrome. Cool. And now not only are all these P's
2:59
overlined, which looks rather bizarre, now the A tag here is overlined, because it's inheriting
3:05
that style through the article. Okay. So let's get rid of that and see what else is available to us
3:14
So we'll come back here, and we'll get the drop down again. Line through. Okay. That's like a
3:20
strike through. So these are pretty good for lists. So you've got a list of things to do
3:25
and you've got like four of them that are crossed out. Then that's a pretty cool style to use in
3:30
this case. So let's view this again in a browser, see what it looks like. We'll go with Google
3:36
Chrome. Okay. There. You can see now it's got a strike through or a line through. So that's that
3:43
value. And what else do we have? We have none we've seen, overline we've seen, underline is the
3:52
only one we've not seen. Well, we have seen it, because that's the default browser style. But
3:57
we'll view it again in a browser just to make sure it's worked. And now it's underline again. So
4:06
really you only have three main text decorations, and they are line through, overline, or underline
4:15
Or if you don't want any, you can have none. Or if you want to leave it down to inheritance and
4:19
inherit whatever the parent element is styling for, then you can use the inherit keyword. Okay
4:25
so that about covers it for text decoration. If you have any questions whatsoever, drop a comment
4:29
down below and I'll answer all of those. Otherwise, guys, I'm going to see you in the next video. I'll
4:34
see you guys then. Transcribed by https://otter.ai
