CSS Tutorial – Full Course for Beginners

0:00 if you want to learn CSS this is the course for you Dave gray teaches this comprehensive CSS course for beginners we've already published a popular HTML course from Dave and this course is a great next step after you learn HTML hello and welcome to over 11 hours of CSS tutorials in instruction this video is made up of 24 tutorials that build upon each other much like the chapters of a book throughout the lessons in this video I will mention links being available in the description below I've compiled all of these links into one GitHub resource that you will find in the description hi I'm Dave gray and I'm the creator of these CSS tutorials you can subscribe to my YouTube channel for more tutorials like this one you can also follow me on Twitter and if you're

0:46 feeling generous you can even buy me a cup of coffee a quick thank you to Bo at free code camp for sharing this video and to everyone at free code camp for providing such an outstanding resource that helps people learn how to code for free it's truly my honor to contribute this video let's get started learning CSS with chapter one what is CSS CSS is an acronym that stands for cascading stylesheets so CSS is a stylesheet language that's used to describe the presentation of a document it's most known for being used with HTML although it can be applied to other media like you see here I've got XML SVG math ml xhtml and other things listed

1:32 here for on paper in speech other media but we will be working with HTML now when we think about the difference between HTML and CSS consider HTML as the foundation and structure so if you think about a new building or house that is being built and you see that structure go up that is the foundation that's everything that holds it together however the CSS is the paint and the carpet and the wallpaper or anything any decorations anything that makes it look good so the structure holds it all together it's the foundation the CSS is really what makes the appearance that actual presentation of the building or

2:17 in our case we're working with documents okay now before we start writing CSS let's get the tools we need and first of all I will be using the Chrome browser in this course so you can download Chrome if you don't have it from google.com/chrome and it should be available for every platform and it will probably identify what platform you have here as well after that we're going to use an integrated development environment really a code editor and what we will use is Visual Studio code so that is at code. visual studio.com it should also recognize what platform you're on already but if it doesn't you can click other platforms and you can find it for all the different platforms

3:05 that we're probably using okay go ahead and download the version you need and if you need Chrome download that as well install the software and then come back to the video okay at this point I'm going to assume you've got everything downloaded and installed and now I've got Visual Studio code open right here you may have a welcome screen I closed that out already but what you need to do if you haven't already is create a folder on on your computer for your project for this lesson you'll probably want to create a new folder for each lesson or at least build upon the lesson in the same folder either way you need a folder and the first thing we want to do is create an index.html file because once again we will apply our CSS to HTML

3:51 now if you're not familiar with image shortcuts we can take an image shortcut here to quickly create an HTML document just type the exclam Mark and press enter and now this gives us a very basic HTML document and of course it has a title just of document it has a couple of meta tags up here you might not have seen but they're handy to go ahead and leav in the page for now what we want to do is just put some content so let's put a paragraph here and let's say I'm learning CSS with an exclamation mark and save and really that's all we need in our HTML document right now now there are three different ways to apply CSS to our document there is an external style

4:37 sheet we could have an internal stylesheet or we could apply CSS in line with an element let's look at each option and I'll start out with the external stylesheet so I want to create a link element here and I'll press Tab and visual studio code helps us out it already gives us the real attribute that says it's a stylesheet and we need to link to a stylesheet but we haven't created one yet so over here in the file tree let's create a new directory and name it CSS now inside the CSS directory let's go ahead and create a new file named style.css and now we have our stylesheet file and inside of this let's put a p for our paragraph element a curly brace

5:25 now one return and we'll go ahead and put a style here this will be a rule actually or a declaration if you will and let's just change the color of our paragraph and let's make it purple and end with a semicolon and save this is a very very simple stylesheet right now and now back in our HTML we can go ahead and link to that stylesheet by putting in the CSS directory and you can see Visual Studio code wants to help us out so we'll click on that and then it knows the style.css is in there so we can click on that and now that should link you may see some older code that has a type attribute here but mailla now

6:10 points out that this is no longer required and is actually kind of frowned upon so we do not want to include that but you may see older code with it it doesn't break the code if it's there it's just not the modern way of doing that so there is our link to the stylesheet and now one thing we haven't done yet is add the live server extension so if you don't have that click on the extension icon over here on the left and then in the search extensions type live server and when those options come up we should see one from ritwick day and you want to select that and then you want to go ahead and install and I already have it installed so I don't need to do that but this will let us not only launch our HTML and CSS

6:58 but anytime we make a change in save it will immediately reload just as if it's on a web server you don't want to load these files into your browser directly from your hard drive you want to really kind of have a development environment that simulates a web server and that's what live server does for you so go ahead and install that once you have that installed and I'll click on the explore icon over here to look at our files again but now you'll have some options in Visual Studio code you could click go live down here at the bottom right and it says click to run live server when we Mouse over or you can rightclick just in the file and you could choose open with live server and I'll go ahead and do that now and there we have our very very basic web page but

7:43 we can see it is super small I don't know if you can even see that I would have to zoom in and enlarge that but it says I'm learning CSS so we could add another style in our stylesheet and let's just go ahead and put it above the color Style and I will put font D size and I'm going to change this to 64 pixels it should be pretty big now so I'll save resize Visual Studio code much better so we've got a purple I'm learning CSS with large font now let's go back to the HTML file and I'm going to expand Visual Studio code again so we have a little more room now in this head section directly underneath our link element I'm going to type Style and

