Hello, in this CSS Crash Course video, we're going to be looking at pseudo elements might be thinking what is a pseudo element, it's some of the videos that we've been doing in this series, it's been pretty obvious we're gonna be covering you probably could get to talk to, but pseudo elements allow you to manipulate certain part of a element, instead of splitting it up into well, several elements. So what I mean by that is, you could change the styling of let's say, the first letter, you could do something before or after that sort of stuff, instead of actually having to create separate different elements for that stuff. So instead of having to do several divs, within one day, we just have the one div, you manipulate it however you want. So we're going to be covering four pseudo elements in this video. Let me refresh this.
So we get rid of that and more or want to actually do I'm gonna Google Lauren. It's Latin for pain itself. I just want to get this lorem ipsum paragraph you were in there there you go Lawrence and dollar Sita met. Hopefully I pronounced it correctly for copy that for I'm going to do is put a div tag cannot dog div that's all gonna do not gonna add a class or ID you could manipulate using a class or an ID, we're just gonna do div directly. And instead of points of style in here, what we're gonna do is colon colon, first letter, I think you know what this is going to do. So if I save this refresh, we've got our piece of text on us to close this.
Why is this not close? Ooh, there we go. There's Yeah, so let's just close that text. Now in here, I'm going to put font sois as to em system a pretty big, I'm going to put the color as red. So now what's going to happen is the first letter is has a font size of two em, and is now wrestle. As you can see, we haven't split this up into several elements, one for the first letter, and one for the rest of it.
We've just used one and by doing this, we've been able to change the font size, because there is CSS styling for making stuff. Okay, so notice this is a great way if let's say the user input some, let's say a paragraph, but you don't know if they're going to be putting a capital letter at the store and you do want to cop to it or you don't so great way of doing something without having to split it up into several different elements. In next thing we're going to show you is Dave colonna, dashed line. Color Save that refresh. As you can see, the first line is now blue. One thing to note is it's not the first line as in where there's a full stop is the first actual line.
So if this was me, one, I'm just gonna open up an open up terminal. I'm gonna whack this into here so I can easily just resize this. As you can see, it is still the first line that is affected. It's not where the first full stop is. That's something I wanted to show you. Let me get rid of terminal.
Sorry about this. So what we're going to be doing now is looking at the next pseudo elements I did colon colon before. So what this does is it does something before this actual piece of text and we're going to keep the same form just put some text there. So we're going to put content Hello, space save that refresh. And now as you can see, we've got the word hello. But this is also mean the word hello is also affected by the first letter and first line so he adds it with him.
Now we're going to show you div colon colon after content will score exclamation marks save that refresh as you can see, it's put it at the end now. So yeah, is it pseudo elements, great way of manipulating certain snippets of wanting one element without having to split you up into several elements, if you have any questions, feel free to post them on my education platform. So now learning Dakota, UK. If you want to check out the source code, feel free, there'll be a link attached with this video, which will take you to our GitHub page, which has the source code from every video in this series. If you liked this video, or if you didn't, please let us know. And as usual, thank you for watching and I hope you have a great day.