CSS Common Style Updates Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

16:05:05 Hi! Everybody! Welcome back in this video, we're going to continue to learn about Cs by talking about some common style updates that you would make to your HTML pages elements as a quick note.
16:05:18 This is this lecture is kind of more of a reference.
16:05:21 Guy. So this Powerpoint contains a lot of different notes on common style updates that you would make to the HTML elements that you'll be working with when you make an HTML.
16:05:33 Page, it is by no means a comprehensive list, but it's a good go-to for many of the most common style options.
16:05:40 That being said throughout this video, I'll just briefly touch on everything.
16:05:44 And then point you to the correct example. HTML code within the repository that you can explore more on your own time.
16:05:51 So for a number of ways to sample your text, to style your text, go ahead and check out the sample underscore, txt go ahead and check out the sample underscore text underscore styling dot HTML file within the repository in here you'll
16:06:05 see examples of how to change the color of your text, how to change the font size, how to change the Font family for instance, is it a sera for sans serif?
16:06:14 A times, etc. Whether or not to make your text bold with font weights, whether or not to make it italic or oblique, using font style, text tricks which will allow you to make all the letters uppercase all the letters lowercase or capitalize the first, letter text
16:06:33 decoration which allows you to add, underlines, overlines, or lines through, and you can change the alignment of your text.
16:06:42 You can change the vertical alignment of your text you can change the vertical alignment of your text.
16:06:45 You can change the indent of your text, and you can also change the hovering of your text.
16:06:50 So let's go ahead and look at some of these examples.
16:06:54 So I've already opened up this. HTML file here, so in this first, we're setting the P.
16:07:02 The style for the identity of p identity. Huver.
16:07:08 So in this first one, we're setting the P. The style for the identity of p identity hover.
16:07:11 So we're gonna change the color, the font size, and the background color of the P when we hover over it.
16:07:15 That's what this does and so when you want to change the hover of something, you do, the element, or the class or the identity Colon Hover.
16:07:23 And so what this will do is it will change all these attributes as soon as we hover over it, and then change it back when we're done hovering over it.
16:07:32 Here I change the color of this text to be white on background that is black, and the border color of that background is red.
16:07:41 Here we set the font size to be 25. We sent the Font family to be comic-five. We sent the Font family to be comic sands, and then we sent it to be oblique.
16:07:51 So we'll see what that means. And here I change the alignment of my text in a number of ways.
16:07:57 So the main text is going to be centered, and in the middle also we'll see an example of a super script and a subscript.
16:08:07 So here is that here's what that looks like. So here's the text that is white, with black background.
16:08:13 Here's the text that is comic. Sands with a larger font size.
16:08:17 Here's the one who's alignment has been changed to be in the middle and the center with a super script and a subscript, and here's the one that will change.
16:08:26 So here I am, hovering over it, and you can see how it changes when I hover off it goes back to its default.
16:08:32 Okay, so that's what Hover does. And we'll use hover a little bit more when we talk about d 3 dot.
16:08:37 J S.
16:08:40 So other things you might change is all of your most of your HTML elements will have some sort of border.
16:08:48 So that's the outline around the outside. So you can change these.
16:08:51 And as some examples are sample underscore borders dot HTML.
16:08:56 So most of them have available a border top, a border bottom, a border-ft in a border right form, meaning, for instance, with the border width you could do border topwidth border bottom width, boredom, left width and border right width so
16:09:14 that just sets how large the outline of the border is.
16:09:17 You can set the style to be solid, dotted dashed double groove, or ridge, or inset, or outset, are hidden.
16:09:24 You can change the color, you can add a radius which will round the corners, and you can also just put all of these in as an argument separated by spaces using border.
16:09:36 So let's look at some examples. So we're gonna go to common style updates, sample borders.
16:09:43 So we'll see this in the Hdml code.
16:09:47 So here I'm setting the style of a div of class border one to have a dashed red border here.
16:09:55 I'm setting border to class to have solid with 10, a large radius and a black border, and then I just add both the div's.
16:10:09 So let's go ahead and open this, Firefox, and you can see the 2 types of div borders I've provided.
16:10:17 Okay, so feel free to edit that code on your own and see what happens.
16:10:22 So you can change sizes using arguments like height and width.
16:10:27 You'll see that there's also things like Max Dash, height, and Mac Mino height.
16:10:33 Also Max dash width and Min dash width.
16:10:36 So let's do is they can take in either a pixel argument or a percentage argument that specifies that the maximum height that this will be is, say, a 100 pixels or the maximum width of this will be a 100 pixels and then a minimum and so why is
16:10:51 that useful many, if you said it to be a percentage, the size of the item will change as you scale the browser window. The size of the item will change as you scale the browser window, so let's go ahead and see an example.
16:11:07 So here are some borders that have been set with various arguments.
16:11:11 This first one is fixed, and these other 2 have percentages.
16:11:17 And so one of them is set with a minimum and a maximum, and one of them is set with a just a percentage.
16:11:25 So the one that has the maximum. You can see.
16:11:30 At the bottom. It doesn't change as I shrink, because it has a minimum weight.
16:11:35 Width, and then you can see how they'll percentage ones change.
16:11:40 But the one up top, which was a set number of pixels, stays the same.
16:11:49 Okay, so you can also set the padding in the margins.
16:11:54 So padding sets the space between the content inside an element and the border and margins control the spacing between elements.
16:12:03 So let's look at an example.
16:12:08 So here we have setting some examples. So, for instance, we're gonna set all of our peas to have a border.
16:12:16 So this is just so you can see the difference in this first one.
16:12:19 We set the padding to be different. So the padding left and the padding right, the padding top, and the padding bottom, and then in the second one, we're gonna mess around with the margin.
16:12:29 So remember, padding separates the interior from the border, and then margin set separates the border from the rest of the document.
16:12:36 Elements. So let's go ahead and look.
16:12:41 So this one had in the padding, so remember, by putting padding on the left and the right.
16:12:46 We're making it so that the element cannot get any closer than it is to those parts of the border, and you can see here this one demonstrates how the margins work, because it is further away from the left margin of the page than the one above it in which we did not affect the
16:13:02 margins at all.
16:13:04 Okay, so positioning allows you to set the position of your elements within the page.
16:13:10 So you can do this a number of ways you can set position dash, left position, dash, bottom, position dashboard position, dash top !
16:13:22 So the first way you can do it is to have a static position.
16:13:25 This is the defaults. So when you use static position types, you're going to go ahead and have your elements stacked from the top to the bottom.
16:13:33 So if I have a page that has a P. And then I put in another P and another P.
16:13:38 Those will all just be stacked on top of each other like kind of like writing on a page from top to bottom.
16:13:45 When you have your position set to static, you cannot set the left to the right, the top, and the bottom, because it's just the default of stacking it from the top to the bottom.
16:13:56 So the second sorry. The next one is called relative, so if you have your positioning set to rel, you can set the left right, top and bottom to have positions relative to what the normal positioning would be, meaning that if I had 2 Ps.
16:14:15 And I set the second one to have a left right and top.
16:14:18 Those would be in with respect to its position below the top P.
16:14:23 So if I set the top to be 10 pixels, it would be 10 pixels lower than it would be in the static position, and again, there are sample there's a sample.
16:14:33 HTML code that you can play around with to get a better understanding finally, there's absolute position which will then just set the location within the containing elements.
16:14:43 So if you set a position, that's 100 pixels to the left and 10 pickixels from the top, it will just be set there in whatever element it's contained in and not move, and then there's also fixed which sets an absolute location, but with respect to the
16:15:01 browser window to do so. Z Index controls the order in which they're layered, and I think what makes sense is.
16:15:10 Just look at these as examples. So let's go ahead to sample position.
16:15:16 As a visual studio. First.
16:15:20 So here I'm just setting the border style so we can see the Divs and the peas.
16:15:26 So here's a div, and I'm using the static position for both of them.
16:15:30 And when we see this you'll see that this P.
16:15:33 Is gonna be stacked above this one, and then that's it.
16:15:36 At the next div, we're showing off relative positioning.
16:15:40 So relative positioning, will then look at the position that it would have had if it was static and what it's going to do is then move it to the left from the left 40 pixels, and from the top 20 pixels down.
16:15:54 So the Pixels is where you're placing the start of these things.
16:15:57 So the start of my left will go from the left side of the page 40 pixels over the top of it will go from the bottom of this P.
16:16:07 20 pixels, down.
16:16:09 So maybe it makes sense to look at that. So here's the 2 static ones, and then here's the 2 relative ones.
16:16:18 So this piece was the static position. But now that I've used the relative position, but now that I've used the relative position, now you can see how I'm to the left.
16:16:25 From the border of the Div. 20 pixels, or however many pixels, I set, and then from the bottom of this pea however, many pixels I set.
16:16:34 So then what was the next thing was, we had the absolute position.
16:16:38 So the absolute position is going to move the p. 500 pixels from the left.
16:16:44 And so let's go back and see that. So here is the absolute position.
16:16:47 Remember, in the absolute position this is set with respect to the containing element.
16:16:52 So within this containing div. This is 500 pixels to the right, or from the left margin, for to the right let's see, what else did we have?
16:17:03 So a fixed position. Remember, that's with respect to the entire web page.
16:17:10 So here's this example. So you can see that this box right here stays in this same position on the web page, no matter where we scroll.
16:17:18 So that's the demonstration of a fixed position.
16:17:21 And then for 5 or the final one, we're demonstrating the idea of a float.
16:17:27 So floats allow you. I don't know if we went over this and the slide it's when I was talking, but floats allow you to place 2 elements next to each other instead of one on top of the other.
16:17:39 So in this example, we're both going to set the float of 2 Ps.
16:17:43 To be to the left, meaning that this P. I think.
16:17:47 Let's just show it. Here are the 2 PE's have their floats set to the left, which allows them to be placed next to each other.
16:17:54 Instead of this P. On top of this one, and then in this bottom example, these 2 float peas have their floats set to right, meaning that they can be stacked next to each other like this.
16:18:06 So floats are useful that allow you to design a web page layout, where maybe you have, like one div here another div here.
16:18:14 So, for instance, if you've seen examples where you have like a news article where the main article is kind of in the middle or off to the left, and then on the right hand side, you have various advertisements that pop up they're probably using some sort of positioning using all the elements
16:18:29 we've discussed here in order to in order to demonstrate that.
16:18:34 Okay. So now you've seen all these most common styling.
16:18:39 You've seen the most common ways that you can style things, and it's I think it would probably be good if you wanted to go through this and practice changing things around and see what happens.
16:18:50 That being said, that's the end of this video.