8:29 press Tab and there is such a thing as a style element now inside of the style element here between the opening and closing tags that is we can write CSS so I'm also going to style a paragraph and here I'm going to put the color as lime green now I'll save this and let's go back and look at our page and see what we've got now we have I'm learning CSS and it is lime green notice it's still large font though so the other stylesheet I'll press contrl B to hide the file tree for a second so we can see this better the other styles sheet is still being applied but we have overwritten the purple rule for the color with green now does one take

9:17 precedent over the other does the internal stylesheet which is what we just built right here with the Style Elements that's the internal does it take precedence over the external not really just it's interpreted as another stylesheet either way now normally I use external stylesheets but there is no difference as far as the browser is concerned what is the different is the Cascade or the order in which they're read so it read this stylesheet first and then it read this one last so the last color that it saw for our paragraph Was lime green we can further highlight that by highlighting our link element and cutting it with crl X and then

10:02 pasting it with crl v underneath our internal stylesheet and so now our external stylesheet is red last and I will save and now we've got a purple I'm learning CSS again and the final way to apply CSS inside an HTML document is with inline CSS this is really not the way to do it though you really want to avoid inline CSS if you can I just want to demonstrate what it is because you can use style as an attribute and now we don't need a selector which is what the p is up here this is selecting the paragraph We already know it's being applied to a paragraph so here I'll just say color and I'm going to say blue I really don't need a semicolon because I

10:48 don't have any other declaration here if I had more than one I'd have a semicolon in between now if I save this notice it's now blue over here this does does take precedent over either type of stylesheet internal or external because it's applied directly to the element itself but what we want is a separation of concerns so the best way the way that is commonly used is the external stylesheet it keeps your CSS code completely separate from your HTML okay let's remove our inline styling from the paragraph and let's also remove the style element because we will be focusing on using external stylesheets for the rest of the course so we can

11:35 save that and let's go ahead and scroll up to the top of the HTML document and now let's move over to the external stylesheet and then in the browser notice of course this is already back to purple now let's go to another mdn page that's the Milla developer Network and we get an anatomy of a CSS rule set so let's break this down and we can look at our own example to the left as well but we have our selector that means we're selecting the paragraph or paragraphs if we had more than one now we have a property and a property value so the property being the color the value being red and then the Declaration is the property and the property value together so we have the same thing over here just color and purple and the full

12:22 declaration is both now it says the whole structure is called a rule set but also notice it says the term rule set is often referred to just as rule so you could consider this a CSS rule if you will okay let's go back to our HTML document in the browser and something I need to note here about CSS is it's using the American spelling of color there could be other English words that are different but notice how Visual Studio code knows there's already a problem here and if I save this purple is not applied to our document it's back to the default black text so we need to spell things with American English I guess is the best way to put it our dialect without the u in color and there

13:09 could be some other words as well but notice we didn't get an error or anything if we do put in color the wrong way it's just ignored and that is something about CSS and sometimes it's hard to detect when you've done something wrong because you're not getting an error thrown like programming languages the rule or the deck declaration I should say not the entire rule but this declaration is just being ignored because we didn't spell color in the way CSS expects it so if I change that back once again we have purple text now one way we can detect problems in our CSS is to validate our CSS files so let's pull up a page that will do that and we go to CSS validation service from

13:55 w3c that's the worldwide Web Consortium and we want to choose file by upload where we can select the CSS style.css from our folder and you need to choose file and then browse to the folder where your CSS is which should be in the folder you created and then if you created a CSS folder it would be in there here's my style.css so I'll select it and choose open and now we'll just click the check button and this page will show us if there are any errors but if there's not you should get this congratulations no error found message just like I did so I will put a link to this CSS validator in the description of the video or with the resources and then in the next video we're going to learn

14:42 all about CSS selectors today we're working with CSS selectors and there are three levels of selectors that are the most common now I've got Visual Studio code open here on the left and I have a blank style.css file that is linked to our h HTML file and the HTML file is open in Chrome already I'm using the live server extension with Visual Studio code so we will instantly see our changes in our page the structure of the HTML page has an H1 heading and after that we have three articles each article has its own H2 heading and paragraph inside so as we talk about the three different types of basic selectors in CSS let's start with the most common which is an element

15:29 selector and I'm going to select the body element now there is only one body element per page but we have some very small font and I will get into more uh properties for each of the Declarations as we go through tutorials but I'm going to use a few today just for examples and I'm going to set the font size to 22 pixels and save now we can see this made all of our text on our page larger and this is due to inheritance so the other elements actually inherited from the body element and we'll get more into inheritance in just a little bit too but this in itself is an element selector now there's only one body element per page but say I went ahead and selected

16:15 the paragraph using the paragraph selector and now I can set the color of the text and I'm going to set the color of the text to purple and I'll save and notice it changed all three of our parag graphs to purple so element selectors select all of the elements of that type so just specifying P for the paragraph element selects all paragraph elements and now the second type of selector is a class and so let's define a class selector and I'm going to call this class gray note that a class starts with a period before whatever you name the class and you can choose the name of the class but make sure it makes sense and remember you're writing code for others read not just yourself okay inside of

17:01 this I'm going to set the color to gray that makes sense to me now I'll save that and notice paragraphs 2 and three turn the gray color and if we look at our HTML which is a little crowded over here but if I scroll down to the second paragraph here we have a class set equal to Gray on that paragraph likewise we have a class set equal to Gray on the third paragraph as well so classes can be used more than once and they're very useful that way you're creating styles that you can apply throughout your project or throughout your page and then they can be reused with more than one element and note classes are more specific than selecting all paragraphs for example and because they're more

