Bill Rosener: Hello! This is Dr. Bell. Welcome back in this video you'll learn more about cascading style sheets as we take an unformatted document and convert it to a formatted document using.
Bill Rosener: start off with inline, and we'll take a look at internal and then external cascading style sheets.
Bill Rosener: and we're going to find. If we go to external, we can literally modify one file and change the entire look and feel of an entire website there, let me start off by taking a look at.
Bill Rosener: Here is the assignment. 7 description. If I press on the assignment 7 unformatted. This is the document we'll be starting off with you get a couple choices, you could literally right click on here and save the link. Or you could
Bill Rosener: highlight the link, you could go to view page source and just simply copy all the code there.
Bill Rosener: Okay, taking a look here, I've also provided screen captures, for here is the inline. I'll be walking through that here first, st then we'll be taking a look at internal cascading style sheets. And again, as I mentioned the videos, you can press and zoom
Bill Rosener: and get that to the size that you like.
Bill Rosener: and then finally, we'll take a look at external
Bill Rosener: and then also with external, we can see it's going to be including a link into a file.
Bill Rosener: And then we would need to have this file here. So what we're gonna be doing is taking one file
Bill Rosener: assignment 7. Unformatted, converting it to
Bill Rosener: assignment. 7. Inline assignment, 7. Internal assignment, 7. External. And we also need to create this styles dot Css, that's going to be like included within or linked within my external file. There. Okay, now that we know what we want to do, let's get started. So the very 1st step you want to do is either
Bill Rosener: save this.
Bill Rosener: or simply go ahead and right, click and go view page, source and copy and paste all that.
Bill Rosener: Okay, I've already got this ready. So here I am. What you could do is literally
Bill Rosener: go ahead and copy and paste that file and create the 3 versions of that. But I'm gonna go ahead and come in here and
Bill Rosener: I've got visual studio open. So the 1st step I'm going to do is come right up here and I'm gonna choose, file new text file. And I'm just going to go ahead and
Bill Rosener: save it right away and come up here to save as.
Bill Rosener: And I'm going to call this 1st one. It's gonna be assignment 7 in line, dot. HTML,
Bill Rosener: and I'll save. Okay. Now again, we've got to get all that code. So what I'm gonna do is just come right over here to my unformatted. It's a control, a
Bill Rosener: control C to copy. Come over here and paste.
Bill Rosener: Okay, the very 1st thing we're going to be doing is we're going to be adding a little padding.
Bill Rosener: and if I was to maybe have pressed on. You can maybe see here a little padding around the perimeter, and we'll be increasing the font size.
Bill Rosener: So
Bill Rosener: I'm gonna come over here just grab a little code here we're gonna start off modifying the body.
Bill Rosener: So here is, tell you what, maybe I should even go ahead and save this again.
Bill Rosener: I'm going to go ahead and right click on it open in my default, Browser. And here's what we've got. Okay, this is assignment 7 in one.
Bill Rosener: and we're going to go ahead and start.
Bill Rosener: But we're going to start by increasing the font size and putting a little padding around the outside there.
Bill Rosener: So coming back here, I'm gonna come to the body.
Bill Rosener: and I'm going to put 30 pixel padding around the perimeter. I'm then going to increase the font size to 1.5, and I'm actually decrease that a little bit. It's going to be a little large here, so let me go ahead and save that.
Bill Rosener: And then what I can do is just come right over here and refresh.
Bill Rosener: and I can see I now have padding around the outside, and I've increased the font size there.
Bill Rosener: And I might decrease that font size just a little bit here.
Bill Rosener: Okay, maybe I'll just go to save 1.1.
Bill Rosener: Okay, next step we're gonna be doing is changing the header tags.
Bill Rosener: And 1st one is in line. That means we're doing it kind of in line with each each HTML code tag. And I'm gonna paste right there.
Bill Rosener: Okay, so what did I do is I've gone style background color is green. So it's going to put a green background around it.
Bill Rosener: Font color will be white. It's going to center that. And then it's going to put a 10 pixel padding around the outside. So let me go ahead and save that.
Bill Rosener: and I'll go ahead over here and refresh. And sure enough, I can now see that what was a header, 2 tag, or that was header. One tag is now green with white font.
Bill Rosener: Okay? And I could repeat that process
Bill Rosener: on the next one. So I've got a regular head, one tang. And now I'm going to modify that using inline. Since the background color is green, white, everything is the same. So let me go ahead and save that
Bill Rosener: and come back here. And now your name is going to be the same thing. Now we're gonna go ahead and start working on these paragraphs.
Bill Rosener: And I'm just gonna come here and grab a little code here.
Bill Rosener: and then I'll explain what this code does.
Bill Rosener: So I've got a div tag that's going to start a division. I'm going to say the width of it. I'm going to confine that to 700 pixels. We saw that kind of going all over the entire screen. I'm going to change the background color to pink. I'm going to change padding and then margin. This is going to go top.
Bill Rosener: It's gonna go top, right bottom left. So if I wanted to, I could put a Px here, I could put Px here, and I could put
Bill Rosener: the X here. So it's going to put 0 picks on the top for pat 0 margin at the top 0 on the right
Bill Rosener: top right bottom, so 20 on the bottom and then 0 on the left.
Bill Rosener: Okay, let me go ahead and save that.
Bill Rosener: Come back here and hit refresh. And there we go. So we'll place that paragraph within bank pink. And we've kind of
Bill Rosener: restricted the size of that in this case to
Bill Rosener: 700 pixels. Okay, I'll do the same thing with the next paragraph.
Bill Rosener: So what you're seeing is I'm having to do. If I'm in line, I'm having to do this with every single tag. So I'm going through. You can see I had 2 header, one tags, and modified both of them, and I had 2 div tags, and I'm now going to go ahead and modify both of those as well.
Bill Rosener: and we'll take a look at the results
Bill Rosener: and refresh that page. And here we go. Okay, we're gonna do one last thing with a hyperlink.
Bill Rosener: So now it's just a regular hyperlink. But let's go ahead and add a little color to that.
Bill Rosener: So I'm going to come right up here and paste.
Bill Rosener: So now I'm going to say text decoration is none. So it's not going to be underlined. The color is going to be green.
Bill Rosener: The font color is going to be white. I'm gonna have 5 pixel padding around the outside, and it's gonna have rounded corners. So let me go ahead and save that.
Bill Rosener: take a look at the result.
Bill Rosener: And there we go.
Bill Rosener: So sure enough, that is working great. Okay, that 1st one was
Bill Rosener: in line. And as we saw
Bill Rosener: in this case, every header tag, I'm gonna have to modify every div tag I'm gonna have to modify. And then every hyperlink on a particular page I'd have to modify, and they could get very time consuming. So now we're going to see if we can speed things up just a little bit.
Bill Rosener: I'm now going to go ahead and come up here to file new text file.
Bill Rosener: and I'll tell you what. Let me just go ahead and grab this code right here. So control A to select all control. C to copy. Come over here.
Bill Rosener: I'm going to paste that I'm gonna come right up here. I'm gonna come to file, save as.
Bill Rosener: and this one is going to be assignment 7
Bill Rosener: internal dot. HTML, and let me go ahead and save that, and just let you know
Bill Rosener: again. You could have started with this one copied and pasted and creating these. But I'm just kind of slowly building that.
Bill Rosener: Okay. So the 1st one we had to literally modify every header tag, every div tag, etc. There. Now we're gonna go ahead and create a style at the very top.
Bill Rosener: So I'm gonna have my head before my body tagged
Bill Rosener: right in here. I'm going to paste
Bill Rosener: and let's take a look at what I pasted. So I've increased the padding on the body.
Bill Rosener: I've increased the header one tag just like we did earlier. The background color is green. Vaughn is white. We've got padding there. We've done the same thing with the Div tag, and even with the A for anchor hypertext reference. We've done all that. Okay. So now, what I can do is I'm just going to come up here to file
Bill Rosener: and save.
Bill Rosener: and we'll go ahead and take a look at this one. So I'm gonna right. Click here, open and default Browser.
Bill Rosener: And sure enough, here's my internal, and it's looking identical
Bill Rosener: to. Here's the inline. And here's the external, the internal. Okay. So in this particular case.
Bill Rosener: if I was to add an additional h 1 tag.
Bill Rosener: That's ABC. Go ahead and save that.
Bill Rosener: Come ahead and refresh that page. I can see it's already taking those same cascading style sheets and properties and applying them there.
Bill Rosener: Okay, so with inline, I had to go through each every time there's a head of one tag I would have had to come and modify it. But in this case, if I want to make any modifications.
Bill Rosener: for example, if I wanted to change the color, to say from green to red.
Bill Rosener: I make it one time I come up here to file. I go to save
Bill Rosener: come back over to my browser and hit refresh, and it looks ugly, but anyway, we can see I didn't have to go through and modify every single one. All I needed to do was make one change.
Bill Rosener: and then, sure enough.
Bill Rosener: I'm not sure what color to go with here, but anyway, I go with green. I make one change, and then all the header tags within that document, header. One tags within that document are going to be changed. Let me go ahead and save that again. Come back over here and hit refresh.
Bill Rosener: Okay, so we're keeping proving. So the 1st one, we had to go ahead and modify every single tag.
Bill Rosener: the second one. We just modify it once. But still, if I have 500 documents and I want to change.
Bill Rosener: I want them all to look very similar. If I want the background, color and all the header tags to be green or blue. I've got to go ahead and modify 500 documents, so the last one is going to be external
Bill Rosener: and let me just go ahead and I will create that.
Bill Rosener: So I'm gonna select this control, A to select all control. C,
Bill Rosener: I'm now going to come right up here to file new text file.
Bill Rosener: We're going to paste.
Bill Rosener: Okay? So now in this one.
Bill Rosener: I just need to add one line of code up here. Then we're actually gonna have to
Bill Rosener: create our file or styles.
Bill Rosener: So before the body tag, I'm gonna come right up here and I'm going to paste.
Bill Rosener: So this is going to be a text. Cascading style sheets. It's going to be looking for a style sheet called Styles dot Css. So if I was to save this
Bill Rosener: and take a look. Whoops!
Bill Rosener: Let's say that come right up here and go to file and save.
Bill Rosener: Oh, okay, I guess I haven't saved it yet. This one is going to be assignment
Bill Rosener: 7 dot external dot. HTML, okay, here it is. Okay. This one. If I was to view it.
Bill Rosener: Open a default, Browser. Here's my external. You can see there have been no cascading style. Sheets applied to that.
Bill Rosener: And now what I need to do is go ahead and create styles, dot css, so I'm gonna come right up here, and maybe it looks like I'm getting a little. I'll tell you what, if it doesn't fit over here, I'll go ahead and delete one or momentarily close one of these. So I'm gonna come up here to file new text file.
Bill Rosener: And I'm gonna go ahead and grab some code.
Bill Rosener: We're gonna actually be grabbing that exact same code that I used for the internal.
Bill Rosener: Okay, here it is. And now I'm gonna go ahead and come up here to file, save as
Bill Rosener: styles. I got that floral dot Css. And I'm going to go ahead and save that.
Bill Rosener: So now, taking a look here, if I come here to my
Bill Rosener: I've got my original and formatted. We then created the inline, the internal, and now the external and the external is looking@styles.css. For
Bill Rosener: the properties there. So let me now come back to my browser here was external dot. HTML! Let me hit refresh. And sure enough, now it is applying all those cascading style sheets. And so what you're going to find is
Bill Rosener: All I needed to do is if I've got 500 documents every time I create a document I put this line at the very top.
Bill Rosener: Then if I ever want to make changes.
Bill Rosener: and I'm trying to find a color here that I would.
Bill Rosener: Oh, let's just go with, let's say blue here.
Bill Rosener: So I'm modifying styles, dot css, I'm gonna change this to blue
Bill Rosener: every time I see that it's not been saved. So I'm gonna come up here to file. I'm gonna hit, save
Bill Rosener: now I'm going to come back here, take a look at my external and refresh. And sure enough, it has changed that. So now, if I have got 500 documents.
Bill Rosener: all with this one line at the top, if I want to make any changes.
Bill Rosener: I just modify one file styles dot Css. And then all the documents there are going to
Bill Rosener: now use the same
Bill Rosener: cascading style sheet properties. Well, hopefully, in this video, you learned how about internal inline, internal and external
Bill Rosener: cascaded style sheets
Bill Rosener: as we took an unformatted document and then use those, apply those various properties. So again, I've got some screen capture. So you you can look at that to help you
Bill Rosener: if you want. But anyway, hopefully, you learned a bit here and I'll catch you next. Video. Thanks a lot. Bye.