HTML & CSS Crash Course Tutorial #4 - CSS Basics

Key Takeaways

or rather than gang so now we've covered quite a lot of the basics of HTML but whenever we preview that stuff that we create in a web browser then at best it's looking pretty crap so what we're gonna do now is introduce CSS because CSS is going to help us style those elements on a web page so they look a bit better so now it's time to get acquainted with that and introduce it to the party so remember hTML is for structuring content on a web page and CSS is for making that content look more presentable the layout and the design and that kind of thing and to do that we use style sheets now a style sheet is essentially a full list of different CSS rules or rule sets that are used to stylize our HTML documents now they look something like this so this is a single rule or real set this is a single rule set and typically we might have 10 20 30 40 or even more of these that make up a whole style sheet now speaking of rules I'd like to first of all run through the basic terminology of CSS syntax just so you're aware of it and you know what I mean when I say something so first of all we have these things right here which are selectors now selectors are the things that we actually want to target on a web page so for example if I wanted to style div tags I'd use this selector if I wanted to target Li tags I'd use this selector now there's loads of different types of selectors they're not just text we can use things like classes and attributes to target things as well and we're going to talk about all these different types of selectors as we go through the course but I just want you to know that that's the name of these things right here the selectors the things that target the elements that we want to style then we have these curly braces which kind of look like a code block and inside there we have what's known as the declarations and the declarations is just a list of key value pairs or property and value pairs so we have a property name which could be the color and that set to red that would make the text of anything inside this div red then we have a margin property which is set to 20 pixels giving it a margin around the whole element of 20 pixels at the end of each declaration right here we have a semicolon so that's just a bit of syntax that we use to say look this is the end of this particular declaration if we skip those then the CSS won't work so we have to add those in so this all makes up a single rule right here same down here we have our selector then curly braces and inside we have our declarations only one in this case and that is font weight and we're setting it to bold now inside each selector or each rule rather we can have as many different declarations as we want to stylize it however we want to and we're going to see all of those as we go forward so I just wanted to throw this bit of terminology out there so that when I talk about them in the future you know exactly what I'm going on about so the three or four takeaway points are really that we have a style sheet which is a list of CSS rules this is what a single rule or rule set looks like this whole thing and a rule set is made up of a selector the curly braces and the declarations right here so there's a couple of different ways we can add CSS to our HTML one way is to add it directly into the HTML page inside some style tags and we'll see that way and another better way is to use external style sheets where we have a separate file just for all of the CSS rules and that is the way we're going to be focusing on we will see both ways in action but for the most part we're going to use an external separate file for our style sheets okay then so first of all as you can see I've created two HTML files right here I've got an index dot HTML and an about HTML now inside each one there's a very basic HTML template nothing new we've seen all of this before we have a title inside the head and inside the body we have an h1 a P tag right here then we have a div then we have an h2 then a P tag and then finally we have a ul with some allies inside it so very simple nothing complex so far and I've created this content so we don't have to keep repeating ourselves writing tags out and we can just focus for now on CSS so we have the index page right here but we also have another page about the HTML and in there we have an h1 and just a PTAC so then what I'd like to do is show you a couple of different ways we can add CSS to a page so the first way we can do it is by adding a style tag up here in the head or anywhere else in the document I tend to do it up here in the head so we'd say style because we're going to do a style sheet right now and inside these tags that's where we create these different rules so for example I could use a selector h1 then we do opening and closing curly braces and then inside that is where we can write our different declarations so for example if I wanted to color this orange then I would use the color property and set it to orange okay now if I wanted to do another rule after that can just go to the next line and I'll say P as the selector to target the paragraph tags and that's going to grab all the paragraph tags and style them the same way and then I can say the color for that one is going to be slate gray okay so these are just different keywords that we can use inside oops CSS let me just undo that I don't want to complicate anything so these are keywords that we can use inside CSS they come bundled into the language if you like so that if we want to use those colors we can do easily by just using these keywords so now hopefully the H ones should be orange and both of the P tags should be slaked gray so if I save this now and preview over here then it looks something like this the h1 is orange and these are slate gray and that's how simple CSS is it's just a series of different rules like this where we use selectors and declarations so this way of adding styles to a page that's absolutely fine but what if I wanted to add the same styles to the about page well then I guess I could just grab these or rather grab the whole thing including the style tags copy them and I could paste them over here inside the head of this page as well because they have to be included on every page that we want to use those thousand so if I save it now and then go to forward slash about over here instead of index.html so about dot HTML and go to that page then we can see the styles on this page as well so that's good however if we have five or six pages then we want all these styles on each page we'd have to go through each individual page and add those styles in and then if we ever want to change those styles that's six different places that we have to go in and change it so it's not always the best idea to add styles in the HTML file itself what I prefer to do is instead create an external stylesheet and then put all of the different CSS rules inside the stylesheet then just link to that from each page that uses them so then if we want to update them in the future all we have to do is update them in one place and it's going to update in all the pages that link to that external file and that's much easier so I'm going to delete this over here and I'm going to go over here and delete this as well and instead I'm going to create now a new file over here called styles dot CSS so you can call your CSS file whatever you want typically a lot of people call them styles dot CSS or styles - something dot CSS it must have this dot CSS extension but what you call it is up to you so the same rules applying here we just write out our CSS so I could now say again h1 and then say color is gonna be orange and then down here we'll do a P tag and we'll say the color is going to be slate gray now save it now if I save both of these files now at the minute we're not going to see the CSS take effect in any of those pages and that's because we've not linked to that CSS file from those pages so what we need to do is link inside the head of each of the pages that wants to use those rules to that style sheet so the way we do that is by using a link tag so type out link press tab and we see we have this rel attribute stands for relation and we're saying this is a style sheet that's how it's related to this document and the href we've seen this attribute before this expects a path to the resource that we want to use so we want to use this thing right here Styles dot CSS it's going to be a relative paths to that so if it was in a CSS folder for example we'd say CSS forward slash styles but it's not it's in the same directory so we can say styles dot CSS and now we linked up to that stylesheet from this file so if I save it and come over here we can see now the CSS is taking effect awesome so I need to add this now to about dot HTML and come over here add it to the head and then save this and then if we go to about dot HTML again and refresh then we can see the CSS takes effect here as well so now if we want to update the CSS all we need to do is update it in one place and because we're linked to it in both of these different pages it's going to take effects in both of those pages so we don't have to update it twice now in each page just once in this external stylesheet and that's why I prefer and many developers prefer to use external style sheets so then now we know the basics of CSS we know what a selector is kind of it's used to select something we know we have these curly braces and then we have these different declarations inside let's now talk about some of the basic different declarations or property names that we can use so we've seen color that color eise's the text but we can also use other things so I'm now going to use one called background - color and I'm going to set this to a color as well that is going to be slate gray so I'll grab that right there and save it and if we check this out now we can see the background of this thing is slate gray now just before I go on there are absolutely tons of different properties in CSS we've seen - soft hard we've seen color and background color but there's hundreds now no one on earth is expected to remember all of these different CSS properties I forget them quite a lot the more you use certain CSS properties the point you're going to remember them but some of them you don't use all of the time and you forget that that's natural so all you need to do is just google it okay you're not expected to remember all of these things just kind of understand them so the next thing I'm going to show you is one called fonts - size and this is going to be set equal to 20 pixels so in CSS we can work with different units of measurements this here is px which means pixels so that basically means that the font size is going to be 20 pixels but you can also use other things like MS REMS or something else and I'm not going to dive into those just yet we might talk about them briefly later on but I don't want to confuse things just yet I just want to stick to pixels which is probably the simplest to grasp so if I save that and come over here we can see that this is now a bit smaller before it was larger now we've set it to 20 pixels and it's a bit smaller if we set it to something like 100 pixels it's going to be much larger huge in fact so we have that flexibility we can choose what the size of the font is going to be okay let's do some more I'm going to say text - decoration is going to be line - through so this here is going to determine the text decoration now there's a few different values we can use for each property for example we could use different colors for the color property or background color property we could use different values for the font size and likewise we could use different values even though these are key words for things like text decoration this is one of those values if I save it you're going to see now that it has this line through the h1 so that's good if you're doing some kind of list if you like and certain ones have to be crossed off you could use this style on up another value would be underline like so and typically you see a lot of links with underlined styles and we can also set this to nan to take away any of the text decoration for example anchor tags are automatically given an underlying property if we want to take that away we could set the text decoration to none I'm going to set it as underline for now just to keep that there and the next thing I'm going to do is set the font family so the font family is things like Arial or Verdana so let me set the font family now of this h1 by saying font-family and i'm gonna set it equal to ariel so save that and you're going to notice now we have an Arial font family right here this is Times New Roman by default now it's important when you're using fonts and font families on the web that you use a web safe fonts and that basically means that everyone is going to be able to see and that fonts so you can read more about web safe fonts over here on w3schools I'll leave this link down below and that explains this a little more in detail and it shows you which fonts are web safe because if you were to use some kind of exotic font that you have installed on your computer you can't guarantee that other people are going to have that font installed on their computer so it won't show correctly by using a web safe fonts we can guarantee that what you see is what that user is going to see so that's important but anyway the font family property right there is how we set the family of font that we use okay so one more style for the h1 I'm gonna say text - align like so and I'm gonna set this to Center this can also be set to left and right so let me preview this first of all you see this goes in the center now but if I set this to be right it's gonna go over there to the right and if I set this to the left then it should go all the way over to the left as well like so we'll keep it at center for now I think it looks good in the middle okay so now we'll move on to the next selector this thing right here the next rule and that's for P tags so already we have this color but let's also now say text - align again we're using that property and we'll set it to right this time so if I save it we can see now all of this paragraph tag is over on the right and in fact if we just go to the home page because what on about at the minute then we're going to see for both paragraph tags it does this so when we use a selector like this it selects all the elements that match in that selector in this case or paragraph tags okay so next we'll go on and say line - height and what this does is set the vertical spacing between different lines in text so what I'm going to do now is set this equal to about 30 pixels which is quite a lot but I want to demonstrate this and now we can see the space between these lines is more spread out it's 30 pixels between each line so that's nice we can control that we can also control the letter spacing which is the space between each individual letter now I don't use this often unless I just add maybe one pixel or something like that just to make it seem less squashed if I'm using a narrow font but we can't control it I'll set it to 3 pixels that is going to have an effect you can see already it's looking very different so you can imagine if we set this to something like 30 pixels this is just going to look weird and crazy yep okay that just looks like a word search so let's not do that well let's set it back to 3 pixels which is still a bit over the top but anyway I wanted to show you the property now we could also do something really cool with text and that is split it up into columns so right now it's in one kind of big wide column but you know like in newspapers or broadsheets you see that text is split up into three or four narrow columns you can do the same thing in CSS so I could say something like column - counts and that is me saying how many columns I want this to be split into and I could say three for example save that and automatically it's gonna create these three columns forest which is quite nice so for a lot of designs maybe if you're trying to mimic some kind of newspaper design then you could do something like this that's nice and we can also even say column - Gap and set this to some pixel amount like 60 pixels and that is going to make this gap even bigger so let me save it I'm preview and we can see now this gap is bigger so we can control the column gap width and also how many columns for example I could set this back to 2 and it would go to two columns like that okay so what else can we do well to do something else let's move on now to a different element will say this URL right here so I'm going to say you well and inside this I'm going to say border - width now what this does is settles a border wycked on this element so I'm going to say four pixels right so that's a border all the way around the element of four pixels now if I save this what do you think will happen well if we take a look we can see nothing actually happens we don't see that border right there and that's because borders a made up of different parts and we need at least two of those parts for it to show properly so I need to also say border - style to set the style of the border which are set to solid to begin with and that means a solid line and now we see this border of four pixels in width going all around this ul now the UL is going all the way across to the end of the page because this is a block level element and we're going to talk more about block level elements later on but anyway now we have that border let's add on some more border properties you can also set the color of a border by saying border - color and I'm going to set it equal to crimson like so save it and now we can see it's this reddish color okay let's move on I'm now going to say in fact what I'll do is show you the shorthand for all this so these are three different properties right let's set the border but what we can do instead of writing all of these three properties is we can write one property with all three values in one so it's a bit quicker now to do that I'm going to have to either delete these or comment them out so it's a good time to show your comments in CSS so like we did comments in HTML to comment out certain sections of code or to make a comment in the code itself we can do a similar thing in CSS so if I want to comment out a chunk of code I can press ctrl + forward slash on Windows and that's going to comment this out and notice a comment is basically made up of a forward slash and an Asterix at the start and then an Asterix and a forward slash at the end and that comments out everything in between it so anyway now we've commented that out it's not going to be used by the browser so we can do this shot hunt so I'll say border and then what we do is we say 4 pixels the width first then solid which is the style and then the color which is crimson so we can add all of those three values into this one property and it does all of this for us so if I save it it's going to look no diff exactly the same okay now what if you just wanted to do the border in one of these sections for example the border left or the border top or just the bottom well we can do that if I just now comment out this as well control forward slash then I'm gonna say below that border - bottom and then it's going to take exactly these three values a width and then the style and then the color like so so now if I save it we just see the border bottom and I could do something similar for the left I could say border - left is gonna be something similar so for if that will make it bigger eight pixels will do a different border style now so we've had solid before let's do dashed now and also crimson so if I save this and preview we can see now we get a dashed border of eight pixels now we can also do a different style we could do something like dotted as well so let's save that in preview and now we can see the border bottom is dotted so I just want to show you a few more basic styles and for that we're going to now target these li tanks so let's create a new rule new selector Ally and inside what we'll do is say first of all list - style - type now what is this property to do with well is to do with these things right here the dots okay so by default these things are known as discs and that is the default value disc so if I type that then nothing is actually going to change they're still a discs but we can change these we could change them to square like that and we see squares or if we want to remove them completely we could say none like this and we don't get any of those now now a lot of the time if I'm doing some kind of navigation and I'm using Li tags I use this property to get rid of those little discs because I don't want them to show okay I'm going to show you one more different property and that is text - shadow now text - shadow takes in three values first of all we need to set an offset to the right of the shadow from the actual text so I'm going to set that to be two pixels then in the vertical direction so two pixels down again and then finally at the color of the shadow which I'm going to set to be light gray there so if I save this and preview we can see this little shadow now all around if i zoom in these things right here which is quite nice it gives it a little bit of depth okay it looks a bit messy but we'll refine this kind of thing later on so so far we've seen a few basic styles and like I said you're not expected to remember all of these just know what they're doing and as you use more and more of them as you go on they're just going to become ingrained into your mind now when we've been using colors so far we've been using these keywords right here and there's quite a lot of different keywords in CSS that we can use but they're still quite limited what if we want to use a color which isn't covered by a keyword a very specific color well for that we can use something else called hex codes okay now so far we've seen how to colorize our different HTML elements the background color and the text color using all of these different keywords like red or white or slate grey or something like that and there's many different color keywords that we can use in CSS this is just a few but there's probably over a hundred in total now sometimes that's great but sometimes we want to be more specific with the color that we use and for this instead of using one of these keywords we could use what's known as a hex code instead now they look something like this they start with a hash and then it's followed by six digits now they could be numbers from 0 to 9 or letters A to F and together these combinations of numbers and letters they results in a particular color now the hex code is made up of three different channels we have a red channel which is the first two numbers we have a green Channel the middle two and a blue channel as well now when we combine the different digits from each channel that results in an overall color now for each Channel 0 is represent the darkest shade and F represents the brightest or most vivid shade for example if we had all zeros would be black and if we had all FS that would be the lightest color and that would be white now if we have something like four four and then four zeros that would be a deep or red maroon color because the four four is in the red Channel and we have zeros elsewhere so we don't get any other color just a bit of red and it would be done but if we had EE and the rest zeros then we get a bright more vivid red like this now he would never be expected to work out a color from scratch and create the hex for it that's just madness but you can use tools like Photoshop or online color Pickers like Adobe color or even vs code itself to help you find the hex codes that you want okay then so I'm back in vs code and what I'm going to do is actually just comment out this text shadow that we did before so control forward slash and then down here I'm going to do exactly the same text - shadow and it's going to be two pixels horizontal two pixels vertical and now I'm going to use a hex code so remember they start in a hash and then it's a series of digits on number six in total now I'm going to use a nine e 9 e 9 and I've not plucked up from thin air I used a color picker to get this color but if I save it now this is a very very very light gray so it looks a bit more natural if we zoom in here you can just about see that shadow and that looks a bit better now I said that vs code comes with a color picker to help you get these hex codes so what you could do is just hover over one of these colors and then this little box shows up so if we go to the box you can click this at the top because this is currently set to RGB until you see a hex code and then what you can do is just move this around like this you can also move this thing up and down to get different colors and when you're happy with the color it's going to update it over here for you so now we have this green color so that's a nice little addition to v/s code it really helps us to grab the colors that we want so if I save this now we should see this green border over in the browser which we do so then HTML files are made up of loads of different tags or elements and some of those elements are known as inline elements and some are known as block level elements now the difference between these two types is how they're displayed in a browser and how much room they take upon the page so inline elements also have some CSS limitations with certain properties and we'll see that as well later on but essentially inline elements line up next to each other in the browser and they don't take up any more room than their content needs so a few examples of inline elements include an image tag an anchor tag span strong yen and a few more now if you were to place these one after another inside an HTML file then they'll sit next to each other on the page until they run out of room a bit like this now block level elements on the other hand they take up the whole width of the page and they do not sit side-by-side they always start on a new line so some examples of block level elements include a div a block quotes paragraph tag to form h1 h2 h3 etc and many more a lot of html5 semantic tags which we're going to look at later in the course as well are also block level elements so if we were to write a series of block level elements inside an HTML file and output it to a browser it would look something like this a P tag and a div tag so each one takes up the full width of the page and also each one starts on a new line now the logic behind having these two different types of elements in line and block level makes sense imagine that we've got a paragraph tag right here P and closing P this is a block level element and it's going to take up the whole page so the text is going to go all the way across and then go to a new line all the way across et cetera now inside that we have an anchor tag so this thing right here would be a link now this is an inline element so it wouldn't start on a new line and it would only take up the space needed for this content and that makes sense because we don't want this tag to start on a new line that would just look weird but if we were to add another paragraph down here you would want that to start on a new line because that is a block level element it's a new section of content and it goes to the next line that makes perfect sense so you typically see inline elements like this nested inside block level elements but you shouldn't nest block level elements inside inline ones so you want to put a paragraph tag inside an anchor tag for example but you can nest block level elements inside another block level element as well so let's see some of these inline and block level elements in action in the code so in back inside our index file over here what I'm going to do is actually delete all of this content because I want to just work with some different content now and I'm just going to paste this little bit of HTML inside it so very simple we have an h2 with a title inline elements ironically this is not an inline element its health and h2 but these ones below it are we have a span tag we have an e/m tag an anchor tag and then another span tag so if I was to save this now in preview it would look something like this now back over in the CSS I'm going to also delete all of this we don't need this anymore and what I'm gonna do is start working with these difference in line and also block level elements so at the minute these are all just inline elements and if we take a look at those in the browser we can see that because they all sit next to each other on the page they don't go to a new line and they only take up the room that they actually need for that content so if we inspect these and hover over them we can see exactly how much room each one is taken up they sit next to each other now if I was to instead do a load of block level elements which I'm also just going to grab and paste in below these so now we have an h2 which itself is a block level element and then we have a div another day of an h3 paragraph tag ul and then two allies now all of these are block level elements so remember we said that these all take up the full width and each one starts on a new line so if I save that then come over here we can see that the first div tag then another div tag then the h3 then a paragraph then two li tanks at the bottom these are all starting on a new line and that is what block level elements do and if I hover over these you can see that blue box goes the full width of the page and that is the element itself take it up to full width even though the content is only this small of this small the elements themselves take up the full width and by the way the Aria that you see there that is known as margin we'll take a look at that shortly but anyway all of these things now take up the full width and if we just select one of these and bring this up from the bottom and we'll talk more about this later on what I'm gonna do is show you this thing right here this looks like a CSS rule we've not done it ourselves this is a user agent stylesheet meaning that the browser has automatically applied this CSS rule for us this is a default browser style so it's displaying a div as block but it also displays the h3 as block and the paragraph as block so the browser is making these block level elements if we go to something up here like a span then we don't see anything because the default value is just to display inline so these inline and block level elements are actually controlled via this display property which we just saw right here display block it's a CSS property so if we wanted to make an inline element a block level element we could do that we could just go to our CSS and I'm gonna grab a span tag and inside I'm gonna say display a block and now if I save this and go back to the browser then we're going to see that this span time now takes up the whole width of the page if I hover over that span takes up the whole width and this spun down here now takes up the whole width these are still in line but these the sponge and now block level elements because of this CSS property that we've set now we can do the same thing for block level elements we can set the style to be inline so I could come down here and say div and then display us inline instead save that and now they become inline elements so now these two divs right here they sit next to each other and if we hover over those we can see they only take up the room that the content needs so these two types of display also have an effect on what CSS properties we can apply to these different elements particularly when it comes to margin so imagine we have some kind of block level element like this div tag right here with this five pixel border all the way around now in CSS there's a property called margin which allows us to specify the margin or space around the outside of the element border so it looks something like this and there's also a property called padding which allows us to control the internal space within an element that looks something like this now when we add margin and padding to a block level element all the way around this all works as expected there's no problems but now imagine we have an inline element like a span tag if we try to add margin and padding all the way around to that the margin won't be added to the top and the bottom it will be added to the left or right perfectly but not the top and bottom the padding however is fine so it's important to remember that block level elements can have margin all the way around the element but inline elements can only have margin to the left and the right of the element the padding however can be added all the way around in both cases all rather than so now let's have a little play around with these two different properties padding and margin on inline elements and block level elements we'll start with the div over here because we know that everything should work fine on a block level element the first thing I'll do is give this a border so we can see the border of this element two pixels solid and crimson and then I'll give this a margin that's the property name of 20 pixels and this means apply a margin 20 pixels all the way around we could also do something like margin left or margin top or bottom or right but if you just say margin on its own that applies it all the way around will do the same thing for padding and say 20 pixels for that so let's save this and preview over here and now we can see these div tags they both have that margin all the way around the orange they have the padding which is the green and the blue is the element itself so that's all working as expect it and over this div we see exactly the same now let's try the same thing with an inline element for example the span tags so we have at the minute a span tag right here and also right here so let's try now applying some padding and margin to them so if I come up here and say okay I want this to have a margin of 20 pixels all the way around let's see what this I'm gonna save that and come over here and notice now that we get this span tag right here which has a margin to the left and right but it doesn't have to match it at the top and bottom and that's remember because this is an inline element and they cannot have a margin top and bottom so it ignores that and just gives it to the left and right and the same goes for this span tag over here so now let me try apply padding to this so padding is going to be 20 pixels as well all the way around and check this out okay so if we make this a little bigger then this span sack has padding all the way around that works absolutely fine and so does this one but watch this if I go smaller like this then we can see that this span tag right here kind of sits on top of the other one and that's because the padding kind of collapses in a vertical manner on top of these two things now this only happens with inline elements so you need to watch out for that the padding kind of goes on top of each other so even the padding in the vertical direction doesn't always behave as you would think it would inside inline elements now there is also one other thing I'd like to show you and that is margin collapse when it comes to block level elements so if we look at this div right here the top one we see it has a margin bottom of 20 pixels but I also said give the bottom one here a margin top of 20 pixels now really they should be 40 pixels apart because we have 20 on the bottom and 20 on the top of this one but in actual fact there are only 20 pixels apart so it's not actually adding up the margin of the bottom of this and the top of this instead it just squashes them together and applies the 20 pixel margin and that is margin collapse if this had a margin bottom of 60 and this of 20 then the margin between them would just be 60 which is the largest of the two so that is margin and padding in a nutshell we will be using both of these properties quite a lot later especially when we come to make that website near the end actually there is one more thing I'm going to show you and that is how to get the best of both worlds when it comes to block level elements and inline elements and that is a third display type called inline block and what that does is essentially mix the two different types so for example if I was to set the span to display as inline-block then what it would do is get the best of both worlds it would still sit next to all the elements in the page like inline elements do they won't go to a new line and take up the full width but it will enable us to treat it like a block level element in terms of margin and padding so we can add a margin top we can add margin bottom and padding bottom and top are also going to work better as well so if I save this and preview then come over here we can see now these span tags they are looking a bit better so I can hover over this and I can see the margin and the padding all the way around and the same down here as well so this works a bit better so I'll often use inline block if I want elements to sit next to each other in the page like this but also if I want them to have top and bottom margin and padding to work correctly as well okay then so we're nearly there but there's one more thing I want to talk about in this video before you all go and have a lie down and rest your minds because you probably need it and that is default browser Styles so what are they well when we create HTML and we preview that in a browser then the browser Styles certain elements in a particular way without always having to do anything to them for example all of the headings are quite big and they're bold and anchor tacks they all are underlined and they're either blue or purple depending on whether we visited that website or not and also paragraph tags they have margin applied to them etc so these are all known as default browser styles they're just Styles applied to these different elements so basically we can tell what they are in a page and they're kind of there for accessibility if someone doesn't have CSS or we don't add any CSS we can still tell what these different things are based on these default browser styles so we can actually see these default styles inside the console over here or rather inside the developer tools so if I go for example to a h2 this right here this says user agent stylesheet and a user agent is basically the browser is the browser stylesheet that's applying these default styles over here so we can of course override these default styles with our own rules so if I wanted to take this display property of an h2 and set it to inline I could do that if I wanted to and it would override this rule so I just wanted to make you aware of some of these default browser styles before we go on into the next section because then we're going to start talking about inheritance the Cascade selectors etc and this is a little important to understand to understand the rest of the course as well okay that my friends so we have covered quite a lot in this video so much so that I would not be surprised if I fried your brain but do not worry if you don't remember everything we've looked at so far as I keep saying this is not a memory test you're not meant to remember everything but just understand what we're doing as we're going forward and the more we use the different selectors the more we'll use the different HTML tags the more it's going to sink into your brain and become second nature I promise you that so in this video we've learned what CSS is and how to add it to a web page we've done that either in the head in style tags or in an external stylesheet and then we've linked to that from the HTML page we've also seen some basic selectors to choose different elements on the page like a PTAC or a div or an Li or an a tag and we've styled those with different declarations or properties to make them different colors different font sizes or something else we've also had a look at what hex codes are and we've seen how we can use vs codes color picker to choose hex codes for us which is really nice and we've had a little discussion about the difference between inline and block level elements and also the combined power of both of those in inline block which is one of my personal favorites we've had a little look at the two properties margin and padding and we've also seen how those behave with inline and block level elements and the differences between those two and then finally we've talked very very briefly about default browser styles so you a lot like I say but now we know the basics of CSS I want to take this one step further we're going to take a look at some different selectors that a bit more complicated than the ones we've seen so far so far we've just been selecting individual elements like P or div or Li next I want to introduce something called classes into the fold and other things as well so we'll take a look at that in the next video