17:48 specific they overruled the purple setting that we had for all paragraphs and now gray applied to these last two paragraphs here and we will also discuss specificity in more detail in just a few minutes as well now classes are the most common type of selector with CSS but the more specific selector yet is an ID selector and I have an ID named second an ID attribute inside of the HTML and here I'm going to apply a font style and we'll set that to italic and I like to have a space afterwards now I'll save and notice the second paragraph became italic as well so it specifically addressed the second paragraph now IDs

18:36 should only exist once in an HTML document they should be unique in other words however it is not good practice to really use IDs inside of your CSS now it will validate your code has no problem using an ID however typically you should use classes and sometimes element selectors but rarely if ever should you use an ID selector inside of your CSS they do have other valid uses if you remember from HTML linking a form input back to a label element and then as you learn JavaScript you may have some other uses for ID attributes as well but we try to keep them out of CSS and now that we've covered the three basic types of

19:22 selectors let's discuss what you can do with some of them just a little bit more so let's have our H1 here and let's set the color for the H1 to Blue and we'll save and we can see it only selected the H1 we only have one H1 on our page but we can also group selectors so let's set all of the H2S as well to Blue and you can see I just put a comma between and then this declaration or this rule set the entire rule set if we had more rules in here more declarations I should say would apply to both the H1 and the H2 too so you can go ahead and group selectors with a comma in between now notice what happens if I remove the comma and save this declaration or our

20:09 full rule set especially if we had more declarations none of it would apply to the H1 or the H2 now what's going on here this selector is looking for any H2S that exist inside of an H1 it's not looking for an H1 or an H2 it's only looking for H2S that exist or are nested if you will inside of an H1 so that's why that didn't work that may be useful to know in the future but what we need is a comma in between and then we can select both the H1 and all H2S on the page with this rule set so let's look at an example of where we would select an element that's inside another element so let's start with our paragraph elements again and now we'll look for any span

20:55 element inside any paragraph element and here let's set a couple of values so we'll set text- transform and I'm going to choose uppercase here and then I'm also going to set a background color and let's set this to Gold so it stands out we're essentially highlighting what we want to see and now we can see we have set this word whatever this word is this is Latin from our lauram Epson we've set it to uppercase and same with Epsom and then we also set gold behind each of these words with this however this doesn't make a lot of sense this is a much better example of where we should use a

21:42 class we might name our class something like highlight and then apply that to our span elements inside of the index so we've come in here and find our span and I'll select both of these and then we can add the class highlight and that makes it reusable if I spell highlight correctly there we go and save and now it's once again applied but this would keep our CSS much more organized and actually more reusable it's more flexible this way because we might have some span elements doing

22:27 other things that that we didn't want to apply this rule set to and now one last selector to discuss it exists we wouldn't use it that often but it is the universal selector and this means it's selecting everything on the page you typically only see this for what is called a CSS reset that we will cover in the future but just so you know it exists this selects everything so let's think about what we could apply here that would be applicable to everything so let's change the font and we'll set it to this monospace font and save and now you can see all of the text on the page turned into this monospace font instead of the default font that we had

23:13 now this is not how we would use this again in the future we'll learn about a CSS reset that would use that selector but typically that's the only time you see that Universal selector used okay let's discuss the Cascade CSS is an acronym for cascading style sheets and essentially that means CSS works like a waterfall it works from the top down and that means if I were to put in another definition I'll just copy this down for paragraph and where we have the color purple on our first paragraph it really applies to all but then of course the gray class overrides that on the final two but if I came here and said red instead of purple notice how this

23:59 paragraph turns red and that's because it read this rule set last so first CSS looked at this at the top it starts at the top and it works its way down and so it read this last essentially this is the last Rule and that means whichever definition it reads at the last will be applied now specificity can override this and that's where we talked about elements and then classes classes are more specific for example than just an element selector so we have our class here that has the color gray and it is overriding the red now if we remove this class and we save now they're all red

24:44 but even though we're looking at the Cascade and starting from the top down even if I put this class above the paragraph selectors and save it still applies to these last two paragraphs because it has more specificity than an element selector and the element selector here purple of course is overridden with the last rule being the element selector here for red so we start out with a red paragraph and it's really applied to all paragraphs except that then CSS sees there is a gray class applied to the second and third paragraphs and that has more specificity so it overrules whatever is set by the element selector now a

25:30 problem you can have is when you have a large CSS file and maybe you have set this gray class on these paragraphs and later on let's say you're weigh down a couple of hundred lines and you're setting a color on a paragraph and you can't understand why it's not being applied so let's go ahead and expand Chrome here and you can rightclick and choose inspect and once you inspect your page then you can look at the different classes and CSS rules that are applied so here's a good example of that we have got our third paragraph highlighted up here in the elements Tab and then we're looking at the Styles and we can see we've got paragraph rules here these

26:16 element selectors but Color Purple is crossed out and then color red is crossed out so CSS knows these rule sets exist for paragraph but it also knows it should follow what is the most most specific using the rules of specificity so here we have a color gray that is being applied so you can see sometimes when you're struggling with your CSS and you have written a rule and you're not understanding why it is not being applied you should inspect your code with Dev tools and once again you rightclick and choose inspect to do that and then just go to the correct tabs elements highlight the element that you want look at the Styles and you'll see how it is is being read by CSS in the browser or how the browser is reading

