This has been Oh, welcome. In this video, you'll learn about cascading style sheets as we take this document and converted into this document.
Cascading Style Sheets expand the ability to a web page design your control the appearance of a webpage
Is still primary focuses on the structure of the document. For example, piece of text may be designated as a heading a list or has a paragraph.
Cascading Style Sheets. On the other hand, focus on the parents and the presentation. There are three ways to includes Cascading Style Sheets. One is to use an external style sheet.
Is there to find an external file or tip included on all documents on a website.
second approach is to use an internal style sheet. These are defined inside the head section of an HTML page and the Third Style is to use inline you're caught in line style.
And they're used to apply style per single element in this video will be focusing on the third approach inline styles, because this approach is the easiest to implement
Since it does not require modify the theme or an administrative files will know that we know what we want to create. Again, we're going to take in this document and converted it to
This other side, go ahead and get started here. So to begin with, I should probably mentioned
That you can find a link to this year document in the same area found a link to the video that you're watching
So if I take a look. The first thing you're going to do is download the file. And here it is CSS introduction before
And I'm the same as I just save this to a folder called a tab. You're then going to open up this folder twice. You can just simply
I typically will right click on it and open with you're going to open up with a browser, you could use Firefox, Chrome Internet Explorer Microsoft Edge.
Then you're going to turn around and open it a second time using either Notepad or word path to not use Microsoft Word to use Microsoft Word, it's going to want to insert special characters.
Into the document there. So here it is. Here is the document that will be working with
And if I was to that's enough notepad. If I view this exact same document in a browser. This is what I get, or a start up the very top up here I can see I've got 100 to 10 was making a bunch of changes to this. So the first thing I'm going to do is let's add a background color.
One little mistake and it won't work here. We're trying to find their sub 100 color have several hundred colleges, you can specify use words like light blue. If you want to get into
RGB values then there's literally thousands and thousands of different colors. Okay, sorry, do is change the background color for this header to
So at this point I'm going to come up here to File, Save that I'm going to come over to my browser and depending on your browser right here is my refresh icon.
And I always use the keyboard shortcut right down there. You can see the control are to the law and now upon doing that. I can see my background is in blue.
Okay, let's make some more changes and I'm going to play. It's going to be with inside these quotes here and they will go ahead and put on this just make the font size.
And maybe we'll go with really large here 2530 pixels.
Okay, so go ahead and click the font size 25 pixels 30 or so save that come back to my browser and refresh. Now get the should have made a little bit larger, just so it was
Actually obvious what was going to change that to a 30 say that and refresh. Okay, there we go. Now let's go ahead and exit put a border around here somewhere along in if you're watching this, to dedicate and start typing away. The next line going to go border.
On will go with a to pixel border around the outside and it'll be just go with green
Okay, well let's save that file say, and come back and refresh.
Okay, there we go. Now what I'm going to do is, this is awesome hundred to tag. And again, that's why a lot of people will place these into an external style sheet so you don't have to
simply copy and paste or all in one file, but let's just go ahead and I'm going to take all this information that is typing.
I'm going to copy it and I could see right here. I've got another header to tag, and I could paste that. And if I wanted to I can make some changes down here so I'll save that and now we should have both headers.
And pretty fun. Okay, so here are some hyperlinks are going to use calm. If you do anything with WordPress.
You're going to probably have probably one of the very first plugins, you're going to have installed is the Yoast plug in here.
So anyway, let's go ahead and work with this right now. These are blue and the link is appearing underneath. So we're just go ahead and modify this little bit here, it will change the style.
Colon
Colon, which is spelled go maybe a purple to you. I'll even stop right there.
Yeah, maybe we'll make both of them as well. What to do one, and I'll copy paste them. Something's come up here to Paul saying
And refresh. And now simply change the column. Everyone should be made that
Some color that you haven't seen before, maybe read
I'm just trying to see what it looks like.
It's going to probably be a little too broad. But let's
See how bright, that is, okay, there is run. Okay, now what you're going to find is you may want that line there or not. So we're gonna have I'm gonna show you both ways here.
We could go
Text.
Decoration colon and then ok so now when I say this,
Sometimes those hyperlinks can get in the way when reading
Especially maybe you've got to worry to highlight is like where you want to make sure it's hard to label. You don't really want to jump out there. So in that case, I've turned it off.
So now let's just go ahead and repeat that same process on the line below there will simply grab this and I'll use a different color.
And maybe I'll go with the purple again.
Okay. But at this time I'm going to make sure looks like the default is another one. And I'll go ahead can underline it
Okay, so come up here to File, Save. So the top one will be under will not get a lot in the second one will be
Okay, yeah, there we go. Okay, I'm gonna do one last thing here that will work with this a paragraph down here, change the color and maybe the font size as well.
So right here, I've just started in the p this paragraph. This is going to close the paragraph from the come right in here style equals
Color colon green semi colon table where to stop right
ahead and save that.
And we'll take a look. And sure enough, I've now got the text screen. I'm going to go ahead and increase. I should have done this earlier.
I'm just going to zoom in on the document. Okay.
You can see everything increase them. Let's say we wanted this text, you were a little bit larger them. Well, at that point, I could just come along here, just like we did right appear. I could go font size.
Colon, and they will go with no. No. Pretty too quiet pixels. And let's take a look at that. File, Save.
And refresh.
Okay. And sure enough, we've increased the font size there. So again, he cascading
Style Sheets focus more on the appearance and the presentation. And this little video here. I showed you how to change a header to tag. We're going to background border.
increase the font size I showed you how to turn off or turn on underline and change some even the color of your hyperlinks. The problem with him down here, the paragraph, change the color.
And even increase the font size open this video, you get just a little taste of cascading style sheets not kitchen next video. Thanks.