HTML & CSS for Beginner Part 8: Introduction to CSS

Key Takeaways

hey and welcome to the next video in my series on HTML and CSS for beginners my name's Kevin and in this video I'm really excited about it we're going to be looking at some CSS we're going to be adding colors and making changes to our fonts and making the page look cool so let's get [Music] started okay so CSS stands for cascading style sheets and we're going to be getting into what really that means uh as we go through this video a little bit but the most important thing is the end our style sheets it means we can style our Pages HTML is all about putting the content on our page we're putting our text we're putting our pictures and we're putting them in the order we roughly want them to appear CSS is what we use to make it actually look like a website instead of something boring like we see on the screen right now we can change our colors we can change our fonts and really importantly it's what we use to create our layouts and actually make a real layout instead of just having one thing fall one after the other so in this video we're really just starting off with the taste of CSS I just want to show you sort of what it can do and in the next few videos we're really going to be trying to harness CSS and take full advantage of it so let's do our first little bit of something fun um my first web page I think it doesn't look good in black and I want to change the color of it so one thing I can do is I can come into my H1 tag here and add a style attribute and anything I put inside of here is going to be CSS the first thing I'm going to do in here is I'm going to take the word color and let's make this red I'm going to save that and refresh and look at that it's red so uh let's analyze this just a little bit I'm zooming in here I just want to make it nice and big uh as I mentioned this is the CSS so the this right here is the property that I want to modify I want to modify the color property and this is the value that I want to assign it so I am telling it that the color property of my H1 is red really important here is I'm putting the little colon so I'm saying color colon red and then I'm putting a semicolon at the end and this is telling it that this rule is finished and now I can actually come in and do another rule so I'm going to change the size of my text font size not f s size uh let's make it 50 pixels we'll make it really big I'm going to zoom out just a little bit so it's all on one line there we go put my semicolon save that and let's refresh again and you saw it got bigger or let's go and make it really small 10 pixels save and now it's really tiny if I didn't have this semicolon here the whole thing would stop working so let's take out that refresh and you can see it goes back to normal and the reason for that is it doesn't understand what's going on here without the semicolon this is looking at it is the color is red font size 10 pixels which it just doesn't understand font size isn't a color so I'm going to put that uh semicolon back there so this is one property I'm taking my color property and I'm changing it to red and I am taking my font size and I'm assigning it a pixel value of 10 or my font size is 10 pixels and there we go it's 10 pixels and let's bring that back up to about 40 super let's come look at this first paragraph and do a little bit more here so I have my P and so I'm going to do a style tag is equal to and let's change the color to Blue and let's change the font size to 21 pixels and let's look at another one font family and uh I'm just going to do a sa serif so let's save that and refresh and you can see it's gone to Blue it's become 21 pixels and now I've added this new one font family Saif so if you're not familiar with the term sa serif um this is a serif font it has these little seraphy things they're called serifs I'm not really sure how else to describe them these little flares that come off the end of the letters uh Saif it's just like solid bars there's no little pieces that fly off the ends of things and just by putting Saif like this I'm not actually picking what font I want to use I'm just going back to a system default default so normally you'd actually say I want to use this one specific font just like for colors in general we wouldn't want to say something like blue for red for example I could do ff0000 save and it's going to look exactly the same whoops I don't want an S there save and there we go um and for blue I could put number sign z0 whoops 0 0 0 0 0 0 FF and it's still blue um what these are this is called a hex hexadecimal uh which references colors if I put this as FF it's going to change colors it becomes that and if I do FF here we won't actually see it because it's going to become white so my text is still there but it's become white and uh there's a whole bunch of things I could do like DD D D D D they don't have to be capitals um and it becomes Gray if I do 555 it becomes dark gray um so there's this whole heximal code that we can use and the main reason is you know who knows you know this is red and I know that just because I've done it so many times but uh if I come in here and I put red like that well it's red but what if I want a different red that's you know it's too bright it's hard you can't really control it with a keyword like this so if I instead come in with FF 33000 I get more [Music] whoops it's still let's do FF 55 z0 it's becoming a bit more orangey and let's make that like a 552 more pinky uh I'm making really subtle changes right now but you get the idea um this is much better and if you're going where can I figure all this out we can do a Color Picker HTML into Google and we can come right here to the W3 schools Color Picker and I have a nice little color picture here that's a very no it's not perfect but it gives me a nice um idea and it gives me all the different shades so I come and I can click on the dark red here and then I can pick and I can just copy and paste so let's say I want this dark red I can copy that and paste that here and then for my text let's say I actually want something that looks more like this one I can copy that let's go back to my page uh here's my text paste that in there save and there's the color on my text and I think that looks really nice so I'm coming through here and I'm making a few changes but one thing that's really important and Powerful about CSS is the whole Cascade thing and what it means is the Styles Cascade down through my HTML elements so here I have my body and everything is is inside my body so what I could do is on my body I could give this some style so let's say style is equal to and I'm going to do a background hyphen color and you can probably guess what this does I'm going to make my background color black but let's use the 0000 0 uh save that and hit refresh and I have a nice black color and that affects my whole page remember the body is everything we see on the screen so if I change the background color of that everything I see on my screen will get a black background but even cooler than this is now if I come in and I do color FFF uh this is what I would use to change my text color and why they didn't make a text color I don't know I wish they had but we just have color to change our text color uh this is going to come and Cascade down through everything else so I'm actually going to take this off for the moment uh let's just delete the color we'll keep the font size and we'll take this color off as well I'm going to save all that and hit refresh and all of my text becomes white and I could come on here and say uh let's even delete we don't need any of this oops that's my p uh so my background color is black my color there uh let's say font size is 21 pixels save that refresh and then all my paragraphs become 21 pixels and then I could come in and say that my font family is a s s whoops uh hyphen serif save that and all of my text is becoming saer of text so I'm applying it to my body and that's these styles are cascading down from my body into all these other things that are inside my body you'll notice the one thing that isn't changing in colors uh with this color white is my links my links are staying like that and we're going to take a look at styling links in a future video now one thing that's also really important to know about the Cascade is you can if you're more specific you can overwrite what's going on so my H1 I want this to be a different color so let's come over here to my Color Picker and get a orange color I'm going to go with this one copy that and H1 style I'm going to make the color of my H1 save and that can change and then let's come down to the second paragraph so I'll leave my first paragraph alone color let's make it that same orange oops and I forgot my style is equal to there we go save that and now that's becoming orange so what's happening is my body starts off and it goes oh well everything here needs to be white so my color is set to White so everything inside of this is going to become white and then it comes to here and it goes this should be white oh wait no this needs to be orange and then that becomes orange we close my H1 so it's stopping that style we get to my paragraph and it goes okay well this is in my body and everything in my body should be white so this is white and then we keep going we keep going okay another paragraph it should be wait oh wait this should be orange because this has its own style that style is ending with my paragraph and then this last one down here at the end keeps the white color so that's it for this video quick introduction to CSS show you a little bit of what it can do and how it can work so I really encourage you to play around with this a little bit I'm going to put a link down in the description below that gives you a whole bunch of the CSS properties that you can play around with and experiment with but maybe you want to hold off until the next video for that one cuz there we're really going to see the power of CSS and start harnessing it and doing some really fun things so I really look forward to seeing you over there in the next video but until then make sure you leave a comment down below if you have any questions comments just tell me you know say hi I'd love to say hi back and uh like the video if you've enjoyed it and whatever you do don't stop now [Music]