27:02 your CSS and then see how those rule sets are being applied which ones are being overridden and which ones are actually being applied okay I'm going to close that out now and I'll resize Chrome so I'll come back over here to our style and as we go to the top let's talk about inheritance as I got into specificity a little bit already but inheritance that is where another element inherits the settings from or the properties from its parent element so the body element is parent to every other element here and so when we set the font size all of these other elements inherited that font size now typically anything related to font or typography is inherited and that can

27:48 include things like color line height alignment all sorts of settings dealing with the font and the typography however any properties that are not related to those things are not inherited and I know that'll just take a little bit of getting used to as you learn more about CSS so for example this font size was inherited but another setting we could put is a border and I'll put three pixels so it's easy to see solid black and I'll save this now notice the Border only went around the body element it didn't apply to all the other elements inside of the body so that's an example of something that that is not inherited now I'll go ahead and remove that again now we did briefly talk about that Universal selector let me go back to

28:35 that and show you that this is not inheritance this is actually selecting all elements so here if I said a border and I'll put one pixel solid red and save notice it does apply to all elements that's because we selected all the elements here so setting something here with the universal selector is not going to cause inheritance really because it's actually selecting all the elements itself okay I'll remove the universal selector again but getting back to just the inheritance overall this can be very handy because it keeps us from writing repeated code in other words it keeps our code dry which is an acronym that stands for don't repeat

29:20 yourself so we want to write less code and be more efficient and inheritance helps us do that now some things are not inherited like I mentioned the Border would be one of those also form elements do not inherit say the font size another typography settings so it wouldn't be that unusual to see something like this that would take a button and let's say an input a text area and let me see if I'm leaving anything else out maybe a select anything like that and we might see then font and set it to inherit and that would go ahead and make those elements inherit the font settings because just a mental note that form elements do not typically inherit those font settings

30:07 but now to take advantage of inheritance and write dry code we can use the body element which appears only once per page or we could use the HTML element and either would work often times if you're just starting out and just remembering it might be best to just use the body uh often times I use the HTM L element because once again The Inheritance applies there so we can save here without see the difference now I'll go ahead and apply it in HTML and once again we have the larger font because there are for me at least some specific settings for the body and I like to see those separate so I often put all of my font settings in the HTML selector but again either would work one other

30:53 element selector that I do use at times is the main element it is a semantic element and it should appear only once per page but then you have to be aware that you're only selecting the things inside of the main element so if we look at our page I've got the H1 inside of a header element and not inside of the main element so if I were to change the font family inside of our main selector and I change this to monospace which is easy to see the change with go ahead and save you can see all of the Articles switched the monospace but our H1 heading is still using the other font okay coming back to specificity just something we talked about so a quick review that element selector is the

31:38 least specific and then a class selector is more specific and then although we don't want to use them in our CSS an ID selector is even more specific than that sometimes something's not working out and you're wanting to figure out why it's not working out or you just can't figure it out and you get frustrated I'm going to show you something that will work but I'm going to recommend that you do not use it it's kind of the nuclear option if you will and it's to put an exclamation mark and put important now see how red should be applied to this first paragraph but with the important flag right here after our purple setting and now I save notice what happened it turned the first paragraph purple notice what else

32:24 happened it also turned the second paragraph and the third paragraph purple now why is that well this important essentially ruins everything else it overrides everything so really when you see it in code it's kind of an indication that it's not well organized or it's sloppy there's only a few reasons you would really want to use this and I feel like I mean I'm hesitant to even show it because I feel like beginners could abuse this however you'll see it somewhere I just want you to know it exists don't use it don't use it you need to to learn how to organize your code and apply it correctly and only after you've learned CSS well enough to understand when to use that important flag that's the only time you

33:10 should use it you should really not give up the struggle you will learn more by struggling and learning how to apply these selectors in the proper way without using that important flag I do want to show you one thing that will help you learn and that is the specificity calculator and I will give a link to this in the resources you can see they've got some basic values here that are already fairly complicated but you can zero these out and you can compare two selectors to see why they are working and why they aren't working or why one overrules the other you can see an element selector here for an H2 has a score of 001 but if I put in my class of gray it has a score of 0 1 0 in other words 10

33:55 which is a higher score than one so the class overrules the element selector and likewise if we put in an ID selector like we had second it has a score of 100 over 10 so that is better now you could apply more than one class for example to an element so let's see what happens if we had a second class and we had our highlight class now this has a score of 20 but it's still not going to be as high as a score of 100 so this specificity calculator will certainly help you understand why one rule is being applied or why one selector I should say is being applied over another today we're learning about CSS colors I've got Visual Studio code here on the left and our web page on the

34:42 right it is a basic web page and I'm using the live server extension so when we make changes in our CSS and save we'll instantly see the changes here in our page I've got an H1 heading and then I've got three articles and each article has its own H2 heading and a paragraph okay and that's really all there is you can see it's got the default colors a white background and black text and that's usually what browsers default to I've got just a few declarations over here for our page just to make it readable I've got a larger font size I've declared the font family and line height and we'll learn more about those when we get to typography in this series right now I want to show you just how to set a background color first and the

35:27 first declaration we'll look at is setting background-color and then notice Visual Studio code instantly wants to help us it pops up a list of color names and there are 140 color names available in HTML and visual studio code recognizes all these names and notice it's going alphabetical so if I type something like the letter P it suddenly shows us all of the color names that start with the letter P and so on so we could just pick any one of those I'm just going to go ahead and pick something like blue and I'll go ahead and save and you can see Visual Studio code also shows us a little square of blue beside the name blue and now if we look at the page it has a blue background now that's not nearly as legible because we also have a

