Transcript for:

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 and 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 feeling generous you can even buy me a cup of coffee a quick thank you to boa 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 style sheets so css is a style sheet 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 spg mathml xhtml and other things listed 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 a 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 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 slash 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.visualstudio.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 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 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 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 exclamation 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 leave 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 sheet we could have an internal style sheet or we could apply css inline with an element let's look at each option and i'll start out with the external style sheet 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 rel attribute that says it's a style sheet and we need to link to a style sheet 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 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 style sheet right now and now back in our html we can go ahead and link to that style sheet 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 mozilla now 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 style sheet 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 ritwik 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 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 right click just in the file and you can 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 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 style sheet and let's just go ahead and put it above the color style and i will put font dash 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 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 style sheet i'll press ctrl b to hide the file tree for a second so we can see this better the other style sheet is still being applied but we have overwritten the purple rule for the color with green now does one take precedent over the other does the internal style sheet 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 style sheet either way now normally i use external style sheets 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 red so it read this style sheet 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 ctrl x and then pasting it with ctrl v underneath our internal style sheet and so now our external style sheet is read 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 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 take precedent over either type of style sheet 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 style sheet 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 style sheets for the rest of the course so we can 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 style sheet 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 mozilla 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 read 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 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 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 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 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 w3c that's the world wide 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 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 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 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 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 these 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 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 paragraphs 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 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 your writing code for others to read not just yourself okay inside of 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 3 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 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 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 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 it would apply to both the h1 and the h2 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 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 element inside any paragraph element and here let's set a couple of values so we'll set text dash 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 lorem 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 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 other things 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 mono space 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 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 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 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 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 way 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 right click 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 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 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 right click 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 being read by css in the browser or how the browser is reading 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 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 is not inherited and i'll go ahead and remove that again now we did briefly talk about that universal selector let me go back to 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 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 and other 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 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 oftentimes if you're just starting out and just remembering it might be best to just use the body oftentimes i use the html 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 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 changed this to mono space which is easy to see the change with go ahead and save you can see all of the articles switched to mono space 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 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 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 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 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 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 zero zero one but if i put in my class of gray it has a score of 0 1 0 in other words 10 which is a higher score than 1 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 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 first declaration we'll look at is setting background dash 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 can 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 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 dash color so you'll see this often instead of blue let's change our background color to an interesting color name i like papaya whip so i'll 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 color set background and font color and 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 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 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 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 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 rgba 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 1. 1 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 0 would make it completely transparent and all of our paragraphs have now disappeared however we could put it at fifty percent and we should see the difference so the paragraphs are not as dark as the headings because they are fifty percent transparent now that we've looked at rgb and rgba let's go ahead and look at hexadecimal which is a common way to specify colors here the color palette 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 0 just like we learned with rgb is the absence of color so six zeros 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 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 f's and two zeros and we get green and finally if we did four zeros and two f's 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 names 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 hexadecimal codes for 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 palette by using rgb or hex codes now we can also type shorthand when the color codes match so two zeros two zeros and two zeros is black but it could be represented just by saying zero zero zero because each pair matched likewise two f's two f's and two f's is white so we could just say fff and each single f represents a pair so if we had two f's two zeros and two zeros for red we could just say f zero zero and we still have red so our shorthand for green would be 0f0 and then our shorthand for blue would be 0 0 f but they have to be pairs so a hex code like 80 80 80 doesn't have shorthand it's gray but the 8 0 isn't a pair so it's not a 0 0 or an 8 8 so you can't really do a shorthand for a hex code like this so not all hex codes have shorthands 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 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 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 i talked about hsl here i clicked again and we had hexadecimal 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 want so we've got zero 100 percent and 50 50 means it's right in the middle for lightness so there's 50 percent more lightness available or there's 50 we could take away 100 percent would be white and 0 here in the third value would be black likewise 100 percent here for saturation gives us the full color and 0 gives us gray if i can pull this in here we get the color gray no matter what once we get down to fifty percent here there we go fifty percent is totally gray and then if we were at a hundred percent there on the right that's white and zero percent 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 percent there that went away and now the zero we 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 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 most beginners start out working with hexadecimal 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 hexadecimal 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 used use 333 which as you know is the same as saying 3 3 3 3 3 3 and we save and we still have the same color it's just that shortcut can be used for those pairs okay we've 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 dot co that's c o o l o r s dot c o 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 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.co is even a little bit better for me so i've got a background i want to go with i'm going to put this hex code in here and now it's dark and now i'm going to put in white for the text color and you can see it checks out a 7.2 which is considered very good and if we scroll down just a little bit it talks about the web content accessibility guidelines so a minimum is a double a minimum contrast and there you want to have a contrast ratio of at least 4.5 to 1 for normal text and you can see we've got 7.42 so that is good you want to have 3.1 or 3 to 1 for large text and it shows here we've got 3 stars for large text as well so we're doing good there but a triple a requires at least seven to one and we barely made the cut there with or 7.4 here and then four and a 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 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 hexadecimal 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 studio code color picker or color palette here as 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 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 don't 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 one pixel is equal to 196 of an inch and really 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 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 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 we 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 in 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 i'll set it to 2 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 is a numbers links and percentages chart here so we're going to use percentage and it 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 percent as expected so let's go ahead and change that it looks at the parent though it's taking up 100 percent of the parents with or whatever was given to it so whatever it has available to it it took 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 percent then we should see a difference and yes it's even smaller so we're taking up only 50 percent of the header element which is taking up 50 percent of the page so really this h1 would be 25 percent of the page likewise if we change this to a hundred for the header then we'll see our h1 takes up 50 percent 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 parent it's only using what it has available to it if the header is a hundred percent then the h1 that is the child has a hundred percent of the page available to it however if the header is smaller let's put it at eighty percent then we're only using up fifty percent of eighty percent 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 percent 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 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 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 rem this is the unit that we'll typically use for font size and it relates to the 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 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 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 to rem 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 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 rem 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 ms is looking at the main element which is the parent of the paragraph and so then it doubled that so now we're 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's 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 so when would we use ms instead of rims we know we want to use rems 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 rem here and we save we instantly have a bigger font size on the h1 but now i can set the padding to 1 m which is the equivalent of the font size of that element so now this would also be 3 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 a half of those would be 24 pixels whereas three rims would be 48 pixels another instance where we may use m's instead of rims would be for the padding 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 rem 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 0 and that helps us determine the character width and that kind of comes from print magazine newspaper layout and those sort of things where you only want 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 columns 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 right click on this h1 heading and choose inspect or you could press ctrl shift and the 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 dock to the right just like i have here so we 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 style sheet so those are default styles and we can override them just like i did with the font size and before we get 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 of the css box model as well but i'm going to use the selector that selects all elements again our wildcard 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 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 one percent of the viewport's width and viewport height which is one percent of the viewport's 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 paragraph is actually wider than the width of our main element and so it is overflowing that main element but we have 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 percent 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 choose the body element here and as i'd said before we don't need to set a width of a hundred percent 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 paragraph times 10 and we'll do this with some just sample lorem text that's an image 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 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've 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 right click once again on the page and i just kind of i think i selected the paragraph here so when devtools opens up it should be on the paragraph and we'll see that here in just a second yep i'm on the paragraph now let's highlight the body notice the body is not the full height of the page it only grows with the content but sometimes we want a body element that is the full height of the page even if we don't have enough content to do that and we can do that with the viewport height unit and i'm going to do that over here in our code i'll choose the body element but i don't want to set height because that would also limit it to 100 vh and then we could outgrow that if our content were to outgrow what i want to do is set the min height to 100 vh and save and now that will still allow the body to grow with the content if it outgrows the viewport but at the same time it's now the full page and there could be instances where you want that let's move on to the css box model today you'll learn that everything in css is a box but before we finish i'll show you how to turn a box into a circle if you want to so let's get started on the left i have visual studio code and i have the code from the last tutorial we'll modify that in just a second on the right i have a basic web page once again with an h1 header and a paragraph and i'm using the live server extension so any changes i make in the css and when i save the file will immediately show then in the web page okay so everything we have over here except the h1 has got to go so i'm going to delete everything above and below and leave the styles for the h1 and we can now save and we see those changes so our paragraph text has gotten smaller and everything else is pretty much the same except we do now have the default styles from the browser again and we'll get back to that css reset in just a bit but right now we want to look at this box model and we've already drawn a box by putting a border around our h1 element we can see this border here defined with shorthand and we'll get into what all of that means in just a second too but what i want to do first is drag our visual studio code over as far as i possibly can and give us some more room in the browser because we're going to open up dev tools so once you do that you can press shift alt or i'm sorry not shift alt it is control shift i believe and the letter i to open dev tools and if that's not working then you should be able to no that is going to work it just took a second here on my computer and if that doesn't work you could right click and choose inspect as well once you have it open you may not have your dev tools on the right and if you don't you can click the three dots and choose where it is docked i like to have mine on the right and then you can select any of the elements in the html here and you see it flashing over on the web page because it highlights what element you've selected and i am in the elements tab that you can choose as well after that i'm going to select that h1 so it's inside of our header element here and after i select it i've got h1 and notice the colors changed on the web page this is already showing us the box model right here so what we have for the orange is the margin and then we can clearly see our border that we put in with two pixels and it is dashed and then inside of that we see green and that is the padding and then inside of that we see blue and that's actually the content and now if we go down here where we have a styles tab let's choose the computed tab and we actually see the box model inside of our dev tools so we can highlight any aspect of this so i'll go to the content first and now we only see the blue highlighted on the web page and that is our content and it's showing us the actual size of the content in pixels here as well and then we go to padding which is the next layer the padding is once again inside of the border and it just wraps around our content it gives some extra space inside of the border gives our content a little room to breathe if you will so here you can see it's 24 pixels then we have our border which it shows it as 1.993 pixels we set it to 2 pixels hey close enough right and after the border we have margin and you can see we didn't set a margin so this margin is just showing the space that is left after our element is there so on top we have 32 pixels and then we have 32 pixels on the bottom as well and that's probably just because of the default of the h1 we didn't set a margin on the right but we do see a big margin over there and that's just because we have set that 50 percent width on our h1 so it's not taking up the full page space and what's left is occupied by margin so it's important that you remember how to get here in dev tools we're on this computed tab below and you always want to be able to bring up the box model to see exactly what's going on with your elements after that it's also important to just memorize the different layers of the css box model so starting on the inside we have content then we have padding then we have border and finally we have margin on the outside and now concerning our h1 and the margin that i have highlighted notice it's 32 pixels actually 32.16 pixels and we didn't set that so that's a default style on the h1 we've got the h1 selected let's go back to the styles tab instead of the computed tab and we can see this if we scroll just a little bit there's the styles we set and then here are the default styles from the browser this is a user agent style sheet that's assigned by the browser and here you can see they assigned some margin settings here it's 0.67 em so that's essentially two thirds now if we remember about our units an em responds to the font size of the element and we set a font size of three rim which would essentially be 48 pixels so two-thirds of that is coming in right around where we see it on our box model here at 32.16 pixels so now that we know our font size is impacting the default margin let's go ahead and change our font size and of course it will also change our padding that we based on em units i'm going to change this to 2 rim if i can type here to rim and save and now things have changed notice our margin got smaller it's 21.44 because our font size got smaller and this is based on an em unit an m as far as the browser is concerned so once again it's still 0.67 em but the actual size is smaller it's 21.44 pixels now changes like this can be really hard to keep track of and so that's why sometimes we just want to reset the browser settings for all the margins and all the padding and just take control of them ourselves and that's why we use a css reset and a very basic css restart starts with the wild card at the top and then we set margin for all elements because remember this wild card selects all elements so we set the margin to zero and we set the padding to zero and we can save and now all of that margin and padding that is set by default is taken away and you can see the body actually had a little bit of margin set to it as well because now we're right up to the edge of the body here on our page and this border we set around our h1 is right up to the edge of the page as well and there's one more setting i always put inside of the css reset and that is box dash sizing there we go and now the default is content box and if we save we won't really notice a change here it didn't really change anything because that is the default so what the content box does is it says okay the size that we're setting is this for the content and the content only it doesn't include calculating the size of the padding or of the border or of the margin at all so instead of 50 percent i'm going to set an absolute width on here so we can compare and i'll set this to say 400 pixels and save now let's look over here in our box and we can see the content is 400 pixels but that doesn't account for the padding what we have here is not the 400 pixels we were expecting we took up more space than that but if we set this to border box instead of content box then we'll get what we expect and it's much easier to calculate so now notice our content over here is not 400 pixels is 348 and then we can add in 24 pixels of padding on each side and two pixels of border on each side and then we can get our total of 400. so what borderbox does is it really helps us calculate the sizes that we are assigning because it goes ahead and includes the border and the padding it does not include the margin the margin is on the outside of our css boxes that we create whichever elements that we're styling so the margin is not included in that calculation however the rest is so the border and the padding and the content all add up to that 400 pixels that i set right here okay now that we've broken down how the border box setting works and looked at the css box model let's go ahead and close devtools and let's just style our page a little bit with some of these properties i'm going to resize the page a little bit so we have some more room for visual studio code over here on the left i'll pull this over there we go and now let's make some changes so one thing i have thought about is our h1 right here has some settings i normally probably wouldn't put on an h1 i'm just more concerned with the font there but the font size that would be assigned by default is okay too so i'm going to get rid of that and now these other settings i would actually be more likely to put on the container than i would on the h1 itself and the h1 is inside of a header element so let's go ahead and save that and it changed just a little bit but that's okay i'm going to change these ems back to rims because now i'm not setting a font size on the header so i'm going to use 1.5 rim here and save and now we've got our padding back to about where it was but now what if i wanted to assign these same settings to the container that our paragraph is in and that's in the main element so maybe i don't want this on the header maybe i want to assign a container class so i can provide these same settings for more than one container so i'm going to quickly go over to the html and in the html we'll set a class called container on each of these elements so we have the header element and we'll set the class equal to container and i've got one extra quote there there we go and now i'm just going to copy this and i'll paste it into our main element as well and save that and there we go so now we've got dashes around both of these boxes here let's go back to the css and make these bigger so we can see them better on the page right now i'm going to get rid of this 100 pixel or 400 pixel width let's go ahead and let them take up the full 100 for now okay let's go ahead and add a font size to the container and it will apply to both of these differently but we'll set it to 1.5 rim and save now our fonts a little bit bigger but notice how the edges of the border are right up against the page so on the outside of our box we can set a margin and also set that to 1.5 ram and save and now we have our two boxes and the margin has pushed them away from the edge the margin has also provided space between the two boxes here and now that we have a font size on our container we could go ahead and switch this back to ems and remember one m one e m would be the same as the font size so it would be equal to the 1.5 rim so if we make this change we just change it to 1m and our sizing should stay the same and it does if we change this to 1.5 it will get bigger yes and now we have more padding we could add more margin by doing the same if we want to so let's go ahead and do that and now let's go ahead and experiment with the margin and the padding because we don't have to have the same setting on the top right bottom and left and i did say that order specifically for a reason because for the margin we could just say margin top and here let's go ahead and say 1.5 em and save and look what happens to our other margins the left and right margins are gone and you can't really see that we lost the margin on the bottom but we did the only thing separating these containers now is the margin on the top so now let's go ahead and add some margin on the right and here we'll set this to 2em and save so it's just a little bigger and now we do have margin on the right but still no margin on the bottom and no margin on the left i'm going to press shift alt and the down arrow and now instead of the right i'm going to switch this one to bottom and save and now we have some more margin here on the bottom so the separation between these two boxes got bigger that's the only thing you could really see right there and now on the right let's go ahead and switch i mean on the left let's go ahead and switch this to two ems as well and you can see we got the same thing as if we just said margin 2em except we wanted a margin on top of 1.5 amps so there is shorthand for this so i'm going to comment all four of these out and i'll press shift alt and the letter a to do that there you can see a css comment so it commented those out so right now there will be no margin once again now the boxes are next to each other no margin on the left and right but our shorthand is just saying margin and when i say this 1.5 em that applies it to top bottom left and right and it actually goes in the order top right bottom left so now we can put in different settings with the shorthand if we wanted to so 1.5 on top and then 2 m's on the right and the left and then 2 m's on the bottom and i can save and that is the same thing as when we had all four of these right here now if i just wanted to have 1.5 on the top and the bottom and two on the left and the right i could delete this third setting right here and that's what we get so now it will take 1.5 and apply it to the top and the bottom and 2 and apply it to the right and the left however you can provide all four settings so we could go 3 and four and then we would have the shorthand notice the left margin the final value here is much larger twice as large actually as the right margin and then the bottom is definitely larger than the top margin because here you can see only the top margin as it applies to the first container and now you can see the top margin and the bottom margin here combined to create the space between the two boxes now this same idea for shorthand also applies to padding so i will copy these actually cut them and just go back to the one setting for margins so that looks a little bit more normal again but now let's apply the same thing to the padding and we'll see how that changes so now we have a much larger left padding of four twice as much as we have on the right and then we have a larger bottom than we do on top this is easier to see because it's inside of our container and remember if you're ever having a hard time seeing all of this different white space i guess i dragged visual studio code i meant to grab the edge of chrome here i'll pull this over right click choose inspect open up the dev tools again and we can see all of this hidden white space much clearer when we look at the box model so once again in dev tools choosing the computed tab but we also need to highlight what we're going to look at so i'm going to choose this main container and now we can see the space as it's applied here so here's the content here's the padding and see we have 48 pixels on the right but 96 on the left twice as much we have 36 on top but 72 on the bottom which is twice as much also so we can definitely see that our padding settings over here once i drag this over are being applied as we specified them in the shorthand okay back to visual studio code i'm going to resize chrome once again so we can see our code better dragging this over dragging visual studio code back over here there we go and we can do the same thing you might expect with border actually first worth discussing you can just delete the two pixels and then when we save it actually gets a little thicker because the default is more like three pixels for the size here i'm going to delete this odd sizing for the padding that i used just to indicate the different sides for the padding and we'll go back to kind of a normal look here we've got two containers and they have equal padding and equal margin around them these settings also apply to the individual border sides so that means we can say border dash top and here we could say 5 pixels solid and then i'll go ahead and press shift alt and the down arrow and then instead of border top i'll go ahead and say border right and i'll say 10 pixels and here i'll say dotted and save and now we can see we had some major changes here and we didn't specify a color so these settings were to override what we had set with shorthand above and so the default color is black but we have a dotted right and we have a solid top so we could have specified different colors here as well so we could say green and then of course over here we can say something different like yellow and save and now that is ugly that definitely changed our borders though so i'll switch that to blue and save our eyes just a little bit and if we wanted to specify these individually we could even say border top width and then we wouldn't specify the solid or green here so you can break out each individual setting as well so now you can see we just changed the width of the top one likewise instead of width there's also border top let me switch that there we go style and this is where we're specifying dotted or anything else here's ridge is another value we'll save that and so now the top is a little bit different it looks pretty much like the solid setting does and then of course there would be border top color and we could turn this to any color we want so i'll choose blue here as well and now we have a dashed blue line across the top of our border so so many settings for the border when you break them out individually we had border top but then we also specified border top width border top style border top color and then of course you can do that instead of for top you can do right bottom and left as well often because of this because there's so many i'll delete this i just use the shorthand i usually want my borders to have the same width all the way around so previously i'd had two pixels here and then i chose dash let's choose a different one here let's use outset and we'll save and we can see it changed our frame around the box another one that i like is called double and i'll put a link to the border page from mdn in the description and you can see all of the different values there let's make this larger so we can really see the double what it does here we'll save and there you go we've got our double lines now around each container while we're covering border one other setting to cover is outline outline is not part of the box model because the difference between it and the border is that it doesn't take up space but you style outline much like you would the border so here i'm going to choose 5 pixels and i'll choose solid and then let's make the outline a different color entirely let's go with purple and if i save this now we can see purple wrapping outside of our border but again the outline is not calculated because it doesn't take up space so it's not calculated into that box model equation another property that the outline has that is very handy is outline dash offset so instead of being right up against our box we can say we want the offset to be 5 pixels and save and see how we pushed it now 5 pixels further out from our border so it's offset 5 pixels from the rest of our box and something worth considering sometimes is using a negative value so if i put in negative 10 pixels we'll now see the outside the outline is inside of our box here and so let's go ahead and change this some more so we get it a little further inside maybe even 20 pixels and save and we can clearly see the outline is now inside of our box model okay in the beginning i promised to show how to turn a box into a circle before we were finished so let's do that i need to go back to the file tree and find our index html and hide the file tree with control b and i just want to put a div down here i'm going to keep it in the side of the main element so i'll just type div and then i want to give this div a class and set this equal to there we go to circle i still didn't spell circle right i'm having a rough time today save there we've got a div with the class of circle okay we can close the html and now let's style our circle class so we'll start with circle definition here for the class and let's give the circle a background color of gold but we haven't given it any size yet so let's say a width of 100 pixels and a height of 100 pixels and that doesn't look like much of a circle yet but it will let's go ahead and add a border now of 2 pixels we'll make this solid black and now we see our border applied to our square and let's add an outline as well well we need a new line for that outline now the outline can be 2 pixels let's say solid and let's go with red for now so it'll match everything else a little bit and stand out now let's give it an offset also and we'll make this 0.25 round and save so yeah we've got just a little space there now let's create some separation from the other content and so i'll just leave this at the top but i'll make the margin three rim and save and now it's pushed itself away but something we didn't cover with the margin if you set the margin this doesn't work for top and bottom but if you set it for left and right notice we've got three ram for top and bottom now we can use the keyword auto for left and right and this will center it horizontally that means in the middle left and right so now we put what will be a circle our gold square inside of our main element and it's at the center horizontally not vertically but at least it is horizontally and now to calculate our circle we essentially just need to set one other border property and we set it to half the value of the width and the height so this border property is called border radius i'll put it right under border and we'll set it first just so you can see how it works let's set it to 20 pixels and you'll see what border radius does look how it rounded the corners of our square so now we have more like a cool button kind of like you would see there and we can continue to round that but if we set it to 50 pixels which is half of the width and half of the height and save we've now got a circle now there's always more than one way to do things in css and typically in programming in general so if you've got other ways you like to make circles in css go ahead and leave those in the comments below but i hope this has helped you learn about the box model today so we have the content on the inside then we have the padding then we have the border and finally on the outside we have the margin and when we apply our basic css reset and we set the box siding to border box the box sizing to border box then the calculation includes the content the padding and the border instead of just the content let's move on to css typography and i'm going to paste a definition here typography is the way that text is arranged and presented so today we'll be working with text and font in our css you can see i've got a css folder with a style.css file and i have an index.html file today i'll save the style.css file and for the index.html file let's just take a quick look we've got a basic web page here and inside the body of the web page we have a header element and we have a main element inside the header element we have an h1 and inside the main we have a paragraph and then we have a simple form and our form has a label input and button we'll be working with all of those today let's go back to the style i'm also going to press ctrl b to hide the file tree and now i'm going to resize vs code here so it's only on the left of our screen and on the right we'll have our web page and i'm using the live server extension so any changes we make in the css will show immediately over here in the web page you can see the simple web page that we just went over in vs code it's got our h1 it's got our paragraph with some lorem epsom text and it's got our simple form here with the label input and button i'm going to start our css by selecting the body and inside the body i'm just going to set a padding of 25 percent and if you remember the css box model setting padding of 25 sets that on all sides top right bottom and left so you can see it put our text right here kind of in the middle of the page not exactly centered but it lets us work with it and see it in that regard now we've covered a few things about text and font already in this series and one of those was setting the font size and we already know we want to let the browser set the default font size so that enables the user to make a choice as far as their settings and it also helps accessibility and then when we do set a font size like i'm about to here on the body we want to use root ems that is referencing the roots font size or that default font size that the browser sets which is usually defaults to 16 pixels so if i say two root ems here rem this will probably set it to about 32 pixels and there you can see we have a much larger font size and now i can see the padding is a little too large for what i want to do so i'll put this back to 10 percent in there it's kind of in the part of the page where we'll see it the best and we'll be able to reference the different things we're going to do to the text and font today now also notice and we learned this as well in the past that through inheritance font and text settings are usually inherited so the children of this body element would inherit the font size of two realms unless we set a specific one on those child elements however they do not inherit the size here inside of a form so notice the label has that font size inherited but it did not get inherited in the input or the button so after the body here we could also select both the input and the button and then inside of this we could say font and inherit and now they will both inherit that font size that we put on everything else one other thing we've already learned is that we can change the color of the different text on our page and we can just do that through the color property so i'll change this to purple so it's a noticeable change we can see everything changed here to purple i really don't want to do that today but it is one of the things we've already covered so i'm going to remove that but now we do know how to change the different colors of our text on the page now i want to go ahead and remove this form as we're not going to use it for the rest of the tutorial so just quickly back inside of the index.html i'll select the form and i can press shift alt and the letter a to just comment that form out so we don't see it on the page but it's still there in the source code if we want to go back to it and we can do the same here inside of our css so i'll highlight the input and the button style press shift alt and the letter a and vs code will comment out the style in the css so we've removed it essentially from our html and css but it's still there to reference if you want to go back and work with form elements now when i'm speaking sometimes i will say font when i mean text but they are really two different things notice i'm creating a little extra space here in our css so we have some text settings that aren't impacted by the font choice at all and let's go over those first so let's select our paragraph here on the page and we'll set some text settings for that and the first one we should go over is text dash decoration and we can see the different choices we get right away when we choose text decoration because vs code wants to help us one typical text declaration to set would be underline so let's go ahead and save this and now we can see our full paragraph text is underline another choice which is just the opposite is line and when we set that you can see now we have a line above the text instead of below it and then there's also line dash through and if we save that it does exactly what you expect it to it puts a line through the text maybe you just have a few words you want to cross out and you surround those words in a span element and then you set this line through property for that specific span element and that would probably be a class you would create to do that so after we've gone over those text declaration settings the other one you may see is none now that is the default for a paragraph text like this but what if you had a link text links are usually underlined by default and so setting none would remove the underline on a link and those are the typical settings i'm not going to go over every setting today because there are so many for text but i'll go over the most common the next text setting we'll look at is text transform and after that you can see our selections pop up here in visual studio code again so if we choose capitalize and save now it capitalized the first letter of every word in our paragraph likewise we could choose lowercase and now every letter is lowercase not just the first letter but every letter and then we could choose uppercase and we'll get the opposite as well and now we have all upper case okay now after text transform another very common text setting is text align what we normally have is a line left so this is typically the default for paragraphs and you see this and look to the right this is not uniform over here each line has kind of a different ending point and this is how we typically see a paragraph when we're looking at a paper or something like that like a a school paper however a newspaper might choose to justify or a magazine paragraphs and now notice the right hand column is uniform here where it all ends at the same place just like the left side does and then of course we can text align right which is the opposite of text align left and now it's uniform on the right but it is not on the left and sometimes when we write a paragraph we want to indent that first line so let's remove this and save so you can see the default settings so here's our paragraph we have no indent up here at all but we can choose text dash indent and here is a good spot to use em units so i'll say 2em and save and now we have an indent of two m's that's em units and it just indents that first line of course we can set it to a bigger number and you can see it go over even further so you can really see it go into action however two seems about right here so if we need to indent that first line we can do that with text indent and of course there are more text settings that you can pull up as well and refer to mdn the mozilla developer network where they have great documentation for all of these another way to find out about text properties besides mdn is to just type text and then you can see visual studio code start to make suggestions here for some other settings you may want to look up but i've gone over the ones that i believe are the most commonly used okay i'm going to save again so we get back to the default for our paragraph and there's a few other properties that impact typography that do not start with text or font so let's quickly go over those and one is line height line height accepts units just like we went over in our unit and sizes tutorial so we could use different percentages and things like that however it also just accepts a number and the default is usually right around 1.2 so we probably won't see much of a change to our paragraph when i set the line height to 1.2 however it starts to look much better around 1.4 or 1.5 so i'll go with 1.5 and i think that really increases the readability of our paragraph not that i can read latin but just the line height increase here made a big difference so i'll go ahead and cut this and save and you can compare see how it looks much more crowded and it's a little more jumbled to my eyes at least but if i paste this in and save that would make it much more readable especially at a distance and on a screen sometimes my eyes get weary so i believe that helps okay i'm going to leave line height there because i believe that does help the readability but i'm also going to add letter dash spacing and this does exactly what you'd think it would do it increases the space between the letters of the words so if we put in oh let's go with 1 m and save it really spaces those letters out doesn't it we probably don't want to stick with that unless we're going for some kind of special effect maybe down to 0.25 well it's definitely more readable but it looks kind of weird to me still maybe 0.1 and you may see text like that somewhere some time in a heading or something to draw attention to that looks like it may work but i wouldn't use letter spacing too often because it seems normal to me when it's just at the normal setting presented by the browser and in addition to letter spacing there is word spacing so let's go with 2m there and notice the difference it really spaced those words out so we could come back maybe 0.5 and yes we've got some extra space between the words once again it's an effect more to me than it does anything to really increase the readability however maybe if we got to a much smaller size maybe it would help let's see well it's noticeable still i don't know if i like it better but it is an option so we have letter spacing and word spacing but i do believe increasing the line height just a little bit from the default that's around 1.2 to more like 1.4 or 1.5 depending on the text you're working with could really help that readability okay moving on to some font properties now that actually start with the word font and i can put in a dash and let me do that again put in a dash in visual studio code starts to suggest some things the first one it does is font size which we've already gone over let's skip font family for now and go to font weight so for the font weight that's essentially whether it's bold or not in normal or the default is right around 400 so if i save this we won't notice much of a change well i noticed a bit of a change let's see what 300 is like and yet maybe normal was more like 300 for this particular font but overall for 300 to 400 is kind of normal let's go back and see what visual studio code offers for values that we could choose from so now you see we've got 100 through 900 900 being very bold and 100 being not bold at all and then there's also just some words we could choose bold bolder lighter and then of course normal so let's go with normal and see what that looks like well normal looks more like what we had at 400 there let's go with lighter and save and it's not too light but it's noticeably lighter than it was let's go with bolder and that's very bold we can definitely see the difference there so 100 would be very light and 900 would be very bold and if you don't set the font weight you can expect it to be somewhere right around what normal was to begin with now let's look at font dash style and if we set font style we're setting possibly the italic setting and if we save that's exactly what you expect we have italic text there is also oblique which essentially is a stronger italic it just has a little bit more emphasis there and as you might expect after learning about font weight it also has a normal setting so that is the default and it's basically that without setting a font style as well okay now we get to the big settings something we typically set not on an individual paragraph unless we want to change the font specifically for the paragraph but let's set this on the overall body of the page this is the font family property notice visual studio code is providing lots of suggestions here that we'll go over in just a minute but there are some main generic families and one is serif and if i save it's pretty much what the browser default already was and this is the type of font family that we see in academic papers newspapers papers you'd see in school overall however on the web it's much more popular to use the sans serif family if i save that you can definitely see the change here and this text is more like you would see on many popular web pages even though there may be variations of then another generic family is mono space oops i didn't spell that right i need mono space there we go if i save that you can see mono space has the same spacing for every character so this looks much more like an old typewriter or something like that where it gives each character equal spacing then there is also the cursive family and that looks a little different as well you may have seen fonts like that before and i believe there's the fantasy family save that yes and that also looks different here i would possibly think about using just a little bit of letter spacing it looks a little crowded to me but overall those are the generic families but those are usually used as a fallback because we have more specific fonts that make some changes so when visual studio code was suggesting these font family values let's go with this first one we see here courier new and then courier and i'm going to press alt z so the code wraps over here on the left so you can see this full font family setting so courier new is the first choice and then the second choice is a fallback so if our computer whether it's windows mac or whatever and they do have different fonts installed if our computer doesn't have courier new then it's going to look for courier and finally after that it's going to look for mono space so it doesn't necessarily use all three it uses the first choice if available if not it uses the second choice and if not the third also notice the courier new has a space in it and anytime the font name has a space in it you need to put quotes around the name to handle that spacing the names that don't have a space do not need any quotes at all so let's save this and here we are using courier new i believe on the page which looks a little different now let's choose something else from a different font family so we had the monospace family right there let's go with ariel and you can see visual studio code instantly suggests a full font stack which is what these are when you have multiple choices this suggests ariel then helvetica and then finally the sans serif generic family so let's save that and this is a font you see much more often on the web overall and arial is fairly commonly installed on both mac and windows and probably linux any other type of computer okay after that maybe verdania is another one in that sans-serif family you would see and here this font stack has four choices actually for dania geneva tahoma and then eventually sans serif also notice that sans serif does not need quotes around it because it has a dash it does not have any spaces so if we save that this looks just a little bit different than when we had arial now if we did want to choose a serif font instead of a sans serif font a very popular one is times new roman and you can see the suggestions here from vs code we've got times new roman in quotes again then times and then serif so if we save that this is more like what the default browser font looked like and i've got a couple of good links about what are called web safe fonts and that's essentially what is being suggested here by visual studio code when you use these stacks they're fairly web safe they don't need to be installed from an external source typically the computers would already have these available to the browser i'm going to switch this back to arial choose that and save and i'll leave the page like this now okay i'm going to grab the browser and take it to full screen now and now that we're there i'm going to go to my next tab which is fonts.google.com and now we're going to choose an external font from google fonts and this is very common practice and we can load this in and then use it on our page so here's a very popular font roboto so we can select it and it says it has 12 different styles so now it takes us to the ribato page and you can see the different styles notice this says thin 100 here for this style now this means that that font weight is 100 essentially here's light 300 light 300 italic so you can choose some of the styling right here at google fonts i typically choose not to and just get a generic font and then try to apply my own styles as well but you can see the different ways the font will appear and that's really nice to look at like that so i would typically just choose the regular 400 and see if i could modify it with my own css now there are different ways we can link to this google fonts lets us choose a link that we can put in the head element of our html or it lets us choose an import let's look at the link version first so if i were to do that i would be choosing this link section here and it says i have more than one link selected so i previously had selected another font here i'm going to click the minus symbol remove it so i only have roboto and now there is still this link section i would need to copy all of this and then i would do that with control c for example now i would need to go back to my code so let's do that and here inside of the code i'm going to need to go to the html and then let's make this take up the full screen for a little bit and inside of the html in the head section before the link to my style sheet because it needs to use the fonts i need to paste in these extra link elements that google provided so it's going to get the information from google fonts loaded in and then my style sheet can read it but although we're loading it in here we're not quite finished because we haven't applied it to our css so they will not be used yet at this point i'll drag this back over and now google is also saying we need to apply this line in our css to use it notice roboto has a sans-serif fallback so it's part of that font family i'll copy that go to the css and where i had ariel helvetica and sans serif here i will replace it with what google suggested and provide roboto and sans serif now note they put quotes around roboto and that won't hurt anything either so we'll leave it as they suggest now let's go back to our document and notice we're using the google font roboto now now you can choose more than one font from google as well the more you attempt to load in from google though the longer your page will take to load so i suggest grabbing no more than you absolutely think is necessary i do want to show you how to use the import in your css instead of the link in your html so let's click the at import here and now you can see it's not quite as much code and what else i like about this is it goes right in your css if you want to notice they put it between the style element which could still go inside of the head of your html if you were to copy all of this i'm not going to select the style element tag the opening or closing just what's in between because i'm going to put this directly into my css file so now that i've copied the at import statement i would normally put it right up here at the top of my css and you want it before it would load anything in now of course this is wrapping the code because it's a longer line with the url but i'm going to save this i'm going to go back to the html i'm going to remove all of those links that we had of course leave our own style sheet and now we'll still be able to use the roboto font even though i've removed those links from the head section of the html i now have the import statement at the top of my css and if i go back to our document i can even reload and we still have the roboto font ready to use because we've imported it at the top of the css let's move on to styling links with css you can see i've got visual studio code open i have some basic styles in from the last tutorial where we have some padding a font size and a font family a small font stack set on the body element we're also importing in a font from google fonts you can do that if you want to and the starter code is available or you can set your own font family stack if you want to as well also over in the file tree you'll see i have an index.html and in this index i have not only a header with an h1 heading i have a main element that has about five paragraphs and at least four of those paragraphs have links in them and then i have a couple of other html files very very basic they just contain an h1 element in the body that's because i needed something to link to so i created a couple of those files as well so let's go back to the style and i will resize visual studio code to pull it over to this half of the page and i'm going to hide the file tree by pressing ctrl b and we'll pretty much be able to see our styles here the only thing is a long line like this import of the font will wrap now over on the right you can see i've got chrome open and i'm using the live server extension so anytime we make an update to our css we'll automatically see it over here on the right styling our hypertext links is really an extension of the typography that we just covered in the last tutorial in this series because it's still text so a lot of the things we learn about typography we can apply to our links but also these links have their own default styles that are different from the rest of the text on a page and when we talk about links in html we're talking about an anchor tag and usually that links to something with an href attribute so these first two links that i have linked to google searches they're different searches one searches for web links and one searches for hyper text links and then i've got a couple of links that just go to the other two html pages we created guitars and javascript although those pages actually do not have that content just went ahead and created links that would hold that content so let's note the default styles of these links they're underlined that's the first thing to note also if the link has not been visited it's a blue color but notice the hypertext links link that we have here and it is purple so we know this is a visited link and we can tell all of this just by looking at the page also when we point at a link it changes our cursor from this arrow to a pointer it's a little hand pointing its finger at the link so that is called a pointer cursor and then there's another default style that we can't even see yet and that is when we click on a link so i'm going to click and hold down on this link and it turns red so this is when the link is active and that is another default style that is set so i'm going to go ahead and let go and it goes back to purple without visiting the link and if we did visit the link and come back it would still be purple as visited so now that we know the default styles let's look at how those are set the first one being text decoration that we would set and that is what controls the underline so the default would be underline and if we save we shouldn't see any difference but oftentimes developers want to take away that underline and style something different you do want to make sure that it still indicates somehow that these are links you want them to stand out in some way and an underline is a good way for that to happen but if you want to take that away you can but you have to do something else to make the link stand out okay we also mentioned the cursor so we can set a cursor but really cursors have semantic values and i'll see what visual studio code pulls up there's lots of different choices here but let's look for example at a not allowed cursor and it has a semantic value it tells us something just when we see it so when i point at javascript you can see we get the little icon that says this is not allowed and we know what that means so really we don't want to change that from a pointer most of the time there is not really a reason to do that so let's keep that as pointer but i'll leave that here so you know the cursor can be set to different values and of course the starting color before the link has been clicked is just set by color and here we see blue is the default color and i believe that is the actual default color and not some variant of blue let me save again and see if i see a difference and no it really looks the same to me but it may look different to you but once i set this to blue notice what happens to the visited link it's changed because it overwrote the default value and then we haven't set anything for the visited link so we need to learn how to do that as well so what i'm about to show you is called a pseudo class so we'll once again select the anchor element but now we put a colon and now i can put a definition after here that defines which pseudo class that i want to select and right now i want to select the visited pseudo class and pseudo classes represent the current state of the element because a state of an anchor element can change it is either been visited or it hasn't and there are some others that will cover as well so for visited let's go ahead and put this back to the default and save and now you can see our hypertext link is once again purple now our other links haven't been visited so they're still blue now let's look at another pseudo class that we can define and this pseudo class is called hover when we hover over the link it doesn't have a default value right now if we hover over a link it doesn't change at all either the visited or the not visited link both of them still just stay the same so let's go ahead and change this and for now let's just choose a different blue and i'm going to show you a trick or two where you can choose something kind of in the same range of the color you have selected for your link but first let's just choose a blue randomly here so now when we hover notice javascript is changing colors when i hover over it and even the visited hypertext links will change color as well because now when we hover over the link we have changed that state it's now in the hover state and it is changing the color of the link and then remember we still have the active state as well but right now that's not working either because that was a default style and we have overwritten that what has followed has been visited and hover and really we don't have the default style applied anymore so let's go ahead and put in that active link and we can change it to something like what it was i think it was red so that will definitely stand out select that and now when i click hyper text link it definitely turns red and i think i visited the link and now we're searching for hypertext links so i'll go back to our page and we can see that this link was visited but if i click and hold down we can see that it's active and now i'll just pull away and not visit the link now we have to consider specificity and we also have to consider the order these are in for the cascade so if we put visited above our anchor selector visited will still be applied here even though the anchor selector comes afterwards in the cascade and that's because this visited pseudo class has more specificity than just an element just the anchor element and we can see that if we go to the specificity calculator and i have this linked to in the resources and now if i just put in an anchor element you can see the score is just 0 0 1 but if i put in an anchor element with a visited or any other pseudo selector now the pseudo selector here is a class i said pseudo selector a pseudo class i'm selecting the pseudo class classes attributes and pseudo classes so this has more specificity and that's why the visited link continues to stay purple even though the anchor element comes afterwards in the cascade but that's not usually the order we want things we usually kind of want to think about it in the order that we would have them so i'm going to put that visited back but now visited hover and active all have the same specificity and one can overwrite the other so we really have to think about the order we put those in let me save this and right now they're all working because this is the proper order have your anchor tag and then have your visited pseudo class your hover pseudo class and finally you're active and they should all work so when we hover it works visited of course is working and if i click active it is working however if i rearrange these they may not so let me go ahead and take hover and put it above visited and so now visited comes after in the cascade and when i hover that still works it hasn't been visited but let's check our visited link the hover doesn't work anymore so it's important to have these in the correct order i'll take hover and put it back where it belongs in this order so you want your anchor tag then your pseudo class of visited then your pseudo class of hover and finally your pseudo class of active and there's one more very important pseudo class and you usually see it added to the same style as the hover and we can do that here just by putting a comma and then putting in the focus pseudo class and this really makes your page more accessible because if a visitor or a user of your page is using a screen reader and instead of using a mouse they are tabbing through your page notice that right now we've selected the first link here and it has the outline around it i am tabbing through the links and by doing that when it has focus it is changing the color of the link just like we did with the hover and that's important to make your page accessible as well okay i'm going to take the focus off of that link and i'm going to remove all of these in the anchor tag all of these styles because they're the default styles anyway and what i do want to put in here is a different color we often see a color of black we already have black text but notice now the links are underlined with the black text and i commonly see this on web pages as well so we don't always take away the underlines sometimes we use the same color as the rest of the text but we add the underline to make them stand out notice you can still have a hover you can still have a visited color if you want to but oftentimes you don't see a visited color either so we can just comment that out and leave it in the code and now we don't have a different color for a visited link and that's okay if you want to do that but we still have a hover color and we still have a focus color as well so now let me back this up just i wanted to show a different version of that i'll go ahead and put the visited color back in and up here let's go ahead and put in blue let's do a different color though let's do steel blue i like that color we'll save and now we have steel blue links and when we mouse over it looks okay but let me show you a couple of things you can do to stay within the same color and yet make it noticeable that you are hovering going back to when we covered colors in the different tutorial we learned how to use the vs code color selector so i moused over the color here and it pulled up the color selector and i can click on the color bar and go to hex from the rgb and i can also go to hsl and i'm going to choose hsl here and now let's leave it at that and notice it's 207 44 and 49. now let me just copy this and i'm going to take it to our hover instead of the dodger blue and now right here this number is the number we want to change it changes the color and so that pulled it up and now we can just make this a little lighter choosing something different on the color wheel if you remember the way these numbers work it's just something different in the wheel i'll take it down to 189 notice the other numbers are still the same 44 and 49 so we've just changed the shade just a little bit on the color wheel and when we mouse over it kind of goes with the color theme and that is a good way to change that so in hsl you're really only changing the first number and you're selecting a number close to what you had and that is one way to get a similar color that complements what you originally had another approach and i will go ahead and comment out the color but another approach is to use an opacity property which is making something transparent and remember with colors we could add that right inside of this hsl as well but i'll show you how to do it here with the opacity property and let's put this to 1 would be the max and 0 would be completely invisible transparent so let's put this around 0.9 to just give it a little bit of transparency when we mouse over and you can see the color changes it's keeping the same color but it just gets a little bit lighter and maybe the 0.8 would even be more noticeable let's try that and that also works but when you learn about this note that opacity will change everything so if you use this on something else let's go up here and let's put in the main element now if i put this in it made everything on the page a little bit lighter i'll make it much more noticeable here now that made all of the paragraphs much more transparent so you want to be careful when you use that now remember also in the hsl and also in rgba there is a channel that allows you to add a transparency value so here we could also do 0.8 and now when i mouse over we'll still get a transparency as well and it's also changing color there so if we wanted to we can put this back to the exact same color but now we've added the transparency so if we save and mouse over we still get a little lighter color and it's really the same exact shade we're just lightening it up with a little bit of transparency there okay before we finish i just want to emphasize that these pseudo classes are not just for changing colors you can adjust other things although changing the color of links and the visited hover focus active all of those pseudo classes that's a common application of this but we could do other things as well one thing i've seen is changing a background so let's change the background here to gold and it will be kind of like a highlighter so when we focus and i'm tabbing through we're kind of highlighting the links of course you'd want to choose a complementary color there as well but that is something else i have seen before is kind of adding a highlight to each link as it has focus or as it's hovered over let's move on to styling lists with css you can see i've got visual studio code open and the starter code has an index.html file and in this index.html file we have a header inside the body that has an h1 and then we have a main element and this main element has two articles in it the first article element has an ordered list and we can see that with the h2 title and then the ordered list underneath the second article has an unordered list and we can see that with the h2 title and the unordered list so the only difference between these two lists is the beginning element the ol or the ul ol being ordered list and ul being unordered list so i wanted to take a look at the html first the css that we're starting out with just has a couple of basic things an import from google fonts where we're using the roboto font that you see here and then just a little bit of padding and setting the font size to two rims in the body so the default for the browser is probably 16 pixels so when we double that with two rims we're now at 32 pixels for anything in the body let me pull visual studio code over to the left side of the screen and here in chrome we can see this page and so we have our ordered list here on top our unordered list underneath you can see the ordered list has ordinal numbers here one two three the unordered list just has bullet points now i'm going to go ahead and hide the file tree so we can see our css a little bit better also press alt z so anything that would be longer like this url for our google font wraps to the next line also worth noting that we're using the live server extension so any change we make here in the css will automatically see over here in the browser as it will update immediately let's style the ordered list first and the first property we want to look at for the ordered list is list dash style dash type and here we get a list from vs code and we can choose different things to appear to the left where we see the numbers so for example let's choose lower alpha and i'll save and now we can see we have lower alphabet letters here so abc otherwise we could choose some other things that i don't even recognize they have in here like let's get this reference again let's look at oh georgian and maybe somebody else would understand these symbols i certainly don't but here we see symbols to the left that represent whatever georgian is usually the default here is decimal and so if i save that we're back to our numbers that's the default value you could also see i believe it said decimal leading 0. there we go so if we chose that we would get a 0 in front of each of the numbers so you've got lots of choices to make and by the way list style type and all the properties we'll look at can apply to unordered lists as well we're just looking at this first with the ordered list so i'm going to go ahead and choose something here that will make this look like an unordered list at first so let's look at bullet i believe it was bullet let me check the selection and did i see bullet here not bullet it's disk there we go i call it bullet points but they're actually disks is what they're referred to so this looks just like our unordered list now so the only way we could tell that this is an ordered list is to actually look at the html code at this point so we can make one look like the other another choice i often see is circle but because it's an ordered list let's stick with something that is in order so i believe i saw an upper roman let's choose that one and save and so now we see roman numerals one two and three now while we're mostly focusing on the css primarily let's go to the html quickly and there's a couple of attributes we can add that will change how our list appears one is the start attribute so let's tell this to start at three and when i save now you can see we get the numbers three four and five and then we can also add a reversed attribute and as you might guess now it counts down three two one because it starts at three so if we started this at five knot would count down five four three it's also worth noting that if we are not using numbers over here such as the roman numerals or decimals we still need to use a number value here for this start attribute so if i switch this back it's just going to be what references that so i will switch this to lower alpha once again and save and you'll see it references the fifth letter of the alphabet the fourth letter and the third letter as it's counting down from five to three let's also consider that we could not have any kind of bullet or numeric out to the left so let's just put none here and save and you'll see that that's eliminated but notice it's still indented and that's because we have some default padding so we would have to set the padding to zero if we want our list items to go all the way back to the left let's take a look at that unordered list now so i'll put ul here in our style sheet and let's set the list style type on it as well i'm going to set that to square instead of the disks and if we save we can see we have square bullet points now now the next list property to look at is list style position but first let's look at an issue that might get caused with list style position so in our unordered list if i set the text align to center and save notice what happens to the bullet points i've centered the text but the bullet points are still to the left some browsers have been known to handle this differently and send the bullet points to the middle and some leave them to the left and the difference is the list style position default value some browsers have a default of outside such as chrome and some have it inside or at least they have at one point i haven't checked browsers in a while instead of chrome but right now i have to set the list style position to inside to get the bullet points to align with the text but if we set them to the default outside they stay out to the left i'm going to scroll up for some more room as we look at this unordered list and now notice if i set the color to a blue here with hexadecimal and save it changes all list items to blue so that is worth noting as well if you set the color property it changes the bullet points and the text to blue we can set other text properties to or typography properties such as line height so i'm going to set this to 1.6 and you'll see some extra space between each of the list items now the last list style property we want to look at is list style image and we can set an image to use instead of the bullet points now let's quickly look at the file tree notice i've got an images file and in that i've got a check mark image it's check mark dot png and we're going to use that as we set this i'll hide the file tree again but now we have to specify url and then parentheses and then navigate the file path to the image so we're going up out of the css folder with two dots now we put a slash and go into the images folder and then we choose our check mark and i will save and notice those bullets have now got changed to these green circles with a check mark in them and that's our check mark png and there's also shorthand for all three of these list style properties i'm going to press shift alt and the down arrow to copy down our list style image and then i'm going to remove the image and we just say list style and we can put all three properties here with shorthand so i'll quickly cut this with ctrl x and first we'll just set this to square and you'll see how it overrides the list style image so we're back to our squares here for the bullet points but then we can also supply an image and when we do that the square becomes the fallback in case the image would not load and so now when i save we've once again got the image and then finally we can provide the position and so i'll say inside and now the images are over with the text of each list item so this is called shorthand we just say list style and we can provide one two or all three of these values that would be the list style type the list style image and the list style position we can also override styles from the unordered list for example on each list item now this would apply to all list items even in the ordered list because i'm just saying li and not specifying the unordered list or the ordered list as well but we can override styles because this comes later in the cascade as well but it's also more specific because we're down to the nested list items so if i wanted to change the color of all list items let's do something obvious here to red and there i put a hashtag first there we go just the word red now they've all changed to red however if i just wanted to change the unordered list items i'd have to put the ul first and then save and now it just applies to the unordered list items however what if i just wanted to make the second list item read now we can use another pseudo class i'll put a colon and then nth which is nth des child and then parentheses and now i'll just put the number 2 inside the parentheses and notice it only changed the second list item in the unordered list to red so we were more specific and we just changed one list item likewise our nth child pseudo class also accepts the words odd so if we pass in odd now the odd numbered list items are red and likewise we could pass in even and do the same so now we're back to just number two because it's the only even number and it has turned red and of course you could apply other styles besides just the color here as well if you wanted to as you select each individual line item or all line items in any specific list okay from that i want to move on from the pseudo class of nth child to a pseudo element which we have not introduced any of those yet in this series this pseudo element is called marker and it starts with two colons and then the word marker and all pseudo elements should start with two colons instead of one like a pseudo class now we can change some things about the marker and that's usually what we would have here for a bullet or letters outside of an ordered list or numbers so let's go ahead and comment out the list style image and i do that with shift alt in the letter a and then it comments that out here in visual studio code and i'll save now we're back to blue and red squares which we specified up here in our unordered list so let's say we want to change all of those back to a black color but keep the text in blue and red so here we can specify a color for the marker and specify the hex code for black and save and now you can see once again we have black squares out here as markers i'm going to scroll up for some more room because there's a few other properties we can add here as well i'm going to change this to red actually because we'll highlight something like we would on a sale page i'll change the font family of the markers and here i'll put fantasy and might change the size a little bit but they're currently still squares we can set the font size if we wanted bigger markers like 1.5 m and save you can see those markers got quite a bit bigger i think we'll just go with one m for now and then we can also provide content and this is where it gets interesting so imagine we had a page selling sub sandwiches or pizzas or some food item whatever was on sale and we said only five dollars and put a couple of arrows and now if we save you can see that applied here but notice we didn't specify a list either so it also applied to the un or i mean to the ordered list we have the unordered list down here but before we had told the ordered list to have a list style type of none but when we provide content it's still applied so in that regard you want to be more specific and we could say just apply that to our unordered list and this is just like above where we supplied the ul we could also actually say li here and it would be the same result as well but it's all markers in our unordered list so we don't have to put the li there and it identifies the unordered list and changes now what if you want a space well currently we have set the list style position to inside so when we centered the text this kind of threw that off a little bit but also we didn't allow a space so maybe we just put a space in our content and save and that did create a little bit of space you could do it that way you could add left padding but since these are positioned inside the left padding would be to the left of the markers so that wouldn't work if you did have your markers over here on the left and provided left padding and of course that would be by setting this to outside i could do that really quick and you would see what happens now the padding would come after the markers but really we're going to have it inside and now we just provided that space with a little bit of space right there now as you learn more about web development you can get creative with this content you can put in what is called an spg and those are often used for images and icons you could also put in something called font awesome icons and other types of icons as well so this does hold different types of content but it's easy just to type in here and show an example like that now before i finish there is one other html attribute that can be helpful although it's rarely used i do want to show it before we're finished so let's go ahead and switch this back to something like lower alpha there we go for our ordered list and now our edc shows up and if you remember that's because we are starting with the number five and it's reversed so if these were numbers it would be five four three it corresponds to the letters but we can also specify a value so if we say value here and we put in 26 this will definitely make a difference now notice z is the 26th letter of the alphabet so the number corresponds still to whatever the order is and we're going in reverse order so instead of x y z it went z y right here but this remained as number five because that's where this started so this value attribute may come in useful in rare occasions i definitely wanted to cover it i almost forgot to but there we go i hope you have learned a lot about styling lists let's build a mini project for beginners after completing several lessons in this css tutorial series i think it's a good idea to bring all of these different pieces together and apply what you've learned i've got visual studio code open and in the starter code you can see i have an index.html file and when we look at the body of this index file you can see it has a nav element and inside the nav element we have an h2 and a unordered list and this unordered list has several list items all have their own anchor links and it doesn't really matter where they're linking to today i just have it linking to our other pages one and two that were there just to link to in previous tutorials but what we have is a list of appetizers entrees desserts beverages and then it just says about things you might actually find on a menu in a restaurant as well as a menu on a restaurant's website and then at the very bottom here we have one paragraph that says learn more about amazing foods and i just linked to an article on amazing foods that's because we want to have one link that is not in the list so we can select it separately or avoid selecting it if we want to so what i'm going to do now is drag visual studio code to the left and we can see chrome on the right i'm using the live server extension so we'll immediately see any changes and here is our basic page really no styles applied yet i'll press ctrl b to hide the file tree and click on the style.css you can see we're importing the roboto font from google fonts like we learned how to do in the typography chapter but we're not even using it yet so really no styles applied to the index.html so let's start now and if you remember from the box model chapter we covered a small css reset so the first thing i'm going to do is apply that reset so a margin of 0 padding of 0 and then we'll set box sizing to border box and when we save this will eliminate some default styles and now we can see everything is way up here in the corner so any of that default padding and margin is gone now let's select the body and we'll add a few styles to it that will be inherited throughout the page however the first one will not be it just applies to the body and that's to put just a little bit of a margin there i actually want rem and that way when we save it pushes the text away from the top and the left just a little bit okay after that we're going to go ahead and set the font family so we start using that roboto font and we'll set it to roboto with a fallback of sans serif and we can save that change and instantly we see the the font change over there to the right after that i want to go ahead and align the text for everything on this page to the center normally we might put that just inside of one area we were building but in this case in this example everything on the page will be centered for a menu and now you can see that centered over there on the right okay if we look back at our html notice we're using a nav element inside the body so the next thing we're going to select in our css is the nav element i'll scroll up just a little bit and select the nav let's put a border around the nav so we'll say border 2 pixels solid and then we'll choose 333 which is just a little bit lighter shade of black instead of 0 0 0. so if we save that you can see the border around our nav now now let's add a border radius and that will let us round the corners off just a little bit we'll set that to two ram and when we save you can see those corners now change to rounded corners we learned about border and border radius in our box model lesson we also learn about margin i'll set the margin for the top of the nav to zero i'm going to set the margin for the left and right to auto which will center it if our page is wide enough and it needs to be in the center and that means the margin will eat up the space that's left on the left and the right and then we'll also have a margin on the bottom of one rim now we won't notice that auto spacing because right now the nav is a block level element so it has a hundred percent width except for the little bit of margin that we provided on the body here so we have some space but if we set a max width for this to let's set it to 600 pixels now if we expand the page the nav element won't expand to the full 100 width so let me grab this and drag it over so it takes up the full page and we can see now that our nav is not the full width of the page so we have limited it to a max width of 600 pixels and setting the margin to auto on the left and the right has resulted in centering the nav on our page notice we also haven't styled the list item yet so we see these bullet points here outside of the nav we've centered our text but as we learned in the list tutorial that the bullet points here are set to default to be on the outside if we want them at all and i think we're going to remove them so i'll pull this back over to the right and we'll continue styling the page i'll scroll up just a little bit but before we move on from the nav we can set some typography here that will be inherited so let's set the font size now to three rim and let's set the line height to seven rim and when we save things should be much bigger looking back at our index html again now inside the nav we have an h2 before we get to the unordered list so let's style that h2 the first thing we'll do is give it just a little bit of padding so we'll set that to one rim and now let's set a well let's set a background color first and we'll set this to gold so if we save now we can see we have a background color on our h1 and it has the full width of the nav because it's a block level element so it has a hundred percent width of what's available to it but notice our border radius is not being respected up here the gold continues to look like a square although we set a border radius on the nav to have those curled or rounded corners so now we need to adjust the border radius here on our h2 as well and what we'll do is start in the top left we'll set this to two rim and now the top right is also two rim because that's where the curved corners are then we'll have zero on the bottom right and zero on the bottom left because that still needs to be the square corners so we'll save and now notice the gold matches the curve of our menu on the top left and top right okay i'll scroll up for some more room and we're ready to start styling our unordered lists we'll put a ul here the first thing we want to look at is the list style position i mentioned those bullets before if we put them inside we can now see them but we don't really want them do we so we don't really need the list style position i just brought that in so we can see that yes they are still there what we want to do is say list style type and then just set that to none and they will disappear now we can apply a style to each list item so we'll say li and here we're just going to select the border top we'll set this to 1 pixel solid and 333 to match the outer border of the nav and now we have some nice separation here between each of our list items okay next we want to style the links that are inside of our list but notice we have a link that is not inside the list down here it says learn more about amazing foods so we do not want to select this link so in order to select the links that are only inside the list we'll start with list item and then the anchor tag and note we also want to select list item the anchor tag and the visited pseudo class and then here we're going to say text decoration set that to none and we'll set the color to that 333 color so we have a dark color and so now we have a dark color here for visited links and links that haven't been visited so let's quickly visit one we just have our simple page two we go back and it remains the same color let's scroll up for some more room again and now we'll go ahead and style some other pseudo classes here so we'll have the hover sudo class and we'll also have the focus pseudo class and for those we'll set the background to the 333 so just the opposite and here we'll set the color to white smoke which is just a little bit of an off-white color and let's set the cursor to pointer and now when we select that or save that now we should see the mouse over changes and so now the text is that white smoke color and we get a black background but that's not really what we want we don't want it just on the words we want it on the full list item so we're going to have to make a change to make that happen so above where the styling began on the different anchor tags in the list item i'm going to say li with the anchor tag and only that not the visited pseudo class so this is a separate selector we'll set this to display block which displays a property we haven't covered yet in a previous module but we did if you took the beginner's html course as well we did cover block display and inline display so this is a block level element normally the anchor tag is an inline level element so we are changing it to a block level element the bonus here is the block level elements have 100 percent width so when i save this this will change and now when i mouse over any one of these this anchor tag has the full width and is filling the entire space here of each one of these list items so now this makes a big difference so i don't even have to click on the text i could click just over here to the left and we still go to page one so everything works there as expected but there's still one change we need to make can you guess what it is here's a hint it's right here look at those bottom corners they're not rounding either they're not respecting that border radius that we set on the nav so we need to make a change to help enforce that as well i'm going to scroll up so this will be the last thing we put in our file this is a little more difficult than when we rounded the corners for the h2 because the h2 is easy to select it was the only one on the page but what about this bottom one we have five different list items so how do we just select the last list item we're going to do that with a pseudo selector and this will be called last dash child and then we can go ahead and i guess we need to put the a there and then under that we can say border dash radius and now it will be zero on the top because that still needs to be a square zero on the top right as well so top left top right now this is bottom right needs to have that same two rem setting and then bottom left as well so let's save and now let's mouse over and you can see that the border radius is respected here as we mouse over the list items so there is our basic menu and we selected all of these without changing the link that we had here in the bottom so again a beginner's project but it certainly showed you how to apply some of the different things we've learned up to this point we'll be learning more about that display property that we introduced and there's a lot more yet to learn about css too let's move on to css display types you can see i have visual studio code here on the left and i have an html file and in the html file i have a body element a main element then that is surrounding the other elements and inside this main element i have two paragraphs and in the second paragraph i'm using a span element and that span element has a class on it of opposite around the word another you can also see i've commented out a nav element that contains an unordered list that we will get to later i've also got a basic css style sheet here and inside this i'm pulling in a font from google fonts as we learned in the typography lesson and i've applied a basic font size and font family then to the body element here in the css so that's what we see over here in the right in chrome and i'm using the live server extension so you'll see our changes automatically over here in the browser as soon as we save our css now the display property in css relates back to something we learned in the beginning html course and that is about block level elements versus inline level elements now the paragraphs that you saw we've included in the html are block level elements and they have some default properties so let's look at those first i'm going to apply a basic style here to the paragraph element and we'll say background dash color and set that to let's do a light gray and when i save you can see the light gray extends all the way across the page so it has a hundred percent width by default automatically block level elements have a default 100 percent width and they stack on top of each other as we see here now they've also got some default margin as well which is why you see space between the paragraphs but this is important to know so every time we use another block level element doesn't have to be a paragraph it could be any element that is a block element then they will stack on top of each other now when i say 100 percent width i mean of what is available to them it's not always 100 of the viewport here that we see so let's look at an example of that and that's why i have a main element that the paragraphs are inside of the main element is also a block level element so let's set the background color for it to a different color so we can see it get something kind of ugly that stands out here just for this example so let's go with aqua we set that you can see we are covering part of the main element with the paragraphs but the part that you can see where there is margin it turned aqua so now we could take away this background color and you can see aqua across the whole thing so now that we've done that let's also go ahead and change the width of the main element so let's set it to a width of 50 percent and now you can see the paragraphs do not extend all the way across our page they are limited to their container their parent element which is the main element so they do have a hundred percent width default setting but it's a width of what they are given so i say they have 100 width of what they are given it's not necessarily 100 of the page and of course we could return this background color once again so we could see exactly how much room they're taking up and let's say light gray again and save and once again we see they're taking up 100 percent of that main element with block level elements we can also apply margin and padding and height or anything like that to all four sides so let's say margin and i'll say 100 pixels on the top and bottom and 50 pixels on each side and if we save that definitely changed everything because now this has a 100 pixel margin up here and then we've added more extra margin in between the paragraphs and then you don't even see the margin that's underneath as well but we can do that to block level elements but this is where some of the change comes in when we switch over to an inline level element so i'm going to remove that and let's remove the main styles as well so we're back to spanning the full page and remember i put a span element around the word another which is an inline level element and that doesn't cause a new line break so let's go ahead and style that opposite class that was applied to that span element just to make it stand out we'll start with a different background color and i'll make this a flat black and then we'll use a color that is not quite full white white smoke and now you can see we've styled this element and it is just surrounding the word another so our span element has a class of opposite and we change the color for the background and the text but let's see what we can and can't do with an inline element and so now let's go ahead and try to put a margin on the top of 100 pixels and you can see nothing changes we can't apply a top or bottom margin to a inline element likewise we'll try a different one let's go with height 200 pixels it doesn't change once again height cannot be applied and padding applies just a little differently so let's look at that and let's go with one rim and it looks like everything is as as expected here where we have a one rim padding top bottom left and right however if we go ahead and increase that let's say 4m look what happens it overlaps the above paragraph and we probably wouldn't want that so now let's apply the display property and we've talked about this being already as a default inline and then of course paragraphs default to block and many other elements as well like the main element we talked about however there is another option and that is inline dash block and let's see what happens when we apply that to our opposite class now our padding is still applied but it's not overlapping the other paragraph so it is now respecting the top and the bottom likewise if we come back and apply that margin and let's just say margin dash top it could be bottom as well but we'll just put 100 pixels for the top and that worked as well now you can see we have extra space here and again this is applying just to that span element so not to the full paragraph itself and now we could even add the height that we applied earlier that didn't work and we say 200 pixels and now our span element just got a lot taller so the inline block property value is kind of a hybrid here because we stayed in line in our paragraph this didn't create a new line like block would and at the same time it now allows some properties to be applied that normally wouldn't apply to the inline display so to quickly recap block level elements stack on top of each other and always create a new line inline elements do not stack on top of each other and do not create a new line block level elements automatically have a 100 percent width of whatever they are given if they're not inside of something that is limiting their width they will be the full width of the page inline level elements only take up the width of their content of course unless we put extra padding on them and then it has a little bit more width here because of that padding and then when we switch to inline block we get kind of a hybrid here where we can keep the content in line but we can go ahead and apply a top and bottom margin or a height and other things that typically only block level elements have so when would inline block be handy this could be handy if we were trying to turn a link into a button and sometimes people do style links as buttons and then you can of course have a row of those and likewise it could be something like turning a list into a row instead of a vertical list so it would be horizontal so let's look at an example of that and i'm going to go back to the index.html i'm going to select our paragraphs and press shift alt and the letter a to comment those out and then select our nav element with the unordered list in it once again shift alt and the letter a to uncomment that and now i'll save and now we see a basic list with three links over here to the right they say intro portfolio and projects something that we might use as a menu on a portfolio website so here we have the nav element and then an unordered list and three list items inside and then of course each list item is an anchor link so a hypertext link and those are inline elements however the list items themselves are block level elements and each one is taking up one hundred percent width of what they are given right now let's go back to the css and apply some styles here so i'm going to select these styles the paragraph and the opposite class and go ahead and delete those and save once again so we can start fresh and now let's apply something to the unordered list first and we'll start with a list style type and then we'll say none and that removes those bullets that we have after that you can see we're still moved over to the right so we do have some default padding on the list so let's say padding dash left and we'll just set that to zero and then we'll save again and then after that let's go ahead and say text dash align right well what happened to my css i've got an extra line in there you can see what happened now so we know we have 100 width and if we change the background color here we can really see that in action so let's say background color let's go back to our light gray and you can see we've got 100 width going on once again and when we set the text align right we sent all of our links or all of our list items over to the right and finally let's apply a margin of 0 to the unordered list as well and now you can see it pulled it up closer to the top of the page we could actually apply a css reset as well so let's do that and that will put everything flush with the edges of the page so we have margin of zero padding of zero and then box sizing will set to border box and save and you could refer back to our box model module where we covered all of this and setting a basic css reset but now you can see we are flush with the edges of the browser and our links are once again all to the right now let's go ahead and change this background color and let's just change it to black and save and now we don't see the links as well but we'll change that in just a little bit for the list items let's change those now and we'll say display inline dash block instead of their default of block and now when we save you can see they are all side by side in horizontal order instead of top to bottom as they would be with the block display now let's apply some margin between each one of them and what we can do here instead of saying top right bottom left as we typically would with the shorthand for margin we can just say margin inline and this will just apply to the left and the right so i'll say 0.5 rim and let's see how that looks that looks okay and we need a little bit of extra space maybe over here on the right so let's change the padding setting here we had padding left of zero for the unordered list and that's okay but maybe we just want to apply a little padding all the way around so maybe 0.5 rem everywhere on the unordered list top bottom right and left oh and that is just set to padding jack's left right now so let's go ahead and make that shorthand for padding and apply it to all four areas top right bottom and left now that looks a little bit better so what we need to do now is just apply some color and maybe some hover styles for our links so let's say link and then the anchor tag so this will only apply to anchor tags inside of the list item i said link list item in the anchor tag and now we'll say color we'll make them white and then we'll have a text decoration of none and when we save we now see the words in white with no underlines after that let's scroll for a little more room and we'll say list item anchor tag hover sudo class and once again list item anchor tag focus pseudo class and for that let's just change the text decoration instead of the color let's just go back to the underline style so when we hover over they now show as links now there are other display values that we could use and we're going to have separate modules on the display type of flex and the display type of grid and when we do that we'll learn how to complete our menu bar that might have something over here on the left as well but before we go there's one other value i do want to cover and instead of inline block block or just inline you might have a value of none and look what happens all the list items just disappeared so let's go ahead and change that back so they show up and maybe we want our entire bar to disappear and right now that is an unordered list so let's say display and none up here and now it's entirely gone and that is exactly what happens it completely removes it from the document now we would still see it over here in our html but as far as the browser is concerned when it interprets the code the unordered list is not there now we rarely want to use this and that is because it removes it from that document flow and that means anyone using assistive technology screen reader would not be able to read anything there there are other ways to remove something from being visible from actually being viewed on the page but still have it in the document flow where accessibility might be still available and so we'll cover that in the future as well but right now just know that display none is a possibility let's move on to css floats you can see i've got visual studio code open i have an empty frame for a page we have absolutely nothing in the body of the page and then the style page the css has an import of our roboto font from google fonts and we've only set styles on the body so far we've set the font size to 1.5 ram and we're using the roboto font family so quickly if i pull vs code over to the left you can see our page is completely blank i'll let vs code take up the full size of the page again and let's start by creating some elements in the body of the html that we can style so i'm going to start off with the div and give it a class of block after that we can just put in the word float for now because we will apply a float to it and then we're going to create some paragraphs so i'll use an image abbreviation here and type p for paragraph and then say times five then the greater than symbol lorem and 20 which means each paragraph will be lorem epsom which is just generic verbiage we can put on a page for generic text content and each paragraph will have 20 words so when i press tab it should create five paragraphs and there we can save now let's go back and look at our page and see what we have so far you can see our div has the word float in it and there's nothing remarkable about that div and then we see five different paragraphs here on our page so that's a good start to having some content but now we want to apply some css and explore what this float will actually do with the class of block so to give that example let's go back to our style and i'll hide the file tree by pressing ctrl b and now we'll be able to see most of our css here so let's style this block class that we created for that div i'm going to apply a width first and i'm going to set it to 30 viewport width units and then i'm going to set a height and i'm going to make that also 30 viewport width units now you might wonder why i didn't use percent but that wouldn't be the same i wanted to use the exact same units for the width and height and create a square and we'll be able to see that if i apply a background dash color and then set that to black and i save we now have a square that is 30 viewport width units wide and it also has the same height which truly does make it a square okay after that i'm going to go ahead and apply a color so we can see that word float and i'll make that white just the opposite so there's the word float now let's give it some padding maybe one rim of padding and there we have just a little bit of padding that pulls the word float out of the corner but now our div and all of our paragraphs are block elements and so they stack on top of each other but when we float this div element that we've created here it will take it out of the normal flow of the page and we should see our text wrap around this and you could picture this as being an image if you want to but whatever content we would float and we can float it left or right the text will wrap so let's create another class and i'll just call this class left and then inside of this we'll apply the style float and we'll say left and when we save we don't get a change yet because we haven't applied it to our html so let's go ahead and apply this second class to our div and now save and we can see the text has wrapped up around the div so now it's more like you're used to seeing in a newspaper where you would have an image or something over to the left or the right and the text would go around it but now notice this is flush it's right up against it we might want a little space there and we need to talk about how to do that because your first instinct may be to apply some padding or margin to the paragraph and i'll scroll for some more room let's just look at the margin left for the paragraph and say i applied 10 pixels look what happens it still is flush here you see it moved 10 pixels over here this float is not inside the normal flow so the margin is applied from the left over here and not where we would expect it to be at the left edge of our text and we can see that even more so if i do something greater like say 20 percent and now yes it moved this way over but it didn't move the text here at all so we can't really apply that correctly by applying it to the paragraph instead we can apply some to the actual block itself so let's do that and we can say well let's do it to the left because we might do it differently for the right so let's do it to our left class here so we would have a margin on the right side of let's say one rim so we should be able to see that and now that makes the difference that we wanted right here and also it makes our text once again flush with what would be our image or our div that we currently have here on the left now i'm going to highlight our left class and then press shift alt and the down arrow to copy it down and i'm also going to create a right class i need to select that correctly there we go it's a right class so instead of float left it will be float right but then instead of margin right let's put a margin left on it and i'll save but we don't have it applied once again to any div so we need to come back into our code and let's say after we've gone down three paragraphs we want to have one more so we'll say div dot block dot right and that should apply those classes and it did so now we can save and we have another div and it's floated right and of course it is after the first three paragraphs and we see that one two three and then it begins here with our fourth paragraph and it's floated to the right now i didn't put the word float in there let's go ahead and do that just to make them alike and this is the basic use that we would have to float things to the left or the right but there could become some instances where we want to handle this a little differently maybe we want to wrap this first paragraph and this div that i've floated to the left in a container and kind of highlight that at the top and then have the second paragraph start afterwards we might have to handle that differently or let's say we didn't even have the container but we didn't want this second paragraph to wrap and in the past it was handled a little differently than it currently is so let's create one more class and i'll show you something you may see once again i would say in more legacy code let's call this a clear class and then inside of this class we'll say clear and we can say just right or just left if you want to clear something that is specifically floated left or right but it's very easy to just say both and then it will clear both and you'll see what this does in just a moment here so what i need to do is come back and then after the first paragraph if i wanted to clear that the old way would be to apply another div to the page and give it this class of clear and just leave it empty and we would save and then you can see the second paragraph doesn't start until after this div so it is cleared and that allows us to go ahead and start the second paragraph after both of these but this could still be a problem if we had this in a container and i will show an example of that so let's apply a container to the div and the first paragraph and i'll just make it a section element and wrap it around those so i'll cut that closing tag and put it here after the first paragraph and save well i want the formatting it didn't do it for me tab that in and save and then we can style our section to make it a little more obvious what's going on i think i'll scroll up just a little bit more there we go and so now we have a section and inside the section i'll say background color and we'll give this a color of bisque which is kind of a neat color and after bisque let's go ahead and apply a border so we'll say border one pixel solid give it a flat black color and a little bit of padding one rim okay and let's save and see what we get well this looks okay right now i don't see a problem but what if we removed this div with the class of clear and save well still no problem let me shorten up this paragraph by several words and then see what we get and now when i save i just had too long of a paragraph to actually highlight the problem before but now when i say we can see the problem this float is once again not in the normal flow of the page so the container is only expanding based on the text content and when i had more text content it looked okay but you can really highlight the problem if you don't have enough text content to push the container down so we can definitely see a problem that needs to be rectified and that is because we don't want the container to just go halfway we want it to go ahead and contain the full item the full element that we have floated left or right so we think why not go ahead and put that div back in place that had clear well let's try that and see what happens i've got the clear div there now and you can see it clears the paragraph but it doesn't help the container so let's once again remove that div i'll just press ctrl z to undo those changes and control s to save so now the paragraph is coming back up and i will show two different ways to fix this one past approach that you may see in code is to set the overflow to auto but this is in more legacy code once again but notice it does work so i wanted to show that overflow auto is a possibility to go ahead and get the container element to extend all the way down and contain the full element that is floated either left or right however the correct current way as noted by mdn is to say display and then say flow dash root and if we save that we once again have fixed the problem so if i remove that save we have the problem i'll put the display flow root back in and the problem is fixed so this is considered the current modern way to fix this problem in the past floats were also used to create columns on a page but that was because there was no other method available and now with modern css we do have other methods available including display flex and display grid that i will be covering very soon in future modules but right now just remember floats are used to float things to the left and the right really any element that you want to and you can wrap text around it and then you can also use floats inside of a container if you want to but remember to apply display flow root to the container so the container contains the full floated element and doesn't shrink based on the text content alone let's move on to css columns you can see i've got visual studio code open here with just an empty frame of a page once again i've got the title of css columns nothing in the body of the html at this point and if we look at the style.css you can see i'm once again importing in the roboto font from the google fonts and then i also have a couple of styles on the body we're applying the roboto font with font family and we've set the font size to 1.5 rem and that's it so far so let's go back to the html and the first thing i want to do is create five paragraphs so i'm going to use an emmet abbreviation i'll type p times five and then i'll just say lorem 20 and press tab and we should have five paragraphs now so i'll save that much i'll go ahead and press ctrl b so we can see a little more i'm not going to wrap the lines as it would just clutter and of course wrap each one of these lines down just a little bit i don't need to do that right now what i do want to do now is add a section that will be a container for the first four paragraphs so we'll take this section and after the fourth paragraph we'll put the closing element right there the closing tag and we can save it didn't auto format for me so i'm going to select these and press tab so it comes over and now i've got the first four paragraphs inside of this section element as a container and then the final paragraph is outside of the section element i'm also going to apply a class here let's call this class columns i want it inside the quotes and now we're finished with the basic html so far so now let's move on to the css i'll click the file tree again go to style.css now with all of this saved i guess we could quickly look at it in the browser and we just see our five paragraphs over here so we're going to make some changes now and i'll drag vs code back over to fill the full screen as we apply the columns okay let's create our columns class so dot columns and inside this class i'm going to set a column dash count and let's set it to four columns so far and save and now let's go look at our code or our browser and look what we have here in the browser now i've spread it out a little bit so the first four paragraphs are in four columns and we can see of course this fifth paragraph that's not inside of that section element that has the class columns is not split into columns at all but it automatically split the first four and just as it would resize here as luck would have it with the browser there's actually one paragraph per column right now however i'm going to right click and choose inspect so we can open dev tools and resize this and notice what happens here we can scrunch it down and now it's not necessarily paragraph per column it just adapts to whatever the screen size is now we can change this as well so i'm going to go back to vs code and then we'll make a change here instead of this column count being just four let's go ahead and add a column width as well so let's tell it that our column width should essentially never be less than 250 pixels per column so that should change things a little bit now you can see we only have two columns even though we told it four it's going to add here to that width and never go below that now once it can support three columns of 250 pixels then it switches to three and it will go up to four columns if that's available to it however if not it will stick with three let me see if i can squeeze this just a little more to get all four columns to show now we're back to our four columns but as we resize the browser width it only supports what it can for the 250 pixels and once it can't support that it should condense down to just one column so that makes it very flexible as far as the design goes because if it can only support one column it will never make it smaller than that 250 pixels we set but if it can support two it does all the way up to the column number that we specified which was 4. i'm going to pull vs code back up and there's shorthand for this so we don't always have to type column count and column width we can just say columns and there we could specify 4 250 pixels and it would be the same so i'm going to comment these out and now save and we shouldn't really see any changes in our page because that should mean the same thing just in shorthand we can also provide dividers so this would be with the column dash rule property and here we can say we want three pixels and i'll press ctrl b to hide the file tree so we can see all of this but three pixels let's say solid and now let's just give some kind of color here i'll just go with that flat black and save and notice this column rule is just like when we provide a border and the values go in the same order so when i have provided a border in the past around any kind of element you have seen the size and then the type of border and then the color and that's the same for the column rule now let's see what it does to our page and here we see the rules between each column now and of course they will disappear when the columns disappear if the sizing dictates that and so once we get down to one column even though we've said column rule should exist it won't if there's only one column but if there are columns to separate that's when the column rules start to show up and this will once again divide up to how many columns we've created so if we say a max of four columns we could have up to three column rules and we can also provide some spacing between those columns so let's say column dash gap and i'm going to choose a larger value so we definitely see the spacing so three rounds and let's see how that spaced everything out now we only have three columns because we have some extra spacing so it wouldn't fit into the four columns as before but it does look a little bit better with that extra spacing between the columns and with dev tools open now is a good time to draw your attention to a problem that exists right here i'll squeeze this over so we can see a little more and i want to pull this down so we can see some of the html above now as we get into our columns section and you can see it highlighted on the page as i highlight the elements here in devtools notice we have margin at the top and the bottom of each paragraph we didn't use a css reset so far so those margins have not been set to zero and that's okay we want spacing between the paragraphs but notice here in this first paragraph we also have spacing above the first paragraph so it's not setting flush with the top as the other columns are and then as we come down notice each paragraph is going to have its own top and bottom margin but there's one thing to consider here we need to remove that top margin from the first paragraph but let's see if we can just remove it from all of the paragraphs and what happens notice our margin spacing between the paragraphs as we see between the first and the second for example just is the spacing for that one margin essentially so here we see it again between the third and the second we just see that top spacing but if i highlight the second we just see the bottom spacing and they seem to overlap let's also discuss what's going on there so we'll go back to the code and i'm going to set another rule here and we want to say just our paragraphs that are inside the columns container so we'll say the columns class and then p let's say margin dash top and set that to zero and save now we go back to the browser and our first paragraph is flush at the top with the others but notice our spacing between the paragraphs did not change and that's a good thing it automatically happens in css and i don't believe i've discussed this before but that is margin collapsing so it's not going to double up the margin between the second and the third paragraph just based on having a bottom margin on say the first one and a top margin on the second one however now we've removed that top margin but the spacing remained the same but previously it wasn't twice as much because of margin collapsing so that's a good thing and it's worth noting so we can actually just remove the top margin from each paragraph and not change the spacing of the others but it does fix the top alignment here making it flush with the other columns as we want it to now let's go back to our html and add another element inside of this file so we have a couple of paragraphs inside of our columns container now let's add an h2 and inside the h2 let's just say next topic just some kind of generic header here and we can save that now let's go to our style css and let's go ahead and style that header as well we'll once again be specific so we'll say columns and then any h2 inside of our columns container let's set the margin top to zero just like we did for the paragraph so there's not an issue there let's set the background color to that flat black 333 and then let's set the color to white which is fff as far as hexadecimal code goes then we can provide some padding let's say one rem and let's save and let's take a look now at our web page and we have our next topic right here but let's see what happens as we resize that looks a little weird we have part of the padding at the top of the second column and the rest of the header here at the bottom of the first column that's kind of strange we might not want that let's get some more room and drag it over and see if anything else weird happens well not with the room we have but as this resizing occurs strange things could happen but we can prevent some of those strange things by applying another property inside of our h2 so now let's say break dash inside and we'll say avoid we'll save that come back to the page and now as we get to our two columns we notice it's on the second column which may not be the best thing that we want we might want that at the top of the second column but it's not splitting the header into two different pieces with part of it at the top and then part of it to the right and once we get down to one column it's just the one header there now we can apply one other property let's bring vs code back up and here we could say break dash before and we'll set this to column and there's good and bad with this so let's look at this overall so now notice we're at the top of the second column and that's fine and as we scroll and we have two columns now we're at the top of the second column again which is what we want instead of being at the bottom of the second column as we were before the problem comes when we want to size down to one column notice what happens instead everything shrinks and we got three columns and that's not maybe what you would expect but this break before actually forces a column break so it forces there to be more than one column and the browser is trying to fit all of that in which is why it shrinks so probably not a great idea to use this break before column property if you know you're going to be shrinking your page down to that one column however the break inside with the avoid will keep your header that you might create or something else from being split between the two columns now let's go back to our html and here's the html file i'm going to remove this header for now i'll leave it in the code so you can see it there but we've just commented it out but what i do want to provide is a quote so let's provide a quote that we would have maybe something we would be highlighting on the page so here's one more paragraph and inside this paragraph i'm going to say where's my rug and then man which is course from the movie the big lebowski and then we can say that was from the dude who is the author of that quote now let's provide some things here that will make this stand out a little more so we can say class equals quote and we'll style this class and here let's go ahead and fill the page right now as we see this code so we can see the full quote here but then there's some other things we want to apply as well so i'll save this much and actually just as i filled the page i want to go back to the browser and now on the browser we'll go ahead and open up this page it's unicode dash table dot com and it lets us look up other characters like html entities that you may have learned about when you were going through my html course or one like it but there's also unicode characters and there's different way to provide there's different ways to provide these different characters so it says popular character sets we want quotation marks kind of the fancy ones so let's just go to this page full of quotation marks and you can see we want these opening quotation marks right here the left one i'll click on that it gives us several different codes we can use in our page so here's the html code for this opening quotation mark there's also an html entity here so we could probably use either one i'm just going to select this ampersand pound sign 8220 and the semicolon and that's going to be our opening quotation mark so i'll pull visual studio code back up and inside of our quote right here it looks like i've got an extra quotation mark there for the class okay our class quote is correct now i'm going to paste in that code and now we should have that opening quotation mark here to go along with our quote likewise if we go back to the page you can see they're saying with this symbol these are often used let's click on this other quotation mark and oh it just took us back to quotation marks so here was the opening one now let's get the closing one so we'll click on this scroll down and as you might have guessed it's just the next number instead of eight two two zero it's eight two two one i'll go ahead and select all of that again we'll go back to vs code and inside of vs code i'm going to expand this just a little bit so we can get to the end of the quote and after that we have got this wrapped in these fancy quotes with this html character that is kind of like an html entity but it's also kind of unicode in a way and this is just another way html handles these characters and we can put this in to wrap the quotes and there's many other symbols you could use and find on this website and one of those symbols that we want to put right here beside our author is a long hyphen so let's see if we can search for that above i'll type in long hyphen and we'll see what comes up well there's the hyphen minus soft minus not seeing it right now well maybe this one maybe not but i know what the code is so let me see if i can just search for that and it will come up it's eight two one two and here we've got the em dash is what it's called i wanted to call it a long hyphen and there was a copy right there in the search results but i'm just going to once again get the code here from the html code and this again is called an em dash so we'll go back to our visual studio code html code i'm going to put that right before the dude so we'll have that longer dash or hyphen before the author is attributed and now before we look at our html or before we look at our web page i'll save that and let's go to the style once again and let's style this quote class so we'll say quote dot quote actually and then we'll apply several things here so the first is a font dash size and let's put three rim now let's put text align center because we want this quote centered and now we can provide a color let's do something we'll adjust this a little bit let's do that flat black color again and now for the main thing that we want to highlight here is the column span property and we can say all so this will span all of the columns that we have on the page okay now let's go back and look at our web page and we see our big quote and it's spanning all three of the columns and we have a kind of our fancy quote symbols here that are wrapped around it as well and we have our em dash or long hyphen after are actually before the author and this is kind of like you might see in a magazine as well where they highlight a quote as you're reading the article but something doesn't look quite right does it we've got all this space underneath but no space on top that's because this is a paragraph that's inside of our section container and remember we set the margin top to zero for all of those so let's go back to our code and now that we're inside of this quote class let's set the margin dash top to to rem and go back and take a look and i think you'll be surprised at what we see there's absolutely no change so what's going on well let's once again look at our code and see the problem what we have here is columns the class columns and then an element columns p where we set the margin top to zero that is more specific than just having a class so let's go ahead and look at our specificity calculator and we can see how this is calculated so i'll put our first one here at the top and that is columns which gives it a score of 10 as a class and then p as an element so it's got a score of 11. and as you might guess if we were down here and just said quote we only have a score of 10. so even though quote comes after this column's p definition in the cascade it's not as specific so that margin is not applying what we could do is say dot columns dot quote and then notice we have a score of 20 so that would work let's go back and apply that in our code and i bet we see the margin change so instead of just quote we'll say columns quote save go back to our page and now we have a margin on top as expected so there's another learning experience about specificity now let's resize the page a little bit and we're going to see something else we might not like i don't like how this breaks our author down to the next line we've got the on one line with his long dash and then dude on the second line so we want to be able to control that break we just definitely don't want the long dash on the first line and then the author on the second eventually it kind of catches up but those breaks in between aren't what we want and we can fix that with css back in vs code let's go back to our html first and let's wrap our author in a span element which is an inline element and let's give this a class equal to no wrap and of course now we'll need to take i'm going to wrap the code here with alt z because we'll need to take this closing span and put it after dude right here so now we can save that and our html is taken care of now we just need to style our no wrap class so underneath our columns quote let's put no wrap inside of no wrap we're going to use the white dash space property and set that to no wrap and so now when we go back to our browser and we resize our quote should not break the dude our author should always stay on the same line including that long dash and that's exactly what happened it all went down to the second line at the same time so we're no longer breaking the dude with his long dash into separate lines and that's the way we want to style that so overall i hope this tutorial has helped you learn how to apply columns to your content on a web page the simple way really without even using flexbox or grid which will be covered in upcoming modules as well today we're going to discuss the css position property you can see on the left i've got visual studio code on the right i've got chrome and we're using the live server extension so any changes we make in our html or css today should immediately show up over here in the browser now first let's look at the html page that i have here on the left in visual studio code and you can see it's a basic layout and i'm really using more divs than i'm normally comfortable with all of these div elements they are block elements but they are not semantic they do not provide any additional meaning to a page and they don't really help accessibility at all so in a typical project i wouldn't use a lot of divs but they are good for today's example so you can see we have an outer container and this outer container in the browser is a dashed black border that outlines this container and then we have an inner container and it is a solid blue line here in the inner container and then inside of this inner container and you can't see them right now we have four other divs they all have the class of box but then each has an individual class absolute relative fixed and sticky and those are possible values for the position property and we'll look at each of those let's jump over to the style.css file you can see i'm importing in that roboto font as i have been in the last several tutorials for this css series and then i also i guess i have the lobster font here too although i'm not using it right now i've also got this css reset already in place with a margin of zero padding of zero and box sizing equal to border box for the body we're using that roboto font family and then we also have a font size of one and a half rims and then a min height of 200 viewport units so that means besides what you see here we've got another full page that we can scroll down to and we'll need that in just a little bit then we have the styles for the outer container already here you can see the dashed border it's three pixels we've got a width and a height set on it just for this example and a top and bottom margin of 40 pixels the auto for left and right centers the container and then we'll see something very similar here for the inner container of course the different styles just sizing it a little differently and the color and size of the border and then we have the box class that applies to the four divs that you cannot currently see you can't see them because their font color is white other than that they are a box with 150 pixels width and height and a little bit of padding in there okay with all of that said let's go ahead and style our first class and that was the absolute class so what we'll do for it is set a background color that's different than the others so we can tell them apart a little better let's just set that to a blue we'll use hexadecimal there and then let's go ahead and set the position but the first position value we're going to use is static and that is the default of all elements they're static just already when you put them on the page so essentially it's not going to change anything i just wanted you to see that value to know that's the default even if you don't set it so now let's go ahead and set a position of absolute and see what we get when we save it really didn't change anything and that's because we didn't set any other value when we set these values we need to go ahead and set a top left right or bottom we don't have to set all of them but it needs at least one to change where it's at so let's set the top to zero see what we get it moved it all the way to the top of the browser now what if we set left to zero now moved it all the way to the left so it's in the upper left corner so absolute positioning needs a relative parent and if it doesn't have an ancestor element that is positioned relative then it takes the initial boundary or the initial box which is essentially the browser window and so that's why it went up here to the top and then the left when we set that position but now we can scroll up and we can set a position on this outer container you see i'll set the position to relative and now look what happens to our absolute box it now has an ancestor that is positioned relative so this positioning is no longer relative to the browser window it's relative to this ancestor that has the position set to relative but what if we set the position to relative on more than one ancestor i'll do that here if i could spell relative again and i'll save and now you can see this is back where we started inside the inner container and that is because it picks the ancestor that is closest to it and so our box started inside of this inner container so with the outer container set to relative and the inner container set to relative it picks the closest one the nearest one and that is the inner container so we're back here now as you might have guessed the zeros are essentially the default choices there so if we save we don't really see a change from position absolute with the top and left 0 to where they are now of course if we change which ancestor it was relative to we would see a change as it would move to whichever ancestor it was relative to however we can put in other values so let's do something like 100 pixels and then we could also do left 50 pixels and see what happens and now it moved it's once again absolutely positioned but it's relative to this inner container and it moved down 100 pixels and it moved to the right essentially 50 pixels from the left that's how you want to read that and you would say from the top so that's a good way to read those from the top from the left so let's once again change the position relative and put it on the outer container only and save and now we can see the same thing we have moved 100 pixels and 50 pixels as we set right here okay i'm going to switch these values back to 0 to get our absolute box out of the way and now we'll look at the next box which is the relative one that we have inside the inner container so here we'll say relative for the relative class let's set a different background color let's go with red on this one and then after that we can save that much and we see it already after that we're going to say position relative and we already know that won't change anything by just setting that much but now if i were to say top and here say 100 pixels and then say left and here i could say 100 pixels also it's going to move 100 pixels from the top and 100 pixels from the left so much like we saw the absolute do when it was relative to its parent container and now relative here means it's going to be relative to its parent container already without having to define that relative on the parent so inside of here by setting it relative it's always going to be relative to its parent container let's scroll up for some more room and let's change that top by a few more pixels maybe 300 pixels and get our relative block out of the way as well and now we can pick our fixed class and here let's give this a background color of green if i did it with hex i don't like the bright color i get there so if i say green i get a darker green color so that's what i'm going with position is going to be fixed and here not absolute we just want fixed and then here we're going to say well let's just not put anything yet and we'll save and there we can see our fixed box but now let's say something like top and this will be 100 pixels and if i save notice now it just moved 100 pixels from the top and we can confirm that by removing our position relative here to make sure it's not responding to this outer container and if we save now we have our absolute up here in the corner but the fix stayed exactly where it was so it's only 100 pixels from the top and then after that what will happen is it will just stay right there even if we scroll so that's what it means to be in a fixed position so i scroll and that's why we have that 200 viewport unit height so i can scroll down to a second page our fixed block is staying in a fixed position the entire time and so it's out of the flow of the page just like our other blocks are but it is never moving even when we scroll the page and this is a good time to point out that the fixed block is over the absolute block right now that is decided by what element comes first and what element comes last in the html so if we go back to the html and i took this fixed div and i put it before the absolute div and now i save absolutes on top but that's not always convenient when we're working with pages to go and change the structure of the html so we can also do this with css if we want that absolute block on top we would just come over here and change the z dash index you might call that z but it's i call it z the z dash index and the default value is zero so that's not going to change anything but if we give it a higher value and we don't need to go 10 or 20 or 100 higher we can just go one higher and save and now our absolute block is on top of the fixed block but i can scroll and the absolute block goes away our fixed block is still there okay we've got one more left and that is sticky sticky is just a little different than fixed and that's because it will stay in its normal flow until it reaches a spot that you have defined so here we're going to say background color and let's just make this black and then we'll say position sticky and we can save and there it is and now we haven't put any spot essentially say a top where it would stick so right now if we scroll it just scrolls right off the page but we could say top 0 and save and now let's see what happens when we scroll i scroll our sticky block stays at 0 momentarily but it's running out of the container notice when the container that it is in reaches the end and begins to scroll off the page then the sticky block goes ahead and scrolls off the page unlike the fixed so now when we scroll back down it stays and so maybe we could push that down a little further or something but overall or i could make this a little longer but overall you see it stick at the top and then it moves again when the container catches up to it and scrolls off the page okay it's good to see all these examples but it's better to even put some of them to use and you will see how they're used in page construction so i've got a quick example coming up for that before we do that i want to go back to something we talked about a few lessons ago and that's how to make something disappear we covered display none and we covered the opacity where we could make something fade all the way down to being not only see-through but completely disappearing but i said both of those were not good for accessibility display none completely removes it from the page a screen reader would not read what we were doing opacity makes it invisible and it might not be the best way to do what we're talking about but what if we had something that needed to still be part of the document but we wanted it off the page well position absolute is great for that so i'm going to go ahead and comment out well we don't really need to comment this out i'll just change this value because we would take the left value for example and i'll set it to minus 10 000 pixels and save notice it's gone but it's still part of the document it's still in our html and when it's processed by a screen reader it would still be read say it was a paragraph or the label for an input and that's important to accessibility so often times when i need to remove something visibly from a page but i still need it to be part of the page for accessibility reasons i position it absolute and i move it say a random number here but minus 10 000 pixels is kind of my go to way off to the left where it will not be seen but it will still be red so i'll change this back but overall just remember that trick for taking something off of the page okay now let's move on to our second example so what i'm going to do is grab everything we see here from line 13 down to line 28 if i can get to the right spot line 28 and comment that out i do that with shift alt and the letter a in visual studio code now i'm going to grab the rest of the html i have here and uncomment it and i do that the same way shift alt and the letter a and now you can see i have a button element with a class of social and it just has this little rocket emoji on it after that i've got some sections one two three sections each one has an id one two and three inside each section there is a header with a class of blue header one header with a class of red header two and a header with a class of green which is header three then you can see each one has an h2 heading inside of it just to have a little bit of text one two and three as well and then there is a footer and inside the footer we have anchor links to those different parts of the page one two and three if you remember from learning basic html you don't just have to link away from a page you can link to different parts of a page with that anchor link and we're linking back to each id for each section so i'm going to save this now and we see the basic html over here to the right now i'm going to jump back to the css i'll leave all of this here because it won't hurt anything but i'm going to put in a dividing line and a reminder for you that will be available in the source code that says remember how to make things disappear that we just talked about now after that we can apply some new styles to what we now have in our html but i'll leave these old styles in there as well as well as leaving in the commented out divs from the first part of this tutorial okay now we're going to take each section element and we're going to set the height of each section to 100 viewport units so now you can see on the first page we have header 1 and the rocket is here too then we have a second page with header two and a third page with header three and eventually we have a footer with three links in it as well okay let's scroll up a little bit and then after this section we can go ahead and define a let's say a blue clasp because we need one for each color that we had this would be background color and i'm going to choose blue here now at the end of this line i can press shift alt and the down arrow to copy down a couple of times and then i'm going to change this one to red and i'll change this hex color to red and then this last one will be green and i'm going to change this to the keyword green because i like that green just a little bit better so now i'll save and we can see the header colors have changed for each page after that let's put in some styles for the header and the footer they can share these styles so we have header comma footer and it will apply to both so i'll say color and we'll set the text to white then we'll set the text align to center then let's set the height of the header and the footer both to 100 pixels and let's pick a big font size so let's go with like five rims here and save and we can see that got very big for each one okay time to scroll just a little bit more and now a couple of styles just for the header we'll say position this will be sticky or i should say headers because there is more than one header element and then the top will be zero so that is set for all three header elements that we have on the page now now we'll set some style for the footer say background dash color let's make this one black now let's set the position to fixed and this will give us something to talk about and compare to sticky and we'll set the bottom to zero and we'll see what we get with that okay so what we have so far is a header one now we still have this rocket button above and then it's stopping at the top notice we scrolled now the word one disappeared but header one stops at the top here comes header two now it stops at the top and the text scrolled on up and now here's header three now our bottom here it looks like we got maybe a little bit of a large font issue there so let's pull this font size five out of the definition for both and let's just put it here in the header if we save now we get more what i wanted to see down here and notice since we used position fixed it pulled it out of the normal flow of the page what would normally be a block element and span the full width here is not spanning the full width now so what we would need to do if we were going to use position fixed is set the width to 100 percent and then our footer would work but there is a fix also even though it's not really going to scroll or move that we just always want it to be in place we could just set this to position sticky and set bottom to zero and it's always going to be there so now let's just set a little bit larger font for the footer as well so let's say font size maybe three rims and all the links will stay okay that looks good so one two three links and we have each of our pages as well you can see how this is coming together already as an example let's scroll down just a little bit more and under the footer i'm going to put a visited pseudo class here for the links and say that's going to be white so our links there in the footer change to white much easier to see and now our rocket here at the top our social link so for that we'll set the background color once again and here let's use a royal blue after that we'll set the color to white and let's say a font size because it's a button and it will not already just inherit everything that we would normally inherit in paragraphs when we set that font size at the top of the page so here we're just going to say inherit so it catches up to the font size of everything else padding of one ram again now we'll set a position of fixed and we want this to stay in the same place all the time so let's say 30 percent from the top and then the left is going to just be zero now this looks more like a social button and maybe you're used to seeing several buttons over here for different social media but it should stay in place as we scroll so let's check it out and it sure is it's staying right there as we scroll past each one of our pages so we have header one two and three now if we wanted it always on top we could go ahead and set that z index and set that to one and now when we scroll we should see it on top of each header as goes by and we do so an ugly example but an example nonetheless where each page section say this is a single page application or a spa if you will each page section has its own header and sticky allows those to scroll up and then stay in place until the content for that particular section is gone and then we have our social media button over here with the rocket to the left and at the bottom i showed you how to use fixed or sticky and you've got links to each section okay now let's check out these links so if i click three it instantly shows three two we're at section two one we're at section one there's one more thing we can do that will make that look just a little cooler if we want to when we are choosing those different sections of our single page application and we need to put this back up here i'll put it at the top of this new example but it needs to go in the root element this won't work in the body element but we can set the scroll dash behavior to smooth and if we save that now let's click number three and notice how we get that little scroll action that's kind of nice so that one setting makes that scroll go from instantaneous to just a smooth little scroll between the sections so i hope this example has showed you how you can apply the position property with css and i hope the previous example gave you some pretty good differences between all the different values that you can use let's move on to css flexbox fundamentals we'll be learning the css properties that you'll use most frequently when working with flexbox you can see i've got visual studio code here on the left and it's in a smaller window today i've got a larger browser window here on the right and i'll quickly look at the html file as well that we're starting out with and this will be available in the source code that you can download but we've just got six divs right here and all of them have a class box and then they each have their own number as we see on the page one two three four five and six divs are block elements and so they're spanning the full width of the container and they're stacked on top of each other and you can see we have a main element with the class container as well okay back inside of our css file we're starting out by bringing in the roboto font from google fonts we've got a very basic css reset here at the top on the body we're setting up that roboto font we've got a min height of 100 viewport units so it's the full screen or the full browser window and then we've got padding of 20 pixels so you see it pushing down our main container from the top that 20 pixels here it's also on the left right and bottom it's just harder to see that and then we have some styles on the container so it's got a max width of 800 pixels a minimum height of 400 pixels margin in line set to auto so it is centered horizontally here and we should have the same amount of space on the left and the right we've also got a black border going around the main container but you really can't see that right now because the contents are black as well and then the boxes they have a min width and min height of 100 pixels and remember the boxes are the six divs it's got a background color of black a color of white that we see on the numbers font size is two rims so the numbers are a little bigger and just a little bit of padding of 0.5 rim and that's what we're starting out with for our code but we're going to apply flex and the area that we'll apply that to first is the container we'll make our container a flex container and as soon as we apply flex i need to spell display properly things will change on the page so i will save and now we see some big differences over here we've got one two three four five six going horizontally instead of vertically and they're not stacked on top of each other so the divs are a min width of 100 pixels so they're about 100 pixels wide each and then their height is filling out the full 400 pixels we have for min height on our container you can now see the border over here on the right side of the container at least but they are now considered to be flex items and so they're starting out at the position flex start and that's where they default to in this alignment so they're just all over here to the left so let's look at how we can align these horizontally first we're going to do that with the justify content property and the place they're starting is called flex start so we'll say flex start and yes i'm already wrapping the code i pressed alt z and visual studio code to do that so we don't see any change but what if we switch this to flex end and save well now they're all over to the right instead of being all the way over to the left likewise we can set this to flex center and now they're all in the center you know let's go ahead and add another property here called gap and we'll set this to one rim and now look at what happens we get a one rem gap between each flex item so that helps us see each individual one just a little bit better now continuing with the justify content there are some other good values worth looking into center is often used but there's also space around and now look at that now this isn't used as often and maybe you can see why we've got some space between each one but look the space at the edges before the end and beginning of the container aren't quite as big and also if we remove the gap now at this point we should still see that space around evenly space everything out except at the beginning and the end so what if we did the other one that we saw space between well now there's no space at the beginning and no space at the end but it's evenly spaced between all of the flex items and then there is a little newer value that is much better to use i think it was probably requested and that is space evenly so not only between the items but also at the beginning and the end we have evenly spaced the items throughout the container okay i'm going to change this min height on our boxes to a height of 100 pixels so we can clearly see each box and some space in a vertical way because now we're going to align the items vertically as well so we use justify content for horizontal as things are currently set to a row and that's why we use justify content for the horizontal now let's go ahead and align the items so this would be the other axis and that's going to be vertically so if we align the items to flex start they're where they are by default right at the top but likewise we can say flex end and now all of the items are at the bottom as you might guess we could say flex or align items center and now they're centered vertically as well now we don't have the other options with the line items like space around space between because if you think about it it's only one item at a time when we're aligning the items horizontally here we had six items in this row but if we look vertically we've just got one item for each alignment so that's why we don't have the space options now we can change the direction as well so let's look at flex direction and by default we're in a row so we could say column and now if we save we've got all of our blocks stacked once again as a column and remember i removed that gap that we had so there's no longer a space between them and they're also taking up the full height of our container remember our container has a min height of 400 pixels but we've got at least 600 pixels worth of divs right here so they're filling this up so there's no extra space to space out as well now if we go ahead and change something let's change the align items and we'll see if you think we're going to get what we get i will save and now everything's to the left because our align items became the horizontal alignment again just one item at a time instead of all six all six are now on the vertical alignment so by having flex end they will all go to the right and of course we were back at center and that put everything in the center so if we change our justify content we not might not see much of a difference right now because we're taking up all that space so if i said flex start for example it didn't really change that's because we're eating up all of the space of the container already so there's no real change to notice when we have this set with 600 pixels inside of a container where we're taking up all of the space but if we change this to row now we'll see our center where they're all together once again with no gap whatsoever if we wanted a gap we could put our gap property back in and say one rim and now we have that one rem gap between each one of these but they're centered now of course if we change this back to space evenly we might not want that gap property at all now since we have the flex direction property in here there's more that we can do than just row or column what about row reverse and if i save notice now six that was to the far right is now to the left we reversed the order of the elements here so row reverse is an option and as you might guess column reverse is also an option now let's look at one other property here i can leave the row reversed for this for now but what i need to do is drag this all the way over to take up the full screen and open up dev tools and once we have devtools here we're going to notice something as i resize the window the flexbox row our row of boxes it's really not changing it's outgrowing it's not resizing or shrinking to stay inside of the container or the page so that is considered an overflow so there is a setting for that let me bring up visual studio code again and the setting that we could use is called flex dash wrap and so we would want to set that to wrap and now if we save and we have our dev tool still open in the window you can see it wrapped into two rows and we have it reversed now you might be surprised at this because 6 isn't at the top now but our rows have reversed so 3 is to the far left and 1 is to the right 6 is to the far left of row 2 and 4 is to the right now we could change this back of course to row see everything in the order that we would normally see it in one two three four five six and then there's also shorthand that we could use instead of flex direction and flex wrap and that would just be called flex flow so let me just select both of these and now we'll have flex flow and then the first is the direction so we'll say row the second value is wrap and now by default you noticed our row did not wrap so the default value is no wrap but we want it to wrap so we'll set that and now nothing should change about the page the way we had it see if i can resize just a little more here and yep we've got wrapping of the rows as it needs to and it will even get down to just one column and now we'll bring it back to two columns or three rows is what we should consider that since we have it set to rows and there's again back to two rows and still two rows with this width because we've just got one square that carries down i'll bring it back to about even here and now that we've got that this is shorthand so remember the first is the flex direction the second is the flex wrap with flex flow okay there's one more property to consider on our container remember we're putting all of these properties on the flex container right now that i've outlined here with our one pixel black border i'm going to scroll just a little for some more room here underneath let's put align content now this aligns the rows so you can see by default we have two rows and they're spaced out here there's some room between them now this will take values just like justify content but it's aligning the row so we'll put in flex start first and if we save notice both our rows move up to the top likewise flex end move them both to the bottom and flex are not flexed just center has them both in the center so that wasn't the default either what about space between that we could also use on justify content yep it puts one on the top one on the bottom space around so that's a little different as well and then space evenly that we might like if i could spell evenly once again and save and yes that changed the alignment just a little bit as well okay now we're ready to move on to the individual flex items because we can also set properties on the flex items instead of just the container and that will also change how flexbox handles the layout so the first thing we can do is apply some of the things we learned from above let's go ahead and make each one of these flex items a flex container now once again we will be applying properties as a flex item soon but if we make these a flex container then we could go ahead and display those numbers centered right in the middle of each box so if we say display flex justify content center and then align items center and save now all of our numbers are in the middle of each box and yes as you might guess you could use these three properties to center any element inside of a container or you could center an element inside of the body which would be considered a container the body element of a page so now you essentially know how to center something in the middle of the page if you want to okay now we have a few properties to look at four flex items again these three properties made each item a flex container of its own but they are still flex items inside of the larger flex container as well so what i want to do besides create some extra space here is go back to the html i'm going to select the last four divs there that have the class box and i'm going to comment them out for now by pressing shift alt and the letter a and then saving and now we'll just have two divs with number one and number two that we can work with in the css so before we put a min width on each box a min width of 100 pixels and i'm going to go ahead and comment that out as well again shift alt in the letter a and now no width will be set and you can see they're only getting the width of the content essentially here on the page right now but we can set a property called flex basis and you can give that an absolute value or a percentage if you want so what i'm going to do is give it three well now let's go with 100 pixels again just to compare to what we had so if we'll save now that's essentially giving it a minimum width right now now that could change it it's not the same as min width but that's essentially what it's doing in this case and now another property we can provide is called flex dash grow and we'll set that to 1 and that's setting this the same value and it's a unitless value but we're setting the same value on both boxes which is essentially saying if they need to grow to fill out the page they will grow the same amount so if we save you can see now our items both grew and they are filling out the page they do have that gap in between but other than that they grew as much as they needed to to take up the rest of the container i'm going to scroll up just a little bit and we're going to use a pseudo selector to select just one of these elements now so i'll say inf i'm sorry not inf i need the class first and class was box and then it's in child and let's select the second element here and let's override that flex grow and set it to two so now this second one should take up more than the first but it's not going to be double and i'll tell you why notice it did grow more than the first but they both have a flex basis of 100 pixels so what we're telling the elements to do here with flex grow is after the 100 pixels so each element gets their 100 pixels then whatever is left the one that has flex grow 2 is going to get twice as much of that extra space as the element that has flex grow 1. so it's saying whatever space is left you take two for every one that i take essentially now the other one to consider is flex shrink now before we get to flex shrink notice we currently have flex wrap still set so once they get to where they can't fit in that 100 pixel size they essentially wrap down to two rows here with our current setup we're going to have to really remove that wrap setting so we can see what flex shrink does for us so i'm going to select grow here ctrl d to select the second grow and then change them both to shrink so now we have flex shrink in place i'm going to scroll back up to our container and instead of wrap i'm going to set no wrap so now with the larger value here of shrink 2 our second box is set to shrink more than the first box and this might be easier to see if we make the boxes larger as well so let me come out here as far as i can for the page with dev tools open and maybe set these to let me try 250 pixels and see if that fits inside the screen we have yep so that works right now they look like they're basically equal size but as we shrink the page down we should see the one on the right and we do number two is getting smaller than number one so that is because number two has a larger value of flex shrink than number one so it's the same concept as flex grow except now we're shrinking and that's preventing the overflow out of the box that shrinkage is what that does so i wanted to eliminate the wrap or it would go ahead and wrap instead of shrink at some point so there we go for flex grow and flex rank flex basis is giving that size basis but notice over here we are now shrinking below 250 pixels here for number two so just like flex grow lets something extend above the basis flex shrink lets something shrink below the basis so either way now that we've covered all three of those different properties we can put all of them into a shorthand as well so here with the 250 pixels i guess i'll keep that we can just say flex the first value is grow the second value is shrink and the third value is basis so we could do that remember we could also put something over here like a percentage let's say maybe 40 percent see if that works out for us that's about the same and then we could do the same here so we could say flex two for grow two for shrink and forty percent here as well now when we save they look the same size but if we grow number two is going to get a little larger than number one and if we shrink number two is going to get a little smaller than number one although they're both shrinking quite a bit right there and that could be because i'm using a percentage as we get down it's still just taking up 40 percent let's go back to a set value an absolute value we should be able to see this example just a little bit better for the shrinkage so number two gets smaller than number one yep it was because i was using that relative 40 before so when it grows number two still gets a little bit larger let me close dev tool well if i close dev tools i won't be able to pull it over at all but number two is larger than number one here it's just a little harder to see maybe if i change the absolute value again to 150 pixels yup number two got even larger there but then as we shrink it down number two does get smaller than number one okay with that complete i'm going to go back to the html and uncomment those other four divs shift alt and the letter a once again to uncomment after we highlight them now you can see number two shrank more than the other divs because we have it set up to shrink more if it needs to right here with our nth child so we could remove that or we could just leave it for now but there is another property i want to cover and it won't impact it so i will just leave that and this would be order so let's go ahead and change the order of this second child as well and let's say order is going to be 4 and save now look what happened it has the highest number so it went to the end it didn't go to where the fourth element is it actually went to the end however if we say order zero it's going to be right back where it was but if we want it at the beginning we could say order minus one and now two is there now if you are using this order property on individual elements and then you're also using something like row reverse that we had available up here and let's change this back to wrap as well and now if we switch this to row reverse you might be thinking you were going to move number two to the very beginning but we didn't we moved it to the right and it's to the right of the first row and that is because we reversed it so essentially it was here at the beginning and then we reversed the row so if we went ahead and set this back to its normal position with zero then we would see it's in the middle because it would normally be one two three and that's three two one so that would just be the same but we that is all because we have row reverse at the top so minus one would take it to the right instead of the left likewise a larger number say one totally switched it around and now it's down here at the bottom left and that is because of row reverse again so if we go ahead and remove the reverse up here it may be where we would expect it to be and that's at the very end of the list now because all of the rest of these would be where they were placed essentially with a value of zero so that one makes it a larger value than all of the rest of them so we would give it 0 to put it back in place a higher number above 0 to put it at the end and a number like -1 something lower than 0 to put it at the beginning we've covered a lot of flexbox properties today and we will be building some things with it in the future but right now i think the best way for you to get some practice with it besides just playing around with it in your own html and css is to go to this website called flexbox froggy and it's got 24 challenges to help you learn flexbox and if i expand it out i think it looks a little bit better in the full screen there we go and you can work through these 24 challenges and learn how to place the frog on the lily pad with flexbox and there's some good challenges in there and it will get you thinking about the different ways to use the different properties that we've just reviewed for flexbox let's learn about css grid layout fundamentals we'll be learning the css properties that you will use most frequently when working with grids so for starter code we've got html here and inside the body we have a main element with the class of container and we have six divs labeled box one two three four five and six by their content they all have the same class box if we look at the style that is currently applied you can see we're importing in the roboto font from google fonts we have a basic css reset inside the body we are just setting the roboto font and setting the body to a min height of 100 viewport units and then we have the box class for those divs background color of black a white font color and font size two ram padding of 0.5 ram and that's all we have to start so i'll drag vs code over to the left and we're using the live server visual studio code extension so any changes we make to the css we should see immediately here in chrome on the web page so here are our six divs now we haven't set any size the main element is a block element so it automatically has 100 width and then so are the divs so they're stacked on top of each other and all six of them have a width of 100 percent so they're filling up that main element we're going to cover several different ways to apply grid to our page into these divs so let's start out by styling that container class that we have on the main element and we'll say display grid now instantly when we do this and save we don't see a change but all of these divs instantly become grid items now within the grid after that the quickest way to apply a grid is to use grid dash auto dash flow and you can say row which essentially leaves it as it is because they're stacked on top of each other which now makes six rows or we could change this to column and we will have six columns one for each of the six divs now many times we want more control than just setting the auto flow to column and letting all the columns be defined just automatically like that so let me go ahead and remove grid auto flow and in its place i'm going to put grid dash template dash whoops there we go dash columns that's what i want and now we can set the columns and the width of each now notice i'm wrapping the code so it will wrap to the next line but i'll say 200 pixels then i could say 100 pixels and then i could say 200 pixels and when i save we now have three columns and you can see the first column is 200 pixels the second is 100 and the third is again 200 but we don't have to use absolute values like pixels we can use fraction units which is a unit that's specifically used with css grids so let's say we've got two fractions for the first column and then one fraction for the second and one fraction for the third now when we save you can see it used all of the available space but it made the first column twice as big as it did the second or the third call and we can also mix so we could say 200 pixels and then one fraction one fraction and you see our first column's 200 pixels then the next two columns since they're equal both have one fraction a piece they're splitting the available width that is remaining and so they're eating up all of that so it still has 100 width for the row but the five and six here or the two and three are much wider than what we see for the 1 and the 4. and now something very useful instead of specifying every column especially if many of the columns have the same value you can use a shortcut for that and so we're here we're going to say repeat i could spell repeat and let's say we have four columns and each one is one fraction and now when we save you can see we have four equal columns each being one fraction and then when we get to the second row that is automatically created by grid we've got two columns here because we only had six total grid items so a grid can have empty space and that's what we have here to the right now while this value does not always have to be equal it does have to be a pattern so we could say instead of just one fraction let's say we start with one fraction and then the next column is two fractions and instead of repeating four let's just repeat this twice because it's going to repeat this pattern so with this pattern we're going to have four columns because we've defined two different columns here with the pattern so when i save you can see the first column is one fraction the second column is twice as big two fractions the third column again one fraction and the fourth column following that pattern is twice as big with two fractions now while we've defined our columns here we really haven't applied anything to the rows so everything about the rows is currently implicitly created by css grid we haven't explicitly defined anything for those rows but let's go ahead and do that and to do that we'll use grid dash auto dash rows and let's say 200 pixels to start out and you can see now each row became 200 pixels tall but once again we're not locked into just using 200 pixels here with grid auto rows so we could say min max which is a function and this lets us say the minimum first so we'll say a minimum of let's say 150 pixels tall and then we'll say auto for the max so it could allow it to be taller so now both rows are essentially 150 pixels tall but we have auto here so if our container was taller right now we've got 150 and 150 so that would be a total of 300 but if our container was taller this auto would let it grow so let's set a height or let's set a min height i like that better let's set a min height of 400 pixels and save and now you can see they got taller they should be 200 each so 200 height on the first row 200 height on the second row and that's because of this auto but they will not get smaller than 150 pixels a piece per row now while i'm giving this example of grid template rows and grid our grid template columns pardon me and grid auto rows you should know that the opposite also exists so you could have grid template rows and you could have grid auto columns so i'm giving one example and i'll let you play around with the opposite of those now what else we have are gaps between the rows or between the columns so we could define a row dash gap and we could set that to 1m and save and you can see we now have that gap between the rows likewise there is a column dash gap so instead we could say column gap and save and now we have one em as a gap between each of the columns now these spaces are essentially called gutters that's the space between the cells so it could be a column gap a row gap or we could just define it as gap and as you might guess gap combines both and it will define the row first so if we say row 1 em and just to show the difference we could say 0.5 em for the column and save and you can see the column gap is smaller so you can define each of those separately many times we want them all to be the same and we just leave it all at one size and while i've got em there i kind of want to make that rim instead so i know i'm going back to my default font size there okay now let's look at the individual grid items which we have applied the class of box to all of them so let's use pseudo selectors to just select the ones we want to change and i'll start off with the box class and then i'll use the pseudo selector first dash child and after first child i'm going to set the background color first so background color there we go and i'll make this blue we can save and make sure we have selected the correct grid item that first child and after that let's go ahead and define how many columns this child takes up and this is based on the lines of the grid which i will explain after i set this definition so let's say grid dash column yeah there we go column then we say dash start and we'll start at 1 and then we'll say grid dash column dash end and let's end at four and now if i save well that looks way different doesn't it so what we have done the first line is here on the left hand side of the grid the second line is here when we get to the second column the third line is here when we get to the third column and the fourth line is over here after the third column and before the fourth column and so you can see we told it to start at the first line and end at the fourth line so it really spans the first three columns we can do the same with the row so let's say grid dash row dash start and we'll go ahead and start again at one then we'll say grid dash row dash end and let's end at 3 and save and see what happens when that happens we took up two rows so the starting line was at the top and then the second line was between the first and second row and the third line is between the second and third row so when we told it to stop at line three it stops before the third row now we can see this better with dev tools so i'm going to drag our page over so it takes up the full window and then i'm going to press ctrl shift and the letter i to get to dev tools and then i want to go to elements i believe yep and i'm going to drag this up and no we don't need the console let's look at layout there we go so i don't need to drag that up i need to bring this down maybe i can close that there we go so now we're in layout here not styles not computed but layout and we can scroll up and we can overlay the grid on our main container and look at it in the browser so now we see this and the lines are labeled so you can see one two three four likewise at the top we have one and then two and then three coming down so for the row we start at one and we end at three for the column we start at one and end at four and you can always do this in chrome dev tools just make sure you open it up go down to this second area here and not styles not computed but choose layout and then you can go to grid overlays and there are some other things that you can apply as well it should default to show line numbers and that's what you definitely want when you see the overlays okay with that said i'm going to close this i'm going to drag our chrome window back to the right so we can see our code and let's apply just a little bit more to this grid i'm going to scroll up for just a little more room and i'm going to show you what i do instead of typing all of these out because this gets to be a little bit much so instead of grid column start and end and grid row start and end i would type grid dash column and then i would specify start at the first line then put a slash and end at the fourth and if i save you can see that's what happens likewise i can do that with grid dash row and say start at the first line and at the third line and save and we're back to where we were with fewer properties as long as you understand that these are shorthand and this essentially is the starting number and the ending number for both of these properties let's go ahead and select one more of these grid items so once again use the box class and now i'll use nth dash child and we'll select the second item now for the second item we'll change the background color once again and i'll make this one purple so it stands out and we save we can see that it is now up in the top right after that we'll come down to the next line and let's put our grid dash column and let's say it starts at the first line but ends at the fifth and that should make it span the entire row or the entire container if you will so when i save that made a big change right there then let's use grid row say grid dash row let's have it start at the third line and end at the fourth line and when i save you can see that made some changes too now instead of three and four being below it they came back up here by default in the grid so again that's implicit the grid is calculating where to put everything that we do not explicitly tell it to and now just like flexbox where something that was a flex item could also be a flex container we can do that with grid too so we can nest a grid inside of a grid item so i'm going to take this first child and put display and set that to grid and now inside of that i'm going to say align dash content and just to change it up here i'm going to say end to begin with and we save and look what it did it took the number one down here to the bottom so it aligned the content to the end as you might guess you could choose center and you could have start as well so what i'm going to do is say center and then after center i'm also going to say justify content and we could say for that it could be start and if we save you can see that's to the left and end all the way to the right and if we say center it should be right in the middle so now we have centered both vertically and horizontally so that's how you can center with grid but we can shorten this up by using the place content shorthand and then we could say both properties so we could say end and center and i'll get rid of these other two and you'll see what happens the first one is the align content so it's at the bottom but then horizontally it's centered because that is the justify content and this is the align content but if we just put one value it takes that value for both so we can just say place content center and center anything we want to inside of a grid so now we've looked at how you can quickly use auto flow to create a grid or how you can place grid template columns and rows and then assign different starting and ending points to put the grid items basically anywhere you want them in the grid but there is another way to set up grids too and that is with named grid items and grid template areas so let's do that now but we'll continue to keep this on our page as part of the page so i'm going to go back to the html and i'm going to drag visual studio code back over to the full window to start out okay we want to add a header element first and it's going to have two classes we'll give it a header class and then just an el class for element i'll put an h1 element inside the header and i'll just say header for that after that we'll have our main element then we'll have an aside element that is going to have a sidebar class and also the el class inside the aside element i'm going to use an h2 and we'll just say sidebar inside this h2 we'll do much the same for the footer so a footer element with a class of footer and a class of el for element and then inside of that we'll use h2 and we'll say footer as well so let's save our html and you can see we've now outlined more of a traditional page with a header a main area and a side and a footer i'm going to jump back to the style page and drag visual studio code back over to the left and now you can see this on the page we've got a header at the top a sidebar and a footer they're not much to look at you can just see the text not really an outline of the elements at all they are block elements so they are expanding 100 across the page right now i'm going to scroll all the way back up and we're going to make the body element of the page a grid container so we'll start out by saying display grid and then we'll say grid dash template dash columns and let's set this to repeat and we'll have nine columns and we'll use one fraction for each column so let's save that and boy did we see some changes on the page this is going to drastically change from here though as well so now let's say grid dash auto dash rows and we'll say 75 pixels and then we'll say auto and then we'll say 75 pixels again and let's save and that didn't change too much but it will here in the near future because we're going to say grid dash template dash areas now this is where we can define names of our items on the page but we're also going to have to apply these to each item we're going to call our header hd so i'm going to tab in just a little bit and this would be hd now we have nine columns and this is where we can really visualize our grid and i may need to pull visual studio code back over to get some more room but i'm going to type hd nine times once for each column so there's two three four five six seven eight nine yep i'm going to go ahead and bring visual studio code back over and then once we have the full page we'll be able to visualize this better and then we'll come back and look at our browser afterwards so now we've got main which will be named mn i'm going to use it and we're putting it in for each column but when i get to the last two i'm going to put an sb for sidebar that will be to the right of the main element and then as you might guess at the bottom oh we need quotes first i'm going to put ft for footer and now this is kind of visualizing how our page is going to look this is going to be the header this is going to be the main area the sb will be the sidebar and then the footer will be across the bottom but with all of this it won't apply yet because we haven't defined those areas we haven't really named them on the items yet i'm going to save this much and now let's scroll down and define the rest of this so after the body definition let's go ahead and define that el that we applied the class that we applied to these new elements and we'll give them a background color of rebecca purple just a little bit different than the other purple we used a color of white we'll set each one of these to a display that's grid and we'll just center the content that we put in which were essentially the labels okay after that we need to go ahead and identify each class that we applied so we'll have our header and this is where we can define our name so we'll just say grid dash area set that to hd is what we have in our template for the header okay so now let's do the same for the sidebar so we'll say dot sidebar because we have a class for that this will be grid dash area this will be sb but let's go ahead and color the sidebar as well so background color here is going to be blue and then we also have a footer so we'll say dot footer for the class and here we'll say grid dash area set that to ft so now we should be good except we haven't named our main area yet so you can see everything else in the grid so let's just come down to our container and that is the main element and here we'll put grid dash area and we'll name it mn for main and save now let's go ahead and pull visual studio code back to the left and see what we have well that looks pretty good we've got our header across the top we've got our sidebar on the right we've got our footer at the bottom and here is our main element the container that we were previously working with that still has our grid so now this is a nested grid and then inside of this nested grid we created this grid item and made it a grid so we could center the content so it's nested once again i think the only thing i may want to add would be some space for our grid that's on the body so after we've defined this and you can see it's scrunched now with the lines wrapping but here i'm going to put a gap once again say one rim and so now well now i have an error because i didn't put a semicolon at the end of our template areas which is very easy to do so let's save that bring it back and now i'll say gap and one rim and now we can see this gap now it pushes our page down here just a little bit when we did that so we might need to change that resize something but overall we've got a gap of one rim between the header and the main element and the sidebar once again we see that gap between the sidebar and main element and footer and then we see that right here with the column as well so let me drag this over to take up the rest of the page and once again i'm going to press ctrl shift and i to open up dev tools we're going to look at the layout scroll up and do the overlay here so we want to overlay the body now and now we see the body has nine columns and we can see each one of these columns defined but here's the only one that we really see the gap on for the column which is right here around line number eight now we do see the gap here around line number two for the row and then once again around i can see a line number down here but right right here as well no not right here here it is line number three down here between the footer and the main element as well so we had a similar sized gap here inside of our nested grid which was throwing me off so we could change that as well we could change pretty much anything we want to so for that let me go ahead close the dev tools just to get everything to fit a little bit better let's bring this back change our gap to 0.5 ram and let's also go ahead and change the size we're using here from 75 and i'll select both of those to 50 pixels and yeah it's fitting on the page a little bit better there's no scroll up or down now and we might even just want to have a column gap instead of a row gap so if we save and do that you can see now we've got a small footer a small header and we have this small column gap here and it doesn't match the column gap inside our nested grid so there could be other styles we want to change and play around with but overall i hope this has helped you see how grid can be applied in many different ways and give you a good start and much like flexbox froggy that i recommended at the end of the flexbox module let's go ahead and look at grid garden which is a game that will help you learn how to use css grid as well i'll link to this in the description it's at cssgridgarden.com but once again 28 different challenges here that will help you master css grid or at least learn a lot more about it let's learn about styling images with css we'll be looking at foreground images and background images today foreground images are the images on the page and as you might expect background images are in the background so let's look at our starter code we have a basic html page here with nothing in the body right now and then for the style.css file we're importing a font from google and i have changed this from roboto that i've used in previous lessons to nanito i believe that's how that's pronounced and you can see it is used right here you can use that or you could still use roboto or really any font you want to that's just a preference thing and you don't have to go back to the google font site to do that you can just change it in the string here where family equals and puts the font name and then of course match that here now if you choose a different font of course make sure it matches up with everything you have chosen that the fonts google.com site recommends okay so then we've just got our basic css reset and on the body we are applying that font family and a minimum height of 100 viewport units we've got a lot to learn about images today so let's get started inside of the html and we'll add some content that we can style we'll start with a section and i'm going to apply the class example because i'm just going to give this as an example for now then we want a paragraph and then inside the paragraph let's go ahead and put an image element and you can see it automatically gives us a source and an alt attribute for the source you can see inside of our image folder we've got several images and we're going to use this pat1.png i'll click on this you can see in visual studio code it is just a square with a pattern on it and then you can see at the bottom it has 200 width by 200 height that is the dimension of the image now as we learned in the html lesson we'll want to apply that width and height to let the browser reserve that space to prevent content layout shift but what i'm going to do right now is type the image folder because we need to look inside of that folder for the image press tab and then it gives us a list in vs code of the images we can choose i'm going to choose this pat1.png and then i'll just say pattern1 here as the alt text which you always want to provide for images but then let's go ahead and apply the width and set that equal to 200 there shouldn't be pixels or any type of unit on this we just apply this intrinsic value and you can reference that in mdn as well as it suggests to do that and this is just once again reserving that space in the browser it's not really going to use these settings we can override that with css but in case of a failure of the css file to load or anything else we are telling the browser to reserve this space so let's go ahead and set that and then i want to put some text inside of this paragraph as well and i'll just say yeah this is a paragraph and we'll look at what gets rendered on the page with this so i've already started the page with live server and you can see it is running down here i'm going to drag this to the left as we'll split the screen and we can see what we have on the page now we have got our image and we have got the paragraph next to it but we need to apply some styles to what we have put on the page so i'm going to drag this back over and let's go look at the style.css let's start by styling our section element that has the class of example and we'll put a margin at the top just to push it down just a little of one rim and then we'll say padding dash left to give it just a little padding from the left and we'll give that 20 pixels and now let's give a border i often do this just to see or highlight what i am designing and remove it later so one pixel solid red border that's fairly common to see what we're working with on the page okay after we've applied that class let's go ahead and apply something to the image so we'll choose that class and the image within and now we'll say width 25 but that's not where we'll stop because we did apply a height in the html and it will not ignore that height now i have heard others say do not apply a height because if you just apply a width then the height will respond that's true if you have not set the width and the height inside of the html but as currently recommended we are doing so so since we have done that we need to go ahead and set the height to auto and then it will respond to the width so let's just save this now once again know this width is not 25 of the image size is 25 of the container size so i'm going to drag this back to the left and now we can look at this and we see we have got a red line around our section and then we have our image and then we have our paragraph now there's several things i want to look at here one since i've talked about the width of 25 percent we have made that image responsive so i've drug this over to the full page now and i'm opening up dev tools so i can resize the window now notice how the image shrinks as i resize the window and it expands as i make the window bigger that is a responsive image we have given it a percentage width and we have the height responding by setting to auto again we have applied the height because we applied the height in the html as recommended by mdn and the way to make it responsive then is apply the height of auto in your css as it will respond to the percentage of the width that you set okay i'm closing devtools now and dragging this back over to half the screen and what we really want to look at now is this paragraph notice the y and also the p here and the g and another p these are the letters that have something that sticks down below the line we're typically writing on now notice what happens over here with the image it's the same way also notice it's on the same line as it was even before we highlighted the container that's because images or image elements are not block level elements they're actually in line and this was the original specification with html but we often don't want this behavior so even if i removed this paragraph right here you would still see this space we didn't apply padding or margin or anything to create this space here but it's often wondered how do we remove the space below an image well that's because an image is actually an inline element and it allows that space because it was originally envisioned as being used with paragraphs or with text overall so you get this space you don't want here even though you don't provide a margin or padding i'm going to show you how to remove that first so let's go back to our css and this is part of a reset that you can just typically do now it doesn't go inside of the asterisk because that selects all elements so just at the top we want to have image and then display block and we can save and now let's go back and we can look and with a block element of course it wraps down to the next line because you know a block element takes up the full width of the page so let's go ahead and go back to our html and i guess i need this full page once again so we can see what we're doing but i want to remove this text right here and even though it's inside the paragraph and we could remove the paragraph if we want to i guess i'll go ahead and do that too but just inside this section i'll save and bring this back over you can see there is now no space underneath and i'll switch back to the style here if we did not have this and i'll comment this out with shift alt and the letter a and save even without the paragraph we have this space underneath the image so you want to set those to block because they're originally in line and then you remove that space that you weren't expecting now let's move on to our next example so i'm going to pull visual studio code back over to full screen go to the html and i'm going to comment out what we put in for our first section i'll leave it in there for you so if you download the code though you can see that example so now the next thing we want to do is create another section i'm going to give this a class and i'll set this class well not class i typed class i should have typed hero there we go so i'll give it a class of hero and now inside this instead of just an image i'm going to put a figure element because that's what we usually put images in and i'll give this a class of profile dash pic dash figure so we know exactly what we're talking about there now inside the figure i'm going to put the image element and then we don't really need to apply a class there we'll just use that profile pic figure to reference the image inside of it and you'll see how i do that now we once again want to look inside of our image folder for the source and then pick one of our images and you can see i've got a profile dash 800 by 800 and if we look at that image in visual studio code you can see the image here and you can see the dimensions below that's 800 by 800. i'll go ahead and close that out let's give it an alt and i'll just say profile picture and then we need to apply the width and height again we could also apply a title if you remember that attribute from html and there we'll just say my profile picture and that shows up when we mouse over the image okay after that let's apply the width and that would be 800 and then let's apply the height and that's also going to be 800. i'm going to press alt z to wrap the code that way we see it without scrolling over to the right like it was now if you remember the figure element we also need a fig caption element so let's add that and inside the fig caption i'm just going to say jane doe so the name of the page that this image belongs to or the name of the person in the image if you will so we want to add that it helps accessibility and i'll show you how to hide it if we don't want it on the screen so let's save that much and now we can look at our page and see what we've got so far it's pretty big it's filling up the whole page isn't it so we can definitely change that with css i'm going to hide the file tree by pressing ctrl b and we can make our changes here i'll make them below the body but above the previous example let's start with the profile dash pic dash figure class and there we'll just say a width of 35 and that would be the width of the page it's referring to because that is currently the container actually it's that hero that we created so that section and it should be the width of the page so after that let's go ahead and apply the next to the profile pic figure and then the image within and here let's give the image a width of 100 because it's in a container and the height once again auto and this does make it responsive we've got a percentage for the width and the height set to auto remember we set the width and height once again in the html to avoid that content layout shift okay now we've got min width let's set that to 100 pixels we just don't want the image to get any smaller than that when it does shrink and then let's put a border around it so let's say border five pixels double gray so it's not just one solid line it should be two and now let's go ahead and save first and you can see what we've got here is our fig caption we're only taking up 35 percent of the width of the full page right now because that section container element is a hundred percent and so the figures 35 and then the image fills out a hundred percent of that figure that is 35 of the page then we've got this double line around the image and you can see the fig caption underneath one more thing i want to do to our image though is make it round and since we have a square image this wouldn't work if we had a rectangle but with a square we can do this and let's say border radius say 50 percent and when we save we now have our profile image in a circle let's go back to the html and add just a little bit more inside of our hero section that we have right here so after the figure i want to add an h1 to the page i'm going to give this a class of h1 as well inside the h1 i'm going to go ahead and give a span element and give a class of no wrap because i won't want what's inside the span to wrap if you remember a span element is an inline element i'm going to say hello and then i'm going to paste in a little wave emoji here so i'll just paste this over and you can get those wave emojis from different places i use emojipedia.com i believe to get that one after that i'm going to provide another span element and once again give the no wrap class and here i'm just going to say i'm jane as that's who's in our picture and now we can instantly see that on the page as well so we've got our h1 we've got a couple of no wrap classes here and we've got the h1 class on the h1 element let's go back to the css now okay let's start below the body but above our profile pick figure class and if you remember we have a hero class and that is the container that is that section element let's put a border on the bottom only so we can see it we'll say 2 pixels solid we'll give that a color of black when we save we can see that change instantly let's add a few more styles to our hero let's give some padding here of 20 pixels to push everything a little bit away from the edges there we go and now let's give this a display of flex and by default flex is a row so we'll already have our content in a row then instead of stacked on top of each other now let's say justify dash content and let's say flex start here and then after we put that at the start let's align the items to center and after we align the items to center let's apply a gap between the items of about 30 pixels and save and that's what we've got now we've got our image over here on the left and we've got the hello i'm jane on the right now let's go below the hero section and add our h1 class and inside the h1 class let's make this font a lot larger let's say font size 500 percent and we'll save and see how big that gets nice and big that works okay what i'd like to do though is make the page full screen once again and look at dev tools so we can resize the page and see some things right now even though we put those classes on we haven't defined those yet so we're getting the text to wrap in some strange ways that aren't always the way we want here but notice our image is shrinking nicely but it stops at the 100 pixel minimum width that we left it and we still have that fig caption on there that we'll want to remove as well so just checking out the resizability of everything at this point let's close devtools move chrome back over to the right and let's define those utility classes so if we come up to the top we can put some notes in here and we can say begin reset with our comments and then after our image we can say end reset and there we go and now let's go ahead and put utility classes just organizing this css a little bit and then we'll say end utility classes okay so we can define these utility classes right in here the first one will be no wrap now these are things we've covered in previous lessons but it's a good review so we'll set white space to no wrap now when we save notice what instantly happened on the page i'm was over here but we've got it to where i'm jane should not split that should not wrap the same with the hello and the wave so now they're on the lines that they should be on and we don't want to see the word i'm and the word jane break and we don't want to see the hello and the wave break and that's why we applied those classes of no wrap the way we did now let's go ahead and apply an off-screen class also so this off-screen class will still allow the fig caption to be read for accessibility but it will hide it from the visible page so we'll say position set this to absolute and then let's just send it left minus 10 000 pixels and save and it looks like it's still on the page maybe we don't have that on our fig caption yet and we don't i forgot to put it on there so let's give it a class equal to off screen and save and now our fig caption is gone as i expected it to be we've got the basics of a hero section here a header for our page but it's pretty plain right now so let's start working with background images so now that we have put our utility classes here let's scroll back down below the body and back to the hero section now after this gap for our flexbox display i'll put an extra line so we can see these new properties we're going to work with the first one is a property you have seen before and that is background dash color we want to put a fallback and that is if the background image doesn't load we at least want to have a color behind it so let's put rgb and i'm going to go with the color i discovered that i think i like and just put these three values in there you can see it's kind of a peach or gold i'll save this and there you can see the background color that we now have for the hero section but that's a fallback so let's go ahead and put in a background image that is background dash image now you would think we might specify image here but actually we need url and inside of the parentheses then we put quotes and now we need to go inside of the image folder again but remember we were doing that in html simply by typing image but we're not in that folder now we're in the css folder so we need to go up out of the folder that's two dots to go up then a slash and now you can see visual studio code says our image folder is there and now let's pick this pat one that we looked at before it has a pattern on it and i guess i need to put a semicolon there where that ends that was right at the end of the line and now let's save and of course our text is black so that doesn't look too good there but otherwise you can see this pattern behind everything and it's a repeating pattern and we'll talk about that too let's go ahead and quickly add a color to our h1 so we can see our text again so now we've got hello i'm jane in white but what is happening by default is our by 200 image is repeating both on the x-axis and the y-axis in both directions and it's filling this out and the pattern looks pretty good you can't see where it starts or ends really so what we can do to control that is the background dash repeat property and we can just say no repeat and now let's look at what happens now we just have our 200 by 200 image up here in the top left by default likewise we've already seen what happens with the default repeat value and it repeats everywhere but we can just say repeat y for the y axis and it just stays all on the up and down essentially the y-axis or repeat x and it's all on the x-axis which would be horizontal or across let's just leave it to repeat for now even though that's the default i'll just leave that property in there and let's change out this image let's look at another pattern that i have saved in there which is pat two we can save that now our white font doesn't look as good on top of it and it's always important we want to emphasize this the font is the most important thing so you have to work with that to be visible because if it's not the background image is essentially that it's just background it's not really what's important you can see the lines if you look closely to see how this image repeats just a little bit more often so if we set this to no repeat i believe it's once again 200 by 200 or something like that you can see the image by itself there and if i save you can see it repeat across now if you have a transparent image and i set up a transparency of this image as well and you save you can see now this kind of looks cool because we have some of that color that's underneath coming through the image and i'm not going to show how to create transparencies in this tutorial that would be more like a photoshop or other image editing tutorial however if you do have access to images that are somewhat transparent like this it is a cool effect to do that of course i would probably switch this text back to a black font or something that would show up better on top of it at that point now let's also look at some more images like you would use and once again i want to emphasize how important it would be to make your text visible no matter what image you're using and we're just seeing the clouds right now but this is a much larger image if i go over to the file tree and click on the scenic image drag visual studio code back over where you can see it all we've got a waterfall lots of things in this image that we might want to see so we can change that let me bring this back over hide the file tree so we have some room underneath our background repeat let's put in background dash size and set this to cover when we save now we see much more of that image but it still might be a little concerning how readable this text is so you might want to work with that of course to make it stand out some more but that does look good now let's drag this over as well and if we open this up you can see it's definitely bigger here and looks different let's open up dev tools and once i have dev tools open you can see how the image resizes with that cover setting and there are other settings for background size as well you could put in an absolute or percentage or other things you might want to but cover is a very nice one to use i'll go ahead and close this and move this back another word that you might use in there besides cover is contain so let's at least see what it does it's not what we want to use but since it's repeating you can see that we have two of the image now because it does repeat if we set this to no repeat and save you can see cover or i'm sorry contain fits the full image in here and contains it but it doesn't make it cover the space that we want it to so let's put this back to cover for our use and we can leave the no repeat there as well because that's what we want but let's say we showed this to jane and she's not quite liking it of course the text isn't popping out and she wants to be more about discovering things not just about an image of some cool scenery so we're going to change this scenic image and let's change it to an image of a map and you can see it's a rather large image which is something else i didn't discuss now this would be a different tutorial to talk about image optimization a lot of times you want to shrink images down and this is a rather large image but that said you also have to be careful because some devices have different amounts of pixels and if you use too small of an image then it will look blurry on the devices that possibly have more pixels so one rule of thumb i have heard is always use an image that's twice as big as what you plan on displaying and that would help it up size to that extra pixel setting essentially and still look good without looking blurry because otherwise you're essentially stretching an image to increase the size of it and that does make images look blurry so again optimization would be something to consider but jane likes this image a bit better it gives maps and she's talking about exploring and taking pictures and so here we've got a background image with maps on it but still the font isn't popping out quite as much as we want so there's some things we can do there let's go back to the css and i need to scroll back over here a little bit we can add some more to our h1 so this color the white looks good i mean it does pop out a little bit but let's do something that's not quite white let's give alice blue a try which is kind of a different white you can see it's not quite the same white but it does look white it doesn't really look blue to me at least and after that we can apply a text shadow to make it pop off the page just a bit this is applied to the x-axis so we'll say 2 pixels y-axis 2 pixels and then there is a blur value and that makes the shadow not as crisp but a little blurry so i'll put that at 5 pixels and then we say what color we want the shadow and we'll just make it black when we save you can see that text pops off the page just a little more so that's something you can do to help your text stand out as well don't abuse it though you can do way too much with that but of course it's set to preference then after that we could put a background color so let's talk about that if we put in background color and we just set it to black that's not going to look that great but let's go ahead and do it for the moment and now if you remember from our color lesson we can click on this square open this up i'm going to go over to hsl and then i'll drag the transparency down here and i'm thinking maybe let's go to 40 percent and see what we get if we leave that and now we save well now we can see the image because it's a transparent color and that helps a little bit now we could add and again this is to preference complete preference here we could go ahead and add some padding so let's do that try it out we'll say padding and let's go 0.25 round and then after that we can also add a border radius to that background and let's just go with 10 pixels to round the corners and so now you see this kind of contained here but i don't know if i like that or not but there is another trick we can do that kind of applies the same thing but it does it more broadly so you don't really see this box around there so i'm going to comment these out but once again leave them in the code for you because that is to preference now let's jump back to our html and what i'm going to do is put a container around our hero section and here i'm going to use a div and i'll just say class of container i'll take that closing div control x to cut it out come down to the bottom of the section paste it in with control v and save and now we have a container around our code i guess i could highlight this and tab it over to make it a little more uniform there we go and now that we have the container we can style that container so we'll go back to our css and again this is a work workaround only if you're trying to make the text a little more legible you want a little more control and to get that separation between the background and the text so this is nothing that is required it's just something that you might want to know how to do and what we're going to do is essentially create a filter or a mask by having this extra layer so it's just a little bit more of an advanced concept but it's not too difficult to do i'm going to take everything we have here for the background of the heroes section and i'm going to put it in the container and now that we have that we can save and we shouldn't really see any difference because the container is going to be the parent of the hero so we would still see all of this behind it and now instead of in the h1 where we had this background color here let me go ahead and just copy this and we might want to use a different color but we'll try out the black at first we can put in that background color that we were putting just on the h1 but now this will apply to the full hero so let's go ahead and save this and see what it looks like and you can see everything got darker we've essentially put a filter that we can lighten or darken as we choose so i want to put a different color here and try this out so let's make this 100 percent right here and save again that lightened it up now you see more of a light filter on it as well so you can experiment with this and of course you can go into the colors and choose anything you want to as well here in visual studio code i'm going to press alt z just so we can see that wrap down here so if we didn't want that maybe we want a little more transparency consider that 35 percent and maybe you liked the darker color instead of the light color so if we went back and made that a zero that's essentially working with black there so now you've got a darker color but it's a little more see-through maybe make it 25 i think i liked the lighter color myself so i'll go back to 35 and then i'll put the 100 percent here in the third value and yeah that kind of pops off but it still has that filter and you can see the maps i like how that looks just personally but you could change any way you want to maybe you'd want to make the double circle around jane here in black instead of gray now that we'd have a darker color and that's something you could do as well but we've made a nice hero section overall now let's talk about one other property that i didn't bring up for the background yet and this would be background position i'm going to put it after the repeat and it's background dash position there we go and now it has an x and a y as well so you might see this adjust and it's how it moves the image so if we put center center you can see yeah the map moved a little bit so even though we're working with one image that's covering the whole span you might see it move so you could say top right just see how the map moves around for you a little bit and top left and not really noticing a change there what if we said bottom right and move it yeah the map moved again because now we're seeing the bottom of the image that's the biggest change right there now if we switch it to top we'll see the top of the image instead i like that a little bit better because it's a little darker up there towards the top i believe and you could just provide one value i think as well and if we did center yep it's somewhere right in the middle now we're not seeing the top or the bottom but if we went back to playing around with a smaller 200 by 200 pixel image you would actually see that one image move around the page as well so this is just something worth checking out to see what part of the image you want to display for the background so i'm just going to leave this as top now because that makes it a little darker and looks okay to me it's time to move on to another example i'm once again going to leave this css in the code i'll just come to the html i'm going to bring this back to full page and i will comment out what we currently have here as well and leave it in the code for you again pressing shift alt and the letter a to make that comment after i selected all of that and so now we're ready to add something new to the page so we'll come back over here so we can see the page again and it should be blank and it is let's add something to the body itself let's start with our fallback background color so we'll say background color oh that just said background which is shorthand we'll get it to in a minute but we've got our background color and just so we know it's changed let's go to this alice blue again which isn't quite the same as the white default and now you can see it's a different shade here and after that let's provide an image so we'll say background dash image and here we'll say url once again and inside the url we need quotes and remember we're in the css so we go up out of the css folder and then into the image folder and now i'm going to go ahead and well you know what instead of this image at first let's do a linear gradient first and then we'll see how we can put an image on top of that so let's go with linear gradient and let's talk about this this is how we can switch from one color to another so i'll supply the first color steel blue it's a color that i like and the second color let's go with white and when i save we'll see the default behavior it's starting at steel blue at the top and going to white at the bottom of the page and we could put other colors in here as well so if we wanted purple in the middle we can provide purple as well and now when we look it goes from steel blue to purple to white so you can use pretty much as many colors as you want to and you could have a veritable rainbow i should say going from top to bottom or as we'll find out here any direction you want so i'm going to say to left and save and you can see it's white on the left and it's blue on the right so it starts at the right and it goes to left we could do the opposite of that to right and there you got blue on the left to white on the right you could go to bottom which is essentially the default or you could go to top as well so nice changes there i'm going to go to well let's go to left and leave it like that so now we have this background and imagine we were typing paragraphs over here on the left and we stopped somewhere and it gets darker over here on the right and that would work for us now let's look at how we can apply a second background image and you can apply more than two if you want to but i'm just going to do an example with two so now i'll say url provide the parentheses here a comma after that so we clearly have our two images defined and i want to go ahead and space this over if it will and i may need to go ahead and drag this to the full page and now we've definitely got some space there so let me remove those spaces i just wasn't seeing them before bring this down to another line and i like to have the images lined up like this when i set it so or a gradient and an image if you will so now i'll put in the quotes we need to go up out of the css folder into the image folder and now i'm going to pick bubbles so we have a bubbles background image and a linear gradient both let's save and drag this back over to see what we've got well now we have bubbles all over the page and that may not be what we want as well this isn't responding like i want it to when i drag this back over so i'm going to put these back to back so we just it's one long line essentially is what this is for the background image we supply the first one and then a comma and then the second one and a gradient qualifies as a background image as well so now when we define our background repeat we can put in a value for both of these images so the first one i want to repeat on the y-axis that's our bubbles they're going to go from top to bottom but not left to right then we put a comma and the second one the gradient i'll just put no repeat and when we save now we only have bubbles on the left but we can change this as well so let's go ahead and put in a background position so we'll say background dash position and now we'll say we want them on the right and let's use the center so now when we save there we go our bubbles are on the right and they show up much better this is a transparent image that i have over here so if we just look at the image and i pull this over you can see it here in visual studio code it's originally 300 by 300 has a transparent background with white bubbles okay we'll drag this back over and that looks good with this steel blue background that we're seeing on the right with everything we've set up i can't see the code too well going to press ctrl b to hide that so our background position has moved the bubbles much like we want them to be but the bubbles still look a little too big so let's say background dash size and now this first one will be for the bubbles so this stacks in this order the bubbles go on top of the gradient so they come first in the background image and the gradient comes second likewise with repeat y applies to the bubbles no repeat to the gradient background size 20 for the bubbles and then we'll put auto for the gradient when you save we have smaller bubbles now over on the far right now we've wrapped up our example of linear gradients which are fun to play around with and also layering background images so we've got one more example to look at today and once again i'm going to comment out previous code we're using as you can see we don't have any other in the html but i'll add a little here and then i'll comment out some of what we have in the css just so we don't have that bubbly background for this new example so i'm going to provide another section and i'll give this a class well this doesn't need a class but just inside the section let's go with a paragraph that has a class of clip and now inside this paragraph i'm just going to type jane's name and save and we can see her name up here in the top right for now let's go back to this style once again i'll comment out this background that we currently see here i'll leave the background color but everything else but i'll leave it in the code for you again shift alt in the letter a to comment that out and if i save that should all be gone we still have jane's name so now i'll scroll down here all the way to the bottom below our first example and i'll provide this clip class and there's several things we want to do here we want to give this a very heavy font weight so i'm going to give it 800. if we save that you can see it's very bold now but it's still very small so let's make this big we'll say font size let's go with 18 rim we want to fill the page for the most part and i think that will do it after that let's say text align and set this to center and now we've centered jane's name as well okay after that let's provide a background and we could just say background once again with this shorthand or we could say background image so i'm going to go ahead and say image we'll provide url and now we go up into the image folder and then let's take that scenic image that we previously had and save and now of course we see the clouds we haven't changed the position or anything else of the image but we'll do some of that here let's at least change the size so background size is going to be 100 and now we can see that full image behind jane's name so now let's go ahead and text dash transform set jane's name to uppercase and it's really filling out the page now now the property i want to talk about is background clip so let's look this up at can i use dot com because there's something specific about it background dash clip we'll select that and you see background dash clip text and it says a non-standard method of clipping a background image to the foreground text so it says unprefixed is only supported by about 19 of browsers but there is a prefix that we need to use with this so we can see the support for edge not explore and we're not really going to worry about explorer ever probably but for chrome you see the little yellow here and it says supported with prefix webkit firefox doesn't need that but just about everybody else does so we need to use that prefix when we apply this property so what we're going to do is say dash webkit dash background dash clip and now we'll say text now this won't do everything that we want but it did take the background away here in chrome as expected let's set the color and we want this to be transparent so first i'm just going to choose this black color and now we'll do the work here by clicking on the color getting that pop-up i'm going to switch this over to hsl we'll pull this down to about 20 percent right in there and take a look at what we get now so now it's a little dark because we can still see 20 percent of the black but essentially we're seeing the image inside the text only which is kind of a cool way to do that we'll go ahead and put this to zero and see if it makes much of a difference and yeah it might have lightened up just a little bit so you could make this a little darker by adding about twenty percent and there you can see the difference and you could do this with other colors too we're essentially creating that same mask over the image or you could make it totally transparent and i believe to do that you could just say transparent and save and yep that works too so if you want it totally transparent you don't even have to put a color there at all now this will not be working in firefox you would need to of course use that as a fallback for when it is not supported in browsers and otherwise you need to have this will this impact chrome by putting it there no but now this would also make it work in firefox and now every other browser that needs this webkit prefix also works so we just have to have both there and before we wrap up i am realizing we didn't really cover that background shorthand which can be very confusing and i like to use the individual ones like background color and background image when possible but let's come back up to what i commented out on the body and uncomment that so we'll see jane's name over the bubbles and we can save that much but now what we essentially want to provide here when i do use the background shorthand is just a few of these properties three specifically so we'll start with the repeat we'll say repeat dash y and then we'll say right center for the position and then we'll have our url which was dot dot slash image slash and then we had our bubbles selected and then we can put a comma and we can supply the values for that second image as well so now we'll say no dash repeat and then we'll have our linear dash gradient if i could spell once again and then we'll say two left we had steel blue and then we had i believe just our regular white yep there we go and then we can go ahead and put the semicolon there now let's put size after that because we didn't attempt to include the size in the background shorthand however you can it's just fairly complex and it gets confusing so you could look that up on mdn if you want to i'll provide a link in the resources but this is about as complex as i like to get with that shorthand or it just starts get to get too confusing so what we've done is eliminate the background image background repeat and background position properties that were individually there so i'll just comment those out we save we have the same result using the background shorthand let's move on to css media queries media queries allow you to modify your site based on specific characteristics and parameters and most often we look at the browser viewport width this is key to responsive design as our web pages will respond to the width of a device viewport so let's look at the starter code i have got some basic html here and i have a page outline that has a header a nav inside the header element a main element and a footer element and so we're just going to outline a page and see how it changes based on viewport changes and then in the css i've got some basic css here we're importing the nanito font from google other than that we have the basic css reset and a basic style a change you may notice is i'm using the font shorthand property now that sets both the font size and the font family all in one right here in the body other than that min height of 100 viewport units okay before we do anything with css we really need to look at the html there is a meta tag here that enables responsive design and that meta tag has the name viewport and you can see the content is width equals device width and then initial scale of 1.0 this is necessary to enable our media queries and allow responsive design in our web pages now do you have to memorize how to type that out not really because vs code helps us a lot i'm going to just select everything quickly with control a cut it out of the page with control x so i have a blank html page and now in vs code if i type an exclamation mark you can see it says emit abbreviation when i press tab it fills out the basic skeleton of an html page and you can see it includes this meta tag with the name viewport the content with width equal to device width and the initial scale set to 1.0 it's very important to have that as we work with responsive design and visual studio code helps you do that i'm going to press ctrl a now to select all of this and then ctrl v to paste over and just go back to the page outline that i already had with the header nav main and footer ctrl s to save and we're ready to move on to the css okay before we add any actual css to what we already have let's just talk about the syntax of a media query first so i'm going to paste this in and look at the syntax that is how we write it so we start out with at media and then we give the media type and then we specify a condition or conditions as we can link those with logical operators and and or and then we specify a break point and that depends on the condition as what type of break point we'll use there's lots of different types of break points and conditions we can apply and then just like we do with anything else we put the css rules between the curly braces so now that we've looked at that syntax let's go ahead and write a media query and see how that applies so we can start out with at media and instead of media type here we can say screen that is the most common one you'll see you might also see all or print or even speech for screen readers and devices that read the screen back to you and then after condition or as the condition i should say you often see min width and you should read min width as starting from so whatever the width we specify is these styles will start from that width when we say min width likewise max width would be up two so the styles would apply up to the width we would provide if we said max width there we usually do this with min width and that is because we design from the smallest to the largest and that is what is called mobile first design and responsive design and the reason we do that is well think about it this way as an analogy when you get a box you unpack something it's often hard to put everything back in the box the way it was packed and get the lid to close it's kind of like that when we design a page it's easier to start with the smallest and work our way towards the largest rather than start with the largest and then try to squeeze everything into a smaller and smaller box if you will so that's kind of the analogy i used to explain that so we'll start out with a mobile device screen usually that's a one column design and we can spread things out as we go so for this first min width for the break point let's say i would put and remember this is starting from so i would put something like oh let's go with 481 pixels so all of our styles before this media query would be applied until we got to 481 pixels and then they would still be applied unless we were to overwrite them because the cascade still works so here we could change something maybe about the body maybe the font maybe a background color and that's what we'll experiment with today because it's so easy to see those background color changes and then we can overwrite the previous style we had other styles if we do not overwrite those they will still apply if they were applied before the media query now as always i'll give a link to the mdn references in the description below but let's talk about some of the other conditions and break points we could have although as i've said min width and max width with pixels as a breakpoint is very common but you could also have something like orientation and then you would set that to uh possibly landscape which would be kind of turning your phone to the horizontal instead of the vertical orientation something like that there's also something like min dash aspect dash ratio and there you can actually set a ratio and there are many different sizes of phones so while landscape would actually apply to anything that was wider than it was tall here we could set something more like specific like 16 by nine or say seven by four something like that then when the aspect ratio reached that size so the width would be 7 and the height would be 4 in that ratio or 16 by 9 or whatever we put that is when that would apply now remember we can also put more than one rule here and we'll look at that very soon as well so how do we decide what breakpoints to apply and what values to use well there are some common ones and we can also look at some css frameworks and see what they have applied because they have probably researched that and worked with it a little bit more than we have so let's look at what some others have done i'm going to open up the file tree here you can see i have a notes dot md that i'm going to include in this repository dot md means markdown so it's a markdown file when i click on this you'll see the outline here but i'm using an extension and if you want to get that extension it's called markdown all-in-one you can search for that in the visual studio code extensions area and then you can install it if you want to use that as well so when you have markdown all in one then you can go ahead and preview the markdown and that's what i'm going to do with control shift in the letter v and now i've got a markdown preview and this is how github would read our markdown so i've provided a table here so some common media query breakpoints you can see mobile devices are often considered to be pixels width or less and then from 481 to 768 usually ipads tablets 769 to 1024 small screens and laptops 1025 to 1200 desktops and large screens and 1201 and greater extra large screens and tvs now that's just kind of a common general guideline of course there are no standards so you can set these how you want but let's look at what the bootstrap css framework does and i tend to like these and i'm i guess maybe i'm just used to these but 576 instead of 481 as we saw referenced above is considered extra small and then anything greater than 576 is small 768 and above is medium 992 is large 1200 is extra large and then they have a sec extra-large which is double xl at 1400. now tailwind is another css framework that is very popular now in recent times and you can see they've also differed somewhat they consider the extra small to be less than 640. maybe that's because in recent years our devices have seemed to have grown into larger sizes after that 640 and above is small now we meet up and agree at 768 and that is where the ipad is usually at the traditional ipad and then we've got 1024 here which is a little different than 992 as far as bootstrap was concerned then 1280 and 1536 so you can see even professional opinions vary and you can set your breakpoints how you want to as your page needs to respond so it can respond to the content you can work with your content and set the breakpoints according to that you could target specific devices or just use some general guidelines as well let's go back to the css now and start to write some code and we'll see how this applies okay i'm going to drag visual studio code to the left and we can see our page on the right it currently has very little applied as far as styles just our css reset and our basic body styles right here and then we have our media query i'm going to hide the file tree with control b so we have a little more room to write code i'll go ahead and remove this media query for now just so we can start out with our basic page first and remember we're designing for the smallest screen first and we'll work our way up so we'll just put in some basic styles here the easiest thing to see as we're learning about media queries is to change the background color and let's do that by first setting a background color here on the body i'm going to set it to four seven five five six nine kind of a nice grayish color if we save that we can see that doesn't highlight our lettering as well but we'll change this of course as we change media queries and now after that we can change a little bit about how this displays as we learned in the last lesson about images so we'll set background image and now instead of linear gradient that we learned about before there's one other one i would like to show and that's called a radial gradient and now this starts in the center and works its way out instead of top to bottom bottom to top left to right or right to left or any direction that we would send a linear gradient this will always start from the center i'm going to use white smoke as the first color and then we'll use that color that we specified as the fallback background color for the second color and when i save now you can see it lightens up here in the center and it works its way out to a darker color on the left and the right top and bottom now let's make well i'll put a semicolon there let's make our body a flex container and then let's set the flex direction and we'll set that to column because row is the default and we want our elements to stack instead of being a row i'm going to scroll for a little more room and now let's go ahead and identify each piece here we have a header a nav a main and a footer and we will apply this style to all of those elements so we'll set each one of those to display grid and then we'll center our content by saying place content center and when we save now we see that has been saved in the center of each one so this really means we've stacked our elements and nothing is below so we want this to take up the full page and we'll take that on here very shortly so i'll scroll for some more room here on the left and now i'm going to put a style on just the header and the footer and here we'll say position sticky as we want these at the top and the bottom let's identify these with a different background color and here we'll say 1 e 2 9 3 b there we go a little darker but then let's give the font the color of white smoke as well we can save that and now we can see our header and footer and remember the nav is nested inside the header and now we've applied position sticky but we didn't provide the other value that we need to stick the header or the footer in a specific position so here i'm going to say header now because it will have a different position than the footer we'll say top 0 and now that is in the same place but after that we can come down below and say footer and here we'll say bottom 0 and save and now right now it looks like it's in the same position because we haven't expanded the page but the footer will be stuck to the bottom and the header will be stuck to the top and we can see the difference in that i'll scroll for a little more room and in our main element and it is a flex item right now as it's inside the body that is a flex container we can say flex dash grow set that to a value of 1 and now the main element has grown to fill out whatever space was available now before we move on to a media query let's go ahead and style the nav just a little bit more to make it stand out so let's give it a background dash color set that equal to white after that we'll set its color or font color to black let's give it just a little bit of padding here 0.5 rim and let's give it a border bottom and let's set this a little thicker two pixels solid black and let's see what we get well that looks good except we don't quite have the width we want yet we can easily solve this by going back to where we place the grid on each of these elements the header nav main and footer we've got it centered but we don't have block elements at this point that are 100 percent width so let's add grid dash template columns and set that to 100 percent now when we center those or actually give them 100 width and we've centered them and you can see main is centered here vertically but it's not horizontally now but the elements do have 100 percent width and this is text content text content pardon me so we just need to say text align center and now we get everything where we want it but we actually have 100 percent width for each of those elements once again and now we have our basic page layout so let's go ahead and add a media query now that will change things up a little bit so underneath our footer we first want to indicate that's what we're doing so i'll put a comment and here let's say small that's where we'll start out with our media query i'll say at media and then we'll use screen and i'll say min width and here we'll say 576 pixels so the styles we have put in are valid up to 576 pixels and they will still be valid if we do not overwrite them here so now let's go ahead and style the body here and the first thing we'll do is set a background dash color let's just set it to green something we'll definitely notice a change on and then we can go ahead and use that same background image style that we're using with a radial gradient and inside there we'll start out with white smoke once again and then we'll just switch to green okay besides the body let's do one other thing let's take the nav and let's just set the display to none so it will disappear and now look what happened we're already past that 576 width so we see those changes instantly we no longer have a nav on the page and now our background for the body is main now we still have our background color on the header and footer that we set because we did not overwrite those with a new style here so that is what has changed based on that width now how can we go back and forth this is interesting and something you should learn how to do so i'll drag this over till it's full screen you want to go to dev tools and there's certain ways to do that one is to right click and choose inspect at the bottom of the pop-up menu another is to press ctrl shift and the letter i which is what i tend to do and now devtools opened here on the right it's fairly small and i have got the console here for javascript right now but yours may open to elements and you can see and highlight these elements here and that's really what we want as we style things and you can see layout but now let's look at some details about this layout and how we can adjust that notice the little mobile devices icon up here let's go ahead and click that it says toggle device toolbar that gives us more tools now we can choose dimensions and we see the dimensions here we see the percentage that's showing so i'm going to set this to 100 and now i can see that these are the dimensions for an iphone 6 7 and 8. we can change this to a responsive screen or choose different devices so i'm using the responsive screen now and i can drag it to make it narrower or wider and you saw that change and there we went past our 576 we're now at 602 pixels wide and we can see the change likewise we can look at devices like i was talking about before so i'll choose iphone five slash se one of the smaller devices now not every device has this available but some do you can go to the three dots here in our new responsive menu bar that popped up and here we can say show device frame and now i have a frame that looks like a phone around my page and now we can once again change that i want to make it so i can see the whole phone so there we go and now we see how it looks on the phone you can even change to the horizontal display as you would turn your phone or back to the normal display here and we can do that for several different phones i'll choose the iphone 6 7 and 8 for example or we can just go back to responsive and drag the page around which is what we'll do now because now up until 576 and we can even type in here i can say 576 we're going to switch over so if i said 575 yep we're back to the original background color so we can check our breakpoints right there also there are break points here that are suggested by chrome and you can click on these to change your width as well and see how it displays and these are a little bit different than what we reviewed in our notes markdown file as well so you might check those out okay let's drag this back over to the right and then let's take visual studio code and fill up the page let's put in some more break points and then we'll come back and check all of those out what i'm going to do now is highlight all of this code then press shift alt and the down arrow to copy it down and now let's make our next break point and we'll label this one medium and we're not going to change the nav anymore it is gone for now so we'll just leave it gone so all we really want to do is change the color here for our next break point and of course the break point value itself so here i'll switch this to gold i could have changed those both at the same time i'll try to remember to do that next time so min width instead of 576 this is our medium let's set it to 768. we want the pixels behind that to indicate that after that let's copy this down again so shift alt and the down arrow and now this would be our large break point we'll relabel that i'll highlight gold and press control d to select the other gold i'm going to change this to fire brick and so that will give us a nice color change as well we'll set this to 992 pixels much like the bootstrap framework does now let's select our large shift alt and the down arrow i'll give another line break there and then this will be our xl setting and for that let's go ahead and switch to another color that will be noticeable rebecca purple i didn't select that fire brick i'll do ctrl z to go back to firebrick highlight the first one ctrl d to select the second one and now rebecca purple is what we want save that and let's do one more but this will be different so i'm going to copy this down but we'll make some changes just to give an example of how you could do something differently and look for a different type of breakpoint as well so this is still at media screen but let's go ahead and label this here we go i can type there we go mobile and i want that all caps mobile device landscape so now let's combine some things here instead of min width let's say lowercase max height and we'll set the max height to 425 pixels and after that let's do another and now let's say min aspect ratio you might have thought i would have said orientation but i want to actually be a little more specific here and say the min aspect ratio of seven to four so it's noticeably taller than it is wide and let's change our rebecca purple to dodger blue and save that as well now inside of this we'll also do a couple of other changes so let's say h1 and h2 that we have for labels we'll make the font size just a little smaller to 1.5 rim and then let's also set that nav to display none and we need to do that again because we didn't hit our other min width when we hit our max height here so that's a little different but we'd just be looking at a different size so we need to go ahead and switch that to display none or i believe it would show once again so now that we've made those changes let's drag visual studio code over and see if they all take place in our page so we'll drag chrome back over we'll start down here at the smallest and there we have our original color we get a little wider we've got green a little wider yet we have gold a little wider yet we have rebecca purple it seems like maybe we skipped over the fire bricks so let's see what happened there we'll bring this back over and look at our fire brick and maybe all it takes is one typo to get something wrong maybe i did something wrong and i sure did i did not change the min width for the rebecca purple for the xl so we had 992 here and 992 here again so this essentially was overriding this so we wanted to change this 992 here and set it to 1200 pixels and now we should see all of the changes we expected and here's purple there is our fire brick color gold green and back to normal there so we might see those changes in different devices as well so let's go ahead and check that we'll see our iphone and we can choose maybe a larger setting here that's too large let's go with 75 percent there's the iphone let's go with the ipad and yes it's gold let's go with the ipad pro yes that's the fire brick size and you can see a device frame is not available for it and then we could even switch up to say well let's go back to a small phone first there is that iphone 5se now let's go ahead and change the orientation and now we get our dodger blue color as we switched because the aspect ratio and the max height were both met it meant most both of those conditions and now you can see how those media queries apply and we can change the page based on what the device is the viewing orientation and of course you're not going to have someone that typically changes their screen size as they're working with your application so you don't really need to worry about these smooth transitions in between changes and that's because nobody will be changing their device or really their screen size as they use the application so you just need to make sure it appears as you want it to at each separate break point today we'll use css to apply responsive web design as we create profile cards for the staff of a small company it's time for another css mini project and we'll be applying many of the concepts we've learned from previous lessons in the css for beginners tutorial series let's look at our finished project first this is our end goal i've already got dev tools open i'm already showing the toolbar at the top and you can click the little mobile icon at the top of chrome dev tools to toggle that device toolbar and if you click the three dots you can also show or hide the device frame if it's available and it is available for the iphone five slash se which is currently probably the smallest mobile device we would design for as of the making of this tutorial at least and it's got 320 pixels with 568 high and you can see the project right here and we can scroll through the cards for each employee now if we choose this drop menu and choose responsive there you can see the page definitely changes we can see all employees at once and we see the new width and height at the top and we can type in here too and i'm going to actually highlight the width and change it to 1920 by 1080 and we can see what our page would look like on a full 16 by 9 or 1920 by 1080 widescreen so this is our end goal i can grab the side now and squeeze the page back and we can see how it adapts to each width all the way back to our 320 pixels of course we've got more height than we did in the iphone right now but we can see how it adapts to all of these different sizes and changes as i drag it all the way back to above 1920 now so now let's look at the code our starter code today is the finished code from the last lesson that we had on media queries but don't worry if you don't have that you can download it in the description or i won't move so fast that you can't follow along and add the other styles i will cover all of the styles and as we see in the file tree over here we've got a notes.md in the last lesson we discussed breakpoints and i included those that's a markdown file we have our index.html but i've also added an image folder img and we see three different profile pictures here so those are also available for download with the source code from github and here's our css once again let's make our changes to the html first because we need to add more here so let's switch the title first from css media queries to css mini dash project and then put a colon and we'll put let's do profile cards okay now that we've changed our title we can change more of the content so instead of saying header here we're going to say our staff and then inside of the nav we're going to put some other details instead of that h2 so let's just put links here and we'll have an a with an href attribute and we automatically get that in there now this is going to be an anchor tag we can put the hashtag and i'll put profile1 and we'll match that to an id later and here let's just put the first employee's name so we'll say joe we're making a nav menu here the next one will do the same and actually i'll just go to this line and press shift alt and the down arrow to copy down twice and that will save some time for sure okay after i get rid of that line i'm going to switch the profile to two and the next one to three and then after joe i believe we have matt and then we have jane so now we have our nav menu and our title for our staff page let's move on to the main element and we can remove this h2 as well and now we're going to add an article and this article element will have an id equal to profile of one and now inside the article we can put several things but first let's also add a class and set that equal to card there we go now inside the article let's add a figure and if you completed my html for beginners course you know we'll probably put an image inside the figure as well as a figure caption so let's start with the image and now we have a source attribute and an alt attribute so for the source we're going to look in the image folder then put a slash and now vs code gives us the options of what we have in here and we'll pick the profile picture now we'll also put the employee's name under the alt attribute so there's joe coder but then if you also remember our discussion in the images lesson we need to put a width and a height and this prevents a code layout shift or i should say a page layout shift or i believe the proper term is content layout shift but as long as you get the concept that it already reserves that space in the browser essentially and i've got links to that in the description with all of the other resource links okay so we have a width equal 500 and we're also going to have a height equal to 500 there we go we need that on all images now let's go ahead and add the fig caption and this big caption is once again just going to be the employee's name so now we have joe coder in the fig caption and then underneath our figure is where we want to put actually not underneath just the figure this fig caption goes in that's what i was doing wrong the fig caption goes in the figure there we go now underneath the figure we're going to have a paragraph but inside the paragraph we want to use another element we haven't talked about before we talked about how to add quotes with html entities and unicode but we didn't talk about how to add quotes just with the quote element itself so i'd like to add that to this series and hopefully your knowledge that you can also add quote symbols with the quote element so here we put i code stuff this is basically joe's statement about what he does very simplified but there we go for joe okay now that we've got the profile card html here i'm going to highlight this and i'm going to copy it down twice with shift alt and the down arrow so now we just need to make some changes for each one of these so now it will be profile two we've changed both of those the images are all the same but the next one is going to be for matte designer so let's highlight everywhere we had joe coder here so one and then control d to select the next one we can put matte designer and imagine instead of i code stuff he's going to say i design stuff and then the final employee profile number three and really i can highlight one and press ctrl d to highlight it again and switch that to a three instead of joe coder so i highlight that ctrl d again this is going to be jane devrell for short for developer relations of course but we just put it as somebody's last name for what they do and after that here we want to put i teach stuff again all over simplifications of every job but we just have a small example now i have prettier enabled also and notice it just wrapped all of these attributes down to different lines if you don't like that you don't have to use prettier or you can go to your vs code extensions and you can search for prettier and then you can click on prettier and install that and it does some auto formatting and i happen to have it enabled as i'm making this video so that when i saved that is why you saw that auto formatting it put each one of these attributes on a separate line which is fine too it still works out the same okay we're finished with our main content let's just move down to the footer where we're not going to say footer here and we're not going to have an h2 so let's just put a paragraph and inside this paragraph now we'll use an html entity we'll put and copy it's an ampersand the word copy and then a semicolon and that's the copyright symbol and then we'll just say acme co if you're a fan of the old looney tunes this is the company that made all of the stuff for the coyote and now we've completed our html so let's shift over to the css and then i'm going to press ctrl b to hide the file tree and then i'm going to drag vs code over to the left half of the page and we'll look at our page here on the right now we can see we've added some content but it is not conforming at all to the size of screen we have we need to make some changes in the css to apply this correctly to our page i'm going to press alt z to wrap the code so we can see it all on the window so if the line is too long it wraps down to the next line such as this import from google fonts where we have the nanito font here we have our basic reset with a margin of zero padding of zero and box sizing border box and now i'm going to add to this reset something that we cover covered in the image lesson was adding an image reset where we need it to say display block and that removes the little space that is by default under images because they are inline elements but then instead of width 100 which you would often see here i just want to say max width of 100 and that means it will not overflow its container and at the same time we need to add a height of auto now you'll see many say do not add a height to images however we're doing this because we added a height in the html to prevent that content layout shift and that is the new approach so i recommend following that at this point and if you don't add the height it will stick with the height assigned in the html which would be the original 500 pixels so this height auto then will adjust according to the width as well so if we save that we have completed our basic reset now so we have our asterisk which selects all elements and then our image selection here for the full reset we're applying and we can already see a change our images are actually now fitting into the design even though the design isn't the way we want things yet it does look a little better than it did okay we'll scroll for some more room and i'm going to select this general styles comment and i want to make another comment in between and instead of general styles here i'm going to keep it all caps and i'll type utility classes and after that i'm going to add a utility class and it's going to be called no wrap and then inside the no wrap class we'll choose the white space property it's white dash space and there we'll say no wrap i'm going to use this because jane has a last name that has a space in it and we don't want her name to break in half if the text wraps so let's go back to the html and hear jane's name in the fig caption and we'll put a span element with a class of no wrap and now we still need to scroll over or i could wrap the code but since we're only doing this one thing i'll just scroll i'm going to collect the closing span that was automatically added and put it after the end of her last name we'll save that you won't really notice a change but now if the text wraps it will not break her last name into okay back to the style css now we're going to move on to the general styles section and here we have the font shorthand which adds a font size and a font family all in one then we have a min height of 100 viewport units we'll keep all of that and get rid of this blank line we have a fallback background color and then we have a background image set with a radial gradient which starts in the center at white smoke and works its way out to this darker color and then we have display flex and flex direction column and that is what stacks our header on top of the main on top of the footer and keeps it in that order okay after that we have a section where we applied grid to the header nav main and footer and we're just going to delete that so if you are following along with the starter code go ahead and remove that if you're following along without it well you don't need to do anything there now we have the header and the footer position sticky because we have the header at the top the footer at the bottom and we want them to stay there especially if the page scrolls and then a background color of a darker color and then white smoke for the font color but what else we would like to add here is a text dash align put center so we'll go ahead and add that so we can center this text okay just below we have the header with a top of zero and that keeps the header at the top notice we also have a footer down here with the bottom of zero in between we have the nav and the main so for the nav we're going to keep the background color of white we can remove this color of black for the font color the padding at one half rim that's fine and we still want the two pixel border on the bottom but now let's add some new styles here let's put the font dash weight and make that bolder there we go bolder and then i'm going to put display flex here and then we'll say justify content and we'll space dash evenly to spread out the employee names in this nav menu and now you can see they are in bold and they are spaced out evenly here in our nav menu i'm going to scroll up just a little bit more and after the nav and before the main we're going to style these links so let's add nav and then a for the anchor element and also nav and then a with the visited pseudo class for after a link has been visited and let's just shift that color back to the black color that we had before so when we save we should see those change to black now now after the nav anchor and the anchor visited we also want to style nav anchor with the hover and nav anchor with a focus and you might even want to add an active in there or you might like to see it flash a different color which is another pseudo class you could do i'm not doing that one right now but let's put a color here and i'll go with hsla which you can also of course pick by navigating through the visual studio code color picker but i've already got this picked out it's zero zero percent here 20 in the last one that's easy to remember and then 0.6 or essentially 60 transparency and then i'll put the semicolon there at the end and save and we're not going to see this in mobile mode because we're not really going to hover but as we get to a wider design if we were to show that we could notice noticeably see that change as we hovered over now if they had focus here we could possibly see that so let me tab through there we see the lighter color as we tab to each of the names so we can test that in mobile view by tabbing through and setting that focus okay we're ready to style the main element now so i will scroll up for that we want to keep that flex grow so it does fill out the page no matter what but after flex grow we can add a few more things here so let's put display of flex once again and then we'll have a flex dash direction and we'll set that to column and then we're going to align dash items and we'll set that to center now let's put a gap which is shorthand essentially for column and row gap this is going to be 1.5 rim and a padding of one rim and if we save we should see some changes there we do a little bit so the images aren't to the full edge of the screen and it moved a few things around for us but we still have more changes to apply directly to the cards themselves i'm going to copy the comment we have here for the small media query and i'm going to create a section for the profile card class so here i can just switch this from small to profile card and underneath that we will start to style the card class so i'll scroll this up as we continue to grow the styles and here it would be a card class now inside this class one thing i'm going to put is scroll dash margin dash top and you would have to experiment with this to get the right size i've played around with a little bit and i believe eight rim is the right size what this does is when we scroll to joe or matt or jane when that is scrolled then it pushes down from the top so it doesn't scroll underneath the header so you want to have a little margin on the top from the scroll and this property will do that after that let's set a width and we're going to use the min function now the min function says hey at a minimum use this width and we'll set it to 100 percent so it can grow to 100 width of the container but it also takes a max so it says do not grow any larger than and we'll put 350 pixels here so we'll fill out whatever the container is up to 350 pixels and we can specify all of that in one line for the width if we use the min function after that let's go ahead and put another background color for this area of the page which will be the cards i'm going to go with cbd 5e1 that i've previously picked up more of a gray or a lighter gray and then we can go ahead and put a border and i'll go 2 pixels solid black and then let's add a border dash radius and we'll go 15 pixels here let's save that much and see the change there's some definite change there now let's add a padding of one rim all the way around and that changed that up a little bit so now we have some space in there once again now let's add a display of flex for the card itself the flex direction is going to be column once again and then we'll also say align items there it is and we'll choose center and save now something you may notice right away is the employee name didn't center that's because it's inside the figure so this paragraph is outside and it became a flex item however the fig caption did not become a flex item because it's inside the figure which is the flex item so we'll still need to make a change for that so underneath the card now we can select the card class and the figure element within we'll also set it to flex and then we'll set the flex flow and that will be columns so that's column direction and then it's also the flex wrap property and we'll set it to no wrap and if we save we don't really see a change at this point but it will be good to have that there okay then let's set the card image element itself and now we can say border and let's put a thick border on that five pixels double and a flat black with the 333 hexadecimal code and then a border dash radius of 50 because it's a square so we can turn it into a circle and now finally before we move on to media queries or different sizes let's add the card fig caption styles and for the fig caption we're going to say font dash weight input bolder put a font dash size of two rim a margin of one rim and now we need to text align center for that fig caption and there we have joe's name in bold and it's centered and really we're finished with our smallest screen design before we get to our first media query so we've applied all of the main general styles and then the specific card class styles and now we have our design here there's one more thing i would like to add though because right now if i click on joe of course he's right there if i click on jane it just jumps to her automatically and if you remember i believe it was our flexbox lesson we allowed that to scroll and just have a nice little feature and we need to add that actually under general styles but it will be under the html element and there we should put scroll behavior there it is and we'll put smooth then we can just leave that all on one line but i would like to put a space between the html and the body styles oh and then of course using prettier it auto format it for me so now with that scroll behavior of smooth and if i click on joe it just scrolls to joe and we've got that scroll margin top set so he didn't stop underneath the header and then it scrolls to matt and it scrolls to jane all like it should now we're ready to go to our first media query which is at 576 pixels for the small media query that we have here let's go ahead and delete the styles we were using before in the previous lesson that just displayed the changes for us and let's apply what we're actually going to change so we'll select the main element and here we're going to change the justify content and it's going to be center and before if we look at the main element and what we had before this will overwrite that property and we didn't have justify content here before so that's okay it will be set now when we get to this size after justify content we're going to set the flex flow and it would be row and wrap so now we do want them to wrap if they will take up more than the width that they have we'll have two rows of profile and finally let's switch the padding to one rim and then after the main element we're going to adjust something about the card class as well and this will be the width and the min will still set at 100 percent but the max will now let go up to 400 pixels and then let's rearrange the order so it'll be easier to see our break point so here we'll take the card and the last child which would be jane and we'll make her first by setting the order to minus one so now let's grab chrome i'll make it full screen and we'll switch over to responsive and if we do that we'll drag this down to where we're at 576 right now we're still not at that break point so this was our mobile phone that we had and now we just passed 576 and you can see jane's at the top so it just got a little wider it doesn't change much but it changes changes a little bit we can make the cards a little bit bigger just because of where they're at and then if we get bigger before the next break point well we hit it there so it didn't wrap yet but changing the width might allow them to wrap because we did switch that to allow wrap at this size okay i'll bring chrome back to the right and now this switch because our width once again switched but we'll go ahead and tackle the rest of the media queries and then we'll see the changes at each breakpoint as we go so now for medium let's go ahead and remove these styles as well and here we'll put the nav and the first thing we'll do is set it to display of none at this point because we're at ipad size and they should all fit on the screen now without scrolling the next would be a card once again we'll put a width and as you might guess we'll use the min function we'll say 100 again but now we'll make them smaller so we definitely fit a couple side by side and they all fit on the page so after that let's select the card figure element and there we'll set flex flow and we'll say column dash reverse so we'll notice a change there as well in the order that would appear and then we'll set the card fig caption and now let's set the margin to very very small here 0.1 em and then just zero and maybe we'll want to keep that maybe we want we can play around with that then card and the paragraph for the card i'll leave that a lowercase and i'll set that to margin dash top one rim and save let's see if we can make this any larger here so we're at 594 we made our first break point but we're not making it to the next one unless we make vs code a little bit bigger again so we'll drag this over and now as we get a little larger there we go now let's switch this to the ipad size itself and you can see they all fit on the page for the ipad and if we get smaller than that we're somewhere in between maybe a surface duo there we're at 540 so we didn't hit the first break point yet so it's just kind of a weird spot in between where we are there but it does work it's just a little bit larger view of the mobile view as we look at it that way so now we've covered our first two break points as well as our starting point let's go ahead and add the third at the large stop and that's 992 pixels let's delete what we had here for the body from the last tutorial and once again select the card class we'll select the width again and we'll use the min function we'll say 100 and then 400 pixels here and if you remember we made it smaller so it would all fit on an ipad we were at 325 pixels so even though previously before that we were at 400 pixels we need to switch it back because it hits that break point in between okay after the card selection there let's switch the order around again so we once again know this has changed so we'll say card and now we'll say nth child and we'll select the second child element and we'll give that an order of minus one and it should switch the order for us again those are the only changes we're going to make there so let's go on to the xl size as well and we'll select what we have there and delete it from the previous tutorial we'll select the card class now we'll set width again use the min function but now i'm going to use a function inside of the min function and that is the calc function calc function is great because it lets us mix other units together or different units together i should say so i'm going to set the width of each card to 33 percent minus one rim and then we'll have a max of 500 pixels because that is the size the images are and we don't want the images to get any larger than their original size or they'll start to get blurry so we'll leave that as the max but this will allow them to grow dynamically with a percentage value so let's stop there and save our file i'll once again take this to the larger screen now something else we can do is click the three dots here and say show media queries so now we can see our media queries here so there's 576 768 we're only seeing the width we're not seeing a good height 992 and finally 1200 so now let's switch this to some sizes we might normally see such as 1920 by 1080 and then i'll just make this smaller and smaller as we go notice we have got joe's name and jane's name and matt's name all on top of their cards now because of that column reverse that we did so that was a nice change to let us know we have made something different now this is using the percentage size that we used with that calc function so notice how they just gradually get smaller until we're at the next break point which is 1200 there we go now this is at 50 percent so it looks a little tiny here but overall we're squeezing it down because of these two but overall we can see what is happening and so now they're stacked on top of each other with two rows and now they're stacked on top of each other again and we're kind of in that larger ipad size getting a little smaller now we're at that larger mobile size and now we're down to finally underneath 576 which becomes definitely a mobile device so we really have identified several devices or sizes along the way that we could target and you can specifically target more than that one we haven't talked about yet though is taking something like an iphone i'll go ahead and remove these media queries now i'll hide them and turning it horizontal right now this isn't going to work so let's make some changes for this as well i'll leave the phone like this and drag vs code back and we can make some changes for our final break point which is the mobile device landscape scrolling all the way up here let's look at this break point you can see we're selecting a max height of 425 pixels and a minimum aspect ratio of 7 to 4 so the width would be 7 units and the height would be 4 in comparison so let's select everything we have here now except this display none for the nav we want to keep that and let's go ahead and put an h1 here with a font dash size 1.5 rim and we can leave that all on one line but when we save it will get formatted if we're using prettier like i am that prettier code extension or vs code extension now i'll go ahead and put some styles on the main element we'll go with flex flow which will set the direction to row and then no wrap so we should have only one row then justify content we'll set this to space evenly and after that let's align items and let's set this to stretch to give them all the same height in case the content would make them different heights and then we can go ahead and style the card just a little bit so under here i'll type the card class and i'm going to put a width use the min function and now instead of 100 width right away i'll use that calc function again i'll say 33 this time minus 0.25 rim instead of one rim and we'll put the max for any card at 200 pixels okay then we can set something more specific on the card let's do the fig caption looks like i need to scroll up for some room here so i'll do that as well and for the fig caption let's put the font size 1.25 round and then let's go ahead and select the paragraph below and we could put these on the same line actually so let's just go ahead and put a comma here and put dot card paragraph and we're going to go ahead and set that same style on both and save okay now that we've made those changes let's drag this back over and then we'll turn our phone horizontally and we fit all of the cards right in here together which is nice let's see if we could do that in a different size as well maybe the iphone plus yes it works as well too it may not work as well in the smallest screen i have a feeling these will be just a little taller than we would want probably let's see yeah they're a little taller but it's not too bad you might expect to have to scroll when you have one of the smaller phones so that wouldn't be really a breaking thing to me but you could work with that if you really wanted to target this specific device but overall for most phones i believe this would work well in the horizontal mode so there's some nice changes you can go back through and tweak a few things one thing i want to check is that very very small margin that we set and let me find what size that was on again because i wondered if we even needed that or if i was just playing around with that back when i was working with the code that is such a small margin on the top and bottom and this is at the ipad size so let's see what it looks like if i comment this out i'll select it all press shift alt and the letter a comments out that code bring this over so i can switch to an ipad and there's the ipad size and let's make it a little bit bigger so we can see everything there we go yeah it looks good without it so i would probably remove that as well and i'll drag this back over and then we'll just take this out of the code and the rest i think i'll leave as is and of course you can play around with this i do not do this perfectly myself everything is trial and error basically as you go so mess around with this code don't accept it just the way it is see what you can change what you like better one way or the other let's move on to css pseudo selectors pseudo selectors include both pseudo classes and pseudo elements so the obvious question is what is the difference between a pseudo class and a pseudo element well a pseudo class is a selector that selects elements that are in a specific state so if we look at our starter code and this is the code that wrapped up the mini project in the last lesson so we're just starting with that and if we scroll down to the links we can see some of these different states we're styling for the focus state the hover state the visited state and then just a basic link which we actually could have added on the pseudo class link here as well if we wanted to because that is the unvisited link so there's different states there there's even an active one that we could have styled and for all of those those are different specific states of the element so a pseudo class now a pseudo element is similar but they act like you've added a new html element into your document and also pseudo elements use two colons instead of the one we see here with pseudo classes so we'll look at those as well but we're going to look at pseudo classes first and again this starter code is what we have from the previous tutorial the mini project that created this small staff page of three employees for the acme co that we see here and created profile cards for each one so that link will be available in the description if you want to download the starter source code we're not really going to change the project for the better today i'm just going to use it for some examples that you may not want to keep in the project at all but i'm going to show you how pseudo classes and pseudo elements work now we're already familiar with the different pseudo classes here that we've applied to links and we've looked at a couple of other pseudo classes along the way during this css for beginners tutorial series one other one that we could add here is active so let's go ahead and put a nav and an anchor and then we'll put active and let's just style this so we can really tell the difference so we'll say red so it'll just really stand out this should be when we hold down on the button on the link and then it turns red i have my mouse button for the click held down right now when i let go of course it goes ahead and completes and scrolls to the id for the employee that we expect it to but that is the active state now let's refactor a couple of these for the better with things we can learn about new pseudo classes today so notice here we have a descendant selector and that means we have a nav and then we're selecting any anchor element inside the nav element and then we're applying the state but then when we choose focus besides hover we have to say nav a again well we can stop some of that by using the is pseudo class so if i put is here and then put a parenthesis after it then i can eliminate repeating this nav element here and then just once again say anchor focus so we're just putting the one nav but now we're saying inside of that if it is an anchor with hover or anchor with focus then style accordingly so this should give us the same results and as i mouse over here on our page we see that it still works and we've made our code a little drier and dry is an acronym for do not repeat so we managed to write just a little less code and get the same result by using the is pseudo selector now sometimes we can discover a pseudo selector and again these are pseudo classes i say pseudo selector synonymously but we are making a selection but make no mistake we are using pseudo classes right now sometimes we can discover a pseudo class that will also save us some time and that is the case here besides link and visited where we're styling both let me remove all of this and then i can just put any dash link and the any link pseudo class selects both the link and the visited pseudo class so now when i save we should once again have the same results now this is unvisited or if we click jane now we visited jane and she still has the styling that we expect that we had previously in the project but we have once again made our code just a little drier by learning more about pseudo classes now just for an example i'm going to scroll up where we have our header and footer right here and we're choosing both of those in a list of elements essentially to apply the same styles now i will not make this code drier by applying this but i just want to show the example we could use is here and then list these elements inside and there's really no reason to do it other than this example right now but i do want to show the difference so i'm going to go ahead and save right now this will be the same as what we had before but we've just added this extra code but notice when i mouse over here in visual studio code we get the selector specificity and it is displayed it's 0 0 1 so it's not high specificity we could override it just in this header area here we can overwrite what's on the header or we have a footer area down here just a little bit lower and we could put something there and it would overwrite what we have in here but if we put something else in here like a class and i'll temporarily do this it won't make our project look good but now we have put a class inside the is as well and notice our specificity selector is going to pop up and it's changed instead of 0 0 1 now it's a whole level higher it is 0 1 0 so it has higher specificity and now if i were to put a different color here in the header for example so i will go ahead and do that and i'll just give it red so we would definitely notice and save notice the text in our header is still the white smoke color it is not red and that's because this has a higher specificity even though it comes first and it's not down here in the cascade the higher specificity keeps these styles however if i remove this class and it goes back to the lower specificity now it turned red so that's something to note about using is it's going to adopt whatever has the highest specificity within its parentheses now one other thing we can do let me put card back is instead of using is there is another pseudo class that works almost identically and it's where it will accomplish the same thing except it does not have any specificity so notice when i mouse over it the specificity is 0 0 0 or basically a lack thereof it does not have any so you can overwrite whatever is inside the where pseudo class so that's also worth knowing so i just wanted to use this to demonstrate we're not really going to leave these here for your finished code but just remember those tips about the specificity when it comes to is and where pseudo classes now i'm going to scroll down to the card class so we have that right here is the profile card right underneath the card class i'm going to type card once again and then i'm going to give it a target pseudo class inside the target pseudo class i'm going to say border 2 pixels solid and give this rebecca purple and save now let's see what this does you can see jane has a purple border now two pixels solid purple all around her profile card she is the last profile card that we selected here so if i choose joe instead now he has the purple border because he was the target if i scroll back up jane no longer has that purple border so what we're saying with the target pseudo class is whoever is selected whoever is the target of our selection will have that purple border and now matt has that purple border so that could be a useful class if you really want to highlight whatever was selected and if you remember in our html how we're doing that is using the anchor tag but then it is a page link it's not going to a different page it just has the pound sign or the hashtag if you will for profile 1 or profile 2 or profile 3 that matches up with the ids of these cards which are in article elements so there is the id of profile 1 and then if we come down to the next article profile 2 and so on so these are just on page links with anchors and whoever is the target gets that outline now i'm going to scroll down just a little bit further under the card class once again and then the image element so after that let's add another card and then let's add an image and first let's go ahead and just put in alt now if you haven't seen this yet this means i'm selecting any image with the alt attribute so we can base our selectors on attributes inside this i'm going to once again add a border let's make this really big so 10 pixels solid red and if i save we should see that around all of our images because they do all have alt tags or alt attributes added to their image tag actually is how i should say that so what if we wanted to say just let us know which images we forgot to put an alt attribute on well we can do that with the not pseudo class so after image we'll say not and then wrap the attribute in parentheses so this would actually serve to help us check our page to make sure we've remembered to add alt attributes to each image so now none of the images have the red border because we did provide alt attributes for all of them so let's just go here temporarily to our html and let's remove the alt attribute from one of these images so here we have joe's alt attribute we'll just go ahead and delete and save and now if we look at our page joe has the red border because we forgot to put an alt attribute there for him now i'm going of course fix that with ctrl z put that back and save and that fixes our page but that could be very useful and you could use not the pseudo class not for other things as well remember it's going to select whatever does not have what you specify and now let's look at the nth child selector which we have used a little bit in previous tutorials so we'll say card and then no space we'll say nth dash child now this can be confusing and it's somewhat because of the way it's worded you would think we were looking for the child of the card class but that's not really true we're going to be selecting the cards themselves so if we say nth child and the second one we would be selecting the second profile card so now let's go ahead and change the background color so we can really see which card we've selected and i'll say papaya whip and we'll save and here's the thing to consider now we've got matt selected but he's the last profile card and we said we wanted the second but if you remember from the previous lesson we've used media queries to rearrange the order of our cards however if we look back at the html matt truly is the second card in our html so this nth child selector is going to be based on the actual original order within the html and maybe not what we see on the page if we have reordered the order that was in the html with media queries or even without media queries we could go ahead and reorder them if we wanted to but the nth child will not be based on that now we could put in other selectors here too so let's put in odd and save and now notice matt was the second child so the first and the third are odd and that would be jane and joe likewise we could put in even instead and it will probably select matt once again and not select jane and joe because matt is the second which is even and of course joe and jane first and third are odd so i think you get the idea for pseudo classes so now let's move on to some pseudo elements that we can add right underneath the card class and the fig caption element and this would be a descendant selector so we've got the card class and the descendants are any fig captions within the card class so now after that let's specify card and fig caption once again but now we'll use two colons and then let's say after and what we'll do after is create a pseudo element that will have content and then we can specify what content goes inside let's just put hello to start with and after that well i'll just leave it at that to begin with here i need to get rid of that extra quote there we go and save and now let's look at our page so now we've got jane devrell hello it says hello right at the end after joe's last name coder hello is immediately after so maybe we should put a space and we could highlight that and now we'll see the hello at the end of each last name a little easier but it was added to each one of the fig captions now we could notice something else about this too i can select all that text but i can't select the text that here that is our pseudo element content again it's not really an element it was just added in with this after pseudo element selector so now instead of hello i want to go ahead and remove that and i'm going to put in an emoji just some sparkles here and then i'll put display and block so this will be on its own line and save and now we've got an emoji following each name on each of our profile cards and likewise i could switch this to before and what it would normally be on the left side or before their first name but now because it's a block display it's above each name so i'm going to scroll for a little more room and let's add some more new content here for our fig caption as well actually for our paragraph now so let's say card and then the paragraph and we'll select the before sudo element and for content here we can type a specific value say open dash quote and now if i save this we will get a double quote added to the left as we see here it's actually probably a single quote that's added after our other single quote but we can also add a close quote so i'm just going to copy this down with shift alt and the down arrow and i'll switch this to an after and instead of open quote we'll have close quote and save and now they've turned into double quotes and they're wrapping around the single quotes that we already had but we've added quotes here without having that quote element that we were relying on here inside of our html notice inside of each paragraph we have the q element which is a quote that we were using for quotes so we could remove those because one handy thing here is we can style these however we want to so let's look at an example of that we could say font dash size i'll put it 3 em so that's going to rely on whatever the font size is of the paragraph element to get the em size and then let's say position absolute if you remember when we learned about positions we'll say top and we can make this a minus so minus 0.25 em and then left minus 0.5 en now something else to remember about position absolute it always needs its parent to have position relative so here we need to select the paragraph itself and give it position relative we can save that and notice our quote on the left got a lot larger so we were able to really style this quote separately from the rest of the paragraph now let's do something similar for the after quote so once again give it a font size of 3 em position absolute give it the same top as well so that would be minus 0.25 em but now we'll say right minus 0.5 em and save and now we have matching closing quotes on the right again we're adding these as pseudo elements so let's go back to our html quickly and remove those other quotes that we had so that would be the q element i'll highlight that press ctrl d twice to get the other two hit backspace and now i'll select the closing queue ctrl d twice to get the other two backspace and save so we remove those other quotes that we had and now we have our big quotes in place of those and we can see they've applied to each one of the profile cards with our pseudo elements just a couple of more pseudo elements to look at before we're finished so for the fig caption let's once again say card and then fig caption two colons and now let's say first dash letter and here inside of this we'll say font dash size once again go to three let's say rem here because we're applying it directly to that letter and we should get a larger letter to start out with but we don't and why don't we that's because this got larger itself let me go ahead and comment that out and save and now notice our emoji is back to a smaller size so this first letter actually applied to the emoji so let me uncomment that and save and you'll see the emoji get larger again so what happens if we put this after instead of before now the first letter of each name got larger so that's something to consider too if you use the first letter pseudo element it's going to apply to the before pseudo element if the before pseudo element exists now instead of just the first letter you could also choose first line if i remember correctly and yes we just made the whole name larger by choosing the first line let's move on to css variables css variables are very very useful imagine a large project if you will and we have a hexadecimal color code as you see here for our body element and i've had to use this code twice just inside of this body element but imagine in a large project where we have had to apply this color code many times throughout the project and then our boss says he wants to change that color in the project we would need to go through and find every instance of this hexadecimal code and change it but when we use css variables we would only need to change this hexadecimal code in one place and that's what makes them so useful let's see how this is accomplished you can see we just have a basic page here with a header nav main area and a footer and we're going to refactor some of this using css variables so let's start out by putting in a comment for our variables so i'm just going to copy this reset comment and right underneath it i'll paste it and change this text to variables and now we're going to put our variables inside of a pseudo class that you may not have seen yet and that is the root pseudo class everything inherits from that that is referencing the document root so the html tag would even inherit from this root pseudo class so we put it at the top and now we can define variables inside that will apply everywhere in the project we're going to start out with color because if you do not use variables for anything else in css it makes much sense to use them for colors now we start out by naming a variable and they all start with two hyphens or two dashes if you will now you can name them in upper or lower case i prefer uppercase i am a developer and overall we usually name static values in javascript and other programming languages with uppercase they're referred to as constants so i kind of like to see them in uppercase and that tells me as a developer the definition for this variable is probably near the top of the file as a constant and so that's how i remember it you do not have to do it that way but i'm going to use all uppercase today for these variable names so for our background color let's just pull what we have inside of our project already we have this hexadecimal code i will copy and then i'll put in the hashtag and put in the code and now we have created a variable for the background color now to apply this in the rest of our css instead of the code here we're going to use a small function that's available in css called var and then parentheses and then we put in our variable name and it's as simple as that now we will still have that background color and we can copy this and we can also use it here or anywhere else in the page that we're using that color code and once we save i'm going to go ahead and go live i did not have live server serving this page so we should see it again and now it looks the same because we applied this variable you will see if i remove this ctrl x just to cut it out temporarily and i guess i didn't change our background color here i should remove because that is the fallback so let me switch this to black just quickly and now i'll go ahead and remove this and apply and we can see it's black and that's all i wanted to show you was that the variable is applying and so we're using the background color actually as a fallback to this background image statement that's using a radial gradient but we want both there so i'm going to replace black once again with our variable and save and that's how we're applying now the background color saved in this variable okay now let's do the next one so i'm going to name this alt once again capitals here alt bg color and now let's find our alt bg color where we had a little darker color down here and here it is our background color for the header and the footer so i can go ahead and control x to just cut that out notice it doesn't take the hashtag so we'll have to put that back but now i'll put the hashtag the color code and now we have our alt background color so we can just copy this variable and we can scroll down to where that was for the header and the footer i believe there it is and we'll put in of course it needs to be in the var function and put parentheses around it and save and we still have that same background color now notice we're using white smoke in more than one place and then we used white down here but white smoke would also be sufficient so if we wanted to go ahead and replace this with white smoke it will still look about the same and it does so now we should create a variable for the white smoke as well but we're using it in two different spots we're also using it as a radial so if we want to remember that it's okay to go ahead and create two variables that have the same value and that's what i'm going to do right now so i'll have a radial color so anywhere in my project that i will use a radial gradient i might want to use this white smoke but then i'm also just going to have a light color for parts of the page and i'll use white smoke there too but it would be weird if i put radial color in another part of the page i might be able to get away with putting light color in as part of that radial gradient but i just wanted to show this example that you could use two variables and they could have the same value and it's okay to do that so let's go ahead and copy this radial color variable first and actually before copying that i want to show you something else about using a var function and how we can type this out and how visual visual studio code will help you so now we have our var with the parentheses if i start to type the two hyphens notice vs code gives me a list of the variables that we've created already so that's very handy and it even gives you their values over here to the right i'm just going to choose radial color and use it in my radial gradient and once again nothing is changing so if we're making the conversions right and refactoring our page we shouldn't see changes it should continue to remain as it is over here now let's go ahead and replace any area that has white smoke and i can press ctrl f and just search for white smoke and it says there's three or four three of 4 so we have 4 actual instances so now i'm going to say var parentheses dash dash and choose light color and that will also be our white smoke value so now i can select white smoke press ctrl d to select the other instances but notice two of the instances are the value that we have in our variables so we don't want to replace those so let's just find the one that we do want to replace which is the background for the nav and now paste that in and save our project continues to look good and now you can see we're also using the color black here for text in the nav for the bottom border for the nav and maybe in other places in the project as well so let's go ahead and create one more variable and that will just be our dark color for the our color theme and that's what i'll name it and here we'll just put in the hexadecimal code for black and now that we have that we can find other places that are using that code and replace it so we'll once again do control f i'll paste in that value and it says two of three so these are the only two actually the third one would be our variable above so we need that then type far now dash dash and it is our dark color now i'll copy this and simply replace the code down here with that and we have replaced it as well now notice for the border we still have two pixels solid and then we're just providing the var for the color value we can also use css variables for far more than just colors so let's scroll back up to the top and look in our body element and we see a font property here first and this is a shorthand because we're supplying not only the font size but we're also supplying the font family so let's define a couple of variables and we can use both in the same definition here so as we come up to the top again inside of our root i'm going to put slash and here i'm going to put font for our comment and now for the first variable i'll do two dashes and ff for font family and then we can just copy the value we have here which is nunito with the fallback sans serif so i copy that i'll bring it up to our variable and we've added that now i'll do two more dashes and in fs or capital fs for font size and here i'll put 1.5 rim and then in case we want a larger font size somewhere i'm going to put in an fs dash xl for an extra large font that we may use somewhere later and i can put three rim for it and save and now we've defined our font family font size and font size extra large so let's put the font family and font size to work right away and we can do that here so we'll put a var variable or a var function actually and now we can pull our variable from our list and this is font size then we'll highlight the font family put another var two dashes and we'll highlight the font family variable there and save and it should look the same now as you may be gathering we're not limited as to what we can put in these variables so it's not limited to the font or the color we can also use it for other things let's quickly scroll down and take a look at our nav area here you can see we have the light color the dark color and the dark color again used as a border but then we have a padding here of 0.5 rim and we could possibly also add a property or two here so let's start with the padding and let's define that above as a general style because we could give this padding to other parts of the page as well in a project so i'll just put general here and then we'll do two dashes new padding and we'll put in our 0.5 ram lowercase rim there we go save that quickly scroll down to the nav and apply that as well so instead of the 0.5 here we'll be using a var parentheses two dashes choose padding from the list that's good now what if we wanted to apply a shadow so let's look at how to apply a shadow we'll use a box shadow property and here we're looking at an x offset for the first value which i'll put in a 0 a y offset for the second value i'm going to put in 6 pixels for that and then there is a blur value which i'll put in 5 pixels and then there is a spread value and i'm going to put in minus 5 pixels here and what this does is essentially creates a shadow right underneath you could provide an x and y and have the shadow off to the right and underneath or coming from another direction if you're picturing the sun overhead essentially that's what this shadow is going to create because it should come straight down okay after supplying that then we also need to have a color and we already have a dark color so let's put in the var and dash dash dark dash color and save and if we look at our nav now it has a nice little shadow right underneath the bottom line i could try to make this bigger so it stands out let me put it like 15 pixels and there we see the big shadow underneath but that's not what we want we want just a subtle shadow and we can save that but what if we wanted to use this shadow in other parts of the project also so maybe we should just highlight that or we could highlight all of this and that's what i'm going to do and i'll copy that and then bring it up here under our general styles that we have for our variables not the general styles underneath and here i'll put shadows because it would look kind of strange to have the shadows coming from different directions as if there was more than one sun looking at your project so having the shadows fall all in the same direction makes sense and then we can define shadows using another variable and that's okay we've defined this variable above it and it knows what it is and there we're putting it in and this definition is completely legitimate so we'll save that and then we'll scroll back down to our nav and just bring in our shadows variable for the whole thing so i'm going to delete that much and then change what we have here to our shadows variable and save and the shadow still applies now we could use this same concept for our borders as well so this is a border bottom but we've also just defined borders before and it uses the same structure so let's just take this value which is two pixels solid in the dark color copy that and create a borders variable above as well just underneath shadows and i want all caps again and then we'll put in that value and it uses the dark color variable we can save that and then come back down once again to the nav and where we have the borders we'll just put in that value and it will only apply to the border bottom as we define it here so here's our borders and save now let's move to the html file i'm going to close our find window as well it's time to add some extra content to our main area of the page so i'm going to scroll down to the main area highlight the h2 we have hit backspace to remove that and i want to put in 12 divs so i'm going to type div i want lower case here div and then dot and i'm going to name the class that applies to all 12 divs square so now we have div dot square and then with an emmet abbreviation i can type times 12 and press tab and instantly have 12 divs now that i have that i have no content inside the divs so i'm going to select the last one which is just the closing tag for the div and then we can go to i believe the edit menu and let's find no it might be the selection menu there it is and let's find select all occurrences and that is control shift and l control d selects the next occurrence but the combination of control shift and l will select all or you can just select it here from the selection menu so now we've selected all of those and i'm going to press the left arrow key to go to the beginning and i'm going to paste in an emoji i have of a laptop and i want that in the last well i guess the last 11 number 2 through 12. the very first one i'm going to put in a paragraph and just put the word hey in so we see something different and if we save that you can see we have hey and then 11 laptops after that i'm going to come down to let's say the eighth one right about here and i'm also going to put in square dash dash not important let's do highlight because we just might want to apply another class to one of these divs and you can see i have my code wrapping so this line wraps down to the next line but that is the change we are making to the html we'll make all other changes now back in the css i'm going to scroll up just a little bit if you'll notice the header nav main and footer all have these values and the display is grid i no longer want that for the main element so i'm going to remove the main element from that and save and you can see our content is now stacked on top of each other as divs or block elements one on top of each other on the far left so now let's move down to the main area and apply some more styles here right now main is just a flex item in the larger flex container that is the body element but we're going to make it a flex display as well or i should say display flex after that let's justify the content and space dash evenly and then after that we can align items and we'll align the items to the center if we save we have definitely seen our flex items inside the main now change let's change flex dash flow to row and then wrap if it needs to now let's add a gap and i'm going to use the min function here that will pick the smaller of whichever of these values so i'll say 4 viewport units or 15 pixels so whichever would be smaller it will use for the gap and remember gap is shorthand for row gap and column gap as well okay now let's put a padding value and i'll put it up here above and i'll just say padding and i want 10 pixels on the top and bottom but 0 on the left and right and this is different than the padding variable we applied you could have other parts of your project that have different padding but if you know there's a value you will reuse more than once then it's also a good time to declare a variable for that okay now that we've defined those things for the main we won't see a huge change here because we haven't defined our class for the square yet now what we have done previously is take the code that i had and extract those values into variables and i often do that when i'm designing something however now i know what variables i want to use so i'm just going to write them at the top for the square and then we will come down and define the class for the square but just know this is a little backwards typically i would probably define them first and then extract them like we previously did for these other variables okay for the square we have a couple of variables to create and the first one is going to be dash dash square we'll start all of them out with that and let's do the background color here i'm going to choose papaya whip and that's kind of a cool name for a color after that we will go with square once again and then dash not a space just a dash and size now we're going to have the same height and width when we create a square i'm going to use the max function now and this will pick the larger of these two values either 150 pixels or 20 viewport units so it will continue to grow as the page window gets bigger okay with our variables now defined i want to come down to the class and let me highlight an area here we had general styles i'll take this comment as well so we can comment before we begin the square and if there were other features for our app this is the area that i would put them and i might say features right here you also might comment each individual feature if you wanted to i'll just say features for now and we'll put in our square class so we'll start out with a background dash color here we can use our var two dashes and we want to pick square background color after that we're going to have a width and that would be a var two dashes and it looks like we have enough variables now we need to scroll which is okay we'll choose square size now i'm going to do shift alt and the down arrow because we want the same value for the height of the squares as well okay after the width and the height let's create a border we've already got a variable for that so we'll stick with the same border that we had previously defined and after that border we want a border dash radius here we have not defined anything so we'll just go with 15 pixels then let's use a display of grid and let's place that content in the center so this will center our content let's save what we have so far well that's a big difference so now we have our squares we have the content in each one centered and we have a different color background as well just a couple more properties now for the square so let's define a font dash size use our var again and now we defined an extra large font size let's use that and when we save our emojis get larger and so does the text okay let's apply a box shadow here too i need lowercase there we go box shadow and let's once again use a variable we created for shadows there it is and if we save we'll get a little shadow under each square also now if you remember inside of our html we also added this square highlight class so let's go ahead and create it also and underneath our features i'll type square dash dash highlight again in lowercase and now i want to show an example of when you might redefine a variable so we want to apply this square background color and imagine we had all of these squares and now we just want to overwrite one rather than having to go in and change different things about our definition for square so this will only apply to the class square highlight and we can change the value of this variable so let's choose background color once again and let's make this corn flower blue that is an interesting name as well when we save this only applies to the one square we added the square highlight class to but we have redefined this variable for that class now let's add a feature that css variables makes very easy to do and it's in high demand let's add a dark mode in addition to our light mode that we have here so to add a dark mode we're just going to define a separate color theme but we're going to do it inside of a media query so just underneath our styles we can put this media query towards the top so we'll say at media and then parentheses we have prefers dash color dash scheme and then we'll say dark and then inside of this media query let's put our pseudo class once again and now we can define our dark mode inside of this class so for the bg color and notice we're using the same variable names that we did here so we don't have to go and change those anywhere else in our code so we're just redefining these variables we'll put black for the background color then for the alt dash bg color let's put a flat black and then for the radial color we'll go ahead and put in kind of a gray let's see if we can lighten this up any i don't know if it will take the caps yep it will so let's try to lighten up the gray just a little bit but we still want a gray color something like that so we'll just go with that for now and we'll see how it looks after that let's put in the square background color and here let's go with more like a purple and then we'll try to lighten it up so after we get the purple let's come over here towards the light and something in that range and i'm just kind of guessing but we'll see what we get so when we save it switches to the dark mode and that's because i prefer the dark mode and have my system set that way and i'll show you how to do that now if you do not prefer the dark mode this won't go into effect so if i just put prefers light here just some other value it doesn't really matter i could put prefers dave for all that for the anything else that would change essentially it's going to ignore what's inside of here so prefers light and we're back to this because we prefer the dark mode and we're already using the opposite of that so again like i said i could put my name here it doesn't make a difference but if we put prefers dark then it does switch to this dark mode so now just to show you let's look inside i'm on windows let's look inside of the settings i right click on the desktop and choose personalize and then i go to colors and it says choose your color so if i actually did prefer light mode then the dark doesn't apply and you can see how it even changes my window here but i am going to set it back to dark and our web page responds so that is how you set up a custom dark mode with your css as well so you've got your app media prefers color scheme and dark and then just define your dark mode theme inside of here by overriding the other color variable values that you've already defined today we're going to look at css functions our starter code is much like the ending code for the last lesson however let's quickly look at the html and as you can see our page over here on the right i have added an h2 heading a paragraph and then a link inside of a section element that is inside of the main element and i have commented out the divs we previously had in the last lesson but we will come back to those so i wanted to leave those in our css remains the same from the last lesson and we can look at some functions we have already used in previous lessons if we just scroll down there are color functions and we can see here inside of our prefers color scheme this is one change i've already made because i wanted the light theme to show up but if you remember if we put dark here i need lowercase or prefer lowercase if i save i get dark mode because my system preferences are for dark mode but you can switch this to light and then this dark mode will not apply so let's look at this we've got rgb which is a function and if i were to click here inside the color for vs code and then we click the bar at the top as we've learned about colors we can see other values in hsl it has parentheses as well and a value or values inside that's also a function hwb is a function so these are color functions and that's what you see here we've also used image functions and if i scroll down just a little further and we get to the body or the main element we should have something yep there in the body we've got a radial gradient function and as we've learned in the past we can also use linear gradient but those are functions they have the term radial gradient or linear gradient and then parentheses and then something is passed inside some value and then as we see here we're also using a reference function which is var and we learned about var just in the previous lesson as we're using css variables so we use var and put the variable inside to get the value from that variable another reference function we learned in the past when we were working with images was url with parentheses and that's how we loaded images into a background image spot and there are many useful css functions so many that i can't cover them all but i will put a link in the description and the resources to the mdn page that does list all of the css functions today i want to cover some that i think you will use often or frequently and a few of those are math functions and we've used some of those too but i want to dive just a little bit deeper so let's scroll back up to where we have defined our font size right now it's currently 1.5 rim which one ram would be 16 pixels so 1.5 is currently 24 pixels if we were to select our paragraph here and look at what was applied inside of dev tools we would be able to see that but now let's talk about the min function first so instead of 1.5 we can type min and then let's put something like 2.25 rim and then we'll put 3 vh which is viewport units but it's also specifically referencing the height not the width and that is very useful when you're working with fonts now let's talk about what this min function does it's always going to select the smallest of the two available and notice one of these is an absolute value so it wouldn't make sense to put in 2.75 ram or something like that here for the second value because it would then always select the smallest so we've put in one absolute value and one value that will change based on the height of the page so let's save this and then we don't see a whole lot changing here right now but we will when we look at the height of the page so i will bring this over to take up the full page and then let's inspect to open the dev tools you could also do control shift and the letter i whichever you prefer then i'm going to choose the computed tab here inside of devtools and we'll scroll till we see the font size and that should be coming up here shortly there it is 36 pixels so that is 2.5 rim which we set as one of the values and remember it will always choose the smallest of the two the second value was three viewport units of height so if we start to shrink the page we'll notice our font is shrinking now let's look at the font size again and i'll have to scroll but it's 28.632 you can always tell it's being calculated when you get a decimal afterwards because we're not usually going to enter that in ourselves so the font size is changing now the three viewport units of height are smaller than the 2.5 rims so it's choosing that instead but then what we should consider is the absolute value is actually a maximum it will never get larger than that 2.5 rim so if we scroll back at some point it should stop growing and we noticed it stopped growing now if we come back to 2.5 rim we have 36 pixels and i said 2.5 ram i believe this is actually 2.25 rim which would be 2 2 rim would be 32 pixels and then 0.25 would be another 4 for 36. let's look back at our code when i close devtools pull this over and we can verify yes 2.25 rim and then three viewport units of height i'm going to quickly scroll down to the main element because having this centered is just bothering me a little bit so i'll scroll down and make some changes here so we won't keep what we have right here let's comment all of this out that we were using previously in the last lesson with those divs and now instead let's say display flex and then we'll say flex flow and we'll make it a column and say no wrap and then justify content and there we'll say flex dash start and we can save and now it is all pulled up towards the top let's pull in some padding though but not the 10 pixels that we had here let's pull in our padding variable i can put the comment after that so for that we'll say var and then dash dash padding and save that now let's go ahead and remove the padding from our nav because it has a little extra padding compared to the header and footer and then let's change the value of the padding just a little bit as i scroll back up to the top let's look for that padding variable we see 0.5 rem so let's make this ems and then it's based on the font size of the element it is applied to so if we save don't notice much of a difference but that's what i would prefer to do for that padding okay as i scroll back up we've looked at men and we've decided or learned that it will select the smallest of the two values it's given it doesn't really matter which order you provide these values but because of that there are some things to consider when we provide the values one you should only provide one absolute value or you know which one it will always choose so the other one should be relative and it's better to choose viewport height units for fonts than it is viewport width so we're keeping a certain size in there and you can play around with it but i think you'll see why i lean towards choosing viewport height units and i don't put a percentage here because really that percentage is really easy to just kind of equal what the rim is as well so 100 percent would be 16 ram uh which would be army not 16 ram 16 pixels which would be one rim so two rims would be 200 so this would be the equivalent of 225 percent so i choose to put in the viewport height units as my relative unit when i'm applying this to font now you can use this min function for images and other things and i believe we did that just a little bit in the past but i wanted to explain more about that so now let's move on to the max function which is essentially the opposite of the min function so max is always going to choose the larger of the two values we provide so just so we can better see a change i'm going to switch this from 2.25 to 1.75 now it's always going to choose whichever is larger either three viewport height units or 1.75 rim so let's once again take a look at our page and i'll open up the dev tools once again as well go over to the computed side and now i'm going to inspect this specific element so we can see that the font size is currently 37.68 so that's fairly large but it's based on the height will it shrink if i bring this down yes it's instantly shrinking now it's down to 34.56 but at some point it will stop shrinking as well and now it has and as we look that's 28 pixels which i put 1.75 rem if i remember correctly so that would be 16 would be one ram and .75 would be 12 and that gives us 28 pixels so now we see the opposite in effect and it continues to grow as the page gets taller but at some point it stops shrinking and that's what we have there for the 28 pixels okay so let's close this and go back and look at our max once again now the same applies here you should have one absolute value and then you should have a value that is relative that adjusts itself and the viewport height units again for font makes total sense to do that so just like with min the absolute value we provided was the largest it would ever get well now the absolute value that we provide inside of max is the smallest it will ever get and i know that is like contrary to what they're named so remember max actually provides a minimum absolute value and min actually provides a maximum absolute value so which of these would i use well actually i won't use either one of these there is a third function we can use and it is called clamp and it's a newer function it hasn't been around as long but it has good support now and there we can provide a minimum so i'm going to say 1.75 just like we used in our max and then we put in the ideal size which i'll put in our relative units of viewport height of 3 units and then we can put in a maximum so i'll put in our 2.25 that we used inside of our min function so this lets us provide both we had a maximum inside of the min function and that's right here and then we had a minimum that was inside of the max function and i've got it right here and then we always use the viewport height units of 3 for that relative and it's in between so you've got minimum ideal and maximum so now if we save and bring this back once again we should see some changes but it will stop growing and stop shrinking at different points okay so we're on the paragraph we'll inspect that specifically go to the computed tab and now we'll look at the font size is currently 35.376 so that is somewhere in between now we can shrink this down and we're noticing the font size is shrinking but it stops shrinking now at 28 pixels now we can bring this back up and i believe we said 2.25 so 36 pixels would be the largest it would get and we achieved that now so if we scroll back down there it starts to shrink so clamp works with both the minimum and maximum and we'll choose an ideal size in between when necessary let's close dev tools again and bring the browser back over to the right and now let's go ahead and apply clamp to one more variable that we can create here and i'm going to create a font size dash sm for small and here i'll change this to 1.25 and then instead of three i'll use two viewport units and then instead of 2.25 i'm going to make this one well then i've still got the two 1.5 rim for the maximum and save so now we have a small size as well now let's add just a little more content to see how this can apply so i'm scrolling back down to the main area and we'll take our padding that we have inside the main i'm going to cut that out with control x and underneath main i'm going to style that section that we have so i want lower case though main section inside the section i'm going to say flex dash grow set that to 1 and then i'll put in our padding and then we're going to add an aside variable underneath that section i said variable a aside element underneath that section element in our html so i'm going to say main aside and now let's go ahead and style this choose a background dash color and i've got a color picked out and we'll use this hsla function here i'll say zero zero percent twenty percent and remember the last one is the opacity which is the transparency say zero point eight and then we have a color that we'll use and this will be for the font and we'll just use our light color variable that we've already constructed then we'll use our font size and here we'll say vr and then our var dash dash fs dash sm for that small size we just created let's make this font italic so we can really tell the difference and then the padding will once again be that padding variable we created there it is and save now we also want to provide a media query and this will help adjust our aside because when the screen gets too small we should stack them so underneath all of our current css let's go ahead and add at media screen and then we'll say min dash width and we'll choose our small break point that we had in previous lessons of 576 pixels and now for the main here we'll say flex dash flow and we'll switch it to row no wrap so now they'll be side by side and we'll say justify content space between okay after we've styled that main element let's go ahead and add the main section here and now we'll adjust the width of the section and we'll use another css function to do that and that is calc and for calc we'll say 70 percent and you can mix different units so we're mixing a percent and a pixel and then after that we'll go ahead and provide a width for the aside as well so we'll say main aside and here we'll say width we'll use calc once again and we'll say 30 percent minus 5 pixels so what we have here is actually 10 pixels that will be between the section and the aside on larger screens anything larger than 500 or as large as 576 pixels or greater i'm going to jump over to the html and scroll down here and this will be in the starter code as well or the at least the finish code but i'm going to paste in this aside here so it also has an h2 and a paragraph and that's it so we save and now we can see the column over here on the right because we are larger than 576 or we are at least 576 pixels wide so we have our section and our aside and we can see that font let's see how they both resize now as we've applied the two different font sizes so i will inspect open up dev tools i want to go to computed and i'm on the section or we could choose the aside either one and see how those font sizes apply so i'll look at the content here and now they look fairly small because we're at 50 percent inside of devtools just to get it all to fit let's go ahead and start to shrink and notice the text shrinks for both but then it eventually stops for both as well so we've reached that minimum and now it starts to grow in the main and now it's growing in the aside and at some point they both stop growing as well so clamp is working well for both of those and again remember if this looks a little small it's because we're at 50 percent here when we have dev tools open so i'll close that now we see the full page and now i'll drag it back over to the right let's go back to our css those paragraphs that we have are both content so just underneath the aside i'm going to put in a content class and that's what we've applied to those paragraphs let's just say margin top of 20 pixels and see how that looks yeah that gives a little space from the heading down to where the rest of the content starts i like that just a little better okay now what about this google link here let's talk about that so just underneath the footer we'll go ahead and style this and as we learned in our pseudo lesson we can choose any link and that should apply to both the non-visited and visited links so let's color this fire break that will look a little better on the colors that we have but after that let's go ahead and look at the hover and the focus so we'll say anchor hover comma and then we'll also have anchor focus and then inside of those we'll apply a filter and there are filter functions so in the past actually before we do that let's look at what we were doing in the past we were choosing a color maybe hsla and putting that transparency in there or if we could just leave it the color it is and just put in opacity and maybe we'd put that to 0.8 and then when we mouse over it just gets a little fainter you can't tell as good with the fire brick maybe i'll take that down to 0.6 yes now it gets a little weaker when we hover over it's a little transparent so that's how you can do that on its own or you can provide that fourth value inside of hsla and choose the color as well but what we want to do now is provide a filter and filter has several functions so one thing i like to do with filter is use the brightness and here i'm going to say 150 percent so instead of adding transparency now when i mouse over the link gets brighter i actually really like that i just wasn't able to do it earlier in the lessons so i frequently do that for the hover focus i like the filter brightness now something else you can do that is a cool effect instead of brightness is choose hue rotate and you'll always get a complementary color if you say 180 degrees so if we save that let's see what is 180 degrees difference in the color wheel if you think about colors than firebrick and it's this kind of teal or green i don't know if i like that one there so some will have better luck than others and you could play around with the degrees with that as well myself i'll probably go back to brightness so i'm just going to ctrl z to undo until i'm back to that brightness and i like how that works okay one more function to work with while we're working with these paragraphs let's jump to the html again and inside of our aside we have this lorem text and notice we provided a span element that is an inline element and it's wrapping around it and then it has a class of tool tip and then it also has an attribute that is data dash tool tip and we can really provide custom attributes as long as they all start with data dash and then we can name it whatever we want so we named this data dash tooltip and it says this is latin so now let's make a custom tool tip that will show when we hover over lorem inside of our aside over here so we should see it right up here in the top right let's jump back to the css and then just underneath the well let's do it underneath the content there we are so now let's put in a tooltip class and inside this tool tip we'll say border dash bottom so this will indicate that a tool tip exists we'll say one pixel dash and let's try orange to see how that looks if we save we see the little dashed border under lorem that indicates there is something about that now we also want to get this position relative because we will be using a position absolute when we choose where the tooltip shows up so after we've applied those styles to the tooltip class then we need tool tip hover pseudo class but now we can stack a pseudo element and this is the before pseudo element so now we've applied the tooltip class the hover pseudo class and now the before pseudo element and with that i'm going to choose content and here is where we can use a function it's the attribute function and now we just name the attribute so this is our data dash tool tip and if i save this we'll notice this appear when i hover over and now it just appeared at the beginning in front of lorem it says this is latin lorem when i hover over and that's not what we want but you can see how this works okay let's go ahead and style the rest so we'll say position absolute let's put the position at minus 20 pixels which should put it up on top if we save now and i mouse over it shows the top but now it's all scrunched and it comes down in there so to get it to avoid wrapping on each of those words we can say white dash space and then say no wrap now if we save and look now it says this is latin up above okay from there let's give this a background color and now we could use our var and say dark color there it is which was black if i remember correctly and after that we can give it padding and here we could say var and give it our padding as well so there we go and then finally let's give it a border dash radius of 15 pixels and save now when we mouse over lorem we get a this is latin tooltip that pops up we've learned a lot about css functions with these paragraphs and this layout but now it's time to go back to grid and learn about some of the grid functions so first i'll go to the html and i'm going to select both our section and our aside element inside of the main element i'll hold down shift and click and now i'll press shift alt and the letter a to comment that all out and now i'm going to select the divs from the previous lesson once again hold down shift alt and the letter a to uncomment those and now we should have those back on the page when we save we should definitely see a difference but we need to make some changes to the css also back in the css file i'll need to scroll up to the main section and we can comment out the flex flex flow or display flex flex flow and justify content and now we will uncomment what we previously had here but now we'll change some of this and we'll actually just delete these three middle rows as well okay we want this to be a display grid instead of display flex after that we're going to apply grid dash template columns and now we can use a grid function and we used this when we learned about grid in a lesson and that is the repeat function so we're going to say repeat this 4 times so that will give us four columns and then we're going to use a math function that is specific to grid and that is min max and here we provide a min and a max so i'm going to provide 100 pixels for the smallest grid item that we would want and 300 pixels for the largest now after that i also want to adjust this gap i did this in a previous tutorial as well but four viewport width units are almost always going to be bigger than 15 pixels so min's probably always going to select 15 pixels here so i will change this to 2 and then i will also switch this to 20 pixels and it should probably adjust now based on that and after i save you can see the changes on the page over here on the right but we will resize the page and look at some more changes there as well but the reason we're not seeing the grid adapt to the page the way i would like it to is because we still have in a size for the squares we had in a width and height previously so let's select both of those lines shift alt and the letter a to comment those out and save once again and now we see the grid is filling up the entire space that is available i think we should probably provide just a little bit of padding inside that main element as well so let's scroll back up to where we were and just above here the display grid and below the flex grow let's say padding and let's provide the padding that we have already defined and now once we save we should see it give just a little space and that looks better and it should adapt to all sizes so let's go ahead and drag this over and see how everything has applied now it did adapt to this size so we see all 12 grid items and you can see once they've reached that 300 width then the gap here between the columns is going to get larger as the page has to adapt but it kept whatever gap we had defined between the rows now as we resize we'll see that change so i'm once again going to right click and choose inspect remember you can also get into dev tools by choosing control shift and the letter i all at the same time or pressing those all at the same time okay now that we're here i will select one item and inspect so we've got a div square highlighted and we can see it has a width of 300 pixels as i mouse over that but we can also go to computed scroll down and see that width as well now let's resize and as we get in here to a size where they're not the grid items themselves aren't changing right now it's the space between the columns but as we squeeze them in now they're changing and now we can see that width here is changing as well so if we scroll down it should be that same number well it's close 251.8 right now and as we continue to squeeze and it keeps scrolling on me but as we continue to squeeze it will go down until they are 100 pixels and we're getting close i think and let's take a look now and now we're at 105 so we're very very close and now the page starts to shift as we'd have to put in a media query to get it to adapt after that because they will no longer shrink in any way they at this point when the page starts to break essentially is when they have stopped adjusting so they are at 100 pixels right there and if i bring this down we should now see that 100 pixels and if we bring it out they begin to grow so now 250 pixels apiece all the way up to 300. now notice our grid gap that we defined and it stays what we defined it as until they stop growing and after they stop growing then they start to separate the columns because it needs to fill out the page but as they are scrunched in it keeps that space between the rows and the columns because remember the gap property is both a grid gap and a row gap value it's a shorthand so we can see how all of that works together so we provided the min max we used repeat as well and then we used min once again on the gap property let's move on to css transforms transitions and animations and before we finish today we'll make a css only animated hamburger icon and drop down nav menu as you see here let's look at our starter code today you can see i've got an index.html file and inside this index.html file i've just got a main element and it contains three divs i don't usually use divs but for this example they're good we're just creating squares with all of them and you can see i have a class of squares set on each one the final div also has a class of animate and then i've got a different emoji inside of each div and then in the file tree you can see i've got some other files as well but for these first examples of transforms transitions and animations i'm just going to use the index.html file and then the style.c file after this though we will go ahead and create an animated mobile menu and it will have an animated hamburger icon as well as the drop down navigation menu inside of it but for now let's just learn about the basics of transforms transitions and animations now inside of the style.css file you can see i'm importing the nunito font from google i've got a basic css reset here inside the html element styles i've set the font just a little larger to one and a half rims and we're applying the nunito font that we've imported and then the body element is set to a min height of 100 viewport units it's a display of flex and a column so the main element that's inside of the body is set to flex grow one so it also extends to the full visible page that we see the body take up and from there the main element is also set to display flex for anything within it and it's set to a column as well and everything is centered and then there will be a gap of one rim between the flex items within the main element and those flex items are the three divs that we previously looked at inside of the html file they've got a width and a height of 200 pixels so they're squares they've got a border of one pixel solid black and then i set each one to display grid so we can center the content easily just by saying place content center so it centers those emojis i'll drag our code over to the left side of the screen and we can see this page right now with our starter code here on the right we've got our three divs each one is 200 by 200 pixels and then we've centered the emoji inside of each one now we're ready to apply some individual styles to each of these divs so i'm going to scroll for some more room inside of the css file i'm also going to press ctrl b to hide the file tree so i have a little more room to type and we'll review some pseudo class selectors to select each one of these divs so first i'll put in div in lowercase and then the first pseudo class i'm going to use is first child so this should select the first div and we can test that by changing the color change the background color to dodger blue and save and using the live server extension it updates automatically when we save and we can see that first div gets a background color of dodger blue so i'm going to highlight this div selector and press shift alt and the down arrow twice so i get it twice more inside of our code and then i can just change this to nth child and then we need a parenthesis and i'll put in the number two and now i'll switch the second div to yellow and then finally we can use last child for the last div and we just need one s there we go and i'll change this one to lime green so now let's save and see if the colors change and they do so we've successfully selected all three of these divs individually now the first property we'll look at is transform so inside of the first child i'll select that and use transform and then what we'll put in for a value first is translate x you can see we have different choices here that visual studio code gives us now x will move it left or right and if we use percents it bases the percent on the size of the div so when i put in 50 percent it should move it halfway over and we can compare to the other divs to see if this is correct and yes it moves our first div 50 of the way over of the width of the div not of the page or the element that it's within but of the element itself so that is the 50 and the positive number moves it to the right a negative number would move it to the left now we can use other units besides percents so in the next div i'll say transform once again and then i'll use translate y which should move it up or down and here i'll use two rim and let's see what happens it moved it down to ram so likewise if i give it a negative two rim it should move it up and as you might have guessed instead of just translate x or translate y we can use the shorthand and use them together so in the third one i'll say transform and then i'll just use translate and now the first value is the x value so i'll say 100 percent and we can combine different units so here i'll say minus 2 ram and save and now you can see it moves it to the right 100 percent and then the minus 2 rim did move it up so now we're back to our original gap between the second div and the third div because we also moved that second div minus two rims so if we were to just switch this to translate x and then remove the -2 room you can see that the gap is larger so if we wanted to move this up even more to make it obvious i could just delete the translate x go back to translate and let's say minus 5 rim and save and now you can see it moves way up so it's a little easier to see that it's working so we now know that translate x moves things left and right and translate y moves things up and down and we can use them both together but for now let's just comment these out so i'll press shift alt and the letter a to comment them out after i have highlighted them and do that for the third one as well and we'll move on to the next value that we can use for transform which is rotate so i'll once again put in transform and i'm going to leave these commented out values in here so you can play around with them from my source code if you want to so this transform will be rotate and you can see once again we have choices like x y and z so i'm going to choose x and now let's say rotate 180 degrees and this will of course apply to the first one and when i save these other changes will revert because we've commented them out too so there we have now rotated 180 degrees let's do a smaller rotation and you can see what happens as well so something looks a little strange about this box doesn't it that's because it's rotating from the top backwards so it's kind of like a pizza box if you consider it that way this bottom part is coming towards you and the top part is moving away from you as far as that rotation and that means once we get to 90 degrees it disappears because you are now at eye level with that flat top or the card consider this a card as well instead of just a pizza box and you're flipping it over from the top and so once we go 180 degrees it has flipped all the way over and now notice the rocket is pointing to the bottom right instead of the top right and that's because that card has been flipped over from top to bottom so as you might guess then if we apply transform and then rotate y let's choose that out of our list here and now if we sit this to say 45 degrees so we can see what's happening first it will be just the opposite so this now looks a little skinnier because we're flipping it i believe from left to right let's go ahead and do the 180 and yes now the flame is just the opposite so we took the right side and made it the left side but it's flipped over so imagine having the same image on both sides but it's the opposite of that so we're flipping this side to this side and then of course what was here over to this side so we're seeing this from the back as if the image was burned all the way through and so left to right would be the way to consider y as far as the rotation and top to bottom would be the way to consider x for the rotation and now let's apply one more down here to our final div so we'll say transform and now we'll use rotate z and let's go ahead and choose 90 degrees with rotate z and see what happens it didn't disappear did it it turned so we did have our taco facing the normal way and now it is turned over here so this might be clockwise let's see what happens if we do 180 yes and now it's upside down so that's actually what this is doing is rotating clockwise with a positive number a negative number of course would take it counterclockwise it's worth noting that although we can use rotate z it is just the same as if we just said rotate so if i save this we won't see a change likewise if we make it 135 degrees it'll move on around and yes we did see the change now you can tell it rotated because of the taco has a different position here in the middle but we could put this some odd number as well and it won't have such a perfect rotation to see the change so there we once again go it does rotate the full box not just the emoji okay i'll once again comment these out but leave them in the code so if you do download the source code you can see these in there and we're going to move on to the next possible transformation and that's going to be scale it's very useful at times i meant for this to be on the same line here for the comment okay for scale we'll say transform once again and then we'll say scale x as you might guess and let's make this 120 and see what happens to this top box it got bigger but only to the left and the right as with x which is a lot like the translate x but now it just grew to a hundred and twenty percent of the size but it only expanded on the horizontal plane here to the left and the right not up and down at all so as you might guess if we apply the opposite to the second div transform y oops i transform and then we need actually scale y there we go put that at 120 percent we'll see the growth goes to the top and the bottom and it doesn't expand on the left and the right at all and finally if we look at this last child and now i'm going to scroll for just a little room i'll put in transform once again and here i'll just put scale and like translate we can put in both the x and the y values so i'll say 50 x and 50 y and save and we can see instead of growing it actually shrank because it's just half the size that it was now before we finish with transform there is one more possible thing to cover with it and i'll comment all of these out as well and what we want to do there it's called skew oops i selected that below there it is and now one more to select before we move on to transform sku so now once again on this first div we'll say transform and we'll say skew x and with that we'll say minus 10 degrees and let's see what happens and you can see now we've got a leaning box instead of the normal box that we had and that's kind of cool sometimes when you want to get that effect now let's do the opposite with y so transform and then we'll say skew if i could spell skew correctly and here we'll once again say a degree but let's choose a different value maybe minus 10 degrees instead of 10 no we said minus 10 before maybe i should go 10 degrees let me go ahead and try that and yeah we can see we get the opposite if we use a positive number instead of the negative but we skewed this y also so it's leaning a little differently than this one here on the top where the sides tilted now the top line's tilted at the top and the bottom actually instead of the left and the right and finally as we did with scale and translate we can provide both in the same so transform and now we'll just say skew instead of skew x or y and here i'll say minus 10 degrees and now i'll stick with minus 10 degrees here as well and when we save we can see that applies to both so it's leaning on the left and the right and the lines have changed on the top and the bottom as well now i've touched on some of the basic uses with all of these transformations and there are many more that you can reference in mdn and so as always i'm putting the mdn link for transform and all of these different possibilities in the course description inside of the resources so you'll find that on github when you go to the course resources and now that we've covered everything you can do with transform i'll reset these back and we're going to start looking at transitions let's apply a transition to when we hover over the divs so we'll say div and then use our pseudo class selector hover and then inside of this we'll change the background color when we hover over that will be easy to tell and let's use the color midnight blue next we need to provide the transition property that we are changing and that is the background dash color from there let's set the transition dash duration and we'll set that to two seconds and save so now when we mouse over one of these i'll do the middle one it takes two seconds and it changes to midnight blue the same with the top and the same with the bottom now we can also provide a transition dash delay there it is let's set this to just a half second we don't want to wait too long and now when i mouse over it doesn't change immediately but then it starts to so it waits that half second first now this is important to know if you put two transitions together that transition delay does not go between the transitions it's just before it starts so we have a half second delay and then it goes ahead and does the two second transition to midnight blue now i mentioned having a second transition or a second transform that we're providing here so let's go ahead and do one other pseudo selector i'll say div hover again but now we'll only apply this to the last child actually i need to say last child first and then hover there we go now for this i'll say transform and we'll just rotate and let's rotate 180 degrees so this would just apply to the last one but we don't have a transition applied to that yet either but we can up here if we want to in the same line so after background color i can just put a comma and say transform and then during the duration if i want that to be a different duration i can just say three seconds here and then if i don't want to delay or i want the same delay i could just leave it as is so let's just leave it as is so we've got background color two seconds transform three seconds and we'll save and now if i hover over this last one it waits that half second and then it begins to rotate and notice it takes three seconds to rotate but only two seconds to change colors once i'll do this again you can see the color is fully changed before it stops rotating okay but that is a lot of different lines here we've got transition property transition duration transition delay and as you might guess there is a shorthand so i'm going to comment all of those out with shift alt and the letter a and now i'm just going to say transition and here i can say all of the transitions instead of any specific one i'll say i want them all to last two seconds and all of them to have a half second delay and i can save that and handle it all in one line so now when i mouse over it just takes two seconds and it finishes these still apply the same just a two second switch to the color now we can also provide a timing function here and there are some definitions or other ones that are already defined essentially that we can put in here so the default is ease but we could also put in some others let's go ahead and set this up by saying transition and now let's see timing function this is what we would be looking for a lot of different values that could go in here but the default is ease but once i start typing ease you can also see there's ease in ease in and out or just ease out now what this means and i usually can't tell much of a difference between ease and ease in and out but it starts slow and then it speeds up and then once again it slows down at the end so i'll just choose ease even though that's the default and let's go ahead and look at this now well we can see more in the rotation so it starts slow it speeds up and it ends slow now the opposite of that would be to say linear so it does everything at an even pace and now you can see it just there's not a huge difference but there's a little bit of difference so you can provide this function and if you do so you can provide it right here after how long the transition will take so right here is where we might say linear and of course move this comment over here and save and now this should still apply the linear see it's not as fast as the e's i kind of like the ease or let's try ease in and out and see if we notice much of a change i don't usually but let's see what we get does speed up and slows back down so i do like that a little bit better personally than linear but both are available and remember if you don't apply one ease on its own is the default so even if we didn't say ease in and out or linear or anything and we just left it as this it would apply the e's timing function as is now we've learned about transform and transitions that can help us make a little more impact with the transformations let's scroll for some more room and now learn about animations that's just a little different so i'm going to go ahead and start defining the class animate if you remember we applied this class to this last div inside of the html so for animate the first thing we need to do is name our animation so we should have animation dash name and here i'm just going to name this slide then an animation dash duration and i'll give this five seconds an animation let's spell that correctly again timing function and thank goodness visual studio code helps me spell here i'll say ease in and out so you can see this is a lot like a transition so far but you will notice a difference as well and we can provide an animation delay let's let's delay this by one second that's just a little bit longer we can also give an animation iteration count so i'm going to have it repeat this animation five times now let's go ahead and just go with those properties for now but this in itself won't apply the animation we need to define key frames for the animation so we say at keyframes and then we need to have an identifier here and the identifier is the animation name slide so now inside of this we'll say at zero percent essentially at the beginning of the animation we will transform and then we'll translate x and here inside of translate x i'll just say zero so we're starting at square one we're not doing anything right when it begins but then at 33 percent or one third of the way through we'll once again say transform and now i'll say translate x and we'll move this 600 pixels to the right so this will probably go way off the screen and then we'll rotate 180 degrees and notice there's no comma between those which is strange but that's the way it likes it in css so we'll just leave it like that after that i'm going to highlight this and do shift alt and the down arrow we'll change this 6 33 to a 66 so now we're two thirds of the way through and now i'll switch this to a minus 600 pixels and a minus 180 degrees so we're applying more than one thing here again no comma and then finally we'll get to a hundred percent and at a hundred percent i'm going to go ahead and say transform and our translate x once again will be back to the zero position and after that let's change the background color when we get to the final position to rebecca purple and there will be a reason we want to see this and how it changes so notice now it started animating right when i saved it didn't wait for a hover it's an animation and let me go ahead and pull this over to the full screen so we can see the full animation and there's at least three now notice it changes back to green when the animation starts again and that's something else to discuss but let's go ahead and let it finish the five times and you can see it's going the 600 pixels in each direction it's rotating as we want it to and it changes colors at the end but then it changes back to green and it's back in that starting state so since we have a smaller screen over here let's maybe change these to 300 it'll probably still make it to the edge or beyond of the screen but we'll leave it at that and then let's go ahead and add some more animation properties above and the next one that i want to add is the animation dash direction now the default here is just normal but that's not exactly what we have to choose so let's get those back up here and there's alternate alternate reverse reverse let's say alternate so that means it's going to go forward the first time and then it's going to reverse the next time so when i save this it will start again had that one second delay it went a little to the left a little to the right and then it stops now it went to the left instead of the right first back to the right and stops and so on so now we've seen those changes the next property to look at is animation fill mode so we'll say animation dash fill mode and now what happens here is we are talking about the actual ending state so the default is backwards as you see visual studio code brings up and that means it goes back to the original state it now has that green background again but if we say forwards when it stops it should now go to that other state then i'm going to shorten this up so here we'll save it so it goes forward once and then backwards once and then we'll be at the ending state so there was our forward now we go backward but when we get to the very end let's see if it goes back to green or not well it did because we alternated so let's switch this alternation back to normal because it was the opposite when it did the alternate the second time so there we end at purple then it goes back to green and starts again and now we're back to purple and it stayed purple that's the point of this animation fill mode since we set it to forwards instead of backwards it keeps the ending state so it stayed purple now again there are some other animation properties that you can dive into the mdn link that i'm going to leave in the course resources because there's a lot more you can do i'm just touching on the basics here today but once again look at how many properties we had to use and we can use shorthand instead of all those so i will comment all of those out and now let's just apply the shorthand we'll say animation that's going to last five seconds let's use ease in and out and then we'll say one second delay and then let's do the animation twice let's say normal so it does it the same way both times and then the ending state will be forwards and the animation name of course we have to provide and that is slide so if we do that this should apply the same as we had all of these properties above but this is shorthand so you can see how all of these values fit into that one shorthand line here for animation now we've completed the basics about transformations transitions and animations so let's go ahead and begin working on that animated mobile nav menu that will give us an animated hamburger icon and animated drop down menu that users could apply so to do that we need to look at our other starter code i'm going to show the file tree again i'm also going to stop live server for now because we'll launch a different html file and i'm going to drag this back over to the full window and then we'll look at the menu.html this will also be in your starter code and for the menu html we have got a basic page here but there's a little more than in the previous example we have a header element inside of the body and you can see this header element has a section inside of it and it has the class header title line and here we have our h1 that says acme co and then we have a button as well and inside this button is a div and it has the class menu icon the button has the class menu button and then we have a nav element and inside the nav element is an unordered list with four list items now they are basically fake links with just the hashtag that you would use as an anchor for the same page but i am going ahead and passing one link to a products page and this products page is basically just like the menu.html page but of course it links back to the menu.html page just so we can see the difference there i have absolutely nothing in the main element this is all about the header and creating the menu around this header structure so from there let me close this style css and the index.html let's look at the menu css that is being imported and what we have for starter code before we really start animating this menu so what we have again is the import of the font basic css reset and then we're setting two css variables just for the colors that we'll reuse in different areas the background colors of flat black and then white smoke for the font color and then the html itself once again just like the previous example has a font size of one and a half rim set the font family to nanito so that's all inherited the body has 100 viewport units min height and then is set to flex and a column again and then the header itself has a background color that's the header background color and we set the basic color here so we don't see a whole lot of difference but i'm going to go ahead and launch this page now with live server and drag visual studio code over to the left and it looks like it launched the other page so i'll need to change that and then inside of here i'm going to say slash menu dot html now right now this doesn't look too great we don't have a whole lot that looks good for sure we have our acme co here and then we've got our links here as well and maybe a little something odd there but now we'll start to apply some other styles i'm going to do control b again to hide the file tree and we can start with that header title line and if you remember i believe that's what this is is the button we had the acme co h1 and then we had a button all inside of that section element that had the class header title line so i'll put header dash title dash line and we'll start to apply a few styles there let's give a padding 0.25 rim on top and bottom and 0.5 rim on the left and the right we'll set it to a display of flex and from there let's go ahead and set the flex dash flow and this will be a row instead of a column and we'll say no wrap again and then after that let's justify the content and we want space between so we go hard left and hard right with the content we have which should be the h1 and the button i'll save this much and we do see the change so now we see a line over here that would be the button we didn't really do much with it yet and we've got our h1 over here okay after our header title line class let's get the next class which was menu dash button this is the button itself and i did use a button element so we don't have to apply some other things and it's great for accessibility such as hitting the tab button it will automatically get focus on a button element if we used a div for example we'd have to put in a tab index and there's some other advantages as well but that's a big one okay for the menu button we'll say background dash color and now we'll set that to transparent because we don't want that normal button color that we get and then we'll also set the border to none because buttons usually do come with a border now let's go ahead and give this some shape with the width of 48 pixels and a height of 48 pixels which is kind of thumb size i'll save this much and we definitely see a change it's gone we don't see the 48 by 48 because we haven't done anything else with it yet at this point let's set the display to flex justify content and we want that center we also want to align the items center and i'll scroll just a little bit and after that we're going to set a position to relative if you remember the position tutorial earlier in the css series that means we're probably going to position something absolute inside of the button but those are the button styles and if we say we really won't see a change at this point because we don't have anything inside of that button and we've set it to be transparent okay now we want the menu icon which is the div inside of the button but we're also going to select the menu dash icon before pseudo element and the menu dash icon after pseudo element so all three of these will be affected by this and we'll say background dash color now let's use our variable and we want the header color just it's that white smoke color that we defined above now here we'll set the width to 40 pixels and we'll give this a height of 5 pixels and then i'll go ahead and save so you can see what we have we have one line essentially here a big dash that's 40 pixels wide and 5 pixels high so now let's go ahead and set the border radius and we'll set that to 5 pixels and now this is going to be position absolute i'll scroll again for a little more room and after that we're going to go ahead and set our transition right here because it will apply to all of these so we'll say all instead of any specific property and then we want it to apply faster than we did in our examples in just a half second and we'll save that much now notice we only have the one line and it does have the rounded edges so it's one of the three lines we expect in our hamburger menu but we applied this to all so where are the others well the quick answer is they're all stacked on top of each other right now so we need to make a few more changes before we see them the first change is just going to apply to the menu icon before and the menu dash icon after but not the menu icon itself and here we just need to set the content to a blank basically an empty quotes here because if we don't do that they won't be visible so even though we didn't put anything in there we need to set the content to empty value and then we can go ahead and set the menu dash icon before and we're going to need to transform it now so we'll say transform and now we'll translate and we're going to provide two values here so i guess i could just do one first let's do translate y and i'll show you why we need to do two values so i'll say minus 12 pixels and save and now look they're not even up here at all that is not what we want so really it starts in the middle and since this is 40 pixels we need to have translate because the x value needs to be minus 20 pixels and then the y value can be the minus 12 to put it up above the actual one that was in the middle defined by menu icon so now when i save it gets pulled back over and i was expecting them to be the same length let me make sure i put everything that i thought i did and i'll come back and go over that but right now two different links of lines however what i expected here did happen we've got the minus 20 pixels to pull it back even and the minus 12 pixels to put it on top i'm going to select this now do shift alt and the down arrow and then change the before to after and now i'll also need minus 20 pixels here but now i'll need a plus 12 pixels to put this next one underneath and save and now they have straightened out that's what i needed was the hamburger menu all three the same so the menu icon is the one in the middle and then the top one is the before and the bottom one is the after pseudo element and now i know why it was longer before because they were stacked on top of each other but this bottom one started in the middle which then made it look like it extended the middle line which was actually the two together but not starting at the same place okay from there we can go ahead and apply some more styles to the nav i'm going to scroll for some more room and we'll select the nav element now the nav element is going to start out with a display of none but i'm going to go ahead and set up block here first so we can actually see what we're doing with the nav element and then i'll come back and change it we also want a transform dash origin telling the transformation where to start and we want it in the top and center because it's going to drop down and now we're going to apply an animation but we haven't defined that animation yet so let's go ahead and define it first and underneath here we'll say at keyframes and then we'll say show menu and now we'll say at the zero percent we will transform and then we want scale y and we'll set that to zero and then after that we want the next one to be at 80 percent and that's going to also be a transform and this will also be a scale y but this will be 1.2 notice we don't have to just stop at one so it actually will go 20 percent beyond the intended size and that's going to give it just a little bit of a bounce like kind of like stretching a blind down and then letting go of the blind and it snaps back up just a little bit so then we'll say at one hundred percent we use transform and we'll say scale y and now we'll just put it back to one and then after it snaps back up it will lose that twenty percent so let's save that and that will be our show menu keyframes for how this transition will work i'm going to come back to the nav and again like i said change the display to none and i'm also going to apply that animation but right now we just want to see what we're doing and not really have the animation or have the nav hidden so we'll go ahead and come back to both of those things right now we'll grab that unordered list inside of the nav we'll say list style type but not disk we'll set that to none and then we can set that unordered list to a display of flex and then we'll set the flex flow there to column and no wrap and after that we can select the list items so nav and li and then we'll give them a padding of 0.5 ram all the way around and let's put a border on top to one pixel solid and here i'll need var so i can set that header dash color let's save this much and see what we've got well we can see the menu is coming together we haven't really styled the links or positioned these at all but we now clearly have a menu that would drop down that has individual sections to it so let's go ahead and style those links now so after the nav li we'll have nav lowercase please and the anchor tag so all of the links will be display block instead of what they normally are which is inline and then we'll say text align and set them center and then i'm going to give them a width of 80 percent if i were to not be applying an animation if i did not apply an animation to these links then i would probably set them to a hundred percent and just change the background color and the text link so they would take up the whole space but because i want to apply an animation today i'm setting these to 80 percent because the animation will make it grow so that is the consideration there and because of that i'm also setting the margin to auto so it will center these block elements that they are now block elements when they normally aren't but what we get are centered links right now we don't have an animation or a transformation i should say applied to any of these yet but we will after that we'll go ahead and select the nav we need the anchor and there we go the any link pseudo selector which is a pseudo class so this applies to both the non-visited and visited links and we'll say color we'll set our var to the header color once again so they stay that same color whether they've been visited or not we'll set the font weight to bold and text decoration to none and that will remove the outlines we have under those words now when we save they're nice and bold and they are that white smoke color that we expect them to be and finally let's go ahead and apply this transformation which will animate the links just a little bit so we'll say nav and then hover and then we'll also apply this to the nav and if they have focus both of those we'll say transform and now we can say scale and we'll go to 1.2 which is essentially saying 120 so they should grow 20 percent and then we can set the transition right here as well so i'll just say all 0.3 seconds so we don't want to wait too long and now when i mouse over notice how they grow and that works just great and this will also happen if we tab through the page you can see the outline and this is good for accessibility we'll select each one of these as we go through so you do not want to remove the outline you could change the colors or style it if you want to but i usually leave it basically as the default it does help with accessibility so you definitely want it there so you can tab through these as well now let's go back to our nav menu and make those changes i talked about so nav instead of display block should be none to start out and then we also want to apply that animation which will be animation using the shorthand here so we'll say show menu that's the name of the animation 0.5 seconds is the duration the default would be ease so we could say ease or ease in and out again i can't tell much of a difference between the two and then we'll go with forwards so it leaves it in that finishing state as we noticed in our example before the square changed to purple and stayed purple at the end instead of reverting back to green so we'll say forwards here now this won't apply a whole lot yet but when i save it will disappear so now we need to do some other things so it will appear when we hover over the header or when we have focus anywhere in the header i'll put these final styles right above the nav here in our css and they're going to start with the is sudo selector which will save us a little space i'm going to say header and then hover but this will also apply to the header focus dash within and now after that we can specify the menu dash icon so you can see what the is sudo selector helped us with otherwise we would have had to say header hover menu icon header focus within menu icon so it saved us just a little bit so what we're going to do say background color and we'll set that to transparent and then we'll also go ahead and say transform well let me hold off on the transform i'll come back to the transform let's just go with background color transparent to start out with for the menu icon and after that i'm just going to select this and drop this down now remember the menu icon itself is just this middle line which means we'll be losing the middle line when we mouse over now after that we'll say menu icon before so now we're selecting just the top line and instead of background color here i'm going to want transform and then i'm going to set a couple of things one thing is the translate x and that is because remember we already had to translate x back minus 20 pixels we need to do this again or it will end up in a different area so we'll once again say minus 20 pixels for the translate x and then we're going to rotate and we'll rotate this line 45 degrees and we'll leave it at that now i'm going to select all of this and do shift alt and the down arrow again i'm also going to press alt z just so you can see what isn't showing over there so it's is header hover header focus within and then we're selecting the menu icon before and now i'm switching this one to after once again i need translate x minus 20 pixels but now instead of 45 degrees i need minus 45 degrees finally i'm going to copy this one more time select all of that down but instead of the menu icon before or after i'm going to switch this to the nav element itself it's not a class this is going to be the element there we go and now we need to change that display to block so it actually shows up because before remember we had none so those are the different changes we have made for when we hover over the header or when we have focus within the header which is important if we're going to tab through so now let me hover over the header and you can see our hamburger menu changes to an x and that's usually desirable so the middle line disappeared we set that background color to transparent then we rotated the other lines the before and the after so now they form an x and of course we also had to set this to display block for the menu to show and now as i hover over these that other transformation of course makes each one of the words grow by 20 so we can tell what we're hovering over and then likewise if there's focus within here now i remove this and it changes so there we go and we can see that little bounce at the bottom too there we go now maybe we want to set a background color on the nav itself because i'm noticing that's bouncing a little bit lower and going into the white there so let's go back to the nav and find where oh it was actually underneath here so let's set a background color on the nav itself and here we'll say var and grab that same header background color and save now let's check out the bounce with the menu and yeah now we see that color stays with this last word instead of dipping into the white there that looks good but there's one more transform that we can apply and it's the one that i didn't before this goes to an x which is great but let's apply this to the hamburger menu as well so this is the menu icon and right here we'll say transform and now let's rotate and let's do 720 degrees so that's going to be a few full turns there at least a couple so now when i hover over you get the spin and then we have the x and that's a nice little effect as well so there everything is complete i hope this has helped you learn a lot about transformations transitions and even animations because they're very useful but you don't want to overdo it too many on a page can just be too much before we get to the final project in this css for beginner series there's one more topic to cover and that's organizing your css i've included a markdown file with this lesson and the sample code and it just is going to contain an outline of suggestions to organize your css and i say suggestions because there are no hard and fast rules there are different theories and different takes on this but the first one is possibly the most important and that is follow your team that's a very important rule to go with because if your team has already established how they're organizing the file you need to follow that pattern you're probably a junior dev getting started with them and you don't really want to rock the boat there just follow and of course use the pattern that they have and i'm sure there are reasons for that pattern after that we're going to have code examples to look at so our second reason here or second suggestion is to use comments to create headers or you might call them dividers as well labels if you will inside of your css now we've seen this already throughout this series as we've done a few mini projects and you've seen that i've provided these headers which are much like what mdn suggests throughout the css so here's our reset labeled and then i have one for the variables and then inside of the root pseudo selector here you can see i labeled colors there might be other variables that i would create and so i might have sub labels here inside of that pseudo selector for that then i have utility classes general styles and now we get down to blocks which is something we're going to talk about in just a little bit but this is just our starter css for the day but you can see how i've already organized it and those comments will really help you get back up to speed if you come back to your project a month later or anybody else that's working with you they'll easily find the section that they're looking for okay the third suggestion here is to sort properties and typically you sort those properties alphabetically but this is not everybody's choice some people prefer to sort properties in their own groups that they have chosen and mdn has some suggestions for that too so i'm going to put a link in the resources to that mdn page that has those other suggestions and also a link to an article that discusses sorting your css properties alphabetically now that's not how we write them so i'm going to show you what i do here in just a second but i want to give you a memory technique to remember this by sorting alphabetically at least in the english language we usually say that abc's which would be our alphabet so just remember abcss and that will help you remember sort alphabetically so a b c s s if you will okay i'll save the markdown file now let me show you an example of this and how to do this in visual studio code typically in a small project it's easy to find these and really i don't sort them so you can see i have margin padding and box sizing now if i did this alphabetically box sizing would be on top but that's not how i write css it's not what i'm thinking of when i write the properties like if i create a flexbox for example and we'll see that as we get down here to the body i have these properties i had display flex and then flex flow justify content and then align items well that starts with a but i don't think of it in that order i would write my css in this order but then to sort it alphabetically say when i'm done if i'm working with others and or i want to come back to the project later and of course just find the properties easily select all of these properties and then control p now i'm on windows that may be a little different on mac but control p to open up the command palette in visual studio code and then the greater than symbol and type the word sort you can see it shows mine says recently used sort lines ascending but you may not have that so type the word sort and then you'll see the different sort choices choose sort lines ascending and you can see it sorted these alphabetically for me so sort lines ascending is what you want from the command palette now they're sorted and i know what property say the specific property i'm looking for maybe align items it's right at the top or gap i know it's going to be right here alphabetically likewise this helps you find issues say you had a second gap or a second min height or display just you accidentally put the property in twice and one was defeating the other due to the cascade well you would find it when you sorted because then it would say put both displays on lines right beside each other so you would find those issues so sorting alphabetically the abcss is a good way to go now i'm going to press ctrl z to undo that because i'm going to come back and change this in a little bit and once again i'm thinking about these flex properties especially justify content and align items in that order and i know right where to find those again small projects it's much easier to just leave it this way okay back in the markdown here's the big one that we're going to spend most of our time on today and this is for larger projects you wouldn't typically do this in a small project but on a team larger projects they usually have a naming convention methodology so i'll put follow a naming convention methodology if i could spell that right there we go methodology and a very popular naming convention methodology is b e m which stands for block element modifier so block element modifier there we go so there are others this is just a popular one so i want to go over this popular version and of course your team may not use this they this may not be the one you adopt going forward but do know it exists and know that it is used a lot so you may see it out there in code example so now let's go back to our code and besides what we have here we start with a block here at the bottom so you can see i've defined a button class now typically even frameworks and libraries that you may learn later to work with on larger projects will apply classes to put most of the styles on the page and you can see other than the html and the body i'm really starting out here with the class and now above i have a utility class here and some variables but other than that just here in the reset i had of course the button and i might put an image here and set the display to block or anything else i'd want to do in the reset but after i get past the big elements of html and body i'm probably going to use classes and these naming conventions other frameworks and libraries that have been built by third parties those usually apply classes as well so we start out with a block and here it is also it says aka components you may hear some people refer to these as components instead of blocks but they're talking about the same thing now this has a semantic meaning it's important it's saying we're defining a button so the button has a width of 100 a height of 100 pixels both and a border radius of 15. this is our basic button style that we want to use on the page and when we go to our html we see three buttons and they all have that class button and of course they can have different content but then we get to the next part of block element modifier methodology and we're first going to look at the modifiers i'm going to scroll for a little more room here and i'll get that just right up to the top of the page and underneath i'm going to paste in some code and we can see those changes but notice what i've done i've i put another comment here that says modifiers now this isn't something you would need to do in your code i am just identifying these for you for the tutorial but what modifiers are about are about incremental style changes so here we're going to have blocks with modifiers so our button is the block and then we have two dashes not one if we were to name something we might have two words in the name and we could put one dash in between and this is why bem uses two dashes and later we'll see two underlines but these two dashes indicate that this is going to be a modifier and then you can see i've got the name secondary the other one i've got the name lean and the third one i've got border and here you see a name that has one dash in it so border and then lg stands for large so a large border so these are incremental changes we can make to the blocks with modifiers now we don't replace what we previously had the button class we add this in addition in our code so for example here on our second button we could put btn-secondary [Music] and i'll save once i spell secondary correctly and now you can see we have a yellow button notice in the html we've applied both the button class and the button secondary class likewise on the third button we could put our button dash dash lean and now we have applied that modifier as well to our block so our button lean modifier and the third button here is leaning and i believe we had another one let me look back yep border large so we could apply another class you can apply as many as you want to so we have button dash dash and then we said border dash large and save and of course now it's outlined in white so it's a little harder to see than what we had with the black border before but we'll change that here in the future but it did of course make it a little harder to see right now i could press alt z so that wraps well it didn't there it is it's already wrapping it just wrapped on part of that closing element but there we've applied modifiers to the blocks and these modifiers have provided incremental changes to our more important semantic blocks our buttons and those are the starting styles that we want and then of course we can modify them with each class that we apply okay let's move on to elements now but before we do that i need to add some html over here we're going to turn our three buttons into a header so i just need to add the rest of the header so i'll type header and add a class of header to start out but that closing header tag is going to need to come after all of our buttons as well so we'll add that much and save and you can see the changes will be over here to the right after that i'm going to add an h1 and it's going to have a different class so it's going to have header two underscores and then title and there we go and then for the title i'll just put b-e-m for our block element modifier lesson and save that much now we see bem on the page after that i'm going to add a nav that will be wrapped around these buttons and it's going to have a class also that is header two underscores and nav and of course i need to put the closing nav after the buttons as well and i can save now we could say we're finished with this and apply some classes but let me first describe what i'm doing here so you can see our component is the header it is the important semantic element and now what's within it depends upon the header so we have a header with two underscores and then a title this is the element the e in bem the block element modifier methodology and then we also have another element that is dependent on the header and that is the nav now inside here we could say are these buttons dependent on the header or not because if we have a button style we're using throughout our site and not just in the header we would want to leave this as it is because this would be important so we don't have to redefine the same button style somewhere else however if these are buttons that we're designing a specific way just for the header then they would become dependent on that header and if that was the case then we would say header two underscores button and of course we would change everything else here so i'm going to select one button and then ctrl d to get the next and the next and there's one more there i've got all five of them now and now i'll arrow to the left and i'll put header two underscores and save and you can see we've changed each one of those classes now because they are dependent on the header it's also important to note that this does not display the structure so you might think you need to put header two underscores then nav and two underscores and then button that is not the case you only wanna start out with the major component the block name the b here so header two underscores and then whatever the actual element is so in this case it's a button in this case it's a nav and in this case well it's an h1 but we're going to call it title because that semantically makes more sense to me and you can do that again there are no hard and fast rules but if you're following this pattern the actual rules for the pattern are two underscores and then element likewise for the modifier two dashes and then the modifier so i'm going to save these changes and then let's go back and modify the styles that we have over here and include those elements as well so there is our block section and we actually need to include the header itself now inside of our block so i'll start here under our comments and say header then we're going to have a background color and i'm going to say var and change this to our header color or background color that was defined before so there's the b after that we would also have a color there we go color and i'm going to put another var two dashes and choose color after that we're going to have some padding i'm going to say one rim on the top one rim on the left and right and one half rim on the bottom we'll make this a display of flex flex dash flow whoops flex dash flow is going to be row and no wrap and then we'll justify content and we'll say space dash between we'll save that we definitely see a change but not everything we want yet let's go up and remove some things from the body all we really need to keep are the first three properties let's get rid of these bottom three and we'll save that and we see a few changes at the top not exactly everything we want yet but we're getting closer and i think i see i forgot the word header on the color so if i put that should change those to white letters that looks a little better as well and now let's add an element section that i'm going to put right after our button class and i'll just put the comments there it looks like it's wrapping here but what i wanted to add along with just the elements editor is the comment no standalone meaning in other words they're semantically tied to the block they are dependent upon that block so it's not just a button it's going to be the header button style and likewise it does not represent the structure so what we do not want is the header underscore two underscores nav to underscores button you would not want that you would just want header underscore button and i don't know why i have the period there looks well that's weird i'll control z to change that again maybe that's marking something let's see if i can just back up one not header nav underscore button and save okay i've got the comments there now i actually need to put in the style well it's going to be the same as the button so i'll just copy this control x to move it down put it underneath and paste it in but we're going to change this now to our header to underscores and button now we have our button style back in place for the header but we don't have any of the modifiers in place that we applied to the html so i'm going to select all three instances of the dot btn here arrow to the left one arrow to the right and type header two underscores and now they should once again be applied and we can see that so we have the yellow background here and we also have the leaning button here on the third one let's check that border large maybe we just need to change that color to see it better or we could apply another class that would help us see it better so besides the button lean and border large let's go ahead and apply the header to underscore button dash dash secondary to this third button as well and now we can see the yellow color here and then we see the white border as well notice there is a space between each class that we apply to these elements in the html okay jumping back to the style now we have modifiers that are applied to the elements instead of the blocks you can apply a modifier to either one but just know an element is going to have the two underscores and of course a block is just going to be the class defined such as header or previously we had dot btn for button now this all helps with organization and like i said when you're working on teams it's great to have that document communicate what you're working on as fast as possible and follow the pattern of the team and if you just have a large project on your own this may help as well one other thing this can help with and i want to show this with the element section is when we're selecting something it's good to say a class like dot header has a specificity of 10 and we've seen that with the specificity calculator that should still be linked in the course resources however if we did this and then instead of using an element selector such as bem which is a class when it's all said and done this is just a class a header two underscores button instead of header space button if we did this which says the class and then the element within the class or any button elements within the class this has a specificity of 11 instead of 10 it's much better to keep that specificity even and using classes like this helps you do that as well so that is just an added bonus that i wanted to go ahead and mention i hope all of these suggestions help you organize your css in the future and i plan to use some of them coming up next on the final project welcome to the final project of this css for beginners course at the end of my html for beginners course we built a full website for the little taco shop that you see here it's a basic website with very minimal css applied but it provides a great foundation for our css final project we're going to take this basic html website and turn it into this modern website with responsive design by applying much of what we've learned about css let's get started today by looking at the starter code and this is available in the course resources you'll want to download this code because it is the full website that we completed at the end of my html for beginners course and it will give us a great foundation for this project now if you completed that you already know what all is in the code however if you hadn't let's quickly go over it we have a few html pages and we're going to make a few changes to those not many though and then we have an image folder img inside this image folder i've included some larger images today so we will be able to delete the smaller images i left those in as well though in case you wanted to launch the project as it was in the beginning as we finished it in the html for beginners course but the top names when you see the double names they end with the dimensions and of course the width on the smaller the older images is 400 pixels the width on the newer images is 1000 pixels and i've included those dimensions in the file names so for the duplicates you always want to choose the one on top and then i have a fourth image that does not have a duplicate because we will add one page today but let's select those duplicates and then i'm going to press the delete key and now we're left with just our larger images likewise there was an examples folder and this just gave us example images of what the project looked like at the end of that html course if you wanted to complete the challenge at that point you were welcome to try to look at these images and complete that and then look at my code so let's click that examples folder and also press delete as we no longer need those files now there is very very minimal css applied to this project so we will be cleaning out everything that is in the css file you can press ctrl a to select all and hit backspace and delete those 19 lines of css that did exist so that gets us started now let's go to the index.html which is the home page and we'll start by looking at the head section the head section contains all of the meta tags that we would need in a project you can see author and description however there is one missing that we're going to have to add but since we're creating another new page and we're going to just include the about content that is currently in the index html we had an about section we're just going to make that a new page and abstract that just remove it from the index and put it in its own page today so let's go ahead and do that and then i'll show you what's missing from the head section in all of the pages we already have so let's click the new file icon then type well it looks like maybe i already included it here before i actually do that but you would want to click the new file icon because the about page would not be in the starter code i guess i typed that in earlier but now we have a blank html file i'm going to type an exclamation mark which is an image shortcut but if the shortcut doesn't pop up for you you can press control and the space bar and then you should see the shortcut menu and select this top abbreviation and this gives us the outline of a page now there's a couple of things it includes that we don't have in the other html files from that html beginners project one is this meta tag that has xua compatible ie equals edge they still include that with this image shortcut but it's not really necessary unless you're concerned about possibly supporting internet explorer which at this point has been discontinued and for the most part is no longer in use but you could include that the one that i want to make sure we include today is the next one meta with the name equal to viewport then the content is equal to width equals device width and initial scale of 1.0 we absolutely need that meta tag in the header of all of our html pages so we can make them responsive so i'm going to copy this and then i'll go back to that index.html and i'm just going to put it right underneath the utf-8 that we have in the medic care set which is character set here in the head and of course we can remove that space and save and then i'm going to want to do that in the hours.html as well so i'll put that in get rid of the blank line ctrl s to save one more time in the contact dot html and we'll put it right after the utf dash eight line and save so now that we've done that back here in our about we could fill in all of these blank things that we have or we could just copy the pattern that we already have inside of the index.html so i'm just going to copy the full head section here the entire head element with the opening and closing tags go back to about and then i'm going to select it here and paste it in now i'll just change some information now i can see some of that's going off the screen so i'll press alt z and get that code to wrap so i can see everything you'll want to change of course my name in the author meta tag to your name and now for the description instead of the official website here we would just want about the little taco shop so this is the about page and that's what we have and we could put the same in the title about the little taco shop everything else is pretty much as we need it for now so i'll press ctrl s to save that and of course we see a little auto formatting now where it included the lines the spaces that you see here but we'll just leave it as is and then we will come back and get that information or abstract that out of the index dot html when we get to that point now moving back to the index.html file i'm going to scroll down and we have a header section already clearly defined but we can see it goes clear off the page i don't have the closing tag here yet however everything we see here is really all i want in the header now we had a figure here with an image but we're going to pull that out of the header and put it inside of its own section so select everything from the opening figure to the closing figure and i press control x to cut and then i'm going to backspace and remove those spaces and then i'm going to type section and press tab and so i get a closing tag as well and then press return or enter so i get a new line and then i'm going to control v to paste that figure in so now the section contains the figure and the header contains the nav and the h1 and i'm going to do that on all of the pages but and i'll remove that hr which was the horizontal rule however i want to apply some classes here as well that will help us format our css so before i make these changes to the other pages let's apply those classes in the final lesson before this project we learned about the bem block element modifier naming convention and i'm going to use that sum today for each section of the page so we'll start here with a class and we're going to set this equal to header the same as the element name and it will be the parent class for everything inside so when we label the h1 we'll say class and here i'm going to say header two underscores and h1 likewise for the nav we'll say class equals and then we'll have header two underscores and nav and when we get to the unordered list we'll say class equals and then we'll have header two underscores if i could find that underscore key again and then ul but then i'm not going to apply classes to the list items some may want to do that and that would be okay this is a small project and i don't have any plans to put styles directly on these list items so i can accomplish everything we're doing today without doing that so i'll leave that as is however we do need to rearrange some of the menu so i'm going to select this top list item for about and press control x to cut it out we'll leave the menu as the first selection the second selection will be the hours page the third will be the contact.html so at the bottom i'm going to paste in the what was the first list item it's now the last list item but it will no longer be an anchor tag that goes to part of this page it's going to go to the about.html page so we'll switch that over and we don't really need to have the whole abbreviation here so i'm going to remove that it was good to learn about abbreviations in the html course but now we'll just use the word about because that pretty much sums it up likewise we can change contact us to contact and store hours can just simply be changed to hours likewise our menu can just be menu and that will still indicate what these pages are all about now let's scroll down to our section that contains the figure and we're going to call this a hero section it's the part of the page after the header where you usually see a large image or an attention getter that's often referred to as the hero section so let's give this section a class and we'll just set it equal to hero and then inside we're going to put an h2 element that is not currently there so we'll type h2 press tab and we can complete the closing tag that way now let's give this h2 a class equal to hero two underscores and h2 and we're going to put a welcome here that the owner of the little taco shop wants us to add and it's going to say bien benitos which i believe is saying welcome in spanish as well so we'll just have that h2 there and this won't be on every page it's only going to be on the home page after that we have some changes to make to our figure itself now the figure can just stay there as is so really what needs to be changed is the image and maybe applying a new class to the fig caption so we're going to start off with the image and it's still the tacos and drink image but the dimensions have changed so we just need to change the name so it's going to be 1000 and you can see vs code knows what's in our image folder and it wants to help us complete that the alt will stay the same the alt attribute the title will stay the same but now we need to go ahead and supply the actual dimensions so we can avoid that content layout shift that may happen and that was discussed previously in a lesson as well of course we will be styling this image to be a responsive image too and then we're going to give the fig caption a class while we're here and this class is going to be off screen and what that does if you remember when we had covered that in a previous lesson is it will take this caption off the screen but it will leave it available for screen readers for accessibility so that is important as well so it won't be viewable but it will be readable and now we need to structure these top two sections the header and the hero section in all of the other html files as well so we have a good foundation before we start in on the css so i'm going to scroll up for now and select this header on line 15 and scroll all the way down to line 44 where the section ends i'll hold down the shift key and click my mouse select all of that because right now our about.html does not have any of this content so i'll press ctrl c to copy and now i'll go to the about.html page and inside the body element i'm going to paste all of that in now it will currently be the same as we have on the index page but we can make some changes here and the first change we're going to make is to select this last list item and control x to remove it from the bottom of the list and it will now go once again at the top of the list so ctrl v to paste but it's not going to go to the about page we just want to put in a slash which means it will be the root page that will take us back to the home page so we'll type home there and then the next one should go to not just hashtag menu because that means it would be on the same page it should go to the home page which is the slash and then hashtag menu and that will take the visitor back to not only the home page but then to that particular spot on the home page which is the menu so now we've completed or adjusted the menu for our about page but then we also need to change this header so instead of welcome to the little taco shop let's just put little taco shop at the top of our about here and then after that we can scroll down and change our hero section just a little bit as well so we're not going to have the h2 bian benitos on the about page we're just going to have the figure and this is going to be a different image here so this one will take the last part of this image file because this is named taco delicioso tacos delicioso if i could pronounce that correctly and then we'll have a different caption here as well which should say tacos delicioso i could double check my spelling on that as well and let me go ahead and check the title tag the title is basically the same so i'll copy that but we'll put an exclamation mark in there because the title and the alt do not have to be the same the dimensions are the same 1000 by 667 we're once again going to have a class of off screen on the fig caption but the caption should be different so this will be try these delicious tacos and we can save and now we have the header and the hero section complete on the about page so now we can make the same similar changes to the other two pages we have but we won't need to paste in the content we really already have it there so let's go to the hours page and we can scroll down and look at that menu and what we're going to have to do is apply those classes once again but we essentially already have the menu that we're going to need to have on the hours page we're already linking to home however the next one should be menu so let's cut out that about with the control x and we will link to the home page and then the hashtag menu and then we'll have hours after that i'm sorry we won't have hours after that we're on the hours page we're going to have contact and then we'll have the about page which once again needs to remove the slash in the hashtag and we'll say about dot html and alt z to wrap this code because we no longer need the about lts it will just be about and then we'll make those similar changes here no longer contact us it will be contact no longer our menu it will just be menu and then home so we can save now let's scroll down and we'll take that figure once again ctrl x to remove it and then underneath the header create just a little space i'll highlight that hr to remove it we'll type section and now in the section we'll paste in our figure and then i'll give just a empty line after the section and we're now ready to apply the classes as we expect to have them here on the hours page as well or we i guess we could go ahead and change the details on the figure it's going to be tacos tray again but it's going to be 1000 by 667 i believe but let's check this because vs code will help us so tacos tray there we go 1000 by 667 and then the rest of this won't change except the dimensions so 1000 by 667 and then the fig caption once again is going to need that class equal to off screen there we go now we need to add the class up above which is hero and save now let's go ahead and scroll up and we'll apply those header classes once again at the top for the hours page so we have class equals header and then i'm just going to copy this to save just a little time paste it into the h1 paste it into the nav and paste it into the ul and now this first one is going to be two underscores in h1 the next one is going to be two underscores and nav and the last one is going to be two underscores and ul and now we've added the classes we need one more time let's make those same changes to the contact page now so our starter will be the header with a class of header the h1 will then have a class of header two underscores in h1 the nav will have the class of net our header two underscores and nav and the unordered list will have a class of header two underscores and ul for an ordered list looks like i put some extra spaces in there i'll remove but we've applied the class to the header let's look and see if we have the menu in the order that we want it as well so we want to start with home and then about is okay but once again it needs to be to the about page here so we'll say about dot html and we're going to remove the abbreviation alt z to just wrap that code so we can see it all remove the abbreviation so it's just an about link which we will select with control x then and remove and put it at the bottom of the list and the second one should be menu which is where we really want customers to go then hours and about there so that is in the correct order we'll remove the extra wording so we just have menu hours and about and save and now finally one more figure to remove to put in its own section element so highlight that control x to remove it we'll leave the header to itself i'll delete that horizontal rule element then above here we'll add the section element inside we'll go ahead and add the figure the section will be a class equal to hero and then here we have tacos close up so this is going to change as well so we'll say tacos now we've got close up 1000 by 649 which is just a little different so delete that and now the height here is 6.49 the fig caption once again gets the class equal to off screen and save and now we are finally ready to write some css and what we're going to do at the top is what you've seen me do at a lot in a lot of different tutorials and that is import some fonts from google i'm going to control b so you can see this full line for just a second and notice i'm importing two fonts here so after the url you see family equals and there's fugaz one and then there's also nunito that you've seen me use in several tutorials using both of those fonts today and if you remember from the typography lesson of how we can go get those fonts from fonts.google.com you can do that and then import those into your css as i have after that we're going to have a css reset it will be fairly minimal and you have seen minimal ones throughout some of the lessons but let's go ahead and label our sections as we create our style sheet today it's going to start out with the everything selector the all selector but then a couple that you may not have seen that are commonly in resets that i did not add in the lesson on sudo elements but you see these pseudo elements so you also see the all selector with the after and the all selector with before so we're going to do that for all of those and then we'll put in what you typically see me put the margin zero padding of zero and then a box sizing of border box now that's not all of the reset that i want to use today but that's a great start we also need to put something in for the images and this will make all of the images display block which gets rid of that minimal little space below the images that they were originally designed to be in line so they have that little spacing problem and that will remove that then we'll set the max width to 100 and we'll set the height to auto and this will make the images responsive for our project i'm going to ctrl s to save that much and then scroll just a little bit there's a few more styles to add to this reset the form elements like input text area and button for example the ones that we're going to use today so we'll say input button text area all three of these and other form elements that you may use do not inherit font properties like other elements do so we need to say font inherit if we want that to happen and when i save we'll probably see them formatted yep on three separate lines there but that is the end of my reset for this project okay after that i'm going to add another section and this is where i will define css variables now i'll define these as i need them and then be able to come back and reference them so i'll just say variables here and then as you know that starts in the root selector so i'll just have a selector here and then inside i'm going to have some labels too and the first one that we will do today is font and i know what i'm already going to do for font so i can at least add one variable now and that will be ff for font family and the main one that i'm going to use is that nanito font and then after that i'm going to have the fallback of sans serif and then for the headings on the project is where i'm going to use the other font so i'll say font family headings and here i'm going to use let me spell this correctly fugaz 1 and then it has a fallback of cursive okay i can add just a few more variables that i know i'm going to use right away and the other one for fonts is the font size so i'll just call that fs and i'm going to use the clamp function that we learned about so the font can grow and shrink and this is modern css this helps us prevent adding it prevents us or keeps us from adding many media queries as some older css might have done so our page can stay more responsive without having an abundance of media queries attached to it so our minimum size today will be one rem and then we'll allow it to grow at 2.2 viewport units based on the height and then the max size would be 1.5 rent that's what we'll put in and so that will allow the font to grow as the page gets larger and of course it will stop so it doesn't get any smaller than one rim okay after these fonts variables i'm also going to put in another note here for colors i like to define all of the colors in variables and that way i can just change them in one spot and see how they work together i will be coming back to add more colors here but i'm going to start off with a background color and i just want a basic orange it's going to match something that's in the photo that we have and i think that's going to look good then i'm also going to use a background color dash fade and that's because we're going to use a linear gradient now i've picked out this color it is a fade of the orange color so i'm using rgb and that's 2 5 2 2 two zero one six zero and you'll see it's a faded orange after that i'm going to use background image to create this gradient that we're going to fade with so here i'll say linear gradient and then we'll go to the bottom and then we'll put in our variables that we just created above so we'll start with the background color and after the background color we'll put a comma another variable and we'll start in and we'll go to the background color fade so we'll start at the top with the full orange and we'll fade down to that faded color okay that's looking like a pretty good start but i could put in just a couple more for the body so just underneath this i'm going to put in two dashes and body dash background color so i'm planning on a different background color for the body element than i am the html element and you'll see how that works here i'm just going to put in a basic white with hexadecimal code and it looks like i left out the semicolon over there there we go so now everything formats better and then we'll just have our standard font color i don't even need to say body font color it's going to be the main font color and this will just be a black with hexadecimal code as well okay i will be coming back to add more variables but right now i want to move on to the next section and just add a few utility classes that i always use so i know what i need to put here i'll put in utility classes normally i would probably just copy and paste these from a file that i would already have written them in before but we'll go ahead and write these out we've got our off-screen class and this is a style i use to move elements off the screen but yet keep in the document flow so a screen reader will still read the content but maybe i don't want them to appear visually on the page so i'm going to say position and we'll set that to absolute and then i'll say left and we'll say minus 10 000 pixels so it will be way off the page the next class i need is no wrap and this is when i want to ensure that some of the text does not wrap in an area that is awkward and we can do that with the white space property and then we'll just set that to no wrap and we'll see how we apply that class later and the final one is simply a center when i want to center text that say in a paragraph or in a heading we need the text align and we can set that to center with the utility styles complete we're now ready to finally start applying some styles directly to elements and classes so i'm going to bring vs code to the left and go ahead and launch the project to the right now remember we removed the few styles that did exist and everything we've created so far really doesn't apply to the page except for that reset at the beginning so we have removed more than we have added to the current project but we now have variables ready to apply and utility classes ready to apply but we also want to add what i would call general styles so let's put in a section here and we'll label this the same way we have the other sections are in the same style and now with our general styles heading we'll start with the html element itself now i'm going to use a different color on the html element that will be the background for the body element but if you remember from some previous lessons we also use scroll behavior on the html element and we'll set this to smooth and this allows a smooth transition to when we link to other parts of the page and we'll still be doing that on the home page this index.html when we go to the menu that will be located below the big image and so in the second half of the page so we'll have scroll behavior smooth and if i save that you won't see any changes to the page because that affects more of a behavior but i'm going to try to save after every property applied so you can see those changes the next one we'll apply is font size and we'll use a variable for font size that we already created and now when i apply that we'll save and you see the font size instantly got larger and that reminds me earlier when i applied the font size variable above i believe or that was in the background color fade let me bring this back to full screen quickly because i think it's in the linear gradient vs code tried to help me out and it accidentally added a second var to each of these that should have been noted when the video was created as well so hopefully you've already caught that error but i need to correct it here so now we just want one bar each in that linear gradient and we'll save and if we come back now to the page we don't see a difference yet because that's not applied but it will be applied here very soon so down here in the general styles once again in the html we have increased the font size now let's say font family and we'll use the other variable we created there which was ff and if i save again we should see the font family has changed and it does for the page after that we're going to set a background color and this will be a variable as well and it's the bg color we see here in the list and i just want to make sure vs code doesn't add a second var now you can see we've changed to that orange that we set but now this is actually the fallback because we're going to use the background dash image and here we're going to use that background image variable we created and we'll find that here in the list as well and save and now we should see it go from orange to that lighter orange as we scroll down the screen and that's what happens so it's a linear gradient from a full orange to a lighter orange but this will change as well as we apply some styles to the body so we'll see how this is going to be applied to the overall page now here we're going to have a background dash color as well and this is the variable and here we started this with body so it's the body background color and now we'll go to the next line and save i can see this is wrapping just a little bit so i'm going to press alt z so anytime it wraps it'll just go down to the next line for us so we can see everything okay now we want to set a font color now currently you notice it changed everything because the body is completely over the html element that will change when we adjust the width of the body as well but for now we'll just see white again so now the color for the font will be variable and this will be the font color variable that we set and really we shouldn't see a change because it's basically the default font color of black now let's have a min height for the body and we'll set that to 100 viewport units of height and if i save we shouldn't see much of a change because it's already taking up over 100 viewport units of height already after that we'll set a max width to 800 pixels now i'm not sure of the width here to the left but we can see really 800 pixels is still within the range of this so let's drag this over and look at the full page expanded now and now we can see here was the 800 pixels and now we see the html element behind that goes ahead and expands to the full width of whatever viewport is available so we see that orange that linear gradient fade here we will change this so the body will be in the middle and we'll see orange to the left and the right i'll move this back to the right for now and now underneath this we need to define a couple more things one is going to be the margin for the body zero on the top and bottom but auto on the left and right will center this so when i save again we don't see the change here but when i drag this over we now see the body is centered bringing this back to the right we want to add some borders a border on the left and the right so i need to set a borders variable and a border color variable so i'm going to scroll back up here to the colors and let's set this border color variable first so we'll say border dash color and this is going to be a flat black so 333 for the hexadecimal you can see it's a flatter black compared to the true black that's above it here with zero zero zero then i'm going to put in another comment here and just put borders some might put the border color under borders but i want all of the colors grouped together so that's just my preference now here four borders let's go ahead and set this borders variable that we might use more than once in our project as well and this is going to be one pixel solid and now let's go ahead and use the borders color variable that we created now vs code once again put in two vars so i have to watch out for that when i've already typed var sometimes it wants to insert that for me okay we've created a border color variable and a borders variable we'll scroll back down to the body element and to finish out the body element we're going to say border left we're going to set this to borders and now i'm going to press shift alt and the down arrow so it just copies that down because i also want a border dash right but i don't want it on the top or the bottom and then i'm going to set well let me go ahead and save and if i bring this over you can probably see the borders just barely outlining the left and the right but now i want to set a box shadow as well on the body and that will be 0 0 so what we would typically see for the x and y but then there's a blur and i'll set that to 10 pixels and i'll use that border color again there we go and save and now of course we can't see it here but when i drag this back over we can see there's a little bit of blur along each side and that's what we want just a nice subtle effect so as we scroll the page and we'll see it stand out even more on this lighter orange at the bottom you can see the blur along the left and the right of the body here where we have our center column okay dragging this back i'm going to scroll for some more room and then we have just a few more general styles to apply before we get to classes and the different sections of the page let's have our and i'll want lower case here h1 h2 and h3 headings on the page we're going to apply the font family which was for the headings so that's dash dash ff and then we'll select headings and that will change the headings font you can see that change on the page immediately and then we're going to apply some letter spacing now we could do this with pixels or different values i'm going to use ems which would essentially be the same as referring to the font size that's already on each heading so the spacing will vary based on which type of heading that it is and if we looked at this as a rim instead of an em then it would be one tenth of that setting so what we have for the font size already at the smallest was one rim but at the largest it was one and a half so that could be anywhere from 16 pixels to 24 pixels so one tenth of that would be anywhere from 1.6 pixels to 2.4 pixels but this will just space out this font i think this heading font needs just a little extra space so when we save you can see the letters have now spaced out just a little bit more now i'll select the h2 and the h3 but not the h1 we have a couple of styles we want to apply here so we have a margin dash bottom so on the bottom only we'll set that to 1 m and now we're going to use a separate color so i need to define a highlight color up above in the variables again so here we have dash dash and i'll say highlight dash color because we might highlight other things on the page besides headers with this variable as well so i called it highlight color it's a color i've picked out to go with the orange but it's not orange it's 51 178 51 and save and you can see it's a green color much like we'd see here on the bottle of giarito's over here this mandarin has a nice orange but it also has a bit of a green in the label so let's try that with the highlight color as well so now using this highlight color and scrolling back down to the h2 and the h3 we'll set the color here and we'll be var and we'll use highlight color now that we have that and saved we should see that change on the page and yes our bienvenidos and about lts and taco trivia has all changed as well as our menu and remember this about section is going to get moved to the about page we just haven't moved it yet okay after the h2 and the h3 i'm going to select the paragraphs on the page and set their line height which this is something i frequently do it looks a little bit better and we'll just set it to a little bit larger value it doesn't have to have a specific m or ram or pixel here line height going way back to our typography lesson can just be a numerical value here so we've set it to 1.5 you might not see much of a change from that but there's a little bit let me take it away and save and yeah you might see just a bit of a change there but not a whole lot but i like something i do like to add okay the paragraph has the line height let's look at our links on the page up here so these are going to be our main links on the whole project really we don't have a whole lot of extra links so i'm going to select the anchor which would be a link of course you have to have an href with it but just to select the link itself and then we can say any link which is a pseudo class selector and this any link pseudo class selector if you remember selects both the links that have not been clicked and links that have already been visited and so here we'll say color and now we're going to need to set a link color variable as well as hover and active so i'm going to scroll back up and find that colors list of variables and we'll go ahead and set the link color variable link dash color this will just be a black color again and then we'll set also link dash hover and here we'll use hsla which will allow us to have a black color but then we'll also have this transparency and i'm going to say 0.6 so it's 40 percent transparent and 60 visible essentially after the link hover variable we'll also set a link dash active and for that we're going to set it to orange which is the same as that html background let's save those three variables and scroll back to our links that we're styling and here for link color we'll say var and then dash dash link and it is our link color that we're selecting and then the next one we'll have would be the anchor with a hover but then also let's say anchor and you could say focus but here i'm going to use focus visible which the difference is the focus might remain on the selected element however focus visible after it's used it will change and it might not not make much of a difference in this project but it's something i've started to use more and more instead of just using focus so here i'm going to say color var and we'll set this to once again link but it's link hover and we'll put the semicolon after that as well we can save those changes we see we've got black links here the hover of course is already working so you can see it fade now as we hover over each one of those but then after both of those we still need the active state as well so we have the active pseudo class selector and here we're going to say color and not color with parentheses color and then var parentheses dash dash link and it's going to be active there we go save and so now if we were actively selecting a link so when i click on it you can see it turns orange and menu is still fairly small up here but when i hold down the mouse button the link turns orange and now our general styles are finished for the project so we are ready to move on to the header section so i'll add a label inside of our style sheet for the header and then we will start applying styles to the header section i'll scroll up so this header is at the very top here and well at the very top there we go and then the first style will apply is now to the header class because we started using bem the block element modifier naming convention when we get to the sections and the first one we applied that to was the header so we'll say position and we'll make the header a sticky positioned element we'll put the top at zero so it's at the very top and then we need to put the z index to a setting of one so it stays on top of everything else that might scroll under it and when i save we don't see much of a change yet but we certainly will soon the next thing we'll style is the header two underscores and the h1 so the title of the page itself and here we're going to say text align and we'll set that to center and save and you can see that text did center now we've got just a few more variables to add so i'm going to scroll back up to the variables once again and we're at the colors list and i'm going to add a header dash bg color and here we're going to set that background color to black as well after that we'll set a header dash color and i'm going to set that to white and then after the header color while i'm here i'm going to go ahead and set a nav background color and set that to white also so we've set three new colors there then underneath the border section i'm going to add another label and say standard padding and i'm going to create a couple of variables here so padding let's say dash tb and that means top bottom so you might want to abbreviate that differently to communicate that better i just happen to use that abbreviation this time i'm going to set this just a 0.25 em and then the next one is padding dash side not size but side so on the left and the right and differently here i want this to be 2.5 percent so total if i apply this to both sides it will take up five percent of the width i'm going to save that you won't see a change applied because we haven't applied any of these variables yet and then while i'm here one more to add will be a standard margin and underneath that we'll just say margin variable and i'm going to use clamp again here so at the smallest it will be 1 em and then we'll set it to 2.5 viewport height units and then 1.5 em will be the largest it would possibly be now that this is for the top and the bottom on the left and the right i'm going to set it to zero so even though that wrapped what we did was apply clamp to the first value of the margin shorthand and then we applied 0 to the second value which would be the left and the right okay with those variables defined now let's scroll back down to that header section where we were applying other styles so we had the header and we were at the header h1 i'm going to apply the background color now so i'll say background dash color this will be var and then we'll have our header background color that we could select and i'll save and we can see that change now it is all black so we need to apply a color and this will be var as well two dashes and header color and now that we've selected that we will save and now we can see welcome to the little taco shop across the top once again after the color let's apply some padding and we're using the shorthand here for padding so we'll say var two dashes and padding and this will be top and bottom first and then we'll say var two dashes for padding and this would be the padding on the sides and we'll save and we got just a little bit of padding now to apply itself to the top and the bottom left and the right for the header it looks like i'm not closing that out properly so put that extra curly brace there we go and we're finished with the header h1 now so now let's move down to header two underscores and nav now for the nav we're going to have a separate background color variable that we created so var two dashes and here it will say nav background color and now something to discuss quickly you may be wondering why i created these extra variables and yet some of them have the same color values well i'm specifically naming them so i know where they apply and later on when we create a dark mode they may vary more than they are varying now in the light mode so it's good to have that extra control and extra labeling over these color variables okay now that i've applied that background color let's add a border i want lower case here border dash bottom to our nav and there i'm going to say var and apply that borders variable that we created so there's borders and i can save that and we now see a line across the bottom here of the nav because it's also within this header element and then after that border let's say font dash weight we'll set that to bold when we save we should see those links change a little bit the font definitely changed there and what else can we apply let's say box dash shadow 0 for the x 6 pixels for the y 5 pixels for the blur but this is going to be a shadow that looks like it's coming straight down so then we'll also set a minus 5 pixels and that offsets that blur and then we'll have var and we'll set the color here to the border dash color and save and now we get this nice little straight down shadow underneath that bottom border of the nav the navigation but also essentially the header itself and finally we need to style the unordered list so adding the header to underscores unordered list and here we'll start out with some padding and i'll say var dash dash padding and this would be the top and the bottom and then once again we'll say var hash dash padding and this would be the side value save that now you can see those dots for the unordered list were brought back in so we know we've added that extra padding it has just a little more room but now let's say list style type we'll set that to none which should remove those dots beside each list item now a display of flex and when i save you'll see that change because it instantly makes it a row by default we'll say justify content space bash evenly and we'll save and now it spaces out those items and then let's add a gap and let's call the gap one rim so what we expect there and so we definitely have a gap between those items even if they were all squeezed together if the screen got smaller and now a couple of quick notes on the header before we move on one is we did learn how to make an animated mobile header but we're not applying it to this project because it would essentially be overkill we've just got the four links and four pages to the project and we can easily link to those on mobile or in desktop by just listing them out here on the page so you don't always have to apply everything you know how to do to every project and i didn't want to do that to this project and it's worth noting why also we previously had welcome to the little taco shop across here but that's really a lot so quickly i will open the file tree go to the index.html and bring this back and let's scroll up and find our h1 welcome to the little taco shop and let's just remove the welcome to the because what we really want is just little taco shop across the top after that we can go back to the file tree once again select the css and hide the file tree i know we're squeezing all the code over here to half the screen so we can see the page more often but when i bring it back you'll find that it's not wrapping and it may be a little easier for you to read so if you're working on it with me maybe you're just viewing the code like this so you can see those longer lines where we've used some variables are not wrapping to a second line now when i bring it over and look at it like this so i just wanted to show you that i'm going to bring this back to the left and now likewise we can bring the project over and look at it in full screen as well and you'll see it's coming together a little bit better we've definitely got some changes to make yet however this has certainly helped and if we look at the other pages since we put in that work ahead of time to put in the correct image changes to the html to create those hero sections and of course apply the classes to the header and the nav as well we see those changes applied as we go to each page already so we're making a lot of progress we just have some more progress yet to make so now i'll drag this back to the right and we can begin the next section and that next section is our hero section so right underneath our last header style we'll create a new label and we'll call this the hero section with the label and for that we'll start out with our hero class which if you remember is applied to that section element and we'll say it's position relative because we're going to place something absolute inside of that hero section as well after that we have a hero h2 and if you remember this is only on the home page our index.html and that is our bienvenidos welcome here so after that we can go ahead and apply some styles to that and the background dash color for that h2 is going to be a new variable i need to create so let's scroll back up to this color that will have in our variables list once again there's all the colors so at the bottom here we're going to call this two dashes in hero dash color and now this color is very much like our highlight color so it's rgb 517851 but then we also need a transparency color here so we could make this rgb a so we can have that transparency and then this will be 0.75 and i don't need the extra parentheses so that means it will be 75 viewable and 25 transparent so when we scroll back down let's apply this to that hero background color here so we'll say var dash dash hero and there's the hero color after this hero color and i can save and we're not seeing much of a change right now but we will here in the future we'll say a color and actually i'm realizing i just labeled that wrong and i also need a hero color but i also need a hero background color so if i could label those correctly in my mind it would definitely help us out so let's go back up here this should be the hero background color that i just created instead of the hero color so let's label this bg there we go underneath this we're going to have a hero dash color and the hero color itself should just be white once again for now okay now we should apply these correctly you can see when you get many colors it can be very helpful to label those and think about them in a good order and i'm not always doing that even when i do take all the other precautions so now i've got a hero background color for the background color and here this should be var dash dash hero color for the font and now save and since it disappeared i think i may have possibly applied something incorrectly even now so let me shoot back up to the top and take a second look at these hero colors here and i see what i've done wrong i have rbga instead of rgba so it just takes one typo to set something off rgba and now we should be good and we have the green color there and you can see our green background now for that h2 with the white lettering here at the top and of course we're going to change this some more if you remember when i previewed the project at the beginning we saw this is really an animated drop down let's add some more styles to this h2 before we approach the animation so we'll say padding and here we'll have 0.25 m and then 0.5 m on the left and the right we save that we can see that extra padding applied letter spacing and here let's give this a 0.1 rim so again just that 10 percent which should space it out just a little bit after the letter spacing let's say text dash shadow and so we can apply a shadow to this lettering we'll say 2 pixels x offset 2 pixels y 5 pixels blur and now let's use that border color variable that we have used in the past for shadows and we save now that helps that white stand out just a little bit it lifts it up off of that green background just a bit because of that shadow now we need to say position absolute and we're going to move this to the top and it's going to be minus 100 pixels and first let me save this before i move it so you can see what changes it instantly makes it an element that is not in the document flow and a block element would of course span the 100 width but now because it is removed from that flow due to position absolute it does not have 100 width as a block element normally would okay now let's go ahead and move it off the page to start out when the page loads so this would be minus 100 pixels but before i do that even i guess i should show where we're going to place it to the left and the left would be 20 pixels this value will not change so it's just moved in just a little bit but now the top will be minus 100 pixels and now it should disappear and it will disappear it has disappeared but it will of course be animated and drop down and reappear once we apply that animation and now we need to create the animation itself and then we'll apply it so here let's say at keyframes as we learned in our animation lesson and let's say show welcome is the name of our animation we'll start out with a zero percent so where it starts out at the very beginning we'll say the top is going to be minus 20 pixels instead of that minus 100 and now we'll transform we're going to do two transforms we're going to have a skew and that will make that lean just a little bit we'll say zero degrees and then minus five degrees after that we'll also have a scale y and we'll set that to zero to start out with okay after the zero percent now let's say at eighty percent and this is where i like to give it just a little bit more than it actually ends up with so it gives it just a little bit of extra movement or bounce so we'll say the top is 30 pixels now will definitely be visible the transform it needs to start out essentially with the skew again and we're going to move the skew just a little bit so i'm just going to copy these so we can just change the values inside paste those in and so now instead of 0 degrees it's going to be 10 degrees here we'll leave that at -5 degrees and the scale instead of 0 is going to be 1.2 and now let's get our finishing values at 100 for the animation here this will be a top at 20 pixels and then we'll once again have the transform and i'm just going to copy that down and this would be a minus 10 degrees and a minus five degrees and then the scale is going to be one instead of 1.2 and when i save you won't see anything yet because we haven't applied the animation but now let's go ahead and apply that animation here so we'll say animation and this is the show welcome animation we'll make it take a half second to complete we'll start with the ease in and out transition and let's give it a delay now i could make this longer to be more dramatic but let's give it say a one second delay so we see the page load and then we get a little welcome drop down and we'll use the forwards property here which means it will keep the state of when the animation ends so it will remain visible as well let's save and see what happens there's our welcome now to see it again we'll have to of course navigate away and come back to the home page but then we see our welcome drop down that's a nice little animation to go with our project now let's move this over to a full screen and of course this is how it appears here but if i go ahead and press ctrl shift and i or we were to right click and choose inspect let's choose a mobile device like the iphone 6 7 and 8 and make sure it's still positioned correctly i can go to a hundred percent view we can see it a little bit better let's reload and there's our welcome so yes it's not crowding into the image too much and everything looks good it's always good of course to check your mobile design as you go and i've been leaving the screen open so we can see everything but typically i do design for the smallest first and you do want to check this along the way and we will continue to check it so for now i'm going to go back to full screen and drag this back over to the right with the animation complete i'm going to drag vs code back over to full screen now and we need to look at a couple of sections in the html that are on every page before we get to specifics about each page and those remaining sections are the main element and the footer element so let's go to the footer of the index html first because i usually like to style that after the header so once we get down to the footer itself we can see we have footer here with no class currently let's go ahead and add the class of footer as we did with the header before and then let's also apply some classes here to our copyright line so we have copyright and then the html entity which is the copyright symbol right here and then we have the little taco shot well we want to wrap this in some span elements inside of this paragraph so these lines do not break where we do not expect them to we don't want the little taco shop or we could just put little taco shop we don't want this line to break so let's put a span element here and now of course it generates the closing span element immediately i'll put the closing paragraph tag on a separate line and paste the closing span afterwards i'm going to do the same here too for copyright i guess i need to create the element instead of just typing span there we go we can copy that closing span and put it here so we've wrapped both of these in span elements now let's give them both the class equal to no wrap one of those utility classes we created that ensures that this line will not break in the middle of this content and this line will not break in the middle of this content so that helps us by ensuring this presents itself in the way we want it to this will not prevent it from being all on one line but if we're on a smaller device and it needs to wrap the lines it's going to break where we want it to and not in the middle of that content somewhere else let me go ahead and remove that extra line there and then let's apply some styles to the footer but we can also put this footer in each of the html pages so after i save the index and copy the footer i can go to the hours page and i can replace the footer that is here and we will not need that hr that horizontal rule so i'll highlight it as well just to remove it when i paste that in let's do the same for the contact page and put that in here paste and save and then we'll also need to do that in the about page but if you remember the about page doesn't have everything else yet so it doesn't even have a main element that we will be adding but let's save this for now and now go back to the index now that we've updated the html for the footer let's do the same for the main element and this will not take much at all right now we have a main element with no class and as you can expect we'll put a class equal to main here and then here we have an article that has the id of about well this is going to be moved to the about page so let's select this full article here down to the closing tag and then i'll control x i'll go to the about dot html and this is going to go inside of a main element that has the class of main and you can see i created that with the image shortcut by typing main dot main and it instantly created the main element that has a class of main inside we'll paste that article which will be the content inside of this main element now i'll save this much and we'll come back but now let's go back to the index.html where we need to label the article that's inside of this main element so i'm going to highlight that hr and remove it as well but now the article that's in here has an id of menu but it also needs to have some classes and the first class we're going to apply here is going to be main two underscores article because each main element on each of these index pages in the project contains an article if not more than one article so we will label that and we'll make sure that this is the only article that's inside the main and if it's not we will need to change it but it looks like it is and that's fine it contains the menu which we will come back to as well but those are the two main classes that every html page in the project will need so let's go to the hours now scroll up to the main here and it looks like it doesn't currently have an article but we need to apply the class equal main and to stay consistent here let's go ahead and add an article element to this html page so we have article i will go ahead and cut out the closing tag and paste it above the closing main tag and now let's give this the class that is expected as well so it is main two underscores article and save that now let's go to the contact page and here in the contact page you can see we have two sections and an h2 so let's go ahead and apply the class equal to main and let's change these section elements to articles to stay consistent with the rest of the main content here and you can see we have a opening and closing and we have two section elements so i'm going to press ctrl d and i got the closing ctrl d again to get the opening of the second one and ctrl d one more time to get that closing tag now i can just type article once and it changed all of those but now i need to select just the opening article so i'm going to select the full thing including the less than and greater than sign ctrl d again and it just selects the opening article of the second one the right arrow to get to the end the left arrow wants to get just behind the word article and now i can add a space type class and then set that equal to main two underscores and article and now this should be applied to both so we've got it here on the top article and we've got it on the second article that is on the contact page one other quick change to the contact page is i want to put the our location information above the contact form so let's control x and then just move up here above this article and paste in our other article so we've just switched that information around so now that our location information with the telephone is on top and the contact form is on bottom and finally let's go to the about html and you can see we have a class of main that we applied already but now let's apply the same class here that is main two underscores and article and save because i believe if i remember correctly there was only one article for this page as well so now we've made all the adjustments for the main element and the footer element on each of the html pages let's select the style.css file once again and pull our code over to the left so we can see the project on the right and now we can continue to make some more changes after we have styled the hero section we're now ready for the footer section so i'm going to put in a label in the style sheet for footer and now we can apply those styles with the footer class and here this is going to be position sticky as well as the header because we want it to stay in place so the bottom will be zero so that will put it directly at the bottom and i'll save that much and let's go ahead and scroll so we can see the footer down here it's our copyright with copyright symbol and the little taco shop now let's go ahead and add a background color and this background color will be the variable and we'll just apply the header background color so it stays in sync with the header and if i save yes it all turns black so we need to of course apply the color and this should be the header color as well and we can save that and now we see the font is white they're on top of the black background let's apply some padding as it looks pretty scrunched right now so we'll say padding top and bottom we are using that shorthand again so the next one would be padding side and now we'll go ahead and save that so there's just a little extra padding around that now let's put text align and set that to center and save and so now we can see our copyright with the copyright symbol and the little taco shop is centered and we have our footer across the bottom it stays in place when we scroll as does the header i'm going to copy this heading we put in here for the footer and then i'm going to scroll up and put in a very similar heading for the main element so i want all caps again to make that change after that let's directly style that main class first and speaking of copying it's going to get the same padding that we had here so i'll just copy that and put that in for the main and when i save we'll see we get a little extra space here with our menu our menu is not looking so great right now and it's one of the last things we'll do so let's start looking at some of these other pages the hours look pretty good they got just a little bit of extra space from that padding or the about has a little more information on it as well and so we can see some of that there let's go back to the hours for now okay after we've applied that basic padding to the main element itself we have the main two underscore article class and here let's apply a scroll dash margin dash top and this will be 6.5 rims you usually have to play around with this value to see what works based on your project and how much space possibly your nav is taking up because what this is going to do is enable the article information to show instead of scrolling underneath the header and then let's set a margin here and we'll just use our var and margin and save now this is something we actually would see back on the home page now if we choose menu and it scrolls well we're not on a device right now that would actually use up the page or we haven't expanded this menu to take up more room but what will happen will be it will prevent the menu from scrolling underneath this header if we have a taller menu or we're taking up more room by the time we have finished the styles that's probably what will happen okay a couple of extra things to put now and one of these at least we'll see differently on maybe the contact page because it has some extra room here already so let's go ahead and apply these styles let's say main and we'll select the article as well and now let's say the first child pseudo selector and we'll give this a margin dash top of 1 em so this would be the first child that we would see here the first article and that would be the same on any page it gives just a little more room between that hero image and the rest and now i'm going to copy this down so shift alt and the down arrow add the extra space and this will be for the last child and we do have the one page that has two different children and that has the our location and the contact form so for this last child we want to calculate some height here so let's say min dash height we're going to calculate we'll take 100 vh which would be 100 width or 100 height pardon me of what is available now let's just subtract 20 rims from that and save to give it just a little extra room to scroll and this might be more visible when we don't have as much content such as well the about page has some if we go to the hours page let's see now we have some extra room here as well so if we remove this and then save we don't have that extra room it's kind of scrunched it's nice to have that extra scrolling room and that's why that is being applied so again preference as a lot of cs css is a preference now we have just a little extra room there for the scroll and now we're ready to move on to individual page sections i'm going to drag vs code back over to full screen i'll scroll up here and copy the main comment divider that we have or label if you will and here i'm going to switch this to about and save so we'll start in on our about page in the about section i'm going to do something different here that some may agree with or may not agree with with bem but i don't want to refer to the main as the parent for the about information i want the word about there so we know it's on the about page so i'm going to add another class here that is just called about and that goes to the article so then what i refer to inside of this article instead of referencing main as the parent i'm going to reference about it just makes more sense to me for these classes in particular and i've only got a couple to apply but i want class about and then i'm going to use two underscores trivia and then on the paragraph that has the answer i'm going to say class and then equals this will be about answer so we have about trivia and about answer and even better than that i think i might put the word trivia here as well so trivia dash answer it's just a two word label but that makes more sense to me as well so we've got about trivia and about trivia answer and i did want two underscores there as well so there we go now let's switch back to the style css and put those classes in here so we'll have our about two underscores in trivia remember i put in about class in there but i don't really have any styles in addition to apply there i just wanted to refer to that about class as the parent and so we'll leave it at that margin will be that variable that we defined for a margin and then for the about trivia answer so we'll have about two underscores trivia dash answer and here we're going to set a margin dash top equal to 1m and save let's pull this over and see those changes applied to the about so here we go and see we've got a little extra space here too which also helps our scroll and then when we show the answer that is nicely formatted as well moving on to the contact form so i will focus on that and let's scroll up to see this content that we have on this page we definitely have enough height here when we have two different articles working with forms can be difficult but let's see how we can apply the styles here i'm going to put in a new label in our style sheet and i will put contact right here and then let's scroll up to make that the very top of the page and now let's start off with our contact two underscores in h2 but i don't believe we've applied these classes yet so let's drag this over to full screen look at our contact page and see what classes we need to apply to the rest of this html i'm going to leave the address as is it needs no further classes however the contact form itself does and i'm going to apply that same philosophy that i did to the about page where i have main article but i don't want to refer to the main element as the parent i want to refer to contact so i'm going to put a contact class here at the beginning for the article now for the h2 i'm going to put class and i'm going to set that equal to contact two underscores nh2 likewise for the form we can make this a contact form so i'll put class equals contact two underscores and form we'll do the same for the field set i'm going to start copying this so i just have to change the one word and instead of contact form this would be contact field set and now for the legend we're not going to apply that class but we're just going to put this off screen and we already have a utility class for that so this class will be off screen for the p here we'll go ahead and put in this contact form once again but we're just going to change the word form to p for paragraph and it looks like i should have selected the full element and then the next one as well and now i'll arrow to the end one arrow to go inside and paste in this class and now i can change both at the same time and put in the p for paragraph we'll save now we need to do something similar for the label so let's go ahead and select all three of the labels and then we can arrow to the end paste in our class and then once again arrow over change form and change this to contact label now let's do this for the inputs so select the first one ctrl d and there are only two inputs so that's all we need arrow to the right and paste in the class and then change the contact form once again and i shouldn't have done that but now i can control d to select it as well and then we have contact input as well but now we're going to have a contact text area so i just need to paste that in and switch this to text area and i believe nope there's one more and that would be the button and we have two buttons so ctrl d to select the second one arrow to the right to be at the end paste this in and this class is contact button so ctrl d to select both of those now that we've applied all of the classes that we're going to use in the form let's go back to the style sheet and drag it back to the left and we'll be looking at the form here on the right for the h2 we're simply going to set the margin to zero and save that now the field set and notice the label of the field set is already gone because we applied or the legend because we applied that off screen so it no longer had the contactless words here but we'll put in contact two underscores and field set and this will be a border of none so it will just remove that look even though the field set is still there after that contact two underscores paragraph here we'll set a margin to one m on the top and bottom zero on the left and the right that gives us some more space we can certainly tell that difference then the contact two underscores label here we'll say display of block and font weight of bold and we'll definitely see these changes makes our form look better as well now we'll select both the contact two underscores input and the contact two underscores text area for this we'll say padding is 0.5 m you can save and we'll see some change there the inputs got a little larger then we'll say a border dash radius of 15 pixels save and you can see they're rounded i'm going to scroll now that the form has grown a little larger so we can see everything again okay after the border radius we're going to have a border dash width of 2 pixels to just make it a little larger around each of the inputs and then a width of 100 percent and save and now those inputs take up the full width that they have available to them our buttons down here still need a little bit of help so let's say dot contact two underscores button now we'll say padding 0.5 m for those and save we can see the padding gets a little larger for those now and then we'll apply a border radius to match the other border radius 15 pixels and this should possibly be a variable that i have not created but that would allow us to just change it in one place and it would change it for the form as well as the button underneath that we should have border width and oh not border width on the buttons i'm sorry let's have a background color let's say bar and let's pick that highlight color so we can have a different color on these buttons that looks good except the font doesn't look so great there so for the var let's say the header color and that should turn that white and make it stand out just a little bit more those buttons definitely look better than they did before so a quick check let's take the border radius property and control c and then i'm going to do control f to search for it and let's see how many times it has occurred it's just twice here inside of our project so if you wanted to you could absolutely make a contact border radius variable and then you would just change it in one spot and of course the form the inputs and the buttons would match but you don't have to i did not clearly at this point but that would be an option so now before moving on to the menu let's look at each section that we've already styled for our page and here's the full page so our about page has a nice huge hero image and we see the about lts some information and our taco trivia that looks good the hours page another nice hero section and a simple bit of information about the hours and let's look at the contact page we scroll down we see the our location information after the hero and the contact form as well so that all looks good i think the menu is still going to need some work and we might apply another style or two yet that we haven't but we're making a lot of good progress let's go ahead and ctrl shift i to see how everything's looking in a mobile device as well so maybe we could choose fit to window and we see this iphone 6 7 and 8 let's look at the iphone 5 and that also looks good let's reload and see how that animation works that works as well so yes the menu needs some help but how do the other pages look oh the other pages still say the little taco shop hours instead of just little taco shop or something similar and again we're on the smallest device that we might ever see right now which is the iphone 5 se things may have changed in the future of course if you're viewing this at a later time so here it wraps the two lines on the header but anything larger than the absolute smallest device it looks like it won't as long as we adjust our headers here instead of say the little taco shop hours we can just say little taco shop here it just says contact us and on the about page once again it just says little taco shop i think we want our header to be consistent and say little taco shop no matter which page we go to so let's go ahead and make those changes as well in the html as we go back to the code so i'm going to close this back out drag this back to the right and bring the code over to the full screen quickly going to each html page we'll make sure that the heading matches so it should just say little taco shop where we have the header h1 for each page scroll to the top of the hours and we'll see what we have here it says the little taco shop hours so we'll go ahead and remove the and ours save that file the contact page said contact us well we would prefer it still say little taco shop here and of course the h2s will handle the other labels on the page so we had our location and below that we should also have the contact form as well there we go let's see what was here yep our contact form so that looks good and the about html should also just say little taco shop and it does and of course the titles of the page say more about the page as well so about the little taco shop here the title at the top of this says contact us lts i guess to keep consistency we could say about lts on this other page as we're going with that abbreviation several places so about lts there the description can still say about the little taco shop and then hours let's see what the title is here lts hours that's great and of course for the index we want the title to be the little taco shop so everything is looking good once again in the html let's go back to the css and start working on the menu now before applying styles to the menu i want to pull up an mdn reference so i'm just going to paste this link in and i'll make sure it is in the course materials as well so the course resources but here on the grid layout and accessibility page in mdn it says grid and the dangers of markup flattening so what we're going to be doing is taking the html table that's in the index page that comprises the menu that is displayed and we're going to make it a grid too often many people just use div elements to make their grid and a grid needs that flat structure essentially for the grid items so it can review or refer to each grid item in that regard because it's not going to look at subgrid items subgrid is a proposal they're discussing here but it's not implemented as well so we want to avoid that dangers i'm going to pull the code back over and bring up the index.html and we can see our table and right now the table is not flat notice how it has parent elements like the t head element and of course table row elements and then inside we get the th and td elements for those table cells whether they're a header element or they're just a table data element and so grid doesn't work that way it needs flat elements but we can still work with this we don't want to remove the semantic markup of a table to further illustrate my point instead of just having this here underneath i'm going to paste in what you might see a table constructed of for a grid using divs now this is a flattened markup table essentially that would be applied to grid and notice how i just used divs and applied all of these classes and this is what you do not want to do but i guarantee you will probably see this somewhere when a grid is applied and you see a table on the page i'm going to press ctrl z though because this once again is not what we want to do and you can tell by this markup it is not flattened however there is a solution for this and it is a display setting that we can put in the css that will help us convert our table to a grid i'm going to drag this back to the left so we can look at one more web page and i will link to this as well in the course resources and it's the can i use web page and i'm looking at display contents notice what it says about display contents it causes an element's children to appear as if they were the direct children of the element's parent essentially that ignores that parent element and that will flatten the elements for grid to use without removing those elements so we just need to put display contents on some of these parent elements that grid will not use it says this can be a useful or this can be useful when a wrapper element should be ignored when using css grid or similar layout techniques and then when we scroll and look at everything as far as how well it is applied now let me pull this out to the full page so we can see everything from can i use you can see it's got basically 95 percent acceptance here and we're not going to worry about internet explorer again and most every other major browser is accepting that use here opera mini is one that's not in uc browser for android but chrome safari safari on ios chrome for android we're good in almost every major use case here so i'm comfortable with using that as we switch our html table over to a grid and again i will link to both of those for you back to our website here back to the right and now i will pull this back over to look at our code in a full screen so we can get the ideas of what we're doing with the table as i did with the contact and about pages i applied a separate class here to refer to as the parent and i'm going to do the same here it's going to be the menu class and then i will refer to these again with bem notation but i'm going to refer to menu as the parent so here we're going to have a class i'm going to set this equal to menu two underscores and h2 for the our menu heading then the table itself say class and then menu two underscores and container because this is going to contain our menu for the caption for the table we'll use this class and set this to off screen our utility class once again as we will not want to view this caption on the page but we do want to retain it for accessibility now we will be setting the table head and the tr element the table body element and the table foot element to that display contents so grid actually ignores those the content we want for the grid and the content that we actually want screen readers to read will be inside of the th and td elements so that's where we'll apply the classes here so all of the opening th's that we have here i'm going to select three right there and we might even have a fourth but i think we just want three right now for the menu headers so we'll take this over with the arrow to the right and i'll say class equals and this is going to be menu two underscores and header now something else i want to do here one thing i noticed and i must have done this in the html course as well so if you went through that you can apply the scope column to this first cell as well and i'm not sure why i didn't before it might have just been an oversight the second thing is we were looking once again at how to do abbreviations in html but i want the full word quantity here now so i'm going to remove the abbreviation and just have the word quantity in the second th cell for the table okay after we have got the menu headers now we're going to have menu item classes so we will come through here and then whether it is the th or the td in these other cells i'm going to make it a menu item so i'm going to start off with the remainder of these table data cells because there are several i'm pressing ctrl d to get all of them selected and i think that's going to be it nope one more maybe there we go one more so at the end of that i'll arrow to the right i'll put class and i'm going to set this equal to menu two underscores and item okay scrolling back up to where we have the crunchy and then of course we have the soft label down here we're going to apply classes here as well i'll have a class i'm going to set this equal to menu two underscores item and then i want a second class here that is just going to be menu two underscores and cr for crunchy as we'll need to refer to that later for the grid possibly and then for soft we're going to do the same thing so it's going to be a class equals menu two underscores item and then menu two underscores sf for soft and finally let's scroll down to the very bottom where we have chips and salsa it spans three columns so besides menu item here i also want menu two underscores and cs and i believe i have now applied all of the classes that i wanted to apply for the menu itself one other thing i am going to do while i'm here in the html is remove this line break and then we have a paragraph here and i'm going to apply our utility class of center to this paragraph that has our back to top link that should appear underneath the table let's go back to our style sheet and let's drag this to the left so we can see changes applied to the table now as we apply these styles i'll start by scrolling up so we can start at the very top of our available space and i'm going to put in a label for the style sheet for the menu now underneath this the first thing i'm going to do is select the t head element the t body element the t foot element and the tr element and this is the only table in the project so i feel safe doing this without classes if it was a larger project i might have made a display contents class and then applied this to each that class to each one of these elements so here i'm going to say display contents it also took those parents out of the flow so now even though they're still in the page it made them all run into one line so we will definitely see changes now as we make the table so or the grid i should say let's create that menu container class if you remember this is applied to the table element itself so we'll say display grid and if i save after each change we should definitely see changes as we go so now just by applying display grid it changed how that viewed after our display contents was applied now let's say grid dash template dash columns and we're going to use the repeat function we want three columns each with one fragment so let's save now and we once again see changes to that table now let's go ahead and map out our grid template areas but we really haven't assigned any specific classes like those that we applied to crunchy or soft so it might still look a little strange when we do this essentially though we only need to assign the labels to the ones that are going to take up more than one grid square so other in other words i can just kind of create the other labels without assigning them to elements so i'm going to have hd1 hd2 and hd3 i won't end up assigning those to classes at all then i'm going to have cr cr1 this is crunchy as you might guess the abbreviation hd was for header and then crunchy one price for one taco now i'm just going to ctrl alt and the down arrow a couple of times because one here is going to get changed to two and then one here is going to get changed to three okay after that let's create one line here for soft so we'll have soft taco soft one and then soft one price after that shift alt down arrow shift alt down arrow select one control d change those to a two select one control d change those to a three and save and so now we have the crunchyrose and the soft rose and the header so at the very end we're going to have the chips and salsa row so cscs cs because it had a row span of three after that we have essentially mapped out those grid areas it doesn't look like we want it to yet though because we haven't assigned that crunchy label to the crunchy label that we or class that we have and the soft label to the soft class or the chips and salsa label to that class so we still need to add those likewise let's go ahead and add a small gap 0.1 em so as we discussed before that could be as small as 1.6 pixels or about as large as 2.4 depending on the font size applied then let's give a margin bottom of one em as well now let's apply some of those labels so our grid looks a little bit better so we'll start out with the menu two underscores cr for crunchy and here we'll apply the grid area label of cr when we save we don't see much of a change yet but i hope to in the near future menu two underscores and sf for soft and here we'll say grid area sf save again so we see a little bit more of a change and then we'll say menu two underscores cs this will be grid area cs and save we definitely have seen some changes in the grid it's not what we want yet but we're getting there let's make the color here a var dash dash highlight color for this okay so we've got a chips and salsa that is now green and then we'll say font weight bold as well and save that looks good now let's go ahead and apply some of this to the other areas as well so let's say menu two underscore cr and menu two underscores sf here i'm going to take these two and maybe i should have organized this differently on my thought pattern but i want both of those there as well however there's also some other styles so i want a height of 100 as it takes up some of that extra space why is that not applying to crunchy i may have to go back and see what i did wrong there but let's go ahead and say these are also grids and then we want to place the content center which is the point of making them a grid so we could do that yes the crunchy style is not being applied so we have menu cr and that is what needs to be applied there let's go back and look at our html and see if that class was applied properly to the cr section oh it's just one underscore it needs to be two save and now go back to style and bring this over and now crunchy and soft both have that same style and everything is aligned better that makes more sense as to why it wasn't coming together quite as quickly as i expected and before we move on let's see if we could apply this differently now we still need the grid area here for menu cs but we could possibly remove these and let's see if we could include the dot menu to underscore cs without really making something strange there i think that's fine and it's a little more efficient we aren't repeating those two lines and now let's look at these headers and we could possibly add those in as well so one more comma and we'll say menu two underscores header and save and yes i think that style is going to work out as well however we still need menu to underscores header because we want to add a border dash bottom to each of those so we'll say bar and bring in our borders variable that we have created and save so now we have a border across each one of those headings now let's scroll for some more room and we're going to select that menu header again like it's fill menu two underscores header and then we also want menu two underscores item now for both of these we want a width of one hundred percent and then we'll set a padding to one em and let's put a border and then let's set medium [Music] ridge and we'll set the var equal to border color there we go and when we save that we've got borders around everything so in that regard maybe we could remove that border bottom and still be good and we save yes and it looks the same so one was just overriding the other and now let's select just the menu items and here we'll put a display of grid and we will once again place the content in the center and when we save that looks good as well now we didn't apply that above to the menu item where we set the same grid and center because we also really didn't want to apply these other styles to those menu items we wanted to keep them this separate color and not have the font be bold but that's looking pretty good right now as far as converting this menu table and leaving that semantic html in place we can apply some final touches to this menu as well but earlier when we were referencing the border dash radius property we said we were only doing it twice and therefore i didn't go ahead and create a variable but now i want to use it again and so now that i'm using it in another place i definitely do want to create that variable so i'm going to scroll back up to the variable section and underneath borders i'm going to create a border dash radius variable and just set that to 15 pixels so now that i've created that we can use that variable in all of the places that we are applying a border radius so now let's go ahead and change these two that currently exist to var dash border radius there we go and save that so no other changes will be made there but now we can apply these final touches to our menu table as well and we can use that border radius property now i could apply classes to the header and the footer but i'm not and they are being ignored for some things concerning the grid when we set that to display contents however they are still part of the document so we can still use them for selectors so i'm going to select the t head and then the th inside of the t head and say the first child which should be the very first cell that says tacos and here we're going to set the border dash top dash left dash radius and now we'll use our border radius variable once again and when we save we can see this now has the border radius of 15 pixels so likewise i'm going to just copy this down so i don't have to retype everything shift alt and the down arrow this is going to be the t head th last child and instead of the top left it's going to be the top right everything else should be the same and now we see that same border radius applied over here to the right finally we have this one large chips and salsa cell along the bottom of this table for the menu so here this will be the t foot and then we'll select the table data cell inside here we can set the border dash bottom dash left dash radius and this will once again be var two dashes border and use that border radius variable and once we save this we see that applied to the left corner so it just needs to be applied to the right corner so inside this same selector here for t foot td we can now also apply this to the right corner and save and there we have our rounded corners for our table as well we're getting near the end but there is a little more to do let's go ahead and look at the page in full screen or at the full site now and here's our back to top we can click we have the smooth scrolling that goes there we can go to the hours page everything looks pretty good there the contact form everything is good here the about page and the trivia that's all working well and our animation shows here let's look by shift control and the letter i to go into a mobile view notice how well our grid conforms it automatically adapts we didn't have to apply a media query the grid just works in this mobile view and that's great let's look at some other views here's a little bit maybe larger phone there we go so it is quite a bit larger it is the iphone 6 7 8 plus and there will size it down to 75 percent let's go ahead and look at the iphone x that gets taller so that should also make our text just a little larger based on how we used clamp with that everything's still looking pretty good the form still adapts to the screen size the menu looks good and it took us right to the menu when i click the menu link the about page the hours all is looking pretty good i think we could apply possibly a little bit of space or a class we might have to back to the top that we applied down here i think we at least centered it so we might change something there but overall it's good to just evaluate your project and see how everything looks to you as you go and you can tell it's looking good on mobile as well so let's go back to full screen view and we're going to make just a couple of changes there is one media query i would like to apply to this project although using modern css for the most part we've been able to avoid media queries we are going to put this media query at the bottom of the page so we'll say at media and then we'll say screen and now say min width and we'll say 576 pixels which is our small break point and that is similar to what bootstrap uses the css library or framework if you will and here we have header 200 scores h1 now let's select the pseudo element here and this is the before pseudo element and we're going to set some content on this h1 let's give a space and what i want to do is put a taco emoji in here and actually i want to put the taco emoji and then the space so we have a taco space and then we have the heading as you might expect i also want to do this with the after so i will just copy that down again shift alt and the down arrow will switch before to after and now with the after we want the space to come first and then the taco so we've got taco space heading space taco so this should show up on any screen that's larger than 576 pixels in width so when we save now we have tacos in the heading as well and that's a great addition for the little taco shop and it applies to all the pages where we set up our classes correctly but if we go to a smaller screen where we might not be able to fit all of that in they disappear and that is great too so that only shows in larger viewports let's go to an ipad there we have the tacos so just mobile it will not try to squeeze those tacos in and that is fine let's drag this back over we can apply just a little bit more to the media query as well and this is just something i want to do for the menu 200 scores header then we're also going to have it in the menu to underscore cr which was the crunchy menu two underscores sf which was the soft menu two underscore cs which was the chips and salsa we're going to set the font size to 125 percent so just a little larger on these larger screens for the headings you really if you wanted to you could do it to all of these but i just really wanted to make the headings stand out and so everything we've wrapped around here that you see in green has applied that larger font now just another 25 larger than it was there is one more media query to apply but it's not based on the width it's based on the preference of light and dark mode we have styled our light mode this would be our normal viewing for the website but many prefer dark mode these days and that includes myself so i definitely like to add dark mode when the preferences are set for that so if your system preference is dark mode that's what will display my system preference is dark mode so i'm going to put this media query directly under the variables we defined so it will be applied right away because all it really does is change the variables for those colors that we're using on the site so we'll say at media put our parentheses then put prefers dash color dash scheme and here i'm going to say dark so that is what my system is already set to so anything we put in here we'll start to overwrite what we already have for those variables so we need the root pseudo selector it's the pseudo class and now let's overwrite the background color and this is going to be black now we will not really see the change here because we're not seeing that orange color until we drag this over to full screen so if i save drag this over to the full screen now you can see it's dark but it's still fading to that light orange because we haven't changed that other variable yet either so let's change the bg color dash fade variable as well and i'll just make that gray just like my last name i'll save and now let's drag this over once again you can see it's fading to a gray instead of the orange to a light orange the next color we'll put in here will be the header background color now we'll start to see these changes so header bg color oh i'm sorry just header color not bg color let's make this white smoke and save and then let's go ahead and change the nav i said color now i need background color and by the way the white smoke i just find that to be easier on my eyes than the pure white that we've used in other spots let's set this to rgb 20 20 20 which is just a different shade of black essentially and now you can see that background color for the nav menu definitely got darker okay so we're going to have to change that text eventually too let's set the hero color and this is for our little animated part that drops down so our hero color is going to be a different flat black now when it drops down you can see that has also changed now let's set the body background color itself so this will be a big change when we first see it that will also be this flat black and that has made a difference now let's go to the font color itself which is what's being used on most of the page and we'll go with that white smoke that's just a little easier on the eyes than the pure bright white and so let's find a page that's using well here we see it inside of these table cells here but if we go look at a different page you can see it is being used right here as well okay after the font color let's apply the highlight color and where this was that green let's use white smoke here as well so when we save i believe that's in the animation and i'm not seeing that applied right now i'm not seeing the animation because i'm not on the right page here we go and oh no it wasn't in the animation because that has the separate uh background color that is slightly transparent but it is in some other areas like we were using it for the h2s and h3s and the table headings so we can see that's now using white smoke as well okay now let's switch the border color that's being used let's also make that white smoke now our table is standing out and now that border color was a bit of the shadow behind the lettering so now we've got a little bit of white shadow behind bienvenidos and that stands out on that green as well helping the dark lettering stand out and we still need to change our link colors so link dash color we'll make that white smoke you can see we're really making use of that color for this setting also say link hover is now going to be orange and then link active is going to be the lighter orange so rgb 252 200 103. and save so now when we hover over a link it becomes orange when i hold down it's a lighter orange and then we go to hours everything looks pretty good now you may have your own preferences for dark mode as well but just scan over the site see how you think it looks does everything look like you want it to oh these buttons need a little bit of help yet let's check our other page and make sure everything else looks good and then we might need to change something about those buttons we'll have to see what is going on there and that might be a correction that needs to be made in how they're initially being set as well so let's find where we had a button which was a contact button and you can see the header color which remained white or white smoke was being used but then that highlight color was the background and that has changed i think we need to change this from header color to button color and give us some or give ourselves some control over what color is the text on top of the buttons so we've added a button color variable now we need to define that above and then of course change it when it gets to dark mode as well so we were fine with it at first when it was the same as the header color so that's what we'll start off with and i believe that is just white so we'll put that and also put it in as white here but now we need to change this when we get to dark mode so let's bring this down into our dark mode definitions add this and let's change it to black right here and save now let's go ahead and go to our contact page scroll down and now we can see the text on our buttons and so that looks good the about page is looking good let's make sure the answer looks good for trivia that's fine here's an additional link in our page to the reference for the trivia the menu we scroll right to that everything looks good there hours pretty good i still might want to create a little space here with the back to top but other than that it's fine and back to the home okay so we are down to the final touches of the project so one of those things might be to organize the css now this is your own project but if you're working in a team for example you might want to organize that i'm going to drag this over to full screen for this discussion let's say the colors we have here there's there's probably the largest list that we have of anything in this project is the colors it might help to just use the abcss technique here to organize these so if we highlight all of those press control p and then the greater than symbol and now we might choose sort lines ascending so now all of our colors are ordered alphabetically and i could find them probably much faster now that i've done this so considering that maybe we should do the same thing for our dark mode we'll highlight all of those control p greater than symbol and choose sort lines ascending now you're welcome to do that for any or all of the properties and styles that are within this project if you so choose now before we finish this project there's one more thing we can add that would be a very nice touch but it is a preview of what's to come for you yet and that's because it's a touch of javascript just a little bit and i'll show you what it does it will update the year so it will put in the current year no matter what year it is and you will not have to come back and update the copyright on your site so let's put in a time element right here i want lowercase so i'll give this a time with an id attribute of year so there is our time element and we don't really need to put anything in it we'll just leave it as is with the id of year right there now let's go over to our file tree and inside the file tree let's create a js folder and inside the js folder let's create a new file name it main.js now we only have a few simple lines to put in here so i'm going to type const which will help me define a variable and i'm going to name that variable year i'm going to set that equal to document and when i refer to document i am referring to the html document and then get element by id and this will be year so you know we just set that attribute and then we are selecting it so we're selecting that time element on whichever page we load this javascript into from there i'm going to define another variable and i want it to be called this year notice i'm using camelcase to define that i'm going to set this equal to a new date and then i'm going to call the get full year method for that date so now i have the current full year in the this year variable and i have the element that we just created the time element in the year variable so i'm going to say year set attribute and then i'm going to select date time and i'm going to set it to the this year variable and then to display it on the page i once again want that year element and now i'm going to select the text content that's what's displayed on the page and set it equal to this year and save that's all i need are these four lines of code and with that we can import this into our page so we'll go back to the index let's scroll to the top because we want to load the javascript last after the css and we do that with a script tag and it will have a source attribute and there it is so we'll say js slash and then we'll just pick our main js nothing goes between the opening and closing script tags however you have to put it this way it always has a closing script tag it's not like some of the other elements that just has a slash to close out the first one you always see it this way we want to add one other attribute though and that is defer and that tells the script to wait until everything else is loaded before loading the javascript and we will save now if we go back to our page notice it says copyright 2022 little taco shop if you're watching this in a different year and you add this same code it will say whatever the current year is there now if we go to our other pages notice it still just says copyright symbol in little taco shop because we haven't added that javascript to the other pages yet but we can do that now so let's drag this over and we also need to make that same change to the footer on every page so inside of our copyright line here that has the span class let's select that with the c and then we'll go to the hours page scroll down and we will select the same line and paste in the new line and save the contact page scroll down select the copyright line paste in the new line and save and we also need the about page i believe so now let's scroll down and here we'll select that same copyright line and we'll paste in the new line but we haven't added the javascript yet so let's go back to our index html now we could just copy this same script line and we can use the same javascript file for every page so back to the hours page paste it in underneath our style sheet line back to the contact page we should do the exact same thing and then finally the about page we should do the exact same thing then save and now let's once again look at our site and notice that no matter which page we're on we now have the year referenced in the footer along with our copyright notice and everything looks just as it should okay guys just a few closing notes and you could call them corrections if you want to i just want to adjust a couple of things we're currently on the hours page for the little taco shop and i previously forgot to put in an h2 for this page so i'm going to do that here on line 48 and i'm just going to put hours in there and save something else that's been bothering me about this page the whole time was the back to the top link that we really don't need anymore there's not enough content on this page for it really to even be there so i'm going to remove that back to the top link on the hours page other than that i'm happy with how this page turned out of course everything is preference when it comes to css your design choices your preferences may be different than mine so feel free to make your own changes also at the contact.html page i previously removed every hr the horizontal rule element but i think i'd like to put one back here just between the two sections on this page or between the two articles if you will so i'm going to put this horizontal rule back between those two different articles on this one page one other thing i want to do is just change the text a little bit on the buttons so i'm going to click the file tree quickly go to the style.css file and here under the contact to underscore button class i'm just going to add a font weight of bold and save and now once we want look at these buttons i just like how they look a little bit better with the bold font always go back and re-evaluate your code make your own choices and of course you don't have to agree with my choices the best way to learn is experiment and see how it works out for you so that's the end of the project congratulations you've completed a large overhaul on the little taco shop website and styled it with modern css very few media queries necessary we added a nice animation and it does work in mobile devices as well even though we didn't need those extra media queries so if we go back to an iphone 6 7 and 8 style we can now see how all of this looks in a dark mode and it is still working as we expect it to great job completing the project and completing the full css for beginners course