CSS Tutorial - Zero to Hero (Complete Course)

Key Takeaways

hi welcome to the CSS Zero to Hero course in this course you're going to completely learn how to use CSS from the ground up we're going to cover every single concept or every major Concept in CSS and really build up our knowledge of it so before we move on I just wanted to give you some motivation uh on what you're going to be doing in this course so you can you know really get uh excited about the course and start jump you just jump straight into learning so first of all let's look at some of the stuff that we've done over the course now we start with a base website and over time we style this and change up the website using every technique that we've learned so you can see that we've created multiple grids colors we've changed this completely and transformed the website in every single way we've also created things like gradients and we've also styled changed our custom fonts colors and backgrounds we cover all of this in depth throughout the course and we do it step by step so that you don't rush through and forget anything at the end of the course there's also a little challenge here where you try to bring all your skills together and style the website from scratch now there is a solution video if you need it maybe you just want to see uh another opinion on it but pretty much you're going to bring all the skills you learned in this course together and create this nice website it's responsive it's got all sorts of layout features and it also has animations you can see just like that so that's some of the actual website stuff we're going to be doing in the course but why don't we look at some of the code that we've written so I created this file from the start I didn't have it at the start of this course but at the end you can see that we've written now well over a 100 lines of code here and I although it may look intimidating now I do explain every single part of it so that at the end you can just read this straight away and understand what's going on in an instant there's also the styling for our solution video or for the solution to the challenge here so you can see we've got a bunch of stuff here and like I said it may look confusing but once we move on this will make a lot more sense so that's pretty much it for the little achievements video for this course I hope you're a little bit motivated and excited to go forward and start learning about CSS it's a pretty exciting topic and it can really Advance your web development if you don't already know it all right let's get straight into it so in this video I'm going to be giving a quick introduction to the syllabus of the course now it is quite a long video so um if you don't want to watch it or if you don't really want to know an in-depth analysis on what the course is going to be covering then you can go ahead and skip this video all I say is that please make sure that you read the prerequisites lecture um that came before this now there are are some very important details in there and some skills that you need to know to move on with this course and if you don't know them you're going to have a very difficult time picking up some of the language now there's only one real prerequisite uh which is HTML but you can go ahead and read that and um just make sure that you have all the skills necessary all right so let's get started now the first thing I want to talk about is the section structure so the section is just a it's uh a bunch of lectures so these are video lectures uh and in and they're made it an interactive way so you can see in this picture here I am coding along with a nice preview on the side showing what um what our progress looks like so at the end of each section is a 10 a 10 question multiple choice quiz that covers all of the skills learned in that section so it's really encourage to go and just try it out and see if you know everything and then that way you can diagnose yourself and see maybe there's some skills that you're fuzzy on or you need to revisit and on top of that I really encourage everyone who is following along in the course to not just watch and be a passive consumer you know really go out and try and use your skills because other you're not going to learn it otherwise you're just going to end up having the information on your head and especially when it comes to development programming um you know experiences everything you can't just watch lectures and um just magically be able to do it so so I encourage you to go off and follow the lectures and try and really use the skills that you learn in your own time and that will make sure that you have the highest retention possible so let's get straight into it the first section which is the section we're in right now is the introductory section so setting up the course and we also install all the programs and software necessary to set up our working environment so you can follow along it's not necessary but it is highly recommended because um if you're using may be something else that you're not experienced with you may have a hard time getting used to the program and things like that so I recommend you follow along and set up the environment just like I do so the second question uh sorry the second section is the introduction to CSS now unlike the first section this is going to be looking at introducing the actual CSS um language we're going to be looking at some the theory behind it where it's used and what kind of a difference it makes we're also going to be looking at creating and linking our own CSS document to our page so the third section is going to be looking at our first real part of CSS so these are the selectors and properties now again you don't need to know any of these terms I'm just going over like a kind of a spitball kind of effect here just trying to just skim over everything so here we're going to learn about a very important uh concept which are selectors and properties and how they really play into CSS we're also going to be learning about the different types of selectors and where to use each one uh depending on the situation so you're going to learn that as well next section is where we start using the real power of CSS so we're going to start using colors and we're going to be applying those colors to our page so we're going to be learning about different color types how kind of a little bit of how colors are set up on the computer so things like RGB um other color codes and then we're going to use them and apply them using CSS to backgrounds and text and all sorts of other things the next section is going to be looking at mainly at text so we're going to be looking at trying to change the feel style and look of text so we're going to be changing the fonts the size we're also going to be changing the Bolding there are so many different things that you can do in this section and we're going to cover all of them then so the next section is where we were kind of take a turn from looking at styling and looking now at layout so we're going to be learning some more fundamental CSS concepts related to layout uh we'll talk about those when we get to it then we're going to be applying them to actually change the style or the layout of our page so we're going to be moving items around we're going to resize them and do all sorts of things with them once we get to that point the next section we're going to look at is called flexbox now I'm sure you've heard of this if you've looked into any web development but pretty much it's an alternate way to mess around with the layout in CSS and it is quite new um but it is a pretty uh commonly used concept today especially for responsive layouts making websites that can work on all devices so it's a pretty important concept there so we're going to focus on the theory behind flexbox first talking about how it works how it's set up and then we're also going to be applying it to real life talking about um you know where it can be used some of the benefits and then actually um using it in our own uh project by creating our own Flex box and messing around with it so we're going to do that as well so the next section is pretty similar to section 7 it's going to be looking at another uh alternative to using normal layout features in CSS it's called grid and there are a lot of similarities but we're also going to be talking about the differences so along with going over comp a comprehensive uh overview of kind of how grid Works we're also going to be going over some of the similarities and differences kind of comparing it to flexbox and then we're going to talk about you know which one you should use in each individual situation so the next section is probably one of my favorites because it really um puts all of the older kind of websites from the new sites and separates them the modern sites from the old sites and we're going to be looking at animations and transitions so first we're going to look at Transitions and how to use pseudo selectors again don't worry about that what it means uh to create these nice smooth Transitions and then we're also going to be learning how to manipulate them so kind of change how a transition look looks we're also going to learn how to create apply and manipulate our own animations so we create these animations from scratch using CSS and then we can kind of uh change them and change how they look based on what we want so the last section is a really interesting section which kind of summarizes everything and tests your skills so it starts with a 30 question final exam which is a bunch of questions from every single section or topic that we've covered and it is um it is a final exam so there is like a passing grade and everything like that but again if you fail there's no real consequences to it um it's just kind of a diagnostic tool to test where you are uh in your CSS knowledge and after that it's followed by a really nice challenge which can help you um you know really see where you're at not from a theoretical standpoint but from an actual practical standpoint so this challenge is going to be talked about later in once you get to that point but pretty pretty much you're going to be styling a website from scratch you're going to be given a blank HTML document or well it's not blank it's going to have content but you're going to be given an HTML document with no styling and you have to style it yourself based on a list of um based on a list of tasks given in the document now don't worry too much about that but pretty much there is a solution video that I created to style it based on how I want the website to look but again it's not kind of like an iron fist thing you can go and be creative with it once you get to that point because once you learn all that CSS what's the point if you just have to conform to something you can really Unleash Your creative freedom through CSS once you learn all the skills necessary so again it will be talked about in a lot more detail once we get to that point but for now that's just a quick overview of what it's going to look like um from here all right so there's a quick uh overview of what the course is going to go over some of the topics now again this isn't a you know uh kind of a strict video on you know this is what we're going to learn and if you don't learn it that's it uh it's just kind of showing you what you're going to be getting out of the course so that you can uh really get a view into it before you start uh working on the course all right let's get started so in this video I'm just going to be talking about some of the software that we're going to be using in this course now there's not a lot of actual sof software since most of the stuff we're going to be doing is built straight into CSS and HTML but we do need a text editor and if you want to go ahead and use notepad go ahead but I wouldn't really recommend that because it is quite um hard to use when you're developing things so I recommend this text editor right here it's called Sublime Text it gives you all of the color coding and formatting that you need makes things really easy for you so you can go ahead to the website here it's attached to the lecture resources if you go ahead and click in thep top left corner uh in the bullet list icon uh you can go ahead and find the lecture contents and downloadable resources so go ahead check out this website and depending whether you're on Windows or Mac or Linux you go ahead and download this and yeah that should be pretty much it so this is what it's going to look like when you're inside I was just typing a little bit of stuff here making things making sure things were working so there you go this is what it's going to look like uh once you download it we'll go through and actually set everything up as we go through this course all right let's move on so before we move on I just want to talk about finding project files now I do do a lot of code throughout each lecture and if you want to keep track of those or maybe have some sort of working reference of what's going on then I highly recommend that you go and check out the GitHub repository um that I created for all the content of this course now if you don't know what get is or how to use it don't worry uh I'm going to show an alternative to that in just a second uh using this platform but pretty much this is going to contain all the history of every single lecture now if you know how to use git you can download this and check out each state but if you don't know then all you have to do is head over to the main page and right here under commit it's pretty much going to show um every single lecture change so for example I have 7 to8 item alignment so I can click on it and when I click on this it shows all of the changes I have um made to both files or any files that I've changed so for example you can see here it has one changed file and you can see I've added a bunch of stuff here so you can kind of review what I've done over the lecture so you can just go ahead and check it out I've attached this to the lecture resources if you want to go and look at it now um this does contain all of the uh history all of the things that I've done uh over the course so you can go review maybe look at the code and you can also download it um you can downlo downlo the actual file or the uh the uh repository from here so you can just download that very easily and other than that you can find all of the project files on here if you ever need them so uh if you want to you know maybe bookmark this or keep this somewhere on a notepad just to make sure that you have a reference of it throughout the course in case you ever want to uh go and review the contents or changes of some lecture you will have it there all right let's move on so today I'm going to be giving a quick introduction to CSS we're going to be going through uh what it actually is why it's used and what actually does CSS do so before we get started um if you're just starting out this course and you don't really know the prerequisites make sure that you do have a little bit of HTML experience it's not recommended uh sorry it's not needed uh but it's highly recommended because we're going to be using a lot of HTML in this course and although we're not going to be writing any directly it would be really helpful to know some so I do offer a free free HTML course it's really quick 1 and 1 half hours and you should be go good to go and up and running in just one or two days so if you don't know any HTML you can go and check that out and if you do know HTML continue watching along so first of all let's get started what actually is CSS so if you don't know what it stands for already it's called cascading stylesheet so from that name you can pretty much assume that this is used to style websites so unlike HTML which is used to create structure and actual website content this is mainly used to give it that visual flare to make the websites look good so CSS is pretty much what makes a website stand out from websites from the early days from the two early 2000s uh and things like that so that's what really makes uh a website send out is the CSS or The Styling so this pretty much goes hand inand with HTML as it's said here they work almost consistently together and they're always used all like all the time together so let's go ahead and check out some pages that look with CSS and without so you can see here that this is the page with CSS so you can change all of the layout options you can make fonts font changes text manipulation all sorts of things which we're all going to be doing in this course or learning to do and then this is the website without HTML uh sorry without CSS looks pretty standard right obviously this looks just like a normal website that doesn't have any HTML apart from some font changes but you can see that the difference that something like this makes CSS s will completely change the way a website looks if it's used correctly so the next slide is just a little bit of uh information about CSS we're going to be going way more in depth into all of these points later so a CSS file is saved in the CSS format we're going to be doing that in the next few videos uh there's some information about selectors and things like that like I said you can just read through this I'm not going to go through it because we're going to talk about it way more in detail uh in the next few sections but for now this is just a little bit of general information about CSS all right so now that you know what CSS is why don't we go ahead and get started working with CSS so in this video we are going to be creating and linking a CSS stylesheet so we're not actually going to be doing with anything with it yet we're just going to be creating it and linking it so that we can get started and actually learn some of the properties in CSS all right let's get started so the first thing I want to do is go ahead and create my CSS file so what I'm going to do is go into my Sublime Text or my text editor now if you're not using this and you know how to use the other text editor that maybe you're using some something else like Visual Studio go ahead and use that if you know all the shortcuts but for now I am going to use Sublime Text so in Sublime Text to create a new file you go control or command n depending on what operating system you're on once you're there you can use crl S to go ahead and and save the file and right now I'm here and what I want to do is create a new folder a new directory in my course content folder again you can set this up however you like but the way I like doing it is creating a folder for every type of file so that for example when the website gets very big when you have multiple Pages multiple stylesheets uh everything stays organized so I'm going to go ahead and create that directory go ahead into my CSS folder here and I'm going to name this style CSS so CSS the is the file format used to save CSS documents and style is just kind of the standard name you use when you're saving CSS documents so once I go ahead and I'm going to go ahead and save that now I have my style sheet created but we don't actually have anything yet because right now our HTML page is blank and our CSS file is blank so this is where knowing a little bit of HTML comes in handy first of all I'm going to go ahead and create my boiler plate I just typed in HTML and hit tab uh again I talk all about this in uh my other courses talking about HTML but there we go we're going to go ahead and do that I'm just going to say my website here and once that's done I'm going to go ahead and Link it so how do we actually do this well what you want to do pretty much is just go into here and into your head into the head portion of your website you're going to go ahead and create a link tag so if you just type link and hit tab in Sublime Text it's going to create the tag for you so let's go ahead and break this down here real stylesheet is pretty much saying that we're linking to a stylesheet but then type says it's a CSS stylesheet so this is just kind of a more specific identifier and then we have the hre so in the hre this is where we're going to put uh the URL to our stylesheet so if you don't already know how to write file URLs uh pretty much what we're going to do is first up move back a directory because right now we're inside here and there's no CSS we want to go back to the top level so I'm going to go do dot slash and now remember we're up here I want to go into CSS so I hit CSS slash and then style. CSS which is our endpoint our final destination so this is pretty much your basic link tag this is how it works you have all of your stuff here and you created it and from there you can go ahead and pretty much do whatever you want so right here um I have my stylesheet linked and everything's working um but we don't actually know if it works yet so in the next video we're actually going to be going through and testing our stylesheet I'm going to show you a few ways that you can do that all right let's move on so today I'm going to be showing you how you can test your CSS stylesheets so we've already created the file and linked it but now we're actually going to go ahead and test it because we don't know if this is working or not so obviously we don't know anything about CSS yet we don't know about selectors or properties or how to do anything with them but I just want you to keep this in mind so that when you know how to do them it becomes very easy to test these stylesheets so for a stylesheet to work we need all of the properties that are in this file to appear on the page so the easiest way we can test it is but just by writing a random obvious property that's going to change the way the website looks if it's not working then we know that something's wrong with our link so I'm going to go ahead and just create a property here now you don't know how to do any of this uh so don't worry about it we're going to learn how to do all of this later but what you want to do pretty much is Just create a random property you can go ahead and copy this on for now I'm going to go ahead and refresh the page and you can see that this is bright red now if I go ahead and make the link wrong so if I for example remove a letter you can see that it's still white which means that this isn't working so this is pretty much the easiest way that you can test your stylesheet if it's working it's just writing some random obvious properties don't make them completely nonvisible you want to make sure that you can actually see the difference on the page and then you want to go ahead and refresh it and if it's working you will know that the stylesheet is linked properly all right let's move on so in this video I'm going to be talking about CSS selectors I'm also going to be going through what they do and what types of selectors there are so you're probably wondering what a selector actually is because we haven't actually talked about this at all and it's pretty much one half of every everything that you do in CSS so as you know you have two different documents you have your HTML document which is kind of your structure gives all of the different text and content of the page and then you have your CSS document which is going to be for all the styling now because the two documents are kind of disconnected you can't just go and type random things and have them appear where you want them you need a way to actually assign these Styles and properties to elements on the page so we do this something called selectors so a selector is pretty much a way of grabbing an element from an HTML document and then styling it so it's kind of like a Target in a way there are many different types of selectors and they all work in different ways and are used for different purposes so I'm going to be going through three with you in this uh video so the first one is the element selector the element selector is the most basic of all of them pretty much what you do is you find the name of the tag that you want to select or Target so in this case it would be the paragraph tag or the P tag and then you have the selector here so pretty much how a selector works is you just type out the selector and then you have curly braces and then you have your properties we'll go we'll go with this in much more depth uh towards the end of this section so you go through and you select uh you type out your tag name and pretty much what that's going to do is select all of the elements on the document with that tag name so there we go that is the first one the next is the class selector so the class selector is very similar to the uh element selector except it goes by class name so you can see here that we have some class attributes here where we assign the class don't worry we'll go through with this uh in the next video but you can see we assign the class to these values and pretty much all we have to do to reference this is type dot which is the class uh prefix for CSS and then the name of the class and then again the properties so you can actually use this uh CL the reason that we use classes over things like uh element selectors is because you can apply this class to specific items and it's only going to style those specific items so for example maybe if you had a subtitle uh and you only wanted to style that subtitle you would go through and actually uh apply that class to your subtitle your element whether it's a paragraph or a header and from there you're going to go through and add it so there we go the next one I want to talk about is the ID selector so these two uh the class and ID selector are pretty much identical you have your attribute where you assign the classer ID but the only difference is the prefix here is a hash symbol or an Octor or hashtag so then you type out the name of the ID and it puts it here now I am going to go through and actually talk more about why when we should use classes and IDs and I'm going to talk about some of the differences between them and although they look very similar we actually have different very different purposes for them um based on how you use them in your HTML document so those are some of the basics of selectors like I said we're going to go through and pretty much use this all the time during our course so we're going to go through use them and add the properties so it's pretty good that you get familiar with these now so that when we move on this becomes kind of like second nature so in this video I am going to be teaching you how to add how to add classes and IDs to our document here and actually start using some of these selectors now I'm not going to teach you any of the properties yet because we're going to cover that in a little bit later in this section and in the next few sections but I'm just going to be teaching you how to get familiar with classes and IDs because they are by far the most commonly used uh selectors in CSS I mean sometimes very uncommonly you would see some element selectors and other types of selectors which we're going to go over in the next few videos but the two most common that you're going to see are are classes and IDs so let's go through and get started now I have a bunch of HTML content here we're actually going to be using this and adding on to it for the rest of the course we're going to be styling this website fully uh but let's actually go through and start adding these classes and IDs so the first thing you need to note uh before we move on is that classes and IDs are different you can't just use them interchange and I'm going to explain why in the next video but for now let's just pretend that they are the same and we can use them interchangeably because they have almost the same methods of application so let's go ahead now the first thing you want to do is identify the element that you want to Target so first of all let's just say I wanted to maybe make the color of this red okay so the color of this title now that we know we've targeted it we want to actually go through and edit it so first first thing how do you think we would go through and do this now if you were thinking going through and adding an element selector or maybe adding some inline Styles if you know what that is then you are right partially but the only problem is that if there are any other H1s on this page then it will style all of them as well and because we only want to style this title that wouldn't be really effective so the best way to do this would be to use a class or an ID I'm going to go ahead and use a class so the way the way you would do this is go through and typee in class as your attribute and you would again put this into the opening tag of whatever Target element you want to style and in here you're put you're going to put your class name now this isn't where you put your CSS prefix this isn't where you put the dot as I explained in the last video here you're just going to type the name of the class so I'm going to go through and type title just like that and you can name this whatever you want but I would recommend keeping it short and sweet you don't want it to get too long because then uh it's going to be really hard to work with so once you've applied that and we go ahead and refresh the page you can see that nothing's actually there it hasn't started working yet that's because we haven't applied any Styles so when we go over here we need to actually select our element so I'm going to go ahead and add the prefix for a class which is Dot and then the name of the class which is title then I'm going to open up these brackets and get started so what I want to do here is now apply all my properties I'm going to be explaining you to you how to do all of this in the next uh in future videos but for now all you need to know is that the first thing you need to do is Select an element using some method and then you're going to add the properties so I'm going to go ahead and refresh the page and you can see it works just like that now to prove to you that this works I'm actually going to go through and style just this about me right here um blue so you can see we have more than one H2 on the page but there's only one H1 uh but let's say we wanted to only style this the about me and we didn't want to style every single H2 what I would do is go ahead and add a class of subtitle to our Target element and then here I would select it just like that and give it its color so you can go ahead and try this if you want uh don't try and do anything crazy uh if you know it go ahead but uh for now let's just go ahead and stick with that and there you go you can see we've styled blue and it hasn't changed anything else so that's working perfectly seems to be going fine and we're selecting everything but what if we wanted to use IDs so let's just say that this right here this contact us we wanted to use an ID for it now for now we don't actually know why we want to use an ID but let's just pretend that we do know why so what I would do is go ahead and use the ID attribute so I'm going to go ahead and and add that and I'm going to say contact Das us now usually in CSS uh classes or IDs you would use these um dashes right here instead of dots or uppercase or any other naming convention uh this is just kind of the standard way to do it now in order to style it I can't just go ahead and do this this wouldn't work the reason being the prefix here is a DOT so CSS would interpret this as a class and not an ID instead we're going to have to use our uh Octor our hash then why don't we go ahead and color this one green okay let's go ahead and refresh the page and check this out and you can see that it has this kind of olive green color so it's working great so there we go you can see that we've worked with some of these selectors and applied some of our IDs now you can go ahead onto the GitHub repository pull it download it do whatever you want um if you don't know how to use git I do have a free course on that as well but but it's very easy you can go back to any state in time check it out and play uh play around with the is try and replicate this and add your own classes and IDs and try and you know figure out how things work here so yeah that's pretty much the basics of adding classes and IDs in the future we're going to use some more complicated selectors uh which don't actually involve having to directly reference some of these so those are going to get pretty complicated but um we're going to build up to that point so let's move on so in this video I'm going to be talking about a very important Concept in um CSS so this is a pretty important concept because it's pretty much going to change the way that you use selectors right now we're just assuming that all of these selectors kind of work in the in a similar way we don't actually know why they why they exist I mean why is there a class and an ID selector when they both do the same thing so that's what I'm going to be explaining in this video and it all comes down to one concept called specificity so specificity is pretty much talking about the overriding or rewriting of properties in CSS and it's pretty much this concept that different selectors are more powerful than others in a sense so for example if you had two selectors uh on one element one of them said the color was blue and one of them said the color was green the the more powerful or the more specific selector would end end up overwriting the other ones and uh applying that property to the element so there's this really helpful article here from W3 schools uh if you need some more help on this or you don't really understand it you can go ahead and read this there's a lot of numbers involved like this um but you know you can go ahead and read this but I'm just going to explain it in word terms because these numbers tend to get really confusing and they end up meaning the same thing at the end of the day so let's go ahead and and get started now I think it's really helpful if we start from the ground up so I've removed all of the styling that we um applied in the last video so first of all I'm going to go ahead and create an element selector so on all H2S I want the color to be blue or actually I'm going to make it red so there we go now we know that every single H2 is red okay but let's just say for our about me right here I'm going to add a class okay and I'm going to call this about me and I'm going to add it to my H2 now in my in my Styles here I'm going to use the class selector and say the color is blue so this is where we have a confliction you can see that one selector says the color is red but one selector says the color is blue so what are we supposed to do about this which one do you think is going to Prevail I mean you can't just have both red and blue at the same time you can see that blue is actually more more specific so you can see that elements or actually selectors have different powers and the more powerful they are the more specific they are um the higher they are the higher they're going to be on the scale and the higher the chance of having or applying the right um selector or property so what we're going to do is actually go through and talk about the different powers or specificities or specifics of each selector and we're going to see which one is most powerful so right now we know that the element selectors are less powerful than the class but there is actually two more that are are more powerful than the class selectors so I'm going to go ahead and apply this about me class to another H2 now I know it's not really going to make much sense so I'm actually just going to rename it to subtitle okay so I'm going to go ahead and add this to Services as well subtitle there we go let's go ahead and refresh the page oh whoops forgot to actually change the class name on CSS file there we go so now we have two blue subtitles and one red so you can see that the class will overwrite the header or sorry the element tag but there are like I said there are still two that are more powerful the next after the class is the ID so I'm going to go over here to services and add an ID of services whoops Services all right now what I'm going to do is go into my CSS file and use the ID selector color green so I'm going to go ahead and refresh now and you can see that it's right here it's green so now that we know the ID is going to overwrite the class and the class is going to overwrite the header so there is still one more that is more powerful and that is called inline styling so if we don't actually know what inline styling is but pretty much we don't need to use a CSS file to do inline styling all we need is the element and the HTML file so why don't I go ahead and use Services here because uh we're kind of on a roll and I want to use this again so what I'm going to do is say style which is the attribute and then in here we add all of our CSS properties no selector nothing so I'm going to see here the color is steel blue and we don't actually um steel blue is is part of the CSS color collection we'll explain all of those in future sections so if I go ahead and refresh now you can see that it is blue and it overrides the ID the class and the header here so pretty much there are there's an order here that you need to take away from this video headers are the least specific they kind of apply to everything and they're not that powerful the class selector is above that and then the ID and then the inline styling or the style attribute so if you follow this order you will pretty much you can predict what is going to be the outcome and which styles are going to be followed so this is a pretty useful um tool and in CSS and it pretty much allows you to structure your file in a way that makes sense to other people when they're reading it but there's still one more question we need to answer what's the difference between a class and an ID apart from the obvious specificity difference we actually use classes and IDs in different situations and they're pretty simple classes are meant to be used multiple times so if you have done any programming before you'll know that a class is kind of like a blueprint it's made so that you can create multiple objects from it but the thing is an ID is supposed to be only for one thing it'll work for more than one but the convention is you're only supposed to use an ID for one single element so for example let's take this file we have here we have three subtitles and one for the About Me section in this structure what we would do is create a subtitle class for every subtitle on the page then we'd apply it to it now the reason we're doing this is because we can have multiple H2S on this page so we only want to apply it to the subtitles but then for our about me here there's only going to be one of them on this whole document which means we're going to use the ID of about me and then from there where we can go and apply our Styles and do all of that so that's just the main difference between classes and IDs and now that you know how to use them you can actually go through and apply them properly uh in real world scenarios so that's just a very important thing to keep in mind you're only supposed to use IDs once and classes can be used multiple times all right let's move on so in this video I we are going to be looking at pseudo selectors so this is a special type of selector that is used commonly uh in interactivity with your website so this is usually visible only when something is done on the website so it's a pretty it's a pretty cool feature and it's used very commonly throughout um CSS and once we get to the animations and uh transitions part we're actually going to be used we be we're going to be using pseudo selectors a lot so let's get into it now there's a few pseudo selectors I want to cover here um there's a lot of them but I'm only going to be covering the main ones that are we are going to be using so before we go on I'm just going to show you what a pseudo selector actually is so usually what you would do is after a selector you would add a colon and then the name of the pseudo selector so this is just an example of one of them and then the properties will apply normally now watch what happens when I hover over our H2 here you can see that it's working perfectly and when we hover over it it is turning red now obviously it doesn't apply to this subtitle or the services part here because again these are uh separate classes and obviously with specificity and everything like that they won't apply so there we go we have everything working here and that's one of the pseudo selectors which is hover so let's move on to some of the next ones now there's also two that I'd like to talk about which is first child and last child so the concept behind child and parent elements is that right here if we look actually this is a little bit complicated example let's look at this unordered list here we have an A UL on ordered list and then we have three Lis okay so pretty much this is going to be the first child because it's placed inside of the UL the second is going to be the second child and then this is going to be the third child so you can see here that this is kind of the relationship between child and parent and what we can actually do is specify which one we want to select so if I go over here and select all ul's and then of course the colon for the pseudo selector and select first child now I'm just going to say set the color to Steel blue as well okay so I'm going to refresh the page and you can see that it's not working now although it might seem like you want to put the UL first obviously because again you're looking for the first child of the UL this isn't actually how you're supposed to write it instead you're supposed to write the element that you're trying to select which in this case is our list item or our Li so now if I go ahead and refresh the page you can see that the first one here is going to be blue it's a little bit of a confusing rule to get around but once you get used to it it becomes very easy we can also change this to last or last child like this and then what's going to happen is it's going to select the last one now there's also one more that I'd like to talk about quickly which is nth child so I'm just going to show you how this thing works nth child and then in Brackets you put the number here so what you're going to put here is pretty much what number of the child you want to style in this case I want every second Li child to be colored steel blue so throughout the page every second Li that is inside of a that is a child element is going to be styled blue go ahead and refresh the page you can see that works there so there's actually one more um uh selector that I want to talk about at least for children and that is the only child selector so I think it makes perfect sense pretty much what we're trying to look for is something that there is only one child inside of it so for example nothing on this page here actually has one child but why don't we go ahead and add that so under this list I'm just going to temporarily remove these here just like that all right let's go ahead and save make sure it's working there we go now what I'm going to do is go ahead and select this so I'm going to say li like that and I'm going to say only child so pretty much what this is saying is for every Li that is the only child of its parent and you can see this the UL do only has one child so I'm going to go ahead and give it a color of purple for example and you can see that it works perfectly but what would happen if I triy this on let's just say for example the um the TD is here okay so I'm going to go ahead and add a new one TD only child and I'm also going to give this a color of purple just like that now let's go ahead and refresh and see what's going on all right so you can see that that TD right here it's somewhere in this uh table nothing's actually happening that's because as we can see here there is nothing on this page where there's only one TD as a child so that's just one thing to keep in mind sometimes pseudo selectors won't actually style anything if they don't exist so there we go that's pretty much for the basic uh children kind of selectors but let's move on to some other pseudo selectors now there are selectors of this type that are actually specific to certain elements and one of them is the anchor tag or the a tag so I'm just going to go ahead and create an anchor tag under this H2 here oh whoops a and I'm just going to give it a link or an endpoint of Google so just like that okay there we go so in here I'm just going to say click here to go to Google pretty simple a tag uh hopefully everyone knows how to do this there we go we have our link there so I click on it takes me there pretty standard stuff now we can actually create pseudo selectors for this so I'm going to be giving you two for now now there are many many more but these are the two main ones you need to focus on the rest of them are kind of generalized and these are the main uh two that you're going to be using so I'm going to them here and remember you're using the element name you can use the class if you want it's not limited to uh single element names actually why don't I go ahead and do that I'm going to give it an ID because again we only have one of these on the page I'm going to give it an ID of Google link just like that so now I'm going to go ahead and reference that in here so remember it's just the name of the selector Google daslink in this case and then the colon so here I'm going to go ahead and say link okay so this is the first Udo selector and then there's also a second one now don't worry about what I'm typing for now I'll explain both of these in just a second all right so let's look at the first one here Google link link pretty much what this is saying is if you've ever been on a web page you know that there is a difference between before you click on the link and after there's kind of some stylistic changes so that's where sudo selectors actually come into play the website has of those has those defined properties um and they actually change the way that the link looks before and after it is clicked so I'm going to go ahead and do it here link is the unvisited link remember so I'm going to go ahead and give it a color of blue and then when it's clicked I'm going to go ahead and give it a color of red sorry I type blue there remember usually the default is that it is going to be um purple like this color here let's go ahead and refresh the page you can see that it's actually red now now obviously I can't really go back in time and change the link so that it doesn't look clicked but you can see how powerful this these pseudo selectors are because you can do so many different things and once we learn more properties you can actually change different parts of the page and it becomes um very powerful to use these pseudo selectors so that's just one thing to keep in mind all right so there we go we've covered most of the pseudo selectors I'm actually going to go ahead and add that hover property there back in case anyone wants to use the project files so there we go we've covered everything here and we've added all of our pseudo selectors so like I said there's many more I've linked a couple articles uh that help you to look at all of the different pseudo selectors and most of them you're not really going to use very often um they aren't useful in any way because they're usually you just use some basic pseudo selectors like hover and active which I haven't actually covered but things like that so you're not really going to use all of them but I just wanted to give you an introduction to the main ones so that when it comes time to use them uh you have the tools to finish the job or create that effect that you've always wanted all right let's move on today we're going to be looking at Advanced selectors so right now we've looked at our basic selectors so our class selectors element selectors and um ID selectors and we've also looked at some pseudo selectors which is um very useful but now we're going to look at some of the more advanced selectors now you're not going to use these every day they're not used very commonly but it just shows what you can actually do with these selectors because there is a lot so there's a bunch of advanced selectors and I'm actually going to be breaking these down into two parts we're going to be looking first at our basic Advanced selectors and I know that sounds a little bit contradictive but we'll get into that in just a second and then after that we're going to be talking about attribute selectors which are probably the hardest type of selector to uh get used to all right let's get started so the first thing I want to talk about is how you actually set up these selectors now these sometimes contain one two or sometimes even three elements in one selector so I'm going to be going through these and talking about how they all work so the first selector I'm going to be talking about is something called the adjacent sibling uh selector so pretty much what this does is selects every single element that directly follows a different element so I'll show you how to set this up let's first take a look at our HTML page every over here sorry uh now you can see we have our services which is our H2 and then we have have an a tag now first thing I want to do is actually go ahead and get rid of uh these two I'm going to actually comment them out you can do this with control slash just like that so if you type control slash it comments it which which pretty much just renders it useless it doesn't run or anything like that let's get started so the first thing I want to do is go ahead and set this up so I want to be able to apply styles to every a tag or anchor tag that comes directly after an H2 so the way to set this up is all you have to do is go the element that you want to be the first element so in this case it's going to be our H2 and then afterwards it's going to be the ele element that you want after which is our a tag so you want H2 plus a so this is pretty much saying every anchor tag that follows in H2 so then we can pretty much just set the style however we want so I'm going to say color is red just like that now remember this isn't any there is no pseudo selector on this if you could add if you wanted to because this is still a selector remember uh but I'm not going to add any so I'm going to go ahead and refresh the page and you can see it turns red again so that's the first type of selector next thing I want to look at is the general sibling combinator or selector so this is a little bit more difficult to understand uh but all in good time it's once you get used to it it becomes um much easier to understand so pretty much what the general sibling selector does is is goes for the same kind of idea as this selector here it looks for elements that go directly after one another except they have to be sharing the same parent okay so for example let's see our input here our form uh we have an input and a text area or a button followed by a text area for example so what we're going to do here is I want to style every button that's followed by a text area except in this this case they have to share the same parent so what we're going to do is go and say every button which is going to be uh the next one or the final one which is a here so sorry it's actually going to be text area right because that's the first element here which is our text area and then this symbol followed and then it's going to be our button like that so this is saying every button that is followed or that is after a text area but they're in the same parent so from here we can go and style it however we want so in this case I'm going to go ahead and just say the color is purple oops now if we go ahead and refresh you can see that the button color is purple so the like I said the main difference between these two is that the first one is going to be styling elements that follow each other no matter where they are on the scale so if you actually look up here they don't share any parent they're completely separate elements oras here they have to follow each other and I'll actually demonstrate that quickly if we change this to a plus here and refresh the style is still going to work because they are directly preceded um but the only thing is if they aren't so for example I'm just going to actually move this button out of the form just like that oops seems like uh the button disappeared there let's go ahead and uh redo that okay so we have the button back now if I'm going to go ahead and change this back to our uh symbol there and if I go ahead and refresh you can see that the button right there it doesn't actually have that styling anymore because although they directly follow each other um they're not under the same parent so that's just uh one minor difference all right let's move on to the next one it's called the child selector so this is probably the most basic out of all of these Advanced selectors and pretty much what it is saying is every single child uh of a certain element so I'll give you an example here we have an Li and a UL this is pretty basic all you have to do is Type U which is going to be our parent and then this symbol or the greater than symbol and Li I so this is going to say every single Li inside of a UL open up the brackets and let's set the color this time to um blue I'm just going to say that and remember specificity is at play here now like I said the specificity rulle once you use these Advanced selectors get quite complicated uh but for example if we actually look at the LI here um the style for this we can see that the LI with the pseudo selector is actually more specific than the this General selector so I'm going to go ahead and comment that out now if we refresh the page you can see that it's blue so that's just one thing to keep in mind with these Advanced selectors uh they can get pretty complicated and that's why we use the numbers the zeros ones twos things like that is to be able to classif these once we get and start using these Advanced selectors but like I said usually you won't use these in your general use um so I'm not going to go over specificity especially because usually you'll group up all of these Styles into one selector okay so that's the child uh selector the next one is very similar to the child selector but instead of having direct children there's actually something called a descendant so I'm just going to go ahead and edit this a little bit I'm going to have an Li okay but then I'm going to create an ordered list inside of the uh oh whoops actually I need to create an Li and put the ordered list inside of that so pretty much what's going on here is I'm creating an ordered list or a numbered list inside of a list item that is inside of a UL it's a little bit complicated um but we'll get to that in just a second so I'm going to create an Li inside of this and I'm going to say my numbered list item just like that all right so now I'm going to go ahead and refresh the page and you can see we have a list item here with our item all right so let's get started on using this um descendant selector so I'm going to get started first thing I want to do is uh actually set this up so first thing we're going to have is the parent okay so in this case it's going to be our UL remember because that's the top level but then I'm going to select um the Li here but I'm not going to put our greater than symbol so that's the big difference this is the um descendant uh selector and then this is going to be our child selector so that's just the main difference it's very easy to miss just make sure that you don't uh mess that up so now I'm going to select the color and set it to for now let's just say green all right now let's go ahead and refresh the page and you can see that all of the Lis inside of there are going to be green right only problem is our ordered list right here is actually um purple right and of course you know our uh list here is getting a little bit complicated so I'm going to go ahead and comment this out remember this is a very specific selector now if I go ahead and refresh both of them are green all right so what you need to take away from this is pretty much what this is saying is any Li that eventually boils back or propagates up if you uh have done any programming before that goes up to and a UL okay so I'll just show you what that means in this case the LI is a direct child of the UL right but then we have another Li in here which is a child of an O which is a Child Of An Li which is a child of the UL right so as you move up and up it eventually comes back to the UL as the parent element so the main difference you need to take away from this is that the um child selector is selecting any direct uh children so anything here would not apply because or actually um this one wouldn't apply because the ordered list is actually a child of the LI remember but when you're using the um descendant selector what actually happens is if it is contained inside of a UL at all then use or apply the Styles so I'm going to go ahead and demonstrate this now let's go ahead and actually remove this Li remember because once you get to this point CSS gets a little bit complicated um this is going to end up styling everything inside it so I'm actually just going to remove this um and leave it just the ordered list so right now we have the ordered list as a child of the UL now I'm going to go ahead and refresh and you can see it still stays the same because uh we have this style applied but why don't we go ahead and remove this what do you think is going to happen well you can see here that this stays Blue remember because of our direct child uh selector but then this doesn't have any style at all so this Li works perfectly it is a direct child of the UL which means it's going to be colored with the style specified the only problem is this Li is a direct child of the ordered list which is completely separate from this one so the Styles aren't going to be applied on this one on the other hand if we did have our descendant selector enabled it's going to style both of them because remember the LI is a child of the O and the O is a child of the UL so just keep that in mind uh there's a big difference between the two you might be able to miss it it could really mess up your uh code so just make sure to keep that in mind all right so those are pretty much the basic um Advanced selectors those are the four that you're mainly going to use again there's many more but um they are quite difficult and uh we're not going to cover them because they're not very useful so there we go those are the four selectors that you can use go ahead and practice them as much as you want um you know try messing them around open up some HTML files and just see what you can do with them all right let's move on hi welcome back so in this video I am going to be talking about the last type of selector these are called attribute selectors they're a little bit complicated once you get uh started but once we actually start using them they become very easy to use so first of all what is an attribute selector well as we know in HTML we can actually add attributes to all of our elements so for example this image here has an attribute of source which tells the image tag where the source of the images but what we can actually do in CSS is use these to our advantage we can select certain elements that um for certain attributes and their values so for example let's go ahead and try and rewrite this subtitle class here so we know if we go over here that all of our uh all of our subtitle classes are used in H2S so what I want to do is actually rewrite this in terms of our attribute selector so what we do is first start off with our tag name which is H2 but then inside of some squared brackets what we do is type attribute is equal to Value okay so obviously um we're not going to do it like this we're going to have to select some certain attribute but what this allows us to do is actually select certain things or certain element based on their attributes so in this CL in this case we want to select everything that has the attribute of class and we want to make sure that the class itself is subtitle okay now you do not need um quotation marks for these uh unlike how they were in HTML you can see we do need quotation marks but in CSS we don't actually need them all right so there we go we have Rewritten our class here but we've but we've written it in a way way that allows us to select it based on its on the attribute of it itself so let's go ahead and refresh the page and see what happens you can see that they stay exactly the same now nothing has changed if I go ahead and change this back to do subtitle just like that I refresh the page you can see nothing's changed so that's pretty basic now it doesn't just have to be class we can select it based on many different things so for example if I wanted to select this image over here I'm going to go over to the bottom I could say image oh whoops image and then every and then the source has to be equal to something all right so there we go now we've done that but there's actually more than one type of selector now usually this is the basic one where you just equate one side to the other but there's actually many more types of selectors which allow you to kind of modify the attribute selectors and make them much more powerful than they are right now so how do we do do this well I'm going to be covering just a few of them with you today and showing you how you can use them so we have two images on this page now both of them are located in this image folder is there do you think that there's any way that we can select both of them in one go using an attribute selector well there actually is so here's what we have to do first of all let's find the common factor between these two images they both are contained inside this folder so they both start def definitely start with this path dot dot SL IMG SL both of them are going to contain this and if we actually go back and look you can see that both images actually do contain um this linkia wherever the other image is there it is so there we go now we've done that but remember that this is direct equating this has to be equal to this and unfortunately neither of them are equal to that so how do you think we fix this well all we have to do is put a carrot behind um the attribute just like this so what this says is every single image where the source contains or starts with uh sorry yeah starts with this piece of information what comes after it doesn't matter but what we're doing is selecting all of the images where the source attribute starts with this uh value right here so this is you can already see how powerful this is now if we go ahead and refresh the page obviously um we can't see anything because we didn't add any style but I'm going to go ahead and add a quick style for you now you don't need to know how to do this I'm actually going to make it a little bit more obvious so you don't need to know how to do this we're going to cover it later but you can see now both images are covered in Black okay so there we go that's just one way uh one of the selectors we can do we can also change this to a dollar sign and in this case it's going to be um make sure that the source attribute ends with this value okay um so there we go we can do that obviously the style isn't going to work anymore because this doesn't apply but there's also another one that we can do which is using a star or the multiplication symbol and pretty much what this is is if it contains it anywhere anywhere in the um the value for beginning and middle doesn't matter as long as it contains this it's going to be there so I'm going to go ahead and refresh and you can see now that works because both of them do contain this so those are the three basic basic ones but there's also um some more complicated um selectors now I'm going to go ahead and cover them but you don't exactly need to know these uh because they're a little bit complicated so I'm just going to go ahead and do them the first one is called a whitespace attribute selector so pretty much if you don't know this already you can actually add multiple classes to um something in HTML so I'm actually going to go ahead and add another class to these subtitles and I'm just going to call it um just something random article subtitle obviously it's a little bit confusing but just bear with me so you can actually add multiple classes or multiple arguments separated by white spaces or spaces uh inside these um inside these attributes now obviously this is specific to some very uh small a very small number of attributes but you can do this now just keep that in mind for now what we're going to do is go forward and start using this so I'm going to go ahead and select anything that contains this um this class specifically now I could do you know maybe the attribute selector where it ends in this or contains it but there is another selector that we can use so I'm going to go ahead and say H2 and of course the attribute is class and it's this symbol oh whoops it's this symbol okay and then equals and then our value in this is in this case it's going to be our class which is article subtitle all right so now we can go ahead and add whatever we want so I'm actually going to go ahead and give it a background now again you do not need to know what this is yet I'm just trying to vary up the properties a little bit here so let's go ahead and refresh the page and see what happens you can see that a green background has been added to this I'm not going to try hovering over that it's a little bit um disc conversate but you can see that a green background has been added to it now this could be used for a um using a contain attribute uh selector but this is a little bit more specific and it only works for things that are separated by white space so if you want to isolate certain elements that contain a certain class for example uh you can do it with these class uh attributes and that would work perfectly so the next selector I'm going to talk about is a little bit more complicated um and it's very similar to the first them the first one that we talked about which was the General attribute selector the one where where it's exact equality but there's a little bit of a difference here there's actually one exception to this now I'm going to go ahead and demonstrate it here okay so pretty much what this is saying is find every H2 where the class is equal either equal to directly article Das subtitle or article-- subtitle with a dash so and again it does have to start with this so it can't just be containing followed by a dash it does have to start with this so why would you want to use something like this why can't you just use use the exact equality well this is a pretty basic site right here now we're not really doing anything complicated or any multiple style sheets or anything like that but sometimes when you have want to have multiple elements or you want to build libraries you can create multiple elements that are followed by an ID so for example just list them here I'm going to actually put this in a comment so I could have subtitle Dash and then some ID like that subtitle Dash and then again some ID so you can see why you would use something like this pretty much what you want to do is Select everything that um has subtitle and then the dash in it and you're probably also wondering okay why can't you just use one of the other selectors like something that starts with it well sometimes this is contained in a chain or sometimes there's multiple dashes and on top of that some sometimes it may change you know maybe this could be in the middle of 15 other classes so you can see why You' want to use something like this and although it's not used very commonly it's still very important to know all right so those are pretty much all of the advanced art attribute selectors like I said you aren't going to use these very commonly uh but again it is good to know they are very powerful selectors um so yeah that's pretty much it uh go ahead like I said with every single video practice and just try using these selectors on your own all of the project files are available on GitHub the they the link to the repository was posted at the beginning of the course so you can go ahead and check that out if you want to download the files um and work with them but other than that there we go uh that's pretty much it for selectors now we can actually move on and start using CSS all right let's move on I'm not really going to talk a lot in this video because um there's not really much to talk about but this video and the next are very important because right now you're probably just piecing things together about the the whole way that we use CSS now we've had to use a couple properties here and there but you probably don't actually know what these brackets do or how selectors work or how any of this is actually put together so that's what I'm going to be doing in the next few videos is explaining how all of this comes together and once we learn that we can actually move on to the fun part which is using CSS and styling this website so first thing I want to explain is properties now we've talked a little bit about properties here and there because we've needed them them to demonstrate points on how selectors work now obviously it might have been better if we use properties first but in my opinion it's better that you learn selectors before you learn properties because if you learn selectors first you'll be able to understand the premise or the theory behind CSS and how things work whereas if you just learn properties first then most of your focus will be on how the properties work and not the selectors and I feel that it's much more important that you learn the selectors before the properties so that you can actually understand CSS and how it works as a whole so that aside let's move on to properties now like I said we've used these a little bit in the past we haven't actually talked about them in detail so this is a property now they're contained within selectors and they pretty much Define the way that CSS is used or what goes into the CSS now a selector is going to Target the element but the actual properties are what give it its change and what make it what it is without or without properties then the selectors would be completely useless so let's go ahead and talk about the parts of properties now first of all a colon is always needed you cannot use a property without a colon and a semicolon the colon comes after the property now the property is pretty much defining what is going to change is it the color the background the positioning the height the width there are so many properties out there and they are all used in different ways and then next is the value now most of the time you can actually use multiple types of values but for something like color there are very specific rules that you need to use for them and we're actually going to be learning those rules and how to use colors in the next section but for now the just think of the value as a key or well not a key the value is sort of the guideline towards the property the value is like the value to the attribute the attribute defines what's changing and the value actually gives it that change so just keep that in mind so that's pretty much it for properties it's very simple and we're going to get lots of exposure to them as we move through the course but for now all you need to keep in mind is that properties have two components the actual property itself which is kind of the guideline on what's changing followed by a colon and then the value itself which is going to be the change or the type of change that happens in our um our element so what happens through our selector and at the end of it all you always put a semicolon if we remove the semicolon it's not going to work so yeah that's pretty much it for properties let's move on so this is going to be the final video on or in this section we're not really going to be doing anything or styling the website but for now I just want to talk a little bit about a very important part of CSS now this is pretty much going to define the way that you look at CSS and we've written a lot of CSS code here well we're not really really looking at properties yet but we've covered a lot of different selectors and how they work but now we need to put the two together we know what properties are and we definitely know what selectors are so we need to know how these two work together now I've talked a little bit about this in the past but we haven't actually gone through it in detail so that's what I'm going to be doing in this video so first of all if you look at all of this CSS code we can see a pattern involved here first of all in every single one of these there are these curly braces and on top of that in every single one there is some italicized text which is due to the uh development tool that we're using but there's some italicized text and then some other text here and there's always a colon and a semicolon and on top of that before every first curly brace there's always going to be some form of text here which is our selectors but how do these actually work together so this is very important for something called the CSS general rule and it's pretty much going to teach you how all CSS is supposed to look so first of all there's always three parts to your um to your selector here there is the selector itself there's the curly bles which actually represent something called a CSS block and then there's the properties so first of all let's talk about the selector now we all know that a selector defines what elements you're trying to collect or Target on your HTML page a selector can look any different way it can can look like this with some weird symbols it can have colons and pseudo selectors or it can just look something very plain um like this but we all know that they do something different and over the last few videos we've been covering what selectors actually do so now what we're going to do is go through and I'm going to teach you how this selector plays in with everything else so we have our selector over here this could be anything uh an element selector pseudo selector attribute selector like one of these um but for now we have our selector so this is going to Target some element on a page now the part we haven't talked about is something called the CSS block so pretty much once you select something you need to Define all of your Styles and as we know all of your Styles have to go in between these two curly braces so that's what we call a CSS block the curly braces Define the beginning and end of this block and it can be empty it doesn't need to have anything inside it but what's going on here is this block is going to contain all of the styles that are then going to be targeted towards our selector and then of course we have the properties so all of these have only had one property but you can actually do more than one property so a property looks like this property a colon and then a value and a semicolon so the property is going to be the name of the actual style this can be color background and we're going to learn a bunch of these throughout this course but this could be anything on the other hand the value has to be sort of targeted or matching the style of the property so for example if this was a color we couldn't use pixels because pixels are for size so there are many different ways that you can um use these different values and they all depend on your property so what I didn't show you is you can actually have more than one property now these can be in any style as long as they have the semicolon and the colon um and they come inside the block so this can be property two and value two and you can put pretty much as many styles as you want in here so for example if you wanted to style a subtitle and you wanted to change the font size the color and the background all at the same time you don't need to create three separate CSS blocks you can do it all in one and that's the real power of CSS is that you don't have you can keep your code concise and clean without having to create all of these different blocks so this is pretty much the general rule you have to follow this pretty much for all of the CSS you write using a selector and then different properties contain inside of a block so like I said we're going to get much more experience with actually using CSS as we delve more um into CSS and learning all of the different features it has to offer all right let's move on so this is the start of a new section and now that we've learned all we need to know about selectors we're going to actually start styling up our website and making it look good so first first of all let's just talk about coloring in general I mean what is coloring and what are we supposed to do with it so as we know we already have a bunch of colors here and they all look fine but what we're actually trying to do here is color our website in a way that makes it look modern and appealing to users so we're going to be learning a bunch of different techniques that you can use to color your website now we've already used one in the past and it's the very common one and that is of course the color property now we're going to be talking more about this in the next video and using it in depth but first thing I want to talk about is the different types of colors because there's actually more than one so first of all we've all used and well you've at least seen me use the colors uh given by name so for example red green blue and purple um but there's actually more than that there's so much more to Colors than just those names because as you know they're actually quite limiting you can't really change the color and choose it as you want so what I'm here to teach about is the three different types of colors and how they work so the first one is obviously the CSS color codes or names and what they do is it's pretty much given a name and they each have a designated color so this is a really easy way for testing colors for example if you want to test if a property works as we saw at the beginning of this course um and you can also use them for you know maybe quick fixes or trying to just try out different colors but once you get into the really specific detailed um web design and once you start producing your website properly you're going to want more than just the color CSS gives you so I've actually attached to the lecture resources this website here um you have a bunch of different CSS color codes and you can see that there's actually huge range of them we only use the basic ones uh that are quite vibrant and they really hit the eyes very hard but you can see there's actually a lot more than what we just use the only problem is nobody wants to memorize all of these different names so what we're actually going to be doing is learning how to use these two which are the ones I'm going to be talking about in this video so first of all let's talk a little bit about hex code okay so first of all I have a Color Picker over here just to demonstrate how this whole thing works we actually don't need this for now so I'm going to put this up on full screen so this is a color picture that I found on Google you can go ahead and search it anywhere but I like using Google's provided one uh because it provides you with both the hex code and the RGB code don't worry we'll talk about those in just a second so first of all you can slide up and down uh this thing and choose whichever color you want and you can see that these two codes change so what do they actually mean well first let's talk about the hex code so we all know that when you're normally using numbers you range from 0 to 9 so any given number in this in that numeral system can be made up of 0 1 2 and all the way up to 9 so in that case there's 10 possible combinations but in HEX code there's actually 16 different possible combinations you can go from 0 to 9 and then a to F so for example let's just take this right here this can actually be converted into a number if we wanted to suppose B actually stands for 12 because it goes 0 to 9 and then a b so 12 and you can actually convert this into a number which is very interesting so I'm not really going to be talk about the uh applications of hex code in this uh in this video because that goes all the way down into computer science and we're not really looking at that now but one thing we can do is actually create colors based on this so first of all you'll notice that our code here starts off with a hashtag and then you have six digits so each one can have 16 possible combinations but as we know color any color is made up of either red green or blue at least on the computer for the standard color um palette so it's made up of red green and blue now basically this hex code is split up into three two-digit pairs so the first pair of numbers is meant to represent the amount of red in the color the second the amount of green and the third the amount of blue RGB and these pairs can range from 0 0 which means none of that color to FF which is the highest value remember heximal goes from 0 to F so I'm just going to choose something very basic here like a standard blue you can see here that this is the purest blue that you can get pretty much what this is saying is the first two is 0 0 which means there's no red the second pair or yeah the second pair is also 0 0 which means no green but then the third is FF which means all blue so this is pretty easy so if we go to something like white for example this would have FF FF FF which is all red all green all blue which actually creates white and if we chose black you can see that that's zero so this is a pretty hard thing to understand once you get into some of these more complicated colors again we don't really use heximal in normal uh in normal use when we're creating colors or writing code we don't really use these numbers so it's actually much easier to work with RGB codes so RGB is a little bit different in the style that it's written but it all represents the same concept except pretty much there are three numbers here and these aren't hexadecimal numbers these are just normal numbers you have three numbers the first for red the second for green and the third for blue just like this one except in this case the numbers can go from 0 to 255 Z being the minimum and 255 being the maximum so this is actually much easier to read let's go back to our blue here I'm actually just going to write the code here so you can see that there's zero red zero blue and two 255 sorry 0 red Z green and 255 Blue which is the maximum and obviously you can see that once we go back to those complicated colors when you look here it's quite complicated to understand but when we look at the RGB code we can see that there's a moderate amount of red a large amount of green and a large amount of blue and therefore it should theoretically be a cold color now again you don't really need to know how to construct these cods from your head they're quite hard to understand so what I would recommend is when you're designing these colors or designing these um these websites I would recommend you just go and use a Color Picker it's much easy to it's much easier to decide and you can also uh get a lot more experience hands-on experience with these colors rather than memorizing all the theory behind them so both of these will work fine and in the next video I'm going to show you how to actually use these codes in our um in our website and actually use them to style and color text all right let's move on so in this video I am going to be starting to color and style our website so we're going to go through and use the selector skills that we've learned in the previous section to actually go through and start adding some color on top of that we're going to be using the skills we learned about hex code and RGB color codes to um vary up our style or method of coloring things because in the past like I've said we've just used some basic um techniques with CSS color codes and now we're going to be working with our own custom colors so first of all let's go ahead and start adding some classes to this website to get it set up for our styling so first thing I did is actually started from a clean slate because it was getting quite messy before and I thought that it would be better if we started from scratch so the first thing I'm going to do is go ahead and add a class or an ID actually I think would be better to our title since there's only one of them so I'm going to go ahead and add an ID of title and hopefully you know how to do this from the skills you learned in the last section let's also go ahead and add some classes for our paragraph text and because of course we have more than one paragraph we're actually going to go ahead and use a class so I'm going to use this and I'm going to say paragraph or I'm just going to say para to shorten it text so I'm going to go ahead and copy this class onto our other paragraphs instead of writing it down there we go so the next thing I want to do is go ahead and add some classes to this list here just for uh convenience so I'm going to go ahead and add a class for a list item now obviously we're not going to use all of these in one go but I was just considering to add them so that uh when we get into it we can actually go ahead and use them without having to go ahead and add these classes every single time time so there we go we did that let's also go ahead and add a class to our link link and now we have our table items we're going to leave this for now because it might take a long time uh we'll we'll style this when we get later into our uh section so there we go we did that now the last thing I want to do is just go ahead and add uh a couple classes to our inputs here so I'm going to go ahead and add some classes so class is form input and this is actually quite common place to add uh or write class names and ID names with these so um with dashes instead of you know snake case which is using capital letters things like that it's just a convention in CSS so let's go ahead and add the same class here just like that there we go and we'll also we're also going to go ahead and add a subtitle class to our subtitles so I'm going to go ahead and do that there we go let's just copy that and over to our other subtitles and once we're done with that we'll move on and start coloring our text right there we go so everything's looking good that means uh nothing has gone wrong let's go ahead and start styling our text so first thing I want to do is style our header here so obviously you don't really want to go crazy with text colors it's more for backgrounds but I think we'll just experiment a little bit for this video um with some of our colors so first of all I'm going to need to select it this is the first part of our general rule so because it's an ID I'm going to go hash and then title open up our block with our curly braces and now we're going to start writing our property so if you don't know this already the property is going to be color this is the text of the uh the color of the text and I know it doesn't look like it since it doesn't say text- color uh similar to a bunch of other properties but this is the way to color your text so here we can go ahead and type our property or sorry our value now in before we've used colors like steel blue which is um a CSS color code but now let's go ahead and challenge ourselves and start actually messing with these colors um using our own Color Picker so first of all I want to choose a color that I really like and I'm going to go for a sort of deep orange so we don't want to go for something too dark but we also don't want to go for something too light so that it's hard on the eyes now I think a color like this is good now how would we actually implement this well we just copy and paste it and if you're thinking that that's the right way well then you're right it's actually very easy all you have to do is copy your hex or RGB code and paste it into um into here just like that now if I go ahead and refresh the page you can see that that color is being reflected on our title now I would recommend instead of using your hex code go ahead and add an RGB code and I'll tell you why later in this section but for now just think that this is better because it's a little bit more flexible and you can change it easily so on top of that using an RGB color code really allows you to mess around with the colors in a way that if you didn't know hex code you wouldn't be able to so for example let's say I wanted to increase the amount of blue in this all I would have to do is go ahead and just change it let's say I wanted to go with 150 blue you can see that that color has completely changed by adding more Blue by doing it we've kind of mixed around the colors and created this pink pinkish color imagine you're working with a color palette instead of a digital kind of weird um color mixer think of you have a giant pile of red green and blue and what you're doing here is changing all of the proportions to get just the color you want so let's go ahead and change this color back to nine there we go now we have our orange color there so let's go ahead and also style up our um our subtitles here and one common thing that you do with um hierarchies of text so for example titles and then subtitles and paragraph is usually your titles or your high up on the hierarchy are going to have very dark colors and then your subtitles or things that are lower on the hierarchy are going to have around the same color scheme but they're going to be a little lighter so what I'm going to do is just go ahead to my Color Picker and drag this up a little bit of course you could do this by just increasing all of the values but I actually prefer to use the Color Picker because I can really see what's going on so I'm going to choose do something a little bit lighter maybe something around here again we don't want it to be too light because then uh it's going to be too hard on the eyes so I think I'm going to go with something around here so I'm going to go ahead and copy the code now let's go ahead and add our selector so I'm going to go do subtitle because remember it's a class then I'm going to use my property color and paste in our RGB color code let's go ahead and refresh the page and you can see that our subtitles have been colored down so there we go everything is working really well for now and we're starting to get the hang of this now I recommend uh you go ahead and try this on your own again the whole point is to be styling a website as you go along so I recommend you go ahead and mess around with your own colors again you can just find this Color Picker by going to Google if you don't really like it you could always go to another Color Picker on uh search for one but you can go ahead choose your own colors if you don't like orange you can go with blue maybe something a little colder uh it's totally up to you just get some practice with using colors uh on different types of text and get some more practice using CSS on your own all right let's move on so in this video we are going to be covering background colors now I know it's a little bit intimidating considering we've never actually done backgrounds before but it's very similar to colors in the values that it uses the only difference is is what it's actually Style in so I'm going to be teaching you how to create backgrounds on your website now obviously we're not going to go all crazy and start creating backgrounds for everything because we haven't got into we haven't gotten into layout yet and without layout backgrounds aren't really usable because sometimes especially with colors it just doesn't really look that good so what we're actually going to do is go through and just practice with our backgrounds for now so the first thing I need to do is actually look for something to create a back on and we all know what a background on text looked like now we don't actually know why the background goes um all the way to the edge yet we haven't gotten in we haven't gotten into layout yet but once we do you'll know how to change that for now though I think it's really fitting to go through and style this whole page so firstly what selector do we need to use considering that we're trying to select everything how are we supposed to create a background on every single item do we go through and select everything and add that background well if we actually look our look at our HTML page you can see that all of our text here is contained inside of our body tag so the easiest way to select this because again there's only one of our body we can just use an element selector so I'm going to go ahead and select it with body so usually you would actually put tags uh element selectors at the top so I'm going to go ahead and do that now open up our block using those curly braces and now we can add our background so first of all the property used to select and color backgrounds is called background color but we're not actually going to use that because background is much easier considering that you can actually go and also select images and URLs instead of colors it's much more flexible and I prefer using it over background color so I'm going to go ahead and select that as my property so from now you can just go ahead and add your value similarly to color you can use RGB code a hex code or a CSS color even if you want so I'm going to go ahead and set it as red and just warn your eyes because it's quite popping so you can see that now our entire site has been styled red now obviously I don't want this this doesn't really look very good so I'm going to go ahead and erase this property for now and we're going to go through and choose a color so I would recommend choosing something a little bit light so I'm going to go for about a light turquoise or light blue something like this so now I'm going to go ahead and copy my uh RGB code and here I'm going to go ahead and add my background property and paste in my RGB code now if we go ahead and refresh the page you can see we have this really nice light blue which kind of fits in with our oranges now because it's a little bit um it doesn't really look that good on this light orange I'm going to go ahead and dampen it a little bit so the easy way to do this with RGB is to just go ahead and drop all of the values this way you stay in the same proportions but you're just darkening everything so I'm going to go ahead and darken our subtitles so I'm going to reduce everything by 20 or so so this becomes let's just say 200 and this becomes 148 and obviously these don't have to be exact uh and this can become 30 so these don't have to be exact like I said we're just darkening the titles you can see you can see that they got a little bit darker and it looks better on this color all right there we go so that's pretty PR much how to style backgrounds now you can go ahead and apply this to pretty much anything you want so if I actually go ahead and style our subtitles with our blue background obviously it won't look that good but it works perfectly fine so there we go that's pretty much how to add color to backgrounds and in the next video I'm going to be teaching you how to actually change the type of background that you're using because obviously sometimes you want to actually change the background and use maybe a custom image or you want to link to an image online so I'm going to be teaching how to do that in the next video so let's just go ahead and refresh the page keep that normal all right let's move on so in this video we are going to be looking at a different type of background in CSS so now that we've covered basic color types and we've also covered a little bit of background uh and using backgrounds we're actually going to move on to an alternate way of creating backgrounds and that's through background images so right now we know the basics of coloring so we we're able to color text now with our own custom colors using a Color Picker uh we can also go ahead and use our own um you know backgrounds and things like that with our own colors but now what I want to cover is looking at different types of backgrounds themselves so in this case we're going to be looking at images so first of all when we want to set the background to an image we can't just go ahead and add an RGB color code we're going to need to go and actually link to an image so I'm going to show you a really easy way of doing this the first thing we're going to need is an image and for this method you can actually use uh images with from the internet without having to download them using URLs so I'll show you how to do that now so if I go ahead and search for a landscape image just like this and now we want to look for a sort of low resolution one we don't want something too big I think this would be pretty good it's going to look a little bit weird but just for this purpose we're going to use use it so now what we need to do is get the URL link to this image so you can do this by right clicking on it and then you're going to go ahead and click on copy image address okay so what this is going to do is get the actual link to the image itself right now this link is going to Google Images but what we actually need is the link to the image itself so there we go we have that set up now we need to go ahead and add the image to the page so under here I'm going to just erase this color code for now and I'm going to show you how to add our image so there's this uh thing in CSS they're called functions now we're not really going to go very in depth about them but pretty much what they do is they take a few inputs they process them and they give an output so the first example of a function that we've already used is this right here it takes three inputs a red a green and a blue does some magic behind the scenes and then gives us a color back so what we're going to do here is use another function called URL so what this is going to do is taken the link or to a URL and then it's going to find that image and set it so in quotations it does have to be in quotations just remember that you then going to paste in your image so remember I just copied this from the image address and now we have it here so we have the image let's go ahead and check it out on our website so there we go you can see that oh whoops you can see that our image is set here now there's a few issues obviously with the um repetition and everything but we're not going to be covering those until maybe in a few videos where we talk about some other background properties but there we go for now we've actually set our image and now it is set on our website so when you think of a URL you're most likely thinking of linking to Google images or some sort of web URL but that's not the only type of URL that we can use a URL is just a link to an endpoint this right here is a URL it's just not linking to a website it's instead linking to a local uh picture or stylesheet or whatever you're trying to link to so what I'm actually going to show you is that we can use these local URLs in here so I'm going to erase this it's a little bit long now I'm going to paste in our new URL here go ahead and refresh the page and now you can see that it still works perfectly because again it's linking to an endpoint it's just not on a website it's instead stored on our local machine so there we go we have that set up now but there's actually another way that you can set background images and this goes the same for background colors so why I like to use the background property is because you can set anything you want in one go you can set it as a color as an image and you can do many other things but instead you can actually use very specific properties that work for specific um values so for example in this case we can use background image and from here we can go ahead and copy paste the URL like that make sure to add your semicolon now I'm going to go ahead and erase this and show you that it still works perfectly fine so you can see I refreshed the page and it's still working and this goes the same for for background colors you can go ahead and add a background color and then add some random RGB value just going to go for a full uh black for now and you can see that it still works the only problem is if I go ahead and paste in that URL here oh whoops if I go ahead and paste in that URL here uh just going to link to it straight just like that so if I go ahead and add the URL to the color it's not going to work because this is specifically for colors all right so there we go that's pretty much it for background images um it's quite easy to use all you have to do is make sure that you have a working URL you can just test it by putting it in and seeing if the background is loading properly um and from there just use your url function and a suitable property such as background or background image and you should be good to go all right let's move on so in this video we are going to be looking at some more background properties now we're not going to be looking at all of them because most of these aren't really useful and they're they're not really used in everyday life but what I'm going to be doing is showing you the main uh properties that you can use with backgrounds that can really change uh how your backgrounds look so we're actually going to be covering covering only two in this video so that's background size and background repeat so the first thing I want to cover is background repeat because I think it's the most important so you can see we have our background there I already set the height and width don't worry about these values or the properties or anything again we'll talk about those later in this in this course uh but for now you can see that we have our background here uh which is actually inside of a div so I set the div height and width and now there's a background here so I want to mess around with this background and see what I can do so first of all you'll notice that we can see here that we have so for example um two or three or four of the same image and pretty much what's happening is the image is being repeated so that it can fill up all of the content space now this is done by default because again um all of the uh values in pixels and the dimensions are absolute they're not like other programs where you can just throw a picture on there and it'll automatically resize when you're working with web development it takes those raw dimensions and just plugs them straight into the website so that's why we need to do a little bit of styling so you can see that this image is big enough and remember because this is a direct image What's Happening Here is we have an image uh tag and then the image is just being plugged straight in there whereas with here we don't actually have an image tag what we have is an empty div which is just think of it if you don't know what that is think of it as a container it has a width and height of this much but then this is an empty box what we're doing is filling it with this image so instead of plugging the image straight in we're just filling an empty box with these images and of course the image isn't big enough to fill it so what we have to do is or what HTML actually does by default is repeat this so if you don't want that there is an easy way to fix it now it's probably not going to give you the result that you expected but what you're going to do is go ahead and say background background- repeat and pretty much you can either set this to no repeat which is the default or you oh sorry no repeat is the default yeah so repeat is going to be the default value but if you want to set it to no repeat this is pretty much going to remove that repeating property now although it might look like now this image is going to cover the whole thing Watch What Happens you can see that it only takes up um that small box and this might look like it just resized everything but if I go ahead and add um a background color to this like that and I'm just going to say red and I go ahead and refresh the page you can see what's actually happening here is that we have the image and it's not taking up the full image if I go ahead and set this to repeat now the background is taking up the full image so I'm actually just going to go ahead and set this to a basic steel blue I think that's one of my favorite CSS name colors so there we go now that we know how to adjust the rep repetition of these backgrounds why don't we go ahead and actually talk about background size because that's the important one that's going to allow us to fill this whole container so first of all now that we know the background repeat just changes if it repeats or not we need to know how to alter the size we can do this using a property called background size so I'm going to go ahead and actually erase this because we don't need it for now just like that so you can actually go ahead and set the size of the background and remember depending on whether you set it to repeat or not this is going to change your effect so right now it's still on repeat since we removed that property but pretty much the way to manipulate this is the first value is going to be the height so for example let's say I wanted to take up 50 pixels then with a direct space remember no comma is nothing you're going to then enter the width so I'm going to say maybe 100 pix let's go ahead and refresh now and you can see that because our repeat is actually off uh sorry our repeat is on we can see that it just keeps repeating until this whole Space is filled up now obviously it's going to be pretty hard to get this exactly at the dimensions if I actually go ahead and set this to 400 pixels and 70% we didn't really talk about percentage as much you can see it's still repeating so it's very hard to get this working in the way that you want it to cover the whole thing exactly even if you use the direct values so there's actually a keyword that you can use to fix this up all you have to do is type cover here so if I go ahead and refresh you can see now the image takes up the full width and although it sacrifices the quality pretty much what's Happening Here is this cover value is going to resize the image based on the dimensions just right so that it fits this whole thing there's also one more keyword that you can use use which is called contain but the only problem is with contain is it's going to resize it as much as possible the only problem is it trying to resize it without messing with the proportions so let's say that this is um maybe a 2:1 ratio so for every two widths there's one height so let's just use that as an example basically What's Happening Here is that no matter how much you stretch this you cannot go the full way without stretching it off the screen so contain doesn't do that instead it just repeats the image now if we actually change this back to cover you can see that it does cut off part of that image because it just stretches it out the full way until the image cover or the background covers the full width so there you go that's pretty much it for background size now I would recommend going instead not with the uh sizing option pixels but instead using the cover keyword or the contain keyword if you know that your proportions are right or if you need it for some other purpose so yeah pretty much those are the two main other background properties that you're going to be using obviously there's many more but they're not as um useful and they don't really make as much of a difference as these two all right let's move on so in this video we're going to be talking a little bit more about RGB colors but we're actually going to be adding one more uh feature to this so right now we've talked about RGB which is our basic color set we have a red a green green and a blue but there's actually one more that we're missing out on that can really improve the quality of our colors and that's a or Alpha so right now you can see we have an RGB color code but what if we wanted to add this mysterious Alpha component what would we do so I'm actually going to go ahead and use it as the background well the first thing you need to do is change the RGB uh name to RGB a and in this way we've completely changed the way the color looks now if we go ahead and refresh the page nothing's changed but now we can actually manipulate that Alpha value so all we have to do is after green or sorry blue keep getting those two mixed up after the final value you're going to add another comma and here is where you can put any value between 0 and one so now that you know what you can do with it Alpha is pretty much the transparency or opacity of a color zero meaning it's completely transparent you can't see it at all and one meaning it's fully visible think of this in percentages for example 0 is 0% and 1 is 100% 0.5 would be 50% so if you think of it that way you can really think about opacity in a much easier way so I'm going to go ahead and actually set 0.4 so right now we're at zero or 40% opacity now if we refresh the page you can see that the color is still there it's just a lot lighter now you're probably asking why why don't you just go and maybe make the color lighter well well it's actually much easier to control it this way and on top of that if you want things like maybe fading or you want to maybe uh change a color fade into a different one uh you can't really just change the color every time because in animation it's much easier to just change the opacity reduce it or increase it then change the color every time so it's also much easier to use rgba colors um when you're trying to just control the overall uh look of a color so usually when you're using just simply RGB colors you can only get a certain look but once you add opacity into the mix you can completely change the way that it looks so pretty much here's the takeaway that you're supposed to take from this video you can have a fourth component to an RGB color which is a now this becomes an rgba color now this a value stands for Alpha or opacity or transparency whatever you want to call it then this value isn't like just from 0 to 255 instead you have to set a value between 0 and one if you think of it in terms of percentages it becomes a lot easier zero being the no or zero when there's no transparency uh sorry when there when it's fully transparent and then one being when it's completely visible all right so that's pretty much it for this rgba color scheme uh it's very easy to use you don't really need to use a Color Picker for that you can just think about how opaque you want it and from there you can set your value all right let's move on so in this video this is going to be talking about the last feature with using colors and it's a little bit hard to grasp at first but once you start using it you can really get used to it so we're going to be working with gradients in this video and for now I'm just going to go ahead and erase this background and I'm just going to have a single color so I'm just going to say steel blue and I'm going to also erase this color property so now we have a background of the steel blue color there we go so now it's working so pretty much if you don't know what a gradient is already it's kind of a transition between two colors so it's not just a sharp red to blue in one go it's smoothly G or you know moves or diffuses from through the colors so for example you start just completely red and then you move up along and as as you go up it gets more and more blue so you're sort of mixing between the two colors so if you ever done any painting before or used maybe coloring pencils if you kind of use paint and draw between the two colors depending on the proportions between them it's going to make sort of a purplish and then it transitions uh like that so pretty much that's what's going on here with our gradients is we're transitioning between two colors now of course you can do more than two you can put three four you can put as many colors as you want but pretty much what you have to take away from this is that a gradient is just a transition between a number of colors okay so now that we know what a gradient is let's go ahead and get started adding them so there are actually two types of gradients radial and linear so radial gradients are circular they kind of move outwards from a center and depending on the percentages or how much you want of each color it's going to change the way the gradient looks a linear gradient on the other hand is the one that I described earlier a smooth red transition to Blue it could go from left to right top to bottom and even Di Al depending on how we Define the direction later um in this video when we start creating our gradients all right let's get started so the first thing I want to work with is linear gradients so the way to do this just with our rgba or URL all we have to do is type linear Dash gradient just like that and from here we can start defining our directions so if you don't already know about directions already pretty much there are four different positions top bottom left and right and you can also combine the two to create Corners so for example top right would be the top right corner so first of all what you're going to want to do is type two and then you're going to say the name of the direction so in this case I'm just going to say to right so what this is going to be saying is you want the gradient to move to the right side so it's going to be going this way now there's also another way to do this I'll talk about in just a second but for for now let's leave it like this and then after your comma you're going to add as many colors as you want so in this case I'm going to add red and blue and remember to separate them also by a comma let's go ahead and refresh and see what's happening you can see that we have a red slowly transitioning into a blue to the right side so remember it starts with the first color and moves on let's go ahead and add a green in there and then a steel blue and then a blue now we have four colors that are slowly transitioning we have a red that slowly transitions into a green and then a steel blue you can sort of see it there and then a blue and just saying we don't actually have to use these name colors I just wanted to use them because it looked um it was quite easy to look at so what we can actually do and here's your first use for opacity is you can go ahead and let's just take a random color here so to right remember this is starting here we're going to paste in that color but then we're going to finish it with an rgba color like that and pretty much what's what's going to happen is this is going to be a slowly fading out color just like this so you can see what's happening is we start with a fully functional color which has a full trans or a has no transparency at all and we slowly slowly make it fade more and more out until we can't see the picture at all or the color in this case so yeah that's pretty much a great way of looking at it and that's pretty much it for l linear gradients let's talk about actually making diagonal gradients now so we know that we can have two right we can also have two top for example if you wanted to startop from the start from the bottom just like that and you can see now it goes up but what if we wanted to make it diagonal so let's say if we wanted to finish in the bottom right corner what you would do is just type it out like this to bottom right now if we refresh the page you can see that it slowly goes down and Fades out just at the bottom right so there we go that's that's pretty much it for positioning but there's actually another way to do this and it's through angles so if you don't already know how to use angles then you can pretty much skip the step because it's quite hard to get the use of it but once you learn how to actually work with angles and you know how to uh you know move them around things like that it becomes very easy to work with them so let's say you wanted them to go in a very specific Direction so for example you wanted it to end somewhere here now obviously you can't use words for positioning because they only work at certain places such as the corners so if you wanted to do this you're G to have to go ahead and use angles so first thing I'm going to do is go ahead and erase this part because uh we're not using positioning and then we're going to go ahead and type our angle so the first thing I'm going to do is Define the place that I want it to end so let's say this time I wanted it to end on the left here so what I'm going to do is go ahead and say minus 90 because remember what's Happening Here is we want to to just flip completely around so let's say this is our starting angle it's zero and we go all the way down minus 90 so if you don't already know 90 is kind of a quarter turn and what's going to happen is from here we can type D or degrees and this is going to set the angle that we want it at so let's go ahead and refresh the page you can see that now it goes from right to left now this is a pretty bad example considering we can just do this normally by typing to left but why don't we go ahead and choose something a little bit more specific so I'm going to go 146° so just remember that pointing upwards is kind of the starting position and then we turn 90° and then just a little bit over halfway and I think that's not a very good example so I'm going to go with 160 now you can see once I refresh the page that it ends sort of around the corner but not exactly on and if I actually go ahead and add something like maybe uh 25 something like that go ahead and refresh you can see that they are ending in different places it's a lot more specific now it's not very obvious with this kind of fading color but what's Happening Here is we can directly control where we want our gradient to end so that's one way of using linear gradients now let's go ahead and talk about the next type of gradient which are radial gradients so first of all I'm just going to erase this whole thing here cuz I don't really need it now radi gradients don't work in the same way that linear ones do instead of having a specified Direction so for example you want to go from right to left or from top to bottom instead what happens is we can actually Define the percentages or proportions of each color that we want the next thing I'm going to talk about is actually this background size so one thing you need to note is that you cannot specify the cover uh background size or anything like that for these radial gradients because they just won't work so what we're going to have to do is go ahead and remove this there we go now let's go ahead and add our radial gradient so I'm going to go ahead and type radial Dash gradient just like that and now what we can do is specify a certain amount of colors so for example I'm just going to start out with red and blue now if we refresh the page you can see it starts off red and ends at blue but we can actually add more than two colors just like with our um our linear gradient there what we actually do is go ahead and type in let's for example let's just say green as an example now if we refresh the page you can see that we've added a third color now if we wanted to change the proportions so for example let's pretend that this blue is taking up too much space we don't want that much we can actually specify how much we want of each so to change the proportions what we can do is go ahead and add percentages so what I'm going to do first is go and specify what I want here now one thing to note is that these have to be in order you have to have the minimum percentage at or the smallest percentage at the start and then the largest at the finish so I'm going to go ahead and start off with something small like 20% Then I'm going to have let's say 40% blue and 55% green so now if I go ahead and refresh the page you can see that there is a lot more green and a lot less blue and red so the final thing I want to cover for radial gradients is the shape now you can actually specify the shape that you want now right now I have an ellipse or sort of oval shape but we can actually change it all we have to do is type the name of the shape now there are two values you can put here ellipse which is the default and circle I'm going to go ahead and type circle now if I go ahead and refresh you can see that this is in a much more circular shape rather than the previous oval and although it's not a perfect circle obviously our proportions are going to change what it looks like all right so that's pretty much it for gradients there's quite a lot to learn about these and there's a lot more features that you can cover um but for now I think this is great now what I'm going to do is go ahead and just create um another gradient another linear gradient right under this one uh just so you can see what it looks like so for example I'm going to go ahead and maybe let's just go for the body background for now I'm going to go ahead and actually add a linear gradient gradient here and I'm going to say um let's just say to bottom because again we want it to kind of stretch from top to bottom so now what we're going to do is start off very strong so we're going to have our main rgba color or RG oh whoops our main color here so I'm going to copy this so this is going to be a fully um fully visible color starting from the top and then we're going to end with a much less visible color so there you go now let's go ahead and refresh the page and you can see that maybe there's a little bit of an error there oh yep forgot to spell it there we go now we can go ahead and refresh and you can see it's still not working still bunch of errors here probably uh yep forgot the forgot the parenthesis there just make sure that you're doing this right because sometimes you can make some uh silly errors so for example if you look here we were actually we're missing a bracket so now if we go ahead and refresh there we go uh it's a lot better now so we start off with a nice uh fully visible color and we end off with a less visible color all right so there we go that's pretty much it for gradients you can go ahead and download this file uh from the project you can go ahead and look at how everything works here mess around with it see what you can do because um there is a lot to gradients and although they're not uh used every day they're still very useful tools and they can really help you out in your web development careers all right let's move on so in this video we are going to be talking about some of the different types of units in CSS so so far we've been working with some basic coloring techniques we've learned about selectors and then different properties and then we've learned about some of these different values but we haven't actually learned what all of these different things mean this this PX this percentage and we don't actually know how they work so what I'm going to be doing today is talking about some of the different types of units and how you can identify which one to use so first thing I want to talk about is the difference between the two types of units which are absolute units and relative units so firstly we have to talk about some of the units we've already been using for example pixels now pixels is a little bit special I'll explain you I'll explain it to you in just a second but pretty much the commonly used um absolute units are things like centimet millimeters and inches which are absolute they it's not dependent on anything else if you set it as 1 in it's going to be 1 in long no matter if you're doing it on a phone or an ultra wide TV so that's what absolute units are they aren't affected by anything around them the second group are relative units and these are a little bit different relative units are usually dependent on something so for example our percentage unit here is dependent on the parent elements well unit so for example if this service image here where is it here has a width of 70% then that means that the parent element of this service image or this service image right here which in this case is our body takes 70% of its width of its total width so the whole way through of the body is 100% And 70% is going to be somewhere around here because that's what we set it as now notice that when I start resizing this you can see that it still takes up 70% and obviously um right now it doesn't work CU I haven't refreshed the page but you can see no matter how small I make it it's only going to take up 70% of the total body width so this is really good for something like a responsive design because what happens is when you're using absolute units in a responsive design let's say you set this width as 200 pixels on a phone it's going to appear very large whereas on an ultrawide TV it's going to appear too small so using something like percentages would be very useful because then you could resize your window here however you like it and still have that look that you want so that's pretty much it for percentages but there's also a lot of different um relative values that we can use and I'm going to go through all of these in just a second but the first thing I want to talk about is this special unit which is pixels now pixels is a little bit different now although it is considered an absolute unit it is actually relatively scaled based on uh what device you're on so if you don't already know your screen right now that you're watching this video on is made up of a bunch of little tiny pixels now there's this concept in Computing it's called DPI it's pretty much used to calculate the resolution of your screen and depending on the number of pixels you have the resolution is going to change so on low DPI uh tablets or things like that anything that has a very low uh resolution so for example if you're on YouTube and you change your resolution to 480p what's going to happen is then the video is going to sort of adjust how many pixels are in that video now I'm not going to get too deep into how pixels are changed and things like that but pretty much what happens is on high resolution devices these pixels aren't going to appear the same as on low resolution devices because obviously this is taking up only 400 pixels of height and if you have an ultra high display a very high definition TV 400 pixels is only going to be about half of what it is here so what actually happens in this is on these high DPI displays each pixel in in this unit is actually taking up multiple pixels relative to the resolution of the display so for example on a TV every pixel according to this height would actually take up something like four pixels so this is to give it that absolute illusion now although it is in theory or at its core relative when you're when you're actually using it it is an absolute value so that's just one thing you need to keep in mind now don't worry too much about pixel you know redefinitions things like that we're not focusing on that for now we're just focusing on how we can use different values for different things so let's go ahead and cover some of the different units that we can use for absolute uh units so the easiest way to do this is through uh changing the size of the text now again we're going to cover this much later um in this section so don't worry about that too much so the first one we can use is centimeters so I can say the font size is 2 cm now if I if I refresh the page you can see that it is a lot bigger remember if you actually took a ruler and measured the font size you would get 2 cm there's also many more such as millimeters and inches and pretty much everything in between so you can see that's also a lot smaller so we have our standard pixels here but there's actually a few more that we can use now they're not very they're not used that commonly so I'm not really going to go over them that much um but there is a there there are some other units that you can use instead of pixels that kind of Follow That same formula so there is something called PT which are points and it's a little bit bigger than a pixel so if I go ahead and refresh that you can see that that actually gets a little bit taller let go ahead and change that back to pixels you can see that does get quite a little bit taller and there's also PC again it's a it's quite similar to um PX and PT but in this case a PC is a lot bigger so you can see how much bigger it actually is actually one PC is 12 points so that's just shows you how much bigger it is so there we go that's just a little bit of some of the other absolute values now let's cover relative values so the first the first one that we actually already covered was uh percent so we already looked at you know our percent symbol over here which pretty much takes up again a certain size or whatever value of its parent element but there's actually many more that I want to cover the first one I'm going to look at is em so pretty much what if what I do here is it's going to represent the size relative to the current standard font size so let's just pretend that we know that this font size is value let's just call it f what's going to happen is if we set the body font size to 2 em you're going to double everything or double it based on F which is our font size so if I set 2 em here just like that and go ahead and refresh the page you can see that all of the text is double the standard font size so again this is completely relative to the standard font size so I'm actually going to go ahead and erase this here and start using style tags instead I feel like it's just going to be a lot easier to you know move around an easy easily move that around so now we've covered percent and EM so those are the two um main uh types of relative units but there's actually two more that I want to cover which is view width and view height so in web design and in development in general there's this thing called the viewport which is pretty much the dimensions of whatever you're viewing it on so in this case our viewport would be the body's width and then the body's height so VW and VH View view width and view height actually allow you to um work with um work with this viewport in a very easy way so one VW or VH is equal to 1% of the total body width or body height so remember this isn't based on the parent element this is based on the total viewport this could be the HTML document the body tag it depends on what you're viewing it on so for example if I go ahead and change the width here to 70 VW this is pretty much equivalent to 70 * 1% of the total viewport and obviously if I go ahead and refresh the page uh you can see it gets just a little bit bigger because uh there's actually a the viewport itself is bigger than the body tag which is the parent element now we'll talk about that later in the course CU it's quite Advanced um but what you can see here is that right here it doesn't actually affect it because the body is almost completely equivalent to the viewport but for example if we wanted to set the font size of one of these TDS um to 70% would be which would which would be 70% of this T row it would actually look completely different from 70 VW which is 70% of the total viewport so that's just one thing I want to keep in mind you can also set more than 100% it doesn't have to be completely uh set in stone so if I actually wanted to say VH so 400 * 1% of the view height what would happen here is that this image would become four times the total height of the viewport so that's just also one thing to keep in mind so I'm going to go ahead and change this back to pixels and we'll just keep that width the same because it doesn't really make that much of an impact okay so there we go those are some of the different units in uh CSS I've actually a attached a little reference sheet that you can use you can refer to um uh to this to this lecture you can go ahead click on it uh and if you want to revise any of these you can but just a fair warning you're not really going to be using um a lot of these units the main ones you're going to use are most likely pixels and percent but for some cases you're going to want to use some other units so although absolute units are still useful in some cases so for example if you want a very specific um Dimensions or viewport on your screen so for example if you only want users to access something on the phone then or a very specific phone then you can go ahead and use pixels because it's going to look the same no matter what phone people use because it's all going to be the same the only problem is is when people start using different devices using absolute values are going to look very different based on what device you're using and that's why you should kind of stick to using these um these uh relative units instead of using things like pixels centimeters and millimeters so things like em percent view width and view height would be very very useful because then you can scale it based on um whatever device you want so for example it's going to look the same or at least this width whether you're using it on a phone or a desktop computer because again it takes up 70% of the width no matter what it is so that's just some of the basics about some of these units now like I said you don't need to know these by heart you can just go ahead and uh keep them at the back of your head and once we start using them and start using them in our you know fonts layout things like that we'll actually start using these units a lot more and they will make a lot more sense so this this is just a quick introduction to these units and why we should use them and you're not supposed to be going ahead and you know completely mastering every single one um by now all right let's move on so the next few videos are going to be focused on font and text manipulation so we're going to be working with actually changing how this text looks first thing I want to talk about is there's actually two parts to this section text manipulation and font manipulation and although they sound like the same thing they're actually very different so the first part in this video we're going to be covering text manipulation now there's not that much to look at but pretty much the difference between the two is that text manipulation is looking at things that you can change no matter the font so for example something like sizing would not apply because the size is going to be based obviously on the font itself so basically things like underlining or um capitalization are going to be completely regardless of the font you can change them no matter what they do but things like Bolding and um uh things like size Bolding things like that they are completely dependent on the font because again the font decides how it how the font itself is going to look so it decides the size the Bolding and just the overall style so the first part in this video we're going to be covering text manipulation and in next few videos we're going to be looking at actual um font manipulations so things like external fonts which is probably the most exciting part of this course and things like weight and Bolding all right let's get started so the first two things I want to cover are um text decoration and text transform so these are properties that are going to be relating to the style of the text now I know I just said that fonts and mostly styling is dependent on the font but in this case these um these properties don't actually rely on the font at all so let's get started so the first thing I'm going to talk about is text decoration so although it sounds like you can do a bunch of cool things with this the only real thing that you can do is change the lining of the text so we're going to go ahead and work with this anchor tag here so I'm going to go ahead and add a CL oh there's already a class there actually we can just go ahead and select it so I'm going to go do link like that and now what I can actually do is change the lining of this right here so by default anchor tags have a text decoration of underline but there's actually three more properties that we can use so the the property to use it is called text- decoration it's pretty obvious now the first one I'm going to look at is none so this completely removes the line from our links they're completely gone you don't have them anymore the next one which is the one by default is underline like that so that's our normal um link then you have line through which is line Dash through and it's pretty obvious what that does just puts a line straight through and then of course there's the overline which is the line on the top so there we go now we have a line on the top now although you won't see the uh the two that we just showed line through and overline very commonly it is very common to um see underline and text decoration none um applied because sometimes and I'm sure you've seen this in web sites all over the place you can hover over links and they maybe change color uh again we'll be learning how how to do that in this course but you know they might change color and do all sorts of things but you usually don't see them with an underline so that's where this property comes into play so I'm just going to change this back to underline just to make things a little interesting next thing I'm going to do is go ahead and cover the next property which in this case is text transform so you can see that we have a bunch of text here and let's say uh maybe we're working at a freelancer and our client wants us to capitalize all of our text how are we going to do that now obviously we're not going to go through and capitalize every single individual word that's going to basically be suicide although it is possible it could take a lot of time so the easiest way to do it is using the text transform property so I'm just going to go ahead and do this on the whole body for now the property to do this is text- transform pretty easy to memorize or learn these because they don't really require any weird memorization tactics so now what you can do is go ahead and add our uh value so there are three different values that you can use for this uppercase lowercase and capitalize so because we want to capitalize everything we can go ahead and type capitalize now if we refresh the page you can see every single word is capitalized without us having having to actually change the text you can also go ahead and use the the other two which are lowercase and uppercase um and that will obviously put everything in uppercase for you but now you're starting to see a little bit about why these are text manipulation and not font manipulation again it doesn't matter what font you're using whether you're using some weird symbol font or Times New Roman you can always use these to capitalize it no matter what the font is on top of that you can also move around these lines it's not dependent on the font at all so that's just a little bit about our textt manipulation properties so the next feature I want to cover is text align so this is a little bit different from the other two that we've covered because it's not really focused on The Styling or decoration of our text instead it's going to be focused on the justification or alignment of it so if you've ever used any text editor for example U Microsoft Word or Google Docs anything like that you'll know that you can justify your text and align it to your site so there are four main ones that are included in CSS left right center and justify so I'm going to Breeze through the quick the first three ones because it's quite uh easy to use but then the last one I'm going to talk about a little bit uh in more detail so in order to achieve this you can go ahead and add the text align property and here you I'm just going to go Center as an example and you can see that now everything is aligned so the list items are a little bit weird they don't actually um move the decoration to the center um when you align it to the center but other than that all of the text is now aligned to the center so now let's talk about justify now we're not going to go through left and right because we already know that but what justify actually does I'm just going to show you here is pretty much it takes all of the text and it kind of matches it so it's all fit in the same width if you if it makes sense so although it might not fit everything the same length what happens is all of this text is now stretched out as far as possible so although you might not be able to see a direct difference let's just look at this paragraph here I'm going to just end off this uh property without changing it you can see that without the uh justify alignment all of these are different so what actually what the justify actually does is it sets all of the lines to the same length so I'm going to go ahead and add that justify back so can see this used a lot in research papers and um you know academic papers essays things like that uh this justification is used a lot and although it's not very it's not really used very commonly it's still a very good feature if you have uh big bodies of text if you're trying to you know make everything look very streamlined all right there we go so those are the four or sorry three different types of text manipulation um uh properties that you can use and along with their resp respective value so I encourage you to go ahead and try this out on your own you can do a lot of things with these three values alone you can really change how the page looks all right let's move on so in this video we are going to be talking about the other half of overall text manipulation and in this case we're going to be looking at different font properties so in this video we're going to be looking at three font size font weight and and font style so first thing I want to look at is font size so right now we have our pretty standard um text here right so I'm just actually going to go ahead and erase our text transform from our previous video so now we have our text here and what I want to do is change the size of this the only problem is I want to use a responsive design so what I'm going to do is go ahead and first use our font size property and then I'm going to go ahead and say let's just say uh 1.25 M so what what happens here is make this 25% more uh than the standard font size now you can see it's a little bit bigger but it's not as big as doing something like 2 em so there we go now that we've done that we can also go ahead and actually use pixel values if we wanted to 40 pixels for example the only problem is this is going to set everything consistently so you can see all of the sizes are the same it doesn't matter if they're a header or um well it does actually matter but because in the CSS defined code um all of these headers actually have 2 em but if we actually removed all of these they would be the same so using something like 2 em would be great because what actually happens is now uh everything stays consistent and it's also a relative unit so that's always good because it stays responsive so there we go that's pretty much it for font size I'm going to go ahead and actually change this to 1.5 em I think that's good so there we go that's the first one now let's go ahead and talk about font weight so this is a little bit more complicated so pretty much what font weight decides is the Bolding of a text or a font so the values for this can range from zero which is nothing all the way to well pretty much Infinity the only problem is most fonts only support up to 800 or 900 because again for each value there's a different Bolding stage so most fonts are only going to up to maybe 800 or 900 some of them can go even higher but in theory you can make these values as big as you want the only problem is it's not really going to show any change if you make them very big so there we go that's pretty much it for font weight let's go ahead and start adding it to our website so let's say I wanted to make our title a little bit bolded so I'm going to go ahead and say font-weight and now I'm going to go ahead and specify a value let's go ahead and start with zero and see what happens you can see that nothing actually happens but pretty much like I said before most fonts only support certain values so for example um 100 would be a very specific kind of Bolding 200 300 400 and all the way up to as much as the font supports now usually the convention for this is you're supposed to go up in hundreds from 100 that's kind of like the minimum supported font size so if I go ahead and set 100 here you can see it's very thin and if I go ahead and set it as 800 which is usually the highest that you should go realistically this is kind of the standard for H1s so there you go you can set it to something like 600 which isn't very commonly seen uh like I said fonts only support certain uh bolded if that makes sense but you can go ahead and play around with this and like I said depending on the font it's going to change what text actually looks like so there we go that's pretty much it for font weight I'm going to go ahead and actually just set this to 400 which is the standard um um font right there so 400 is the normal it's like normal Bolding no Bolding and don't make it very thin so that's kind of what it's the normal range so there we go that's it for font weight now let's go ahead and look at font style so just like font size is for size and font weight is for Bolding font style is for italicizing so I'm going to go ahead and actually italicize a small piece of text here so let's just go ahead into this and I'm going to take this first first part and actually just cut it out I'm going to create a span tag so a span tag is sort of an if you don't know it's an inline uh they it's an inline container tag which allows you to contain uh certain pieces of text without you know disrupting the flow or moving them onto their own line so now I'm going to give it a class I'm just going to say um italics I guess that would work so then I'm going to go ahead and use the class selector italics open the this up now we're going to go ahead and start working on adding our italicizing so what you can do for this is called font style and although most of the selectors these days are quite easy to remember italics and font style don't usually go hand in hand so it might be a little hard to remember this one so there's three different values that you can use for this normal which is pretty much the same as setting the font weight is 400 doesn't do anything or it actually well changes it back to its normal state then you have italic which is to italicize it and then you have oblique which is um a little bit more italicized so let's go ahead and just add the basic one going to go ahead and type italic here now if we refresh the page you can see that where it is there we go it's right there um is a little bit more um the the font the font is a little bit little bit more italicized so there we go now let's go ahead and set it as the other value which is oblique and you might notice a little bit of a difference it's so not immediately obvious uh but it's actually just a little bit more italicized so um like I said it's not very noticeable but that's just one thing to keep in mind so there we go I'm just going to change this back to italic and that's pretty much it for the three different font manipulation uh techniques now although I didn't cover font family which is what I'm going to cover in the next video uh these are the pretty much three basic ones that you can use to work with text without changing the font itself so you can go ahead and um work with changing the font weight you know make it bolded italicized you can also change the size so you can really do a lot with this but font family is a little bit more complicated which is why I want to leave it for its own video all right let's move on so in this video we are going to be talking about the last uh property related to text and fonts and that is font family so I'm going to talk a little bit about that but in the next few videos we're going to be actually looking at how to include external fonts which is going to be a very uh fun activity and that's going to really change the way that we use CSS but before we do that we need to learn about font families so first of all if you don't already know a font family is basically a collection of fonts that have similar features so there are three main font families that you can use serif Sans serif and monospace so first of all let's talk about serif fonts so seraphon have these small lines on the end of some letters and pretty much every or a lot of the academic papers and uh well print it out documents use these serif fonts so right now for example our font is a SF because you can see these tiny lines at the end of some of the letters so these are used very commonly on like I said papers essays you know journals anything that's pretty much printed out or given to you physically is usually going to use a SF font but unfortunately it makes it very hard to read on the computer so there's actually a another group of fonts that which is the sand serif group and if you don't know sand serif groups are basically the fonts that don't have those lines if it's not obvious enough uh from the name so right now this is a ser font a sanser font on the other hand would not have those lines it would look a lot cleaner and easier to read now a lot of the websites that you use today so for example pretty much all the news websites um if you've used WordPress before that also uses um sah uh sorry Sans Sarah fonts unless you specify otherwise uh Google Facebook pretty much every website that you see commonly today the big ones usually always use sansera fonts because they're much easier to read so so those are the two main groups but like I said there's also a third one which is called monospace so monospace is pretty much where all of the characters have the same width so they all take up kind of the same um space each character whereas something like this you can see that each letter kind of takes a different amount of space um depending on what the letter is so some pretty good examples of a seraphon are Times New Roman which is probably the most famous and Georgia some pretty good examples of sansera fonts are aeriel and calibri if you've ever used um uh Google Docs before calibri is a pretty common font and then a pretty good example of uh a monos based font is um corer new if you know what that is uh corer no is one of the monospace fonts but like I said there's many more out there that you can use um like I said uh it all depends on what family you pick and what what kind of uh result you're trying to achieve out of your font are you trying to make it readable are you making a paper or a journal uh it all depends on what you want out of your um well document so in this case because we're doing or creating a website we're going to want to use sansera fonts so in order to specify a font family or in specific a font you're going to have to use the font family um property so if you go ahead and set font family now this isn't just for setting the family this is also for setting the specific font and I'll talk about that in just a second so I'm going to go ahead and say Sans siif so this is the font family that I want and watch what happens to our page now you can see that it looks completely different we can actually read everything and it looks a lot cleaner so that's why I like sandera fonts and that's why most developers much prefer sandera fonts over Sera fonts you can see that it just looks a lot easier on the eyes it's just much easier to read and use but like I said you can you don't just have to specify the family you can actually specify the specific font and you can actually do this using the comma separator so first of all I'm going to set Times New Roman as the main font and then I'm going to insert a comma and then serif so I'll explain this right now first of all if a font has more than one word or it's separated by spaces you're going to need to use quotation marks to contain it now the second thing is this comma here pretty much what's going to happen is if Times New Roman is available use that as the font but if it isn't available then fall back to the standard serif font so you can actually include more than just Times New Roman on here so you can include three or even four layers sometimes um but for now we're just going to use two and we'll talk about including very specific fonts um in the next two videos where we're going to be including these external fonts so there we go pretty much what this is saying is set the font family in this case the font as Times New Roman but if Times New Roman isn't available maybe you know if you're using an external font maybe the server has crashed or maybe it's just not available on the browser then use the serif family just the general serif font so if I actually go ahead and remove this you're not going to see much of a difference between Times New Roman and serif um like I said you can see there's not much of a change because they're pretty much the same thing but it is there if you use a different um Sarah font such as Georgia there will be some sort of a difference between the two you can see that now although they aren't exactly um they aren't exactly the same you can see they both contain those lines things like that so that's why um you commonly use more than more than one font just in case maybe if you're using a different browser maybe someone's using a very old browser like Internet Explorer 6 or 7 then you can use some of the older fonts so there you go that's pretty much it for font families it's really not that hard to grasp and once you really get into it um it becomes a very very useful tool so I'm going to go ahead and actually just change this but like I was saying it becomes a very useful tool once you get into the later parts of web development because changing the font can completely change the look of your site so that's just one thing you want to keep in mind all right let's move on so in this video we are going to be looking at actually using some external fonts we've looked at fonts and text and we know how to manipulate it now but we don't actually know the one crucial piece which is using external fonts so your computer will most likely come pre-loaded with a bunch of different fonts if you use things like Microsoft Word or um you know maybe Google Docs things like that they all come with pre-loaded fonts and although Google Docs technically isn't on your computer we'll just leave it in there for now so obviously we have a lot of fonts to choose from in CSS but first of all how do we actually know which fonts to use and what if we don't have the font I mean you know maybe it doesn't come with our computer how are we supposed to get it well the first thing that I would recommend doing is going and getting fonts from the internet now if you don't already know this most people would think that you know the fonts that you have are set for life you can't download anymore well fonts are actually a huge growing industry and there are so many different fonts out there that you can use and you can even make your own so there's obviously a lot more fonts to choose them than what's provided on your computer so in this video I'm going to be teaching you how to go and find your own font and then in the next video we're going to be including it into our project so the First Source I'm going to recommend here which is actually the only source um but it's called Uh Google font it was put together by Google and it's a collection of 915 font families so you can see see we have a bunch of different fonts here and when I say font families just think font default because um you know when you think of it as a family you would think there's multiple fonts but there's actually only one and then you can change the Bolding and other uh settings we'll go over that a little bit later in this video so you can head over to this I've linked it in uh the lecture resources or you can just uh copy the link here from the video and it's going to take you to this site so there's actually 9115 families on this site which is a lot to choose from now you can see that there are even you know things in different languages there's all sorts of different styles maybe from different um General families families so this could be from you know a s serif family this could be from a serif family so you can see um that there are so many different choices that you can use and depending on what type of website you want to create you can actually choose the fonts that you want so I'm going to actually go through now and start picking some fonts so what I would recommend is just go through and look at the many different fonts you have here so for example I think this is a very nice font so what I'm going to do is just go ahead and click this plus icon and what it's going to do here it says there's one family selected right if you open it up you can see that our font has been selected now we're going to work on embedding this in the next video but for now I just want to leave it like this so you can see that we can actually go ahead and customize our font now so so for example if I wanted to choose some different Bolding so for example you can see this is a font weight of 100 and this is a font weight of 900 so you can select as many as you want but you can see that we actually have a load time here so the reason that this is given is because we are including this from the internet obviously so if you try to pull too many resources from the Internet or from you know um outside of your local machine it's going to really slow down the load time of your website because obviously it's not in instantaneous you need to send over requests and there's a whole lot that goes behind so what I would recommend is not trying to select every single one of these weights only select the ones that you think you're going to need so for example for now I'm just going to select the regular and the Bold now I don't want any italic so I'm just going to exclude this and you can see that our load time is fast so we're okay so you can see that apart from our Bings we can actually select um some of some of the stuff from here so instead of having to go into our selection we can actually just go and straight select it uh from here we can also change the size if we wanted to um and then we can click the plus icon so you can uh go ahead and play around with those when you include your own fonts um but for now I think I'm just going to go with the default size and just add a bolded so now I'm going to go ahead and actually include a second font because it's pretty uh common in web development and web design to include at least two fonts you know maybe one for headings and one for text so I'm going to go ahead and find something that kind of fits in with the lato font that we have here I'm going to just select it uh back to the default size so I'm going to try and find something that kind of matches this um it doesn't have to be obviously exactly the same it can just be something that um you know kind of fits in with the theme or makes the website look good kind of complement the other uh font so I think this is good it's actually s serif so I don't I'm not going to use it you can see those lines there I'm looking for a sanserif font um let me see so I think this is a pretty good font so what I'm going to do is go ahead and add this as well just click on that plus icon and now we can actually customize both fonts so I'm going to go ahead and add that bold 700 as well you can see that the load time is moderate now because of course we're including more than one font but we don't need to worry about that too much so there we go we have that set up now so there we go that's pretty much it for Google font and you know using all these different fonts now you can go ahead and customize it choose whatever makes your website look good or maybe uh whatever you want but just make sure that you choose a font that really works with your website well and make sure you don't include too many different weights uh so you can keep the load time uh within Bay so in the next video we're actually going to go through and start importing this into our website and I'm going to teach you some really good fail safe tricks in case Google fonts fails all right let's move on so in the previous video we started looking at what type of fonts we can use in our website now we're going to go through and actually include them so first of all let's just look at our website for now we have all of our fonts set up and we have a bunch of text manipulation uh ready to go and working on the website but now what I'm going to do is actually go through and start using these external fonts so we're not going to use this uh aerial font anymore so I'm going to go ahead and erase that and also for the font weight I'm also going to go ahead and erase that because uh there's some issues with it that I'll talk about in just a second so there we go now that we've removed all of the uh properties will be directly affected by the font let's go ahead and work on um setting up our website with these external fonts so the first thing you'll notice here is that when you go over to your Google fonts it gives you this link tag to include so this link tag is pretty much going to um link to Google fonts and pull them from their servers so this is what you're going to need to copy right here so you're just going to copy this and up in your uh HTML document you're going to paste your link tag above your stylesheet now make sure you post it above this above your style sheet because you want to have the fonts ready so that when your stylesheet comes along and the compiler is reading it all of the fonts are already there and ready to go so there we go now that everything's linked and set up why don't we go ahead and see what happened on our website well obviously we we remove the font but you can see that nothing actually happens so by doing this we don't actually set up our website to use our fonts we're just bringing them into our website now what we need to do is go through in CSS and start utilizing these fonts so that we can see the changes on the website so on top of that this there's this little text here that allows you to um you know you can just copy the style straight but I'm going to go ahead and do it manually so first of all let's go ahead and add our body font so I'm going to go ahead and say font family and now we're going to go through and select our font so we included two fonts lato and sarabun what we're going to go through is go ahead and see which one we want to use so I'm going to use lato for the body text so right here in quotes I'm going to go ahead say lato just like that and now let's go ahead and refresh the page and you can see how much of a difference that makes Now using this new font everything has changed it makes the website look completely different from what it used to be so there we go we've included that but let's go ahead and include our second font here so I'm going to go through and actually add it on the title and the subtitle and remember going back to specificity the class and ID selectors are going to be more specific than the body selectors so our font family is going to override the body font family so let's go ahead and add that uh right there just like that and let's go ahead and add it to our subtitle as well all right now let's go ahead and see what happens so you can see that although the difference is quite subtle it still change the font of the titles and subtitles and you can see why using two fonts on your website makes it look a whole a lot better so there we go we've added all of our fonts but the only problem is we know that what what's happening beside behind the scenes is that this link tag is going to Google servers pulling these fonts and then including them in our website but what if it fails what if there's no internet connection or what if it's down maybe the Google font servers themselves are down this is where we need to use the trick we learned in the font families video in which we can actually add a backup font to this and if we actually go on Google fonts right here you can see they already do this now because the Sans Sera family is included by default what's going to happen is normally it's going to use the font specified but if there's some problem and we can't get these fonts maybe Google servers are down it's going to go over to the next font and we know that Sans serif is included on every single machine which means that it's going to work fine so let's go ahead and do that now if you remember all we have to do is go ahead and add a comma and then put the name of the family which in this case is Sans SF we're going to do this for the other two as well and this one as well now of course this is going to change based on the font that you use and I'm actually going to show you this right here let's remove both of these and add a sarif font so this would be considered a serif font let's go ahead and add that now if we go ahead and look at the family well it's actually not um not serif it's a different family called cursive but you can see just to prove that point that the family is going to depend on uh the font itself so we explained a little bit about font families in that video and obviously all of them have different characteristics so of course like I said it depends completely on the uh type of font so if I go ahead and see the family there you can see that that's San serif but if we use something like um this font it's going to be a different font family so that's just one thing you need to keep in mind is that you want to make sure your fallback font is both included on every machine and it's kind of similar to our font here now if I actually go ahead and erase this now let's go ahead and see obviously there is a visual difference but it still has that same style there's no lines it's clean to read it's just straightforward so that's one thing you want to make sure of all right so that's pretty much it for font next we're going to move on to layout which is really going to change the way that this website looks all right let's move on so the next few videos videos are going to be focused on CSS layout so we're pretty much done at least for now with coloring and text and all of the cool features we can do with them but now we're going to actually go through and start using our uh skills with different well new skills that we can actually put together and create really really nice awesome websites so layout is probably one of the most powerful tools that you can use in CSS and can completely change the way your website looks but before we move on we need need to learn a little bit of theory behind how CSS works so there's this concept in CSS called The Box model and it's pretty much the um what happens is every single element is surrounded by an invisible box now this box has different layers which we're going to explain in the next video but all of these boxes are touching together they're kind of connected what you can do is actually change the shapes of these boxes and change the shapes of the layers in order to move things around and position them on a page in a way that makes the website look much better now obviously this isn't the only way of shaping your website there are so many different methods flexbox and grid and we're all going to cover them later in this course but for now this is the basic kind of layout features that you need to use so that you can move on and start using some of the most complex features so this is kind of what that invisible box looks like so at the center is where your content is is now I'm going to explain this in just a second all of these little terms padding border and margin um but you can see that the center contains the content but then the other three layers are something completely unknown and we're going to be going through and explaining what those do but for now just understand that you have the content on the center but then there's this invisible box around it that is split up into three layers so let's go over the first one which is the padding now the padding represents the space between the content and the border of the content now you can see up in this model we have this padding section and then we have a border so pretty much what the Border does is it separates the content and the padding from the margin but pretty much let's just assume for now that the margin kind of moveed things around and it doesn't actually move the content around what padding is supposed to do is it's basically supposed to give more room around the content itself it's not really meant to move the content around so it'll Mak more sense when I go over margin if you don't understand it now but let's move on to the next layer the border is pretty much the divide or the separation line between the content the padding and the margin so borders can be styled and changed and by default they're invisible but we can actually go through and change how they look which we're going to be going through uh in a couple videos time so the Border doesn't actually create any spacing or anything itself unless you want it to but pretty much what the border is supposed to be is kind of that division line so the last uh layer that I want to talk about is the margin so just like how the padding is supposed to give spacing or well padding around the content the margin is supposed to move the content around and give it space between other elements so while the padding is used for internal space the margin is used for external space and is made so that to give room and spacing around external elements so for example if you have an image and then some text under it you can use the margin of the text to kind of push it down from the image whereas the padding would just kind of make internal space now although it's not the best example as we go on and start using it you'll get this a lot more if you don't already all right so that's pretty much it for the Box model it's a very very simple concept but it can be really used to a very high potential and it does contain a lot of features that we're going to be going over in the next few videos all right let's move on so now what we're going to be doing is going through and starting to use the first layer of the Box model which in this case is the content itself so although not technically a layer of this invisible box it's still a big part of layout and the shaping of things on your document because the way you shape and well style your content is going to completely change how the rest of the Box models affected your padding and your margin so what we're going to be doing is going through and using some of these and if you actually remember right here we have already used the two main features of shaping content height and width so we've already pretty much learn these properties but I'm going to go through and do a couple more examples just so you can get the shape of things and how to use them so first thing I want to talk about is the units that you should use so usually on a page the best way to do this is using pixels or some absolute unit for height but then for width use a relative unit such as VW or percentage now we do this because although height is very very hard to determine responsively at least they kind of stay the same as you move down so the height is going to kind of stay consistent the only problem is the width completely changes everything so the width of devices is very different from place to place so a phone would be quite a small width whereas you know a full screen TV would be a very wide width so that's why you use relative units for width is that you can keep it consistent while still you can keep both of the values consistent while still using different units so let's go through and actually use it on this image here so the first thing I want to do is go ahead and give this a class or actually I'm going to give it an ID so I'm going to give it an ID of about us image just like that all right now let's go ahead and select it here I'm going to go hash about us image remember the ID selector and now what we're going to do is go through and start adding our um uh our properties so the first thing I'm going to add is the height so I'm just going to make this a cool 300 pixels just to see how it is and most of this is very experimental pcil you're not supposed to go through and change everything and um you know well well you are but you're not supposed to go through and set everything to a constant value so you're supposed to you know play around see what works and then when you're familiar with it and once you know what you want you can leave it as it is so there we go we set the height now obviously this with the width of the image itself is always relative but I'm going to go ahead and change it anyways I'm going to go ahead and say the width is 60 V W now you could always say 60% it would pretty much be the same thing but I'm going to go ahead and use VW here just to um actually you know what we have VW here already so I'm going to go ahead and add percentage there we go now of course you could use whichever uh unit you want they're going to mean pretty much the same thing um obviously apart from the different viewports and things like that but they're pretty much the same for our purposes so you can use whichever one you want so there we go we've changed it and now if we go ahead and resize you can actually go ahead and see that the width is going to be pretty much the same while the height stays constant so one thing I want to talk about is a really cool feature that we can use in Chrome you can see that's a little bit weird there but we'll worry about it we'll worry about that later um it's a really cool feature that allows you to actually change the viewport of your Chrome window without actually having to use different devices so if you go ahead and click on that icon just click anywhere on the page click on inspect and it's going to bring you here to this page and you can actually select any device you want from the drop- down menu and see how it would look on that on that device so I can pretty much do whatever I want here uh if I wanted to select an iPad even an iPad Pro um you can actually see what it would look like on the device so this is a really useful feature that you can use to make sure that your website works everywhere instead of having to go and upload it somewhere and then view it on all those different devices you can also set select this responsive design which I really like because then you can change the size however you want uh just like that you can see and um it will work perfectly so yeah that's great and you know if maybe if you don't want to use these uh devices from this drop down menu you can actually go through and change the size here which is really useful so I'm going to go ahead and close this off now and you can see that our website is looking good obviously our image here looks quite weird but like I said it's all about experimentation you're supposed to go through and see what works um and obviously you don't have to use an absolute value it's not set in stone but you're supposed to go through and see what works for you and from there you can set the values so this is just kind of a little experimental uh thing to teach you how to use these features uh but like I said this website's all about or this course is all about practicing and getting experience with this so you can go through uh check out the project files and play around with these values yourself really get a feel for how this works so that's pretty much it for Content resizing it's very easy there's only two properties you need to know and pretty much the rest of the Box model is also quite easy um but it's good that we learn it step by step so that we Master every stage and by the end of it we'll really know how to master the layout and really manipulate our page in the best possible way all right let's move on so in this video we are going to be focusing on one of the parts of the Box model which are borders so in the previous video I talked a little bit about some of the different layers of the Box model and how they work but in this video we're actually going to be focusing on manipulating one of those layers which is the border and although it's not really the main part of the whole box model idea it's still a pretty useful skill to know and it really helps you understand how the Box model comes together all right let's get started so for the next few videos we're mainly going to be working with the images simply because they're just easier to uh manipulate and set the layout uh over something working with something like uh text or titles things like that so we're going to be working with our circular gradient here that we created in a previous video as well as this Custom Image so let's get started so now there are many different styles that you can use to style the borders but we're going to be using the main shorthand the ows us to style everything all at once so the the property is similar to our background property here all you need to type is border whoops we need to do on the image so I'm going to go here on our uh radial gradient and I'm going to start adding our border so let's go ahead and get started so what I'm going to do is just type border and remember every single element has a box around it has this box model or invisible box so it doesn't matter what you choose you can always style these elements it might look weird on some elements like this text here but you can do it with everything so there are three main parts to this um element here first is going to be the size so we'll talk about that in a second then you're going to have the style which is probably the main part and then finally you're going to have the color so now that we have this we can go ahead and start talking about this so size is pretty similar to you know changing the size of an image for example yeah it can be in pixels or percent or em it does doesn't matter I'm going to go with pixels for now now the usual range for a border is somewhere between you know 1 and 3 or four pixels but you can go much thicker than that depending on what you need so I'm going to go ahead and show you what two pixels looks like so remember separate it by a space now we're going to go over the style so there are many different styles that you can use on your borders but there's three main ones that we're going to talk about or sorry four main ones we're going to talk about dotted dashed solid and double now normally you're going to see solid that's pretty much the most common one I'll show you the other uh versions of this in just a second so I'm going to go ahead and type solid and now comes the color so as we learned before before this can be a named color this can be an RGB code or even a hex code I'm going to go ahead and just choose um a darkish blue I think that will fit in really well with the page and in fact you know what let's not let's not use the Color Picker let's just use our RGB color skills and take the color of the background which is here so we're going to take those four and now I'm going to go back to our image here and paste it in oh whoops and now what I'm going to do is just darken everything and if you remember the darker it gets the higher all of oh sorry the lower all of these values get so I'm just going to lower them all by uh about 50 so here I'm just going to go 154 now again this doesn't have to be exact or anything you can you can put really whatever you want here but I'm just trying to darken um everything I'm just going to make this 200 so let's go ahead and refresh the page and see how our border looks now let's scroll down so there's the problem we actually forgot a um semicolon here on the end of the background so that's one thing you need to keep in mind there we go now it's working and you can see and I did actually change the color there just to test it out and you can see there we go we have our background so obviously it's pretty obvious here with our bright red color there but what I'm actually going to do is go ahead and just play around with some of these and see if we can change the features so first thing I'm going to do is go ahead and change the height so I'm going to go ahead and set it as 10 pixels for example and you can see that oh not the height sorry the size you can see that that gets a lot thicker so you can change it depending on how you want your border to look like so now let's go ahead and change the style so let's go ahead and try out some of these other styles so first I'm going to try dotted so you can see now we have a dotted border now let's go ahead and try dashed and you're kind of getting the idea of how this works let's see doubled I think or double actually I think that's uh probably the best other than solid yeah you can see that that looks um pretty nice here uh we have that double border it's pretty useful in styling but it's not really used very commonly so the last thing I want to go ahead and change is the color so um I'm going to go ahead and just take a color from the Color Picker I don't really feel like going through the whole RGB process again let's go ahead and just take this color it's quite dark um let's go ahead and refresh our page and see what it looks like and now you can see the color has changed so you can see that borders are not only useful for just changing the style of this of an image or a box or any box for in that for that matter um they're also useful for showing how the Box model works so I'm going to go ahead and change this back to solid so you can get a better view so if you remember in the last video we talked about the different layers of the Box model and we remembered that the padding was used to separate um or create spacing between the content and the Border in this case you can see that the border and the content are directly touching which means there is pretty much no uh padding at all because there's no spacing between them on top of that you can see that this border is also touching also elements on the page or other elements on the page so like for example this table there's a little bit of space between the header and the image but that's due to other uh margins we'll talk about that when we get uh later in this section and so you can see that this doesn't have much margin either so you can start to see here how this whole box model comes together and how you can see um what's going on so yeah that's a pretty useful way to kind of look at the Box Box model and see how everything comes together in the next few videos we're going to be looking at the other layers of the Box model and then we're going to bring it all together and start really changing up this the way this website looks all right let's move on so in this video we're going to be moving on to the next two main layers of our Box model and in this video we're going to be talking about margin and padding so you kind of already have an idea of what these two are we've talked about them in the first video we've talked about what they do but we haven't actually talked about how to manipulate them so in this video what I'm going to be do what I'm going to be doing is going through and working with these two properties to actually manipulate um our layout and that's when the real power of the Box model shows so let's go ahead and get started the first thing I want to do is go ahead and choose the right um thing to manipulate and in this case the best thing to to work with is an image right here because it's very easy to see and um see the changes uh when you when you uh do these margin and padding changes and it's also very uh useful to have a border here which I added uh so you can really see the difference between margin and padding and to see which one uh is responsible for what so let's get started now similar to the rest of the properties the naming is pretty straightforward in this case we're going to go ahead and use the shorthand margin property but I'm also going to be showing you a few other ways ways um which I didn't show you with the Border because these are a little bit easier and they're kind of hard to understand if you just use the shorthand property so I'm going to be just building it from the ground up so the first property I'm going to look at is of course the shorthand margin property and how to add margin and padding to all sides at the same time so in case you didn't know this is called Top This is called bottom this is left and this is right but I'm sure you know that especially with uh working with multiple backgrounds things like that and pretty much the same throughout all of CSS so let's get started so the first thing I'm going to do is go ahead and find my image and then I'm going to choose which Box model layer I want to manipulate I'm going to go ahead and work with um padding first because it's a little bit easier to understand then we're going to go and work with margin so we're just going to type out padding Here and Now what we're going to do is go and start adding uh whatever we want so remember if you add just one value it's going to add it the same value to all sides so I'm going to say for example right now 20 pixels now if I go ahead and refresh the page you can see that there is 20 pixels of space in uh between all sides of our image so you can see 20 pixels on the left on the right on the top and on the bottom so you can see what's going on here with our padding if we increase this value for example it's going to it's going to almost double and now we have 40 pixels on each side so that's just a little bit of information about padding you can see the spacing between the content and the border is getting a lot bigger now let's go ahead and change this to margin and see what happens so I'm actually just going to completely remove this and refresh the page so now let's go ahead and add our 40 pixel margin we'll just save for now so you can really see the difference so now you can see that the content or the space between the content and the border is still the same there's no spacing at all but you can you see that everything around it has kind of been pushed down and remember it's adding margin to all sides there's 40 pixels between the border and the left side of the page the border and the top side the border on the right and the border and the bottom so you can see that margin is moving the image itself around the page whereas the padding is just adding space inside the image so now let's go ahead and talk about some of the more specific properties in case you wanted to maybe style specific sides so I'm going to go head and change this back to padding just like this and now we can go ahead and see our differences a lot more clear so what you can actually do is add a dash and then the name of the side to it to actually specify which side you want the padding to be added to so let's just say I wanted to add it to the right side now if I refresh the page you can see that all of this still stays the same but on the right side there is 40 pixels of padding you can do this with as many as you want so you can go padding top for example and I want 100 pixels on the top and let's just say on the bottom and remember always with the dash I just want only five pixels now if we go ahead and refresh the page you can see it looks quite unbalanced but we have 100 pixels on the top we have 40 pixels on the right and five on the bottom now obviously this gets a little bit tedious after a while after you keep you know doing padding right top bottom left top right top right bottom left and it gets quite um irritating after a while so what I'm going to do is show you cool Shand that you can use to style them all at the same time so we're going to go back to using our shorthand property and now we're going to go ahead and add four values separated by spaces but it's a little bit confusing at first okay so just bear with me now what I'm going to do is for the left I don't want anything so oh whoops I need to start from the start from the top so on the top I want 100 pixels like that on the right I want 40 pixels on the left I don't want anything so I'm just going to say zero now you could say zero pixels but in this case we don't want anything at all so it doesn't really matter which one you choose I just prefer to put a zero there um and then of course on the right or sorry on the bottom we want five pixels now let's go ahead and refresh and see what happens it stays pretty much oh whoops must have uh confused confused something over there so 100 on the top we have 40 on the right and on the bottom yeah so there's the problem on the bottom we want five pixels and on the left we want zero so you can see it gets quite confusing uh after some time so you can see that now it's exactly the same so here's what you have to kind of uh remember the first one is the top the second is the right then the bottom and left so an easy way to remember this is by looking at the pieces of the Border if you draw a diagonal line straight in half you style the top and the right first and then the bottom and the left so just keep that in mind and you'll be fine so if you if you ever forget you can always go and check online there's a lot of references talking about um these different values here and I'm actually just going to go ahead and change it to margin for a second so you can see what's going on now you can see if I change the margin actually it stays in the same position but instead of adding internal space it's adding external space so that's just uh one thing to keep in mind but like I said if you want to go ahead and review this you can always find some resources online there's a lot going on there now let's talk about shortening this into actually only two sections because let's just say on the top of and bottom you want a certain margin but then on the left and right you want another this is a pretty common thing that you you're going to want to do in CSS so I'm going to show you how to do that all you have to do is go ahead and shorten it to two values I'm actually going to go ahead yeah I'll go with margin the first two values are going to be for the top and bottom at the same time so I'm going to go ahead and add 80 pixels padding oh whoops 80 pixels there we go and now for our oh whoops now for our second value it's going to be our left and right values at the same time so I'm going to go ahead and add 40 pixels doesn't matter the order um because this is always going to be for the top and bottom this is always going to be for the left and right so just make sure that they are um equal so let's go ahead and refresh and now you can see the left and right have kind of stay a little bit shorter whereas the top and bottom are very the margin is very big as you can see here the top and bottom is double the left and right so that's a nice short hand that you can use to um style two different or well two different sides so for example now if you split if you can just take this part and this part style this style them at the same time and then you take the left and right and do the same thing with them so I know that's a lot to take in and it's a lot of different ways but just remember um if you ever get confused you can either use the internet or just use margin Dash and then the position um but other than that all you need to know for now is the concept you just need to know how margin and padding work and how you can actually manipulate them what they do I mean what do you do when you say the margin left is 10 pixels so just make sure that you know that you know when you add a certain space to a position you're basically changing the spacing between something thing and another thing based on what whichever layer you chose so for example if you chose padding you're going to be changing the spacing between the content and the border so that's pretty much it for margin and padding now we're going to get a lot more experience with this as we go through the course and style more things but for now just make sure you know how to use these shorthand properties you know how to use all those different shortcuts now you don't need to memorize them you just need to know kind of how they work um obviously memorizing them is good but if you if you forget them don't worry too much about that just make sure you know how to use these properly um and that's pretty much it let's move on so this is a pretty important video because we're talking about a concept that is going to be used constantly in the next few sections and it's a very very important part of CSS and kind of defines the way that you look at documents so so the two properties that we're going to be looking at are float which is the less important one and display which is the very important property that we need to learn so let's cover float first because it's an easier uh thing to approach but before we start for both of these elements you need to understand the concept of inline and Block Level elements so first of all elements have a certain display type which we're going to be well manipulating in the next property this display type pretty much defines the behavior of the um elements so there are two main display types block and inline so pretty much if we look at our HTML document here we go through and you can see all of these tags creating these tags create a sort of sort of display behavior for the content inside them so the Block Level element what it basically does is move moves everything onto its own section its own well block so an example of one of these elements would be um a P tag you can see that if this was an inline element it would be flowing with the rest of the things but you can see here despite the margin this is moved onto its own section it's not playing or moving after the image it's moved onto its own section and everything after it comes after well the block on the other hand an inline element is something that won't really move anything onto its own section it's going to keep it um keep it intact it's not going to move it or change it in any way it's just going to leave it how it naturally occurs on the page so an example a very good example of one of these would be a span tag because what a span tag pretty much does is it's used to contain some piece of content in an inline style so for example this italics class would be a perfect um representation of an inline tag what we're trying to do is italicize some text and if the span was a block level element this text here this italicized text would be moved onto its own section so everything preceding it would come before it and then there would be a new line with the text and then after it would come the rest of the text so you can see there that the inline and Block Level tags really make a difference depending on what you want to use it for so what we're going to be doing in this video is going through and learning how to change the display type of these different elements but first let's talk about float so again these tags come with a natural display type and how are how they are placed on the page is how they naturally occur but there's actually a way to change the way that they look and this is done using float so if you just listen to the name there what the element pretty much does is change how the element well floats on the page so I'll go ahead and do uh do some examples here for example let's just take this um gradient here this div so I'm going to go and look for it the service image I'm going to say set the float and I'm going to say it floats to the right and watch what happens you can see that now what happens is pretty much this just flows over to the right side of the page and it also changes all the content after it so you can see that this content here has now been pushed up so this kind of shows how a little bit of how float works and this doesn't just have to be with images we can do it with text as well so if I go through and choose something uh like this element over here this um link here so I'm going to go ahead on this link and I'm going to say it floats to the right now let's go ahead and refresh the page and you can see that that kind of flows over to the right and everything before it is now kind of pushed up where it was so you can think of this as kind of a kind of a Tetris puzzle block when you're moving something over everything is going to be pushed up or moved around as well so to fit the page so you can kind of think of it in that way now obviously um once you start getting some really a lot of experience with float you can kind of predict where everything is going to move on the page but floats are really useful for laying out documents especially if you want to kind of position images next to text or move things around in a way that looks more like a uh proper document so I'm going to remove that float and I'm just going to do it with our um image over here with with our image our about us image so I'm going to go ahead and say it float over to the right see that so now you can see that it floats over to the right and now everything before it has kind of been pushed up onto this section here so there we go now it's working and everything is looking great now let's look at the next property which is display so display is pretty much a way of well changing the display property of an element that it naturally comes with so of course we know things like a div or a paragraph tag come as a block level element whereas something like a span or a Bolding tag would come as an inline element so what we're going to be doing is going through and changing these properties now I didn't actually cover the properties of float which I'm going to go over in just a second um but what I'm going to talk about is the different properties of display so of course you have the standard inline and block which is pretty obvious but then you have um a few others so the the one that I'm going to be covering here is none now so what the display nun property does is pretty much