36:14 dark font so we also have to consider the contrast when we pick colors to make it legible and readable for our viewers and it also needs to be accessible and there are contrast ratios that are specified and we'll look more at that here in the near future right now besides just setting the background color with the background Dash color declaration we can also go ahead and just say background that's shorthand and it also allows us to set other properties that we won't learn about today but we can just set a color by saying background and that's often the case because it's shorter to type than background- color so you'll see this often instead of blue let's change our back background color to an interesting color name I like papayo whip so I'll

37:02 save and that's much easier to read as well so our dark text looks good on this background okay now that we know how to set a background color let's change our font color as well and we do that just with the color property so in the Declaration we can once again name a color so I could just say black and that looks okay let's see if there's a dark color yep a dark blue let's see how that looks on top of our papaya whip background well not too bad it is definitely legible so we have determined two different color names and we chose those through Visual Studio code there the color palette just popped up and we'll go over that in a minute too but this is where you'll typically see colors set background and font color and

37:49 you can set the background color to a lot of different elements and we often have fonts on top of those elements or inside of the elements but on top top of those colors now let's discuss another way to set colors instead of color names we know we can look for color names and visual studio code will help us also we can use RGB which stands for red green blue and then we put parentheses and now this takes three values a red value and the max value is 255 then a green value and a blue value notice I put zero for both of those so this is all red and you can see Visual Studio code even tells us it's going to be red before we save our file if I go ahead and save now all of our text turned red likewise I could

38:35 change this and say no red all green and no blue and we have green text and that looks absolutely horrible on top of that background let's try blue now and there we have blue text on top of the background which is okay if we wanted black we would go back to all zeros and likewise if we wanted white we would have 255 for each value Val now as we previously learned about the Cascade we can go ahead and Define a color of text on the body but then we can override it inside of some of the elements so let's say our paragraphs here and we want to override that with a different color so maybe we want a blue text for the paragraphs and we can put that here and style all of our paragraphs now with

39:20 blue text but I don't think that looks the greatest I'm going to go back to black but then also there is something called RGB a which adds an alpha Channel and that Alpha Channel guides the transparency now instead of 0 to 255 it has a value from 0 to one one is just like the alpha Channel wasn't there that's normal and so that would be the full black color and it matches the headings that we have on the page so you don't see a difference but zero would make it completely transparent and all of our paragraphs have now disappeared however we could put it at 50% and we should see the difference so the paragraphs are not as dark as the headings because they are 50% transparent now that we've looked at RGB

40:07 and rgba let's go ahead and look at hexadecimal which is a common way to specify colors here the color pette keeps wanting to help me so we will be using that very soon hexadecimal also works like RGB and it has its own way of coding the values though it goes from 0 to 9 and then also uses letters a through F and now zero just like we learned with RGB is the absence of color so 6 zos is once again black and you'll notice our paragraph text is totally black likewise the highest value being the letter F that is full red green and blue and so now we have white paragraphs because we

40:54 set those all the way to the highest value so two Fs in the beginning position means red then zero green and zero blue and we should have a red paragraph and we do likewise we could say two zeros two fs and two zeros and we get green and finally if we did four zeros and two FS it should be blue so we can kind of code those in the same way once you learn hex now if you noticed earlier when I was typing color name like dark blue and everything else here that starts with dark look at the hex codes over here to the right Visual Studio code is already helping show you all the different heximal codes for

41:39 these so we can of course get those codes by typing color names if we want the code of a name but there are many more colors than there are color names and you can really expand your palet by using RGB or hex codes now we can also type shorthand when the color codes match so two Zer two zeros and two zeros is black but it could be represented just by saying 0 0 0 because each pair matched likewise two FS 2 fs and two FS is white so we could just say f f f and each single F represents a pair so if we had two FS two zeros and two zeros for red

42:26 we could just say F0 0 and we still have red so our short hand for green would be F0 and then our short hand for blue would be 0 0 f but they have to be pairs so a hex code like 808080 doesn't have Shand it's gray but the 8 Z isn't a pair so it's not a z0 or an 88 so you can't really do a shorthand for a hex code like this so not all hex codes have short hands just the ones that have pairs for the red green and blue values but I can save this and we can see kind of a dark gray color here as well so those are the ways to provide hex values okay let's look at the color

43:12 palette the visual studio code has had popping up every now and then all you have to do is mouse over the little color square and we get a color palette now when I grab the circle and drag it around notice what it's doing it's giving us all these different hex codes up at the top and here if I come all the way to the bottom right you can see it's all black all the way to the top right it's red and that's because we have our Hue over here set to red as well but we can pull this down into the blues and we can get different colors that way as well then we could drag this around and if you click the bar at the top you can switch this to hsl which we haven't covered yet and there's RGB as well so you can go through those different values I'll leave it on RGB here and we can pull

43:59 down our transparency and it immediately goes to rgba notice we have that Alpha Channel now so I'm pulling this down and we're setting a transparent value on there as well so now when I leave it there and go back to visual studio code it's already changed our code to represent that rgba value and I can save our file and now that is the color of our paragraphs now that's a little light so I want to go back and I probably don't want it to be that transparent so I could bring this back up here closer to the top and save and now we have a much darker color we would still want to check the contrast on that I'm not sure if there's enough contrast or not and we'll look at a contrast Checker in just a few minutes let's go back to the visual studio code color palette and as

