Bill Rosener: Well. So, Doctor Bill, welcome back in this video you learn about cascading style sheets, cascading style sheets, expands the ability of a web designer to control the appearance of web pages. HTML, primary focuses on the structure of a document. For example, a piece of text might be designed as a header, a list or paragraph
Bill Rosener: cascading style sheets, on the other hand, focus on the appearance and the presentation.
Bill Rosener: There's 3 ways of inserting a S. Cascading style sheet. One would be an external style sheet which would be defined in an external file, typically included on all documents on a website. Another approach would be an internal style sheet typically defined at in the head or at the top of an HTML page, and then inline styles, which are used to apply a style for a single element, and we'll be focusing on the second 2, internal
Bill Rosener: and in line style sheets there.
Bill Rosener: So anyway, let's maybe start off. Take a look at what you'll learn how to create, and then we'll get started here.
Bill Rosener: So open it up. Here is the before, and we're gonna take that and convert it into this. Notice the header tag. We're gonna place the background on that, maybe a border.
Bill Rosener: Then we'll go ahead and review a hyperlink. We'll take a remove the underline, maybe change the color, and then we'll change some the font size and the color in this as well. The bottom paragraph here.
Bill Rosener: Okay. Now that we don't want to do, let's get started. So probably the easiest approach would be to go to the assignment. 11 folder.
Bill Rosener: Go ahead and press on this link here. It's Css. Introduction before, and you could go ahead and right click on this and save it. But probably an easier approach would be to simply right click and view page source. And this may vary slightly from one browser to the next. But here in chrome, it's called view page source.
Bill Rosener: And that's gonna give me the HTML code. I'm just gonna highlight this
Bill Rosener: control C to copy it.
Bill Rosener: I'm then going to take open up the visual studio code.
Bill Rosener: And maybe the 1st thing I'm do is go ahead and create a new file file. New.
Bill Rosener: I'm gonna call this one
Bill Rosener: assignment 11 dot. HTML,
Bill Rosener: it's a create file
Bill Rosener: and paste.
Bill Rosener: and there we go.
Bill Rosener: So the very 1st thing we wanted to do is that, go ahead. And as I showed you here is we're going to convert
Bill Rosener: or kind of modify the header tag. So it's got a background, a border and is shaded there.
Bill Rosener: So the very 1st step here. I'm going to come right up here, and I'm going to go ahead and put a style equals
Bill Rosener: Namiko background
Bill Rosener: color.
Bill Rosener: And I'm just going to go with light blue.
Bill Rosener: and then I'll tell you what, while I'm right here, let me go ahead and put a font size.
Bill Rosener: Poland, and I'll go with a huge 1. 40 Px.
Bill Rosener: And I'll make sure I get my closing angle whoops
Bill Rosener: quote here. So
Bill Rosener: yep, I'm gonna start my style. I'm gonna double quote ends with a double quote, have an attribute, colon oops. I need to semi colon here.
Bill Rosener: So background, color.
Bill Rosener: the color here, font, size, column, and there we go at this point. I'm going to go and save it.
Bill Rosener: Then I'm gonna come along and go to open in my default, Browser.
Bill Rosener: and there we go so you can see right now, right away. I've increased the the font size, and I've changed the color. Let's go ahead and put a border around that
Bill Rosener: similar to this one right here
Bill Rosener: to add a border. I can come right up here and I can go ahead and type a border
Bill Rosener: colon. I'll go with the 2 pixels.
Bill Rosener: We're quite a solid border.
Bill Rosener: and I don't care. Pick a color here. I'm gonna go with green.
Bill Rosener: Okay, and let's go ahead and save that.
Bill Rosener: come back to my browser and refresh. And now I've got a border around that.
Bill Rosener: Okay, next thing we're gonna do is we're gonna go ahead and review. Maybe we'll change the color of hyperlinks, and then we'll have one without and one with the underlining.
Bill Rosener: So right here, here's my hyperlink.
Bill Rosener: I'm just gonna go ahead and put style equals.
Bill Rosener: I'm gonna put color.
Bill Rosener: And I'm gonna go with us a purple.
Bill Rosener: And then I'm gonna put text decoration
Bill Rosener: and none
Bill Rosener: that looks like I accidentally deleted my href equals.
Bill Rosener: and maybe I'll put this hip Markey here, so I've got style
Bill Rosener: oops. Make sure I close my
Bill Rosener: oops double quote here. So style start my style and my style, color, colon, purple, text, decoration, colon, the value none. And then H. Reference through. Let me go ahead and save that.
Bill Rosener: and back to my browser
Bill Rosener: refresh.
Bill Rosener: And sure enough, it is purple, with no underlining.
Bill Rosener: If I wanted it to be underline, I could, as another option is to
Bill Rosener: I maybe have turned it off on all of them.
Bill Rosener: so maybe had an external cascading style sheet that
Bill Rosener: said, Turn it off everywhere. Then I could come along, and
Bill Rosener: rather than putting none, I could put underline.
Bill Rosener: Okay, so style, make sure double quote, and the double quote.
Bill Rosener: color, purple, semicolon, text decoration, Colin, and that's looking good. Let me go ahead and save that
Bill Rosener: and come back and refresh.
Bill Rosener: Okay, and now I've got one without and one with.
Bill Rosener: Okay, now let's go ahead. And this one also page titles. I'll tell you what. Let me come on down here, and we'll add one more H. 2,
Bill Rosener: and I'm just put test.
Bill Rosener: So now I've got page titles, and I've not got another head to her tag.
Bill Rosener: and let's assume I wanted to.
Bill Rosener: go ahead and
Bill Rosener: let's assume I like this, and I want all my head or 2 tags to be identical.
Bill Rosener: Well, one way I could do is just simply copy and paste all this code like I did. But, as I mentioned, I'm also going to go ahead and show you a way to put an internal
Bill Rosener: stop shit
Bill Rosener: so way at the very top up here
Bill Rosener: when I was up to stop.
Bill Rosener: It's been a few times I'm gonna type up style.
Bill Rosener: And now, what I'm gonna do is I'm gonna create my own class. I'm just gonna call this on my header.
Bill Rosener: And I'm just gonna grab this code right here
Bill Rosener: and paste it.
Bill Rosener: And a lot of times I like to put these on separate lines. So I've got the background color, light, blue, font size and border.
Bill Rosener: Now, what I can do is I've got a class called my header.
Bill Rosener: I could come right down here.
Bill Rosener: and I can go. Class equals
Bill Rosener: my header should get the double quotes.
Bill Rosener: And then, if I wanted to let me just go ahead and copy that
Bill Rosener: down here and paste.
Bill Rosener: Okay, and let me go ahead and say that
Bill Rosener: and open up my browser
Bill Rosener: and refresh.
Bill Rosener: Okay. So now that made it much easier. So if I wanna, I'll tell you what, let me go ahead and modify this one the top one.
Bill Rosener: So rather than
Bill Rosener: I'll get this in my buffer again.
Bill Rosener: Now I'm going to come along and
Bill Rosener: repeat delete that
Bill Rosener: and replace it with my header.
Bill Rosener: So now let me go ahead and save this
Bill Rosener: and refresh. It's gonna look identical. So I've got 3 headers, all using the same style sheet there.
Bill Rosener: and so now it makes it much easier
Bill Rosener: if I want to. I can simply change the font size to 30,
Bill Rosener: save it
Bill Rosener: opened up in my browser.
Bill Rosener: and instantly I have changed
Bill Rosener: all of them
Bill Rosener: as opposed to having to manually go through each one of these, and again, like I mentioned a lot of times. What you're going to do is have an external style sheet.
Bill Rosener: and then let's assume you've got a hundred web pages, each one including that style sheet. If I decide I want to change the font size, I change it. One place and all 100 documents are going to be modified here.
Bill Rosener: but in this case I've got it with them, and this would be an internal, and so and if I put it here, that would have been an in line. But here is, it's an internal. So it's make one little change.
Bill Rosener: and it's going to get reflected
Bill Rosener: throughout the entire document.
Bill Rosener: Her phone.
Bill Rosener: Okay? And I'll save that.
Bill Rosener: I'm not sure what it's gonna look like. But anyway, so now I've got purple around my header text. Well, hopefully, in this video, you learned a little bit about Cascadian style sheets.
Bill Rosener: And again, we learned in this case an internal, and then also
Bill Rosener: down here, would have been an in line style sheet. Anyway, I'll catch you next. Video. Thanks a lot.