CSS Tutorial For Beginners!!

hello everyone in the last video we went over basic html and this is what we came up with over here now we are going to cover css so we can get started inside of these style tags that we created last time inside of the head tags um and it's important to know there's a difference between the head tags and header tags there's also header tags that are found within the body um head is different um so within these style tags oops um we can uh create class names so let's say first class is our is the name of our class and we see here last time we had this class attribute but we didn't give it a name so let's put first class in here so the styling of first class will be inherited by these div tags right so let's say we want to give this uh div element a border let's say 2 pixels and we want to want it to be solid and we can pick a color let's say red and let's save and refresh over here and we can see now this div here now has a border and it's two pixels in thickness all around and the color is red and it's solid now we have different options for solid we can go dashed and if we save and refresh we can see the border is now dashed now we can also see that the border this div i like to use borders a lot even if i don't want a border in my design just for development because you can see how big the div is you can see the div is taking up the entire um window width let's say we don't want that we can define a width to our div it can be fit content which would just be as big as our content so it'll be somewhere around here and if we save and refresh you can see we change the width of our div now it's only this big um let's make this solid again and when you're defining colors if you hover over this square you can see like a color um gradient that appears and you can click within here and it will give you rgb values for the color save and refresh okay um now for these h1 tags we can also do a class and let's say we'll name this first and copy let's actually name this h1 h11 and then this will be h12 and we'll keep going down the rest similarly even though these aren't h1 tags so i guess this isn't the most intuitive way to do this but it'll work for our purposes h1 4 and then this we can actually give two components the same h1 tag so we'll keep the both of these as h12 and up here we can go h12 let's say color we want the color to be yellow for this one for h11 we want the color to be blue and for h 1 4 we want the color to be green let's save and refresh we can see the colors have changed for each h1 tag or each h tag this is h1 h2 h3h6 you can also go h4 and h5 um now by default h1 tags have a specific font size similarly h2 tab tags have a specific font size but we can actually change the font in here if we wanted so for h1 so this is the h1 tag actually this is the h2 tag because it's h h1 2 corresponds to this which is the h2 tag so we can change the font size to say 48 pixels which is pretty big so if we save that and refresh you could see that h2 and h3 since they both have the h1 2 tag they are actually now bigger than the h1 tag and i think just to make this clear would be better if it was just if we did it this way h6 let's make this h1 h2 [Music] h3 h6 let's make this color um gray and save refresh so we can do classes like this but also we can do the actual tag itself so you see for classes we put a period in front of each one that defines the class but if we want a tag so h1 this will refer to every h1 tag do not use mt rule sets okay um so this will go and look for every h1 tag so let's create another h1 tag so you see how this works and let's write hello world in there and save refresh so this is h1 tag and my first site the first one this is also an h1 tag but this has a different class than this one than this h1 so that's why they look different because this one up here is getting the styling from here but now this h1 will refer to all h1 so this h1 and this h1 so if we go border bottom so only the bottom we want to create a border and only the bottom for the border there's border we click dash there's border top border bottom border left border right so we or if we just want the border for the whole thing like we did earlier we can just go border but if we let's just only do border bottom for this let's go five pixels dashed green and save and refresh you can see that this tag this h1 tag got the border bottom and also this one so it went through our whole this went through our whole html looked for h1 tags and gave it this style now another thing is every tag can also have an id i'm not sure if every tech can have id but most can um so if we give this an id let's call it the first h1 and let's give this one an id down here first h two to make it capital first h1 with a capital h and a capital h down here and save to reference ids it's the pound sign or hashtag and oops well the hashtag first and then the actual id so let's go first h2 so this is going to refer to this element here now ids can be used to specify specific uh elements to give styles and they're also useful for um javascript things and we will discuss that in a future video right now we're just discussing css but this is actually more useful when so let's give all of these the same class so let's make all of these h1 okay and save and refresh so now these are all h1 right so let's say but let's say we want all of these to have these styles but let's say for only the last one we want to change something right so we're going to go id for the last one and then last h1 let's change this up here to last h1 just deleted a one down here and now let's say we we want the color of the last one to be black and save and then if we refresh you can see now this is it has the same class but the id over ranks the class so whatever style is in the id will overpower whatever style we may have gotten from the class so if we want to change like some things about a specific element but keep other things from us class we can give them all the same class and just specify an element by its id okay um let's say we want to center things um i'm gonna get rid of these two here and let's make both of these h1 tags so it's less confusing and let's get rid of this stuff and let's save refresh let's see what we have okay we have two elements with the same styles they're both styled by this h1 class and the width are also both the same let's make this bigger so the width is als is fit content we could specify the width though it doesn't have to be thick oops so we can specify a pixel width so let's say you want the width to be 250 pixels and save refresh you can see because the width is not big enough 250 now the site the site goes on a new line so let's make it bigger 300 refresh now i said i like to keep borders in there while i'm in development so i can see what's kind of happening so if you press control and then the slash the forward slash you can comment out a line in um in html or css so if you comment out the border and save and let's make this 250 again and refresh we're going to see my first insight on a new ns we're going to see site on a new line and we might not be able to tell right away why it's on a new line especially this is a big project and we're not familiar with every element in there but if you had the border even you can take out the border later but if you had it while you're in development you can see kind of why it's going on a new line you'll know that the div is not big enough so if you make it bigger now you can see it's uh big enough um let's make it like 350 and save refresh now what if we want to center the the words or whatever in is in here within this outside div so if you want to center the children elements of the parent div this is the this would be the parent in this case that's div what we can do there's multiple ways we can do this the easiest way is text align center save and refresh you can see they're centered um another way you can do this is display flex and so if we refresh and just see what display flex oops let's save here and then refresh display flex will take each element and put it next to each other as you're seeing here um by default but we can actually so right now the default um direction is row but we can actually change the flex direction to column we save that and refresh now you can see they're stacked up one over top of the other but um you can go justify content center and refresh that didn't do anything align items center save refresh you can see align items is centering them this way justify content will center them this way that's because we change the flux direction to column okay now let's move on to images um so we didn't go over images in html so let's do that now let's get rid of that header and that's so an image tag is img and it could be self closing in different um different frameworks i'm not sure if regular html will allow it but let's try it and we can fix it if it's causing any problems so img and self-closing tag means we only need one tag and it ends like this so we can always go like this and then img like that so these are automatically fill the body for some reason so normal tags is there's a opening tag and then there's a close oops a closing tag self closing tags they're called self closing tags you can write with just one tag and it ends like this so image source src stands for source and this is looking for a url or path to the image so i went on pixabay and searched wolf and got some pictures of wolves so let's just pick a picture we can right click and copy image link it might say save image address or something like that you want the url for the link i mean for the picture so if we paste that there's the url for this picture and if i save and refresh you could see now the picture is in the is in the um file also if you wanted to pull up a picture from your desktop let's say you have a picture saved on your desktop just save it into the folder i would recommend a nearby folder so the route isn't too long save it like within the same folder as your html file or create like a new folder with images and then save the image in there and then here you can go i'll just show you how you would do it okay i've saved this image into the images folder off camera um into this folder um so there's the image now if we want to put the image in our website over here so if i refresh this oops let's save this i deleted the path let's refresh now there's no more image so now we want to add the image this way what we can do is right now we're here and we want to go to images one dot to stay in the same folder and now we want to go to images so images and we want this image so we're giving the relative path from where we're at or at this file so right here so we want to stay in the same folder as this file and then we want to go to the images folder and then we want to go to this picture so save refresh and we can see the picture appears here so we can save pictures locally that way or we can actually get the url from the image like this copy image link um now let's give this a class let's call it image one and we can give some styling to this image image one and let's say we want width 150 pixels let's go height well the width is bigger than the height right so let's say the height is like 80 pixels and save refresh now see we we've we've resized the image maybe too small let's double everything so 300 and 160. right now it doesn't look too bad because we kind of stayed in the same ratio but let's say we did 300 300. we knew the image originally was wider than it was tall so you can see it's skewing the image so let's say you don't know the correct ratio what i would recommend is you can either set a width so let's say we want the we know we want the width to be 300 so we're going to make the height auto and then it'll figure out what it should be save refresh and now this image is not distorted let's go 600 say refresh so no matter what width we put if we put height auto the image won't get distorted similarly let's say we know we want a height of 400 let's say [Music] 150 pixels but we don't know what the width should be so let's go with auto save refresh and you can see it's auto resizing like that now let's say we want the width to be 100 percent of the view width we wanted to stretch the entire screen so we're gonna go 100 view with vw's view width and we want the height to auto resize so let's save let's refresh so now when we auto resize the window it should resize well for us okay now let's say we want to give this image a border radius right border radius so we want to curve off these edges let's say it's going to be 45 pixels save refresh oops this should go in the image not to each one you can see now we have border radiuses radii um if you want to make a circle um that'll actually be pretty tough to do with pixels because we don't know what the width is the width is the width changes with the screen but what we can do is we can go 50 percent we can specify percent instead of uh pixel width i mean radius and we save and refresh you can see kind of makes like an oval um like that based on the width of the screen um you can't really make a circle because the width of the image is not a one to one ratio with the height of the image um but if you did know the width so let's say we made the width yeah even if you knew the width like 500 pixels and then you made the radius half of that 250 pixels it's still not going to be a circle because the width is bigger than the height if we made the height the same then we can make a circle so 500 pixels but then the image is going to be distorted right the image is not um in the correct ratio anymore it's a circle now but it's distorted so let's go back to what we had save refresh and this border radius we can really give to any tags so this here down here which was first class we can go border radius um 25 pixels and save refresh you can see it gave a radius to the borders you can also get background colors so background color um let's say let's say we want to make it chocolate save refresh um so we change the background color but now let's say we don't want to border but we still want to keep the radius you can actually do that you can delete the border and save and refresh so now there's no border but there's still a radius now instead of background color let's say we want a background linear gradient so we want to go from one color to another so let's go background image and then linear gradient and then we want to go from left to right so go to right we're gonna go also go from top to bottom or bottom to top but let's for this one let's go to right let's say we want to start off yellow and we want to go to red save refresh you can see it's starting off yellow and then slowly fading into red um background image so that's a background image linear gradient what we could also do is background image with a picture background image and then we have to specify the url let's say we want to use the wolf picture again so we're going to give the path to the wolf picture save this should be in um quotations and save refresh you can see now the image is the background but it's not centered so let's try to center it background position center refresh now it's centered but it's kind of zoomed in as well let's see if we can fix that maybe not but let's see background um size let's go oops it's either container cover i think might work contain and let's go no repeat back so sometimes it automatically repeats by default repeat no repeat save refresh but now it's not the right height and width so let's try cover refresh okay now this is kind of what we want and so that's how you can insert a image to the background of it of a element and this is an actual image element now in images you want to give an alt attribute this is what would show up if the image doesn't load by default and usually you just want to give something descriptive like let's say wolf and save um let's style the button a little bit and then i think that's covers a lot of css it's hard to cover everything in css because there's so much and it takes a while to get pretty good at it i mean it just comes with practice and if you ever have any css questions you just google the trouble you're having and usually especially on stack overflow you'll find something similar that could help you um let's style this button just go class and let's go button1 btn1 save let's come back up here dot btn one and let's give a height and width to this button height 150 pixel actually that's a little too much just go 50 pixels and width let's make width 150 refresh so now you see our button got bigger let's move this button up so we can see it better actually what we can do is we can give a margin bottom of 150 pixels that means nothing can be near it on the bottom by 150 pixels so if we save and refresh we can see it added space so if we type something else down here it's going to be below it by 150 pixels so let's go div hello this should appear below it by 150. refresh and you can see the hellos down here now we can also give padding padding is similar to margin but it's inside the box so margin is the space outside of your component and padding is a space inside we can also add padding to something so let's say we want to add padding around this button adding 10 pixels and save refresh so margin is the space outside of the button element so 150 pixels here padding is the space inside of the button element or any element really that you get padding to so we can add padding we can add margin buttons by default have a border we want to get rid of the border we go border none save refresh that gets rid of the border they also by default have this background color so let's go background background um background color transparent if we want to get rid of it so if we go save refresh now the background's transparent now most buttons or some buttons image a tags not image tags anchor tags by default you see the cursor change from this this right here to the pointer um you can do the same thing for really any element but usually you want to do it for buttons as well so for this we can go we button one again but colon and then hover so on hover we want something to happen what we want to happen is we want the cursor to change into a pointer so save refresh now when we hover over button you can see it's changing to a pointer eve all around the whole button so you might wonder why it's not only changing when it's on the letters but it's also changing down here and that's because we're get if we look at the border again the button is this whole thing here um made the background transparent but we can just change it to a color oops let's change it to red and save refresh and let's get rid of the border again and then similarly like other components we can change the radius let's make it 15 pixels refresh you can still see there's a border that's because buttons borders are default so to actually get rid of it we need to actually have border none and we can also change the text size so font size let's go 20 pixels font weight so how thick it is like the board i mean if it's bold or not we can go bold or we can actually specify by numbers how big we want it to be let's just go bold and let's change the color this is going to change the color of the text to white refresh and we can see all those changes worked you can also give a background image if you wanted so similarly we can do everything we did here down here and refresh you can see the button now is background image and that's the basics of css i'll probably do another video to cover other topics in css since there's so much but that should help you those ideas should help you get started styling your own web page um and if you have any questions on anything remember google helps a lot every developer i know uses google to search for any problems they're having so make sure you if you get stuck um try google searching things and i'll make another video on css in the future and also each more html tags that are less commonly used but still used like input tags and form tags those are probably more advanced things in html but they're still good to know because they are used on most current websites so input tags and form tags and stuff like that and i'll also make a javascript tag i mean javascript tutorial so you can actually make your website dynamic so right now if i click on this button nothing happens but when you add javascript to your code you can make this button actually do things so i will cover that in future videos please remember to subscribe and like this video and thank you for watching

Channel: Avoid Infinite Loops

Views: 49

Keywords:

Id: gaVnJrxhx1o

Length: 33min 22sec (2002 seconds)

Published: Fri Dec 03 2021