44:45 I talked about hsl here I clicked again and we had heximal I'm going to take this all the way up hsl also has hsla which adds the alpha Channel but hsl stands for Hue saturation and lightness so I'm going to pull this over here kind of to the middle and that looks good and there we go and I'll take this all the way to the top so we're back to zero there for red and overall I'll maybe try this in the top corner there we go that's what I wanted so we've got zero 100% And 50% 50% means it's right in the middle for lightness so there's 50% more lightness aail able or there's 50% we could take away 100% would be white and

45:32 0% here in the third value would be black likewise 100% here for saturation gives us the full color and zero gives us gray if I can pull this in here we get the color gray no matter what once we get down to 50% here there we go 50% is totally gray and then if we were at 100% there on the right that's white and 0% that's black so we want to be right in the middle which would give us the gray there but likewise then we don't have the saturation so we'll come back across here to the right and try to get back up to 100% in the middle and 50% there that went away and now the zero we

46:18 have here for the Hue well that's represented over here on the right with this slider notice at the top and the bottom we have red and the max Val value here is 360 and that means this is usually a circle it's usually represented as a color wheel you may have heard of a color wheel before and we can drag this all through the different Hues so we get all the different colors there and once we get to about 360 we're back to Red it went back to zero so you can see that takes through all the Hues all the different color ranges we could have there so Hue saturation and lightness and this is worth playing around with as well and as you get a little bit more advanced and learn about CSS variables you may decide you really like working with hsl but

47:04 most beginners start out working with heximal RGB and color names so it doesn't hurt to learn about any of those let's switch this back over to RGB switch it back to hexad deal or you could just switch it back to a good old color name like red although red is not going to look that great as far as our page goes so I want to take this over and pick a color I like to use which is not quite solid black but it is a dark color and there we go for the paragraphs I use 333 which as you know is the same as saying 333 333 and we save and we still have the same color it's just that shortcut can be used for those pairs okay we've

47:50 covered a lot of different ways to pick colors and we've covered the visual studio code Color Picker here that really helps us out but we also need to look at some tools so let's look at the tools we've got here coolers doco that's c l r s.co this is a great color palette picking tool and you can start the generator and start picking your color palettes as you go here it takes it just a minute to fire up but then you can choose these color palettes or press the space bar to generate all new palettes tell it which color you want to keep and which ones you want to get rid of and then you can just copy these colors here's a copy right here to copy the hex that it shows there and so on so this is

48:37 a great source for picking colors but what I really like on this site is the contrast Checker now I also have the web aim contrast Checker this is web accessibility in mind and this is really a great site for checking accessibility features and as much as I like their Checker the one on coolers.com

49:23 is a double a minimum contrast and there you want to have a contrast ratio of at least 4.5 to1 for normal text and you can see we've got 7.42 so that is good you want to have 3.1 or 3:1 for large text and it shows here we've got three stars for large text as well so we're doing good there but a AAA requires at least 7 to one and we barely made the cut there with we're 7.4 here and then 4 and 1 half to one for large text so this will just grade your color contrast for you and make sure it works out so we could go back to our code and check out another one so let's go back to papaya Whip and here's

50:08 the great thing about Visual Studio code now I can click here find the hex and it changes my papaya whip color name to the heximal code so I'm going to put this in as the background and then for the color I'm going to put in my hex for the 333 and it just changed it to the full hex code but you can see this is great contrast with 11.17 and it gives the example of it here up above as well legibility and accessibility are very important considerations as you pick colors for your web page now I'm going to give links to these resources in the description below this video as well and what I suggest you do as a beginner is just play around with the different colors play around with the visual

50:53 studio code Color Picker or color palette here as well well and just kind of get comfortable with setting colors on your page and of course always come back and check the contrast ratio and make sure you're meeting those minimum requirements for web pages let's move on to CSS units units determine the size of everything in your page today we're going to cover the most common CSS units on the left I have Visual Studio code on the right I have the Chrome browser it has an H1 heading on the page and we have one paragraph on our page and we're displaying this page with the live server extension so anytime we make a change and save our CSS file we'll automatically see the changes over here on the page I'm going to start out by just putting in a paragraph selector and

51:39 then I'm going to put in the font size and after that without even typing anything look what Visual Studio code gives us a lot of suggestions there are so many different units we could choose from so today we'll cover only the most popular ones as we need to cover all of them just the ones that you'll see and construct your pages with most frequently so I'm not even going to put in a definition right now let's just delete that and switch over to the mdn page for values and units and we can see a chart here of absolute length units and really the only absolute length unit we will use commonly is pixels and you can see here is the equivalency it's 1 pixel is equal to6 of an inch and really

52:26 one pixel as you might guess means one pixel on your screen we abbreviate that with PX and I say it's the only absolute value we're going to cover because as mdn says it's really the only value that you will commonly use as far as absolute units go so let's switch back to our page and now here in our CSS page I'll once again select the paragraph and we can set a absolute size to the font in our paragraph if we want to the default in any browser is usually 16 so if I set it to 16 we don't see a change but if I set it to 32 we definitely see a change it gets twice as big but I don't usually want to

53:12 use an absolute value like pixels for a font size and let me show you why normally we have a default browser size as I mentioned that's usually 16 pixels however if I set that on the root element font size 16 pixels we don't see a change here but if I go into my settings in Chrome which you can do with the three dots and then choose settings once you launch that you'll be on a settings page and then you can choose appearance you go to a font size user preference and medium is what most are on but there's also other choices from very small to very large I'll choose very large we definitely see a change on the settings page right when I do that back in our document we don't see a

