Common CSS properties and how they work

what's going on engineers now we've learned about html tags and how it works now it's time to pretty up those html tags with some css now although there's over 500 css properties we're only going to look at 20 of them today and they're the 20 most common ones that you can use to get you probably 90 to 95 percent the way done with pretty much any site this video does assume that you've watched my previous video on html tags so i'm not going to actually explain how the different tags works if you're not sure how they work definitely check out the previous video on html tags so let's just get right into it so the 20 css properties we're going to look at are the ones on the screen background border color cursor display float font size style and weight height and width top right bottom left margin padding position and then text align and decoration we won't be covering them in the exact orders you see here but we'll definitely get to each of them as we go throughout this video for applying actual styles we're going to be using css classes css classes is basically an identifier like dark and then inside our css we'll be able to see dark again but with this period in front of it and the period is important because the period says look in the html attribute class and try to find an identifier called dark if you find one apply the following styles which brings us to our very first two properties background and color as you can see over here on the screen i have a dark gray background as the color so basically background sets the background color and then color sets the text color now i don't actually have any text here so i'll just add something like hello world when i save it you can see that it's white text the value you actually see here is called an rgb hex code and basically two two two is the same as two two two two two two the first two characters gonna be the red the second two characters is gonna be the green and the last two characters is gonna be the blue the lowest value would be zero 0 and the highest value would be ff and that's going to put in a range of 0 up to 255. so if we wanted a red background instead of a gray background we could do ff which would be 255 red and we could do 0 0 which would be 0 grand and then zero zero which would be zero blue then when we save it you can see we get a red background but that's burning my retinas so i'm going to set that back to gray the shorthand version can be used if each set of two characters is the exact same value so ff000 which was red could actually be written as just f00 if you don't want to worry much about colors you can actually use a color wheel which will let you just basically pick the color you want and then it'll tell you what it is so like if we want an orange then faa60a would be that color so we can plug it in here faa 60a and then that'll become the same color from the color picker to cover the next set of properties we're going to add a couple tags so we'll start by adding an h2 with a class of title and then here we'll put something like chase page second one will be a paragraph tag with a class of description which will contain something like this page is all about chase but that's just boring white text so let's spruce it up a little bit so because we have the title class on our title we can add that here and we can define some styles inside it so first we'll give it some colors so maybe like a green so c1ffad perhaps so that'll give us a little little green there and then for our description we're going to look at two new properties first it's going to be font style and font style lets you change the style the font typically italic is what this is used for so if we set that to italic and save it you can see that our text is now italic second one is text decoration which also has a bunch of different properties the most popular of which are line through and underline so we're going to make this underline as well and then save it and now we have text that's both underline and italic and then finally we want to reduce the gap between our title and the description this is done with a property called margin now if we use chrome console to inspect what's going on here we can actually see exactly what is what so the orange is going to show the current margin so the title has a top and bottom margin and then our description also has a top and bottom margin so we can do is we can reduce the bottom margin of the title and reduce the top margin of the description so we'll set them both to about five pixels so for title we can do margin dash bottom set to 5px and then for description we can do margin top and set that to 5px when we save it you can see that the text goes up and it reduces the gap and then using chrome console we can actually again visually see that it is in fact different you can see that now that has a much smaller bottom margin and a much smaller top margin and because the way css works margins will overlap so if title had a bottom margin of 50 and description had a top margin of 50 that doesn't equate to a 100 pixel gap equates to a 50 pixel gap the next we're going to do is we're going to put an actual div around our title and description and we're going to call it we're going to apply say class wrapper and then the reason we're going to do this is because it's important to understand exactly how blocks are styled both visually and structurally and as you probably noticed nothing changed on the left when i add that div and that's just because a div is just a rectangle that fills the width of the parent and fills the height of the content and has no other stylistic features until we add them so for wrapper we're going to be applying a number of things we're applying a background some padding margin and border and then we're going to put some content inside it well actually there's already content inside it i'm going to start by applying a background and the purpose of applying the background first is just so you can see exactly kind of where that box is so the area that has the green background is the size of that div divs by default are block level elements which means they will attempt to fill the entire with the parent and if there's other elements in the way they're going to push them to the next line this means that although i didn't write it if i put display block this is what the browser is implying already so if i put display block nothing changes because it was already display blocked that was just an implied style but what if we don't want to fill the entire parent we can just change the display type so rather than it being a block we can change it to inline block which will mean that it will size to the size of the content both the height and the width so essentially what we have now is a wrapper around our title and description and the reason there's a gap above the title and a gap below the description is because it's taking into account the margin there so because we're going to look at padding border and margin next we want to make sure there's no gaps at all that way we can control all the sizing with those three properties so to do that for description we're also going to set a margin bottom of 0 and then for the title we're going to set a margin top of 0. so every block type element including inline block has four parts it has the content and then the thing that wraps the content is going to be the padding the thing that wraps the padding is going to be the border and then the thing that wraps the border is going to be the margin so we have the content let's put a border around the content this is done with the border property now the border property is going to expect that you're going to supply a color the thickness of the border and then what style the border is so we want a white border so we'll do pound fff one pixel solid and then save you can see now we have a one pixel white border around our content the next thing we're gonna do is add some padding now the padding is gonna be between the border and the content using the padding attribute so if we wanted a 20 pixel padding around every part of the content we could simply do padding 20px and then save it now let's take a second to visualize this so if i come into my chrome console and i highlight over wrapper we can see that there's a green portion a yellow portion in the blue portion so the blue portion is going to be the content the green is going to be the padding then the yellow portion is going to be the border and last but not least we'll simply add some margin now margin happens outside of the box and that's what makes it different from the padding the padding happens within the element the margin happens outside of the element so we'll do a 20 pixel padding and then we'll do a 20 pixel margin and then once again we'll highlight wrapper just so we can visualize it so now you can see the margin is shown in orange the border is shown in yellow the padding is shown in green and then the actual content is shown in blue now all three of these properties border padding and margin all support specific border padding and margins for the left top right and bottom sides so if i wanted just the left side to have a white border instead of doing border i could do border dash left and then when i save it you can see that now i just have a one pixel white border on the left side this gives you really tight control on exactly what everything should look like next we'll look at a positioned element and all the properties that go along with that so for that we'll need our friend chase for the most part how things are positioned are based on the order they're defined in the html but there's ways to position it in a way that ignores that entirely but before we do that we'll need to make chase a little bit smaller so we will introduce two new properties called width and height which do exactly what they sound like it will set a fixed width and then a fixed height to that particular element and you can see that the picture is now smaller so right now the image is positioned in the same way that text would be positioned it's just sitting next to our wrapper element and actually if we resize the screen down a little bit you can see that the image goes to the next line but we're going to set a new position to make this function a little bit different so rather than position static which is the default we're going to set it to position absolute now position absolute requires the use of one or more of the properties top right bottom or left so if i set a position absolute and i set a top of zero and set a right of zero then what it does is it puts this picture all the way in the top right hand corner if i were to change top to bottom then it would go to the bottom right hand corner now it's important to note that this ignores all other elements so if i were to drag this on top of this box you can see that it just goes on top of it it doesn't even care that that box is there at all because it's absolutely positioned now the only time when it wouldn't be top zero right zero is if it got into a scrolling situation so if the page becomes too short for the content if i start to scroll you can see that the image disappears so this can be changed by simply changing absolute to fix now absolute and fixed are pretty similar except in this case fix is going to be based on the viewport so now you can see when i scroll the image stays in one spot and the image will always stay exactly where it's positioned we have a couple more properties to cover we're just going to cover them individually so the next one is going to be text align and what this basically says is align the text inside an element according to the property value so if we do text align you know center left justify right so if we set this to center and save it you can see that chase page goes into the center i could also set this to right if i wanted to be right aligned and then finally similar to font style and text decoration is also font weight and what this dictates is how thick the font is so if i wanted to be bold text i could set the font weight to bold and save it and you can see the text got a little bit more bold and that's really it for some basic css properties now it may not seem like much but you can make pretty much any page with just the stuff you saw on the screen in future videos that's exactly we're going to do we're going to go on the web we're going to find things that are made in html and css and then we're going to rebuild them ourselves from scratch just to show the process and how it's built and what you'll see is we're not going to stray too far if at all from these particular properties as always if you have any questions about anything you saw in this video please leave them below in the comments other than that hope to see the next video take care

Channel: Engineer Man

Views: 16,398

Keywords: css, css/html, css properties, css basics, how does css work, engineer man

Id: XzahodQSRbQ

Length: 11min 27sec (687 seconds)

Published: Sun Aug 09 2020