53:58 change it didn't change at all I can refresh and it won't make any difference it did not change our font size with the user settings and that's because we took that choice away when we said no these absolutely must be 16 pixels here that's our root size but if I delete this and we just let the browser handle the default size instantly all of our font gets bigger and our user settings take over we don't want to take that choice away from the users so don't want to use an absolute font size such as a pixel setting so I'll go ahead and delete that so where would we want to use pixels an absolute value there are other settings that we might want an absolute value for so I'll select the H1 that I have here and I'm going to set a border on it and

54:45 I'll set it to two pixels and then just so we can see it better I'll set it to dashed and red so it really stands out and save and now we can see this border around our H1 element and we have this absolute value for the pixel width and no matter what happens to the page on a small viewport large viewport whether it's a mobile device or a large desktop screen this will remain as two pixels and that's okay in this instance let's go back to our mdn page and now that we've covered the only pixel size that we were going to cover and that was down here on our pixel chart we're going to Now cover percentage and we see that up here in a different chart this this is a numbers lengths and percentages chart here so we're going to use percentage and it

55:31 says it represents a fraction of some other value so 50% of something else percentages are always relative to another quantity so that's a consideration as well now when we set percentages we wouldn't normally do that with a font size either so let's set a percentage for a width on our H1 and now by default an H1 is a Block Level element and so by default it has a width of 100% so if we do that we're not really changing anything and now it's just 100% as expected so let's go ahead and change that it looks at the parent though it's taking up 100% of the parent wi or whatever was given to it so whatever it has available to it it took

56:17 up 100% and now this is only taking up 50% so let's look at the parent for the H1 it is inside of a header element so if we take this header element and we set it to a width of 50% then we should see a difference and yes it's even smaller so we're taking up only 50% of the header element which is taking up 50% of the page so really this H1 would be 25% of the page likewise if we change this to 100 for the header then we'll see our H1 takes up 50% of the page so that's the thing to remember about setting a percentage for the width is that you are putting it relative to the

57:03 parent it's only using what it has available to it if the header is 100% then the H1 that is the child has 100% of the page available to it however if the header is smaller let's put it at 80% then we're only using up 50% of 80% of the page and once again if you want an element that is a block level element to take up 100% of the width of the page you don't really need to set it because that is the default value already so now we're taking up half of the Page by setting the H1 to 50% because it is 50% of the full 100% width and you may see other uses for percentages as well but you commonly see them to set the sizing

57:49 of different elements as far as the width of the page or sometimes the height but also we don't need to set the height because it will grow as the content grows I'm going to go back to my settings and set it from very large back to medium which is where most have their browser default to and now when we look at our page the font is smaller but let's talk about another relative unit and this one does show on the mdn page in the chart down here under relative length units and it's the r this is the unit that we'll typically use for font size and it relates to the font font size of the root element now I already suggested we shouldn't set a font size on the root element so for our HTML

58:35 element we typically wouldn't set a font size in here because we want to let the browser handle that and set the default font size so let's not do this for the HTML element I'll just go ahead and cut this I'm going to put it below the H1 and I'm going to set a font size for our paragraphs instead and this font size if we set it to one ram that's already the default so it shouldn't change anything and we see the size is the same so it says one root element which the root element is the default font size set by the browser the EM doesn't stand for element by the way that's M so we have one root em or one root M but that means the root size that is defined and in our

59:22 case when we don't set it then it's set by the browser so hopefully that clears up some confusion but if we put in two M's then it's going to double the default size and now we're probably at 36 pixels right here because most browsers default to that 16 pixel size so you can see how this relates back to the root now if we set a font size on the parent because our paragraph is in a main element we set this font size to two RM also it doesn't change the paragraph font size at all because the font set here is not relative to the main element it's not relative to the parent it's relative to the root which is defined by the browser so it's always going to look

1:00:08 back to that default root size if we had set a font size in the HTML element it would be looking at that but without setting it it's the default size so what happens though if we switch these units if we're not using R if we're using m just em so now I'll delete the r there and save oh boy that got a lot bigger well here's the problem that we would have if we were using M's for our font size it gets Amplified so our main element was looking at the root so it doubled that to 32 pixels and then using two M's is looking at the main element which is the parent of the paragraph and

1:00:54 so then it doubled that so now at 64 pixels so that's what happens and you can get unintended consequences if you just use M's and that's why using the rim and always looking at the root definitely helps because the way we can get confused for example is if I remove this setting on the Main and I save well now this is also looking at the root because there's no other font size saved and so we think okay we're good to use just M's but the problem is if somewhere along the way in our project and we have many elements we're styling we set another font size on a parent element Suddenly It's Amplified when we use M so I'm going to switch this back to two rims and get closer to the size we'd want and it's going to look at the root

1:01:40 so when would we use M's instead of RS we know we want to use RS on font size well when we set the font size on an element M doesn't look at the parent it looks at the element itself and so we could use it for something like margin or padding which I know we haven't covered and we will in more detail when we look at the CSS Box model but I'm going to go ahead and do that here for the H1 so if I set a font size for the H1 and let's make it bigger let's make it three Rim here and we save we instantly have a bigger font size on the H1 but now I could set the padding to 1 M which is the equivalent

1:02:26 of the font size of that element so now this would also be three rims so it should be a pretty good size padding yes we have a lot of padding so I probably don't want that much maybe I want to drop it to 0.5 and now that's that's more reasonable that looks pretty good for a heading there so we added that padding which is inside this border it added extra padding and that is essentially half of three rims which would be one and a half and if we relate all this back to the default 16 pixel size one and 1 half of those would be 24 pixels where as three Rs would be 48 pixels another instance where we may use M's instead of RS would be for the padding

1:03:12 or margin setting on say a button if we created a button we would have text in the button we could set the font size for that button with Rim but then we could go ahead and set the padding and or margin with the M units let's go back to the mdn page and look at our chart one other relative unit I'd like to look at today is the CH that stands for character and we have the advanced measure width of the glyph zero which essentially means the character Zero of the elements font so whatever font we're using it's the measurement of zero and that helps us determine the character width and that kind of comes from print uh magazine newspaper layout out and those sort of things where you only want

1:03:58 to have a certain width based on the character size so in this example we have a font size here for our paragraph I'm going to go ahead and set the width of the paragraph and let's say we don't want any more than an estimated 40 characters per line before the line wraps in the paragraph if we set that width notice it now has approximately 40 characters before the line wraps and that kind of helps us Define column s if we're doing that in some type of layout now we've acknowledged that the browser sets a default font size but it actually sets a lot of different default Styles as well so let's go ahead and rightclick on this H1 heading and choose inspect or you could press contrl shift and the

1:04:45 letter I either way what we're doing is opening up the dev tools it may scrunch our page here a little bit but that's okay if I highlight this H1 now it is showing several things about the page it's showing that there's a large margin that's going to be the orange when I highlight over it's showing the green area and that's padding that we set and then the blue area is the H1 itself right here so we see all of those things in Dev tools when we hover over these elements and by the way I'm on the elements tab of Dev tools and then if you don't have your Dev tools on the right you can click the three dots here and there's a dock side setting maybe it's on the bottom for you but if you want it on the right you can choose doc to the right just like I have here so we

1:05:31 can really see more about all of these elements in Dev tools what we can also see as we come down here are the Styles and then we see the H1 and the styles that I have set on the H1 element but underneath that we see some others as well and it says user agent stylesheet this is what the browser is setting on the H1 element by default that we don't have to and you can see we have put in a different font size so we have overridden the font size for the H1 element so it has crossed that out everything else here the display block and the different margins and even the font weight are applied from that user stylesheet so those are default Styles and we can override them just like I did with the font size and before we get

1:06:17 into these next two relative units we are going to override some of these so what I want to do is start a CSS reset which I'll talk about more in the tutorial over the CSS Box model as well but I'm going to use the selector that selects all elements again our Wild Card selector and here I'm going to set the margin to zero the padding to zero and one other setting that says box sizing and I'm going to set that to border box and when I save notice all the padding and margin is gone now our H1 is right up in the left Corner we don't have any space between the paragraph and the H1 we got rid of all of those default margins and paddings that were creating

1:07:03 that extra space but that's important when we go back to the mdn page and we look at these next two relative units we have viewport width which is 1% of the viewports width and viewport height which is 1% of the viewports height so let's look at how we can apply those but if we had that extra margin and padding there we wouldn't be able to see the detail that I want to show okay I'm going to take our main element here and set a width on it with our viewport width units just so we can see what it is capable of and so I'll do that I also need to set a background color just so we can see what we're doing better and I'll set this to let's say sky blue and save so now we can see the width of our

1:07:48 paragraph is actually wider than the width of our main element and so it is overflowing that main element but we've actually set the main element to 50% of the width of the full page and you can see that's matching the 50% width that we have up here but I'm using the viewport width units right here there may be times when you want to use the viewport width but most of the time I find myself using the percentage and getting the same result and I'll give an example where the percentage is actually a better choice so let me remove that 50 % and I'll remove this background color that's making our page look bad and we'll come back up to the top and underneath our select all I'm going to

1:08:34 choose the body element here and as i' said before we don't need to set a width of 100% but I'll put this in and I'm going to set this to 100 viewport with units instead and save now we don't really notice a change and I have seen this on pages and I've even done it myself but I figured out the problem if we have a width of 100 viewport width units we do have a problem when the content out the vertical content outgrows the page and I'll show you why so I need to go back to the HTML and in the HTML I'm going to quickly add some more content so I'll say uh paragraph times 10 and we'll do this with some just sample laurum text that's an IM and

1:09:20 abbreviation so when I press tab it adds all those extra paragraphs and Save now we've got lots of content here and now we have a problem and here's the problem our scroll bar showed up on the right which is good we need that to see all of this content but what also happened is we had a scroll bar show up down here on the bottom and that is because our viewport width when we set it to 100 as we did on the body right here does not account for this scroll bar on the right so as soon as this scroll bar on the right shows up and it shows up when our content outgrows our height so when we need to scroll to see the content is when this shows up as it should but then that little extra bit that we can't see

1:10:06 creates this scroll bar so we can see it and that's annoying and most developers don't like that horizontal scroll bar showing up so if you were to set the width 100% would be much more desirable because now we still get the scroll bar here where we can scroll up and down vertically we do not have a scroll bar on the bottom and we don't usually want that but overall as I'd mentioned before we don't even need to set 100% width on the body as it should default to that anyway I'm going to jump back to the HTML and go ahead and undo all of that extra content we added and save so we're back to our normal content for the page let's go back to style as well and let's

…