Day 3 | Box Model and Pseudo classes | HTML & CSS Zero to Hero (5 Days)

thank you okay then good evening guys good evening everyone good evening showa good evening Sultan good evening Puja rachna Abdullah good evening guys good evening everyone good evening good evening how are you all how are you all good evening guys good evening everyone am I Audible confirm that guys hi Naveen hi ABC Sachin good evening guys good morning Sachin good evening Nicolas good evening guys good evening how are you all I hope I'm Audible and visible completely and my screen is also visible okay that's great can you please confirm that once good evening payal good evening SRI Devi Devi Prasad purnima always good evening everyone good evening okay that's great okay so once again guys good evening everyone and welcome to day three of this HTML CSS Essentials session okay so far we have learned a lot of things right uh on the first day we learned about what exactly htmla is how to create your first web page how to start putting content on it we understood the exact value of HTML where exactly it is used right now yesterday we focused on forms so if you understood how to create a proper form which is one of the very essential things if you're welding a web page and after that we also you know talked about a little bit about CSS so we understood what CSS is right and how to write it the basic syntax was you know simply property value format right and there are many more properties that will learn slowly and steadily and after that we saw that there are three ways by which you can apply CSS onto your elements right and we saw the first which was the inline way now today we'll go ahead and we'll discuss about the internal CSS way we'll also talk about the external CSS okay we'll understand one of the most important things in CSS that is going to be Box model which a lot of people get confused in a lot of times so we'll understand Box model and we will also try to create a very basic layout because tomorrow guys when we come back we have to go ahead and start Flex boxing and then after learning all these things will be ready on day five to create our first project that is going to be a portfolio Okay uh good evening sir about Netflix project yes yes the link will be shared by mode in uh in between at any point of time the link will be shared so be in the chat the link the GitHub link of the network this project will be shared don't worry don't worry okay and I saw Jack messaging me right I think the message is now on top so good evening everyone Good Year hello sir what is syntax for inheritance of two base classes in one child class two base classes I don't think so right that multiple inheritance is possible in C plus plus social so you have to use some kind of virtual function because multiple inheritance is not possible in C plus plus right as far as I know I think so right in Java and all that then we have interfaces by which multiple inheritance is possible but in C plus plus you don't have interfaces so multiple inheritance is not possible so normally you go for using virtual functions right anyway guys that's enough about C plus plus for today so let's go and let's start I hope that you are excited for this session so please show your excitement by liking the video everyone and also do message in the chat okay so let's go guys let's go I hope you're ready let's go don't forget to like the video everyone okay cool let's start so now guys yesterday we saw that look let's let's try to revise a little bit let's try to revise a little bit what we learned yesterday so we understood that CSS stands for cascading style sheet it's a language that we use to apply CSS on your HTML elements we saw right HTML elements are just blank elements that are created on the web page they don't have any kind of arrangement alignment styling so to give them styling to arrange them properly to align them properly to give them sizing coloring we use CSS otherwise our HTML page will just look like a newspaper but we want it to look like a proper webpage a beautiful web page that's why we have CSS I'm just you know trying to brief it if you want to know more guys if you're joining it for the first time today and if you want to know more about it I would uh you know suggest you to watch the previous two videos as well because we have discussed all that in very good manner okay now then everyone let's go so we saw that CSS syntax is very simple it's always written in property colon value format okay property colon value then semicolon right so one example is this color red other example is this height 200 pixel then other example is background color green right so something like that okay now I said that okay fine we're going to be using this way to write CSS but we actually want to apply CSS on HTML elements so we saw that derivative three ways one was the inline CSS the other was the internal CSS and the other was the external CSS we saw one of the ways yesterday which was in line CSS in which you go to the exact tag where you want to apply CSS you go to that exact tag and you use the style attribute and inside the style attribute you start writing the CSS that you want so in this case I have given color as red which will change the text color and then background color as yellow right C plus plus allows multiple inheritance I don't think so right multiple initials of classes directly is not allowed right we have to work with a way like you know work around it doesn't directly support that I think so okay no issues so let's go guys let me run this page quickly and then we can get started with our today's session so okay this was what we saw yesterday so this is one Element and here the color is red and the background color is yellow as I have applied it here okay so guys this was inline CSS now there are some disadvantages to online cases now guys please Focus From now on guys for the next 30 to 40 minutes I want your complete Focus so that you understand everything okay so this was inline CSS where you write CSS directly in the tag but now there are some disadvantages of using this inline series technique now let's try to understand what are those disadvantages now see guys right now I have two P tags in future I might have 10 20 30 40 B tags right so in future I might have many more P tags in that case what if I want to apply same CSS to all those paragraph tags so in this case what I'm trying to say is let's say I have let's say I just create few more paragraph tags here quickly so one more one more something like that and also let me adjust it it will still work but I just want to adjust it properly so that it looks good okay something like this okay nice and here also I want to adjust it properly okay so now let's say I have four paragraphs you can see that right we have four paragraphs and I want to apply the same CSS to all the four paragraphs so guys if I am using the inline technique in that case you know what I have to do I have to write the exact same CSS again and again for every tag so if I want to apply it I have to copy the CSS and I have to again write it in this P tag then only it will get applied so guys the only disadvantage of inline CSS is that the CSS cannot be reused you have to again write it for the other tag right now you have only four pre-tags but in future think what if you have 10 P tags 20 paragraph tags 100 paragraph tags in your whole website here and there and not only paragraph tag size what if H1s are there images are there there can be like if you go to a site like Amazon there are hundreds of images so are we going to write CSS again and again for those hundreds and thousands of images because in that case then I'll be coding too much I'm writing the same CSS again and again again and again if I am going to choose inline way of writing CSS because it only works for that single tag so if I wanted to apply to other tag I have to write it again and that is one very uh you know bad disadvantage of inline CSS and that's where guys the next type helps you that is internal CSS now in this case what you do is first of all let's go and let's remove the inline cases from now let's remove it so now everything back to normal I'm removing the inline CSS so once I have removed the CSS you will see that everything is back to normal okay cool all good all the P tags now don't have any kind of CSS nice now let's see how will internal CSS solve our problem and guys internal CSS is always written above the HTML elements where you want to apply CSS so let me remove these guys all these tags from here we don't need them anymore okay remember guys internal CSS should be always written above your HTML elements wherever you want to apply the CSS that's why the best option should be go in your head Tab and after your title link whatever tags you have at the end or guys anywhere in your head it's fine but I know generally I would always like to put it below title and Link you know on a separate space go here and you have to use a new tag called as tile okay now once you use style tab this area now belongs to CSS you can never write any HTML here see even if I write it's an error okay you cannot write elements here see it's not coming is that cleared everyone remember that now this area between style and slash style is the area completely for CSS inline CS can be tedious to code exactly mean exactly very that's the correct answer okay so now as you come to this area now the second now first of all there is a difficulty to understand here and the difficulty is in inline CSS I was writing CSS directly at the element that was good but now my element is somewhere else okay and I'm writing CSS somewhere else so how will the CSS know that I have to get applied on this particular element so now guys for that we have to understand one concept of something called as selector now guys a selector in CSS is nothing but a way of selecting or targeting element which you want to apply CSS on guys that's the basic definition a selector is nothing but a way of selecting either selecting or is your targeting selecting or targeting an element on which you want to apply CSS and a element can be selected so guys if you feel okay I want to apply CSS on this P element or H1 element or image element so there are various ways there are various ways of selecting or targeting element on which you want to apply CSS the first and a very simple way is you can directly use its tag name so I want to apply CSS on P tag simply go and write P that's all guys please don't put this for everyone who is new don't do this you're not writing a tag here you just want to select the tag by using its real name so just write P now when you write this p in the style area the CSS understands oh you want me to apply CSS on P tags yes and after that guys create a block okay now whatever is now it can be like this or it can be like this anything is fine I generally go with this because it looks much more you know clear now inside this block whatever CSS you write will be only applied on all the P elements in your web page for example if I go and write color great so now see what will happen so I'm saying P tag your color will be gray so now in my whole web page no matter there are hundreds thousands lacks of piece for every them now for every one of them the color will be gray see that everyone I think gray is not that much visible Let Me Show You by making it red which will look very bad by the way but again just for the demo let's go see that all the P tags are now red see this pre is not red because we have not applied system on that this link is not read because we have also not applied CSS on that we have only applied CSS on P tag and that's why that becomes red now is that cleared everyone so that's how you can do I can also go and I can write pre so for free I also want you know let's say color something like green and you'll see now that the color of that is going to be green I know which is very bad but it's fine here we go see that guys now the pre is green and P is red so guys you can just continue like this inside the style area you can just continue like this continue completely just like that for put any element and write CS for it and guys it can be n number of properties okay for all the new people for who for the people who are learning CSS for the first time just simply go ahead you can do whatever you want any property so let's say I also give free a background color background color of let's say gray something like that so you'll see see now your pre is having a background color of gray is that cleared everyone you can see right its color is green color means guys text color color always means text color and background color means the whole background color simple that's how simple it is remember that everyone okay now you'll understand more about background color once we go a little ahead in CSS don't worry it'll wait for some time now see you can also give font family to it now see if I want to change the font family of pre I can go font family and let's say I use I don't know if this property is available in Mac or not cgo UI something like this let's see if this font is available in MacBook I have not checked it but let's see and here we go see that guys the font family of P has pre has changed so it's up to us we can change it and guys the font family that I'm using here is it should be installed in your PC otherwise it won't work okay right now this font is already installed in my PC so only the fonts that are installed you can use them like this if you don't want to install a font you can also use online for or you can download a font and attach it with your project that's also possible so if we get time I'll also show you how to do that stuff don't worry okay but the main thing is guys now I can write n number of properties and that's completely fine but fine so understood now guys that problem is solved what was the problem of inline CSS the problem was we were unable to use the same series again and again here that problem is solved I wrote CSS for P tag only once I wrote CSS for P tag only once but it's getting applied on all the fonts all sorry on all the piece is asking font family font family simple just like you have in word and PowerPoint right font family so what I said is whatever font you're using here I'm using cgo UI it's working because cgo UI is installed in my computer if a font is not installed in your computer you cannot directly write it that's what I'm trying to say okay how to install upon just search for it just download and you can install it like a software simple uh SM Babu you can simply install it like a software just go online and you know you can search for any font for example I can search for uh you know let's say opens font download if you just search for a font like this you can see you can get it from any website and from here so you can download it download it and just install it like a normal software that's all that's all you have to do okay that's it you can just search for it online any font that you like and you can simply start using it okay yes now that's a really good question so now guys Vishnu is asking what if I need different color for all the P tags now that is the disadvantage here see you guys now that is actually what we need to understand see the problem of inline CSS was we were unable to reuse the same CSS that was solved by internal CSS now I wrote my thesis only once and it's working with all the P tags so my reusability is there but now there's one more problem what if I want that for the first two P's I want blue and for the next two P's I want red what if I want something like this now that's a problem again so guys what I have to do now is then because see if I apply CSS to P it will work for all the P tags because they are P tags so now guys what we have to do is we have to give them some other name by which I can select them so that I can apply different CSS on all of them so guys as I said there are multiple ways of selecting an element the first way was using its tag name okay so you saw that you can use the tag name to select element the second way is you can give all the elements a nickname by using the class attribute which is also called as class name so what you can do is you can go to a particular element and give it a attribute called as class like this and let's say we call it as para or let's say para one something like that okay so you can give something like a class now this class is nothing but it is called as a class name that means now this P element can be called or can be selected using two names either you can call it using P tag its own tag name or you can call it's using para one class name think of it like a nickname guys just like you have unique names right so you can be called by your real name you can be also called by your nickname by some people just like that now this P tag can be also selected using P tag name or by using its class name so let's see how to sell select a particular element using its class name how to call a element using its class name it's very simple guys so what we can do is let's remove this P tag for some time okay and now here I can go and what was the class name guys the class name is paravan remember guys you can give whatever you want as class name it's up to you it's not fixed I can give it sort of it's also fine it's completely up to you okay but in this case I don't think Sora will make sense there so let's call it as para one okay cool and now here if you want to select a reason class name you can write the class name directly but guys if you write the class name directly like this CSS would understand it because thesis knows it's not a tag but CSS also doesn't understand it's a class because it will think oh it's a tag but if it tries to find out it will never find a tab called Paragon because it doesn't exist so to tell CSS that no this is not a tag name this is a class name what you have to do is you have to go ahead and put a dot in front of it once you put dots CSS understands okay I have to go ahead and search for a class with Paragon so I have to search or I have to check all the elements who have a class name of para1 and to all of them we have to apply this CSS so I'll go and write let's say color color blue and now you will see that our first element is having a class of paragon so for that see it becomes blue all the other ones are black because I have not applied any CSS but now the first one becomes blue and guys the best thing about classes is you can repeat them so that means I can give the same class to n number of elements I can give the same class to multiple elements and that is allowed guys that is completely allowed okay you can give the same class to multiple elements if you want to apply same CSS to all of them and not only same kind of elements guys anyone can have it for example if I have a H1 H1 okay let's say something like hello that also can have the same class better one okay something like this and now H1 should also be blue in this case see that so guys classes can be repeated that's what makes classes so much useful so guys classes are nothing but a way of giving one more name to your Elements by which you can apply CSS on them and the best part about classes you can repeat it is that cleared everyone I hope you understanding so now you can give as many classes as you want to all your elements and then apply CSS and the best part is if you have 10 elements okay and you want to apply similar kind of CSS to all those 10 elements you can give all of them the exact same class is that cleared guys everyone confirm that once our classes understood now if I want the next to 2p elements to have read I can give a different class to it I can go ahead and I can give a different class so let's give it class of para 2. so to both of them we can go and give a class of para two something like this so let's go to this element as well and give it a class of para2 okay and if I now apply CS2 now see guys last two P elements this third B element and the fourth B element have para 2 plus don't worry I'll I'm also going to explain IDs don't worry shop now just wait for some time let's go step by step so now I can go to para two and I can apply some CSL like it's a color red okay let me just correct this indentation quickly and now it should be read the other two elements and that's it see how easy it is to give classes and you can do whatever you want now it's completely up to you now don't worry guys see guys till now we are not learning CSS properties we are not focusing too much on scissors properties right now we are focusing on how to apply CSS once we understand how to apply CSS then I can start teaching you all the amazing properties that CSS had so just wait for some time okay so what if we have used both name as well as yup that's a really good question maybe that is what I was about to explain now guys see everyone please Focus now they have class name like Paragon paravon para two para two and but they are also still be right they are still P elements that means what if someone goes and also applies some CSS using p element for example someone say is color green so now what's going to happen so let's see now now guys in this case if you see nothing happens why nothing happens because for the elements classes or for the CSS class has more priority than the tag name so guys okay it knows okay I'm a p element I have to get color green but because of the class they also have class so they will always listen to the classes classes have more priority than tag name but if the tag name is also putting something else now see guys for example if I go and you know put let's say font size 30 pixel now see here what will happen you will see color green not got applied but font size got applied see that everyone do all the piece because font size is not written in Para 1 or para2 that's why that can be taken but color is written in P but it's also written in color blue in Paragon and para two that's why I'm gonna give high priority to Paragon and para 2 because they are classes that's how simple it is that means only if you're giving similar properties using your tag name and class name in that case it will take classes as priority but if if something different is coming which is not getting provided by classes then it's fine so that means if you give the similar property in class that will override the tag property remember that because classes have high priority but this was not anywhere this was not applied by para one not applied by para two that's why this was fine I can take this but I never took the color cleared everyone guys I hope you've understood this okay so just remember that classes have more priority than tag names okay but only if there are similar properties if there are different properties then I can take anything from anywhere it's completely fine okay nice now guys not only classes there is one more way by which you can give one extra name there is one more way of giving extra name which is by using ID so you can give one more nickname by using something called as ID okay don't worry I'll be creation don't worry just wait for five ten minutes I'm gonna explain Dev section everything guys don't worry don't worry okay so guys one more way is you can give something called as an ID okay now in ID also you can give whatever you want so I can go ahead and give you know let's say one something like that now I can also apply CSS using ID so I can go and I can write one but again guys CSS would understand it will think it's a tag name so to tell CA says that it is an ID you have to use something called as hash okay so that means dot for classes and hash for ID so if you're selecting element using ID you have to give hash if you're selecting element using class name you have to give dot remember that now I can go ahead and apply CSS so I can just go you know and give it a background color of let's say gray so now to that P element where I have given ID of 1. it will take okay see that everyone okay now let me see guys see understand here okay now this element is having class as well as ID okay this element is having class as well as ID okay classes para one ID is one nice now what if now I know that it's getting color from its class which is color blue now what if I also give color to the ID so let's say I give color uh you know yellow in the ID now what now that element is getting color from ID as well and it's getting color from class as well now which one it should take now let's see let's try to understand this it will take the id1 because ID has more priority than classes so it's like this ID then class then tag name class has more priority than tag name and ID has more priority than class name so if something similar is coming from class and ID both I'll take the id1 because ID has more priority is that cleared guys everyone so ID has the highest priority you can say that in terms of selectors ID has the highest parity yes yes uh you can this uh you can't disrupt it you can't disrupt it but you can surely use JavaScript to change few things but normally you can't disrupt this you can't disrupt this order no that's not possible Naveen okay so guys are we cleared with this but everyone remember when you're working with CSS and now it's a suggestion it's a really good suggestion so please listen to me carefully when you're working with CSS always try to just use class or tag name don't use IDs in your CSS until unless you know what you're doing avoid IDs normally you should avoid ideas using CSS why I'll tell you because see guys in CSS when you're writing CSS most of the times you really want to repeat the CSS right when you go on websites you see a lot of things which have similar fashion similar Style so that's why guys the re the main reason is the problem with ID is ID cannot be repeated according to w3c you cannot give the same ID to any other element okay you cannot give that's why if I give this it will be error according to WCC and that's why you should avoid IDs while using CSS because the simple case is I cannot give the same ID anywhere else so what if I want to apply same CSS on 10 elements can I use IDs can I give same idea to 10 elements no it's an error but you can give same classes so that's why you should always go for tag names or classes avoid using IDs when you're working with CSS is that cleared everyone guys I hope you have understood so we are also going to ignore IDs for this whole like while using CSS not in JavaScript it becomes very important but in this case we can completely ignore the ID okay but let's keep it let's keep it in the document so that you know you'll get it afterwards exactly only if you want to forcefully change CSS of a particular element and that's a single element in that case to force it because ID has the high priority so if you want to just forcefully change CSS of some kind of element in that case you can go for ID but normally that's also not needed there are much more better ways than that so avoid IDs but only if you need it because you know it now it depends on your company it depends on what kind of project you're working on it depends on how the environment is set up where you're working are they also using IDs is your company people also using IDs then you can use it if you read a class blog before tag block which the same content width will get executed I think class I think class Summit because class has have already the sequence doesn't matter in classes like in this case if let me check it let me check that's a good question let me check it so if I put this tag one at bottom okay and classes are on top let's see if it is working now see so it doesn't matter the sequence doesn't matter in this case is that cleared Sumit so if you're using tag name and class name even if your class name is on top and tag name is on bottom tag name will still not override classes CSS because class directly had highest priority is that cleared what is WC it's not WCC Sabri it's w3c3 w3c it stands for World Wide Web Consortium it's a Authority that keeps track of standards of HTML CSS and JavaScript is that clear guys everyone I hope it's cleared so guys that's how you apply CSS either by using can we use IDs and HTML semantic elements yes yes definitely you can use it definitely but normally if you're using it to apply CSS then I would not suggest to use it I would not suggest you to use it okay Naveen but you can definitely use it like when I started learning at that time I didn't knew all this right when I started learning CCs in my college at that time I didn't knew all this so in that case guys I learned IDs first so I started using IDs in all my websites but when I actually started working then I understood they have so like you know problem they have like IDs have so much problem then I understood how easy my work can become if I use classes initially I also made this mistake because I learned from internet at that time so people were using IDs so I started using IDs completely and for everything right and I also used to repeat IDs but after some time I have got to know that it's an error it's a problematic thing okay so guys I hope you cleared and I can see that almost 415 people are watching but there are only 179 likes so guys if you're enjoying the video if you're understanding everything please don't forget to write like the video guys please don't forget to like the video is the order in which you write the CSS rule is important uh no and yes both Nicholas C K says let me show you now if it is ID class and tag then the sequence doesn't matter they will tag their normal priority but but but in CSS guys to the exact same element you can also give multiple classes how to do that by just giving a space and after that you can add one more class let's say I write you know something like ANS guys any random name okay so now that means this element is having two classes para one and ANS okay now I have two classes now both of them are classes so which one to give priority like for example this element is gonna get color from para one which is blue but what if I also give it color using A and S like let's say color purple which one it's gonna take guys what do you say which one is going to take the first class or the second class come on tell me quickly first class or second class see in ID class and tag ID priority highest priority then class then tag name but what if I have two classes come on let me see everyone which one it's gonna take okay I can see Charan Kumar is saying A and S guys second class okay let's see let's see let's see and one two three and yeah it takes the second class okay but we can't be sure about that what if I write a and s first in sequence and para one afterwards then what what what if we write it like this now what let's test it Let's test it and now it takes blue so guys it depends on in which sequence you're writing CSS so if both of them are classes in that case the priority is decided by who is written at the last is that clear guys everyone the priority now is decided by the sequence so if both of them are classes guys whatever comes last it will override the previous one like it's like the code logic initially you said a equals to two after that you said a equals to four so final value is equal to 4 just like that so both of them are classes whatever is lost that will be taken classes have multiple classes in one class but ID is unique that is the only one tag exam exactly exactly so guys that's the best thing about classes right first of all you can use the same class on multiple elements second you can give a single element many more classes right everyone so that's why classes are so much flexible IDs are fixed once you give it to one element you cannot repeat it you have to give a different Idol to something else what is ANS just a random name anything just a random name because I wanted answers from you that's why I named ANS it's just a class that's all I have given so guys this element is having two classes para one and ANS that's all guys ANS is nothing just a random word because I wanted to ask a question from you and I also I wanted to answer from you that's why I named it a n s okay nothing serious about it what if we want to give color to the whole web page now see the whole web page is inside body right so body is your main parent that's it just go right body so you can just do this body but I would suggest you to understand it afterwards but let me just show you because I know a lot of people are asking so you can just do body background color uh let's say sky blue something like that this is what you can do so now you can see here we go see that the whole body becomes High blue that's what you can do is that cleared who was asking this version I hope it's cleared right simple you can just give it to the body because everything is inside bodies the whole web page is inside body so you can just do this body your background color should be Skype but I would not suggest you to directly use it don't worry because I still want to teach you few things so guys don't worry as the session progresses I'm gonna also talk about all the better things you can do all the best things you should do okay don't worry I'm also going to talk about the universal selector don't worry guys let's get to it step by step let's get to it step by step by understanding everything okay don't worry I am gonna tell you about everything Universal selector body same no no no no no we no no no no no body is only for body body is only for body that's all body means this element the parent element of everything this that's all no Universal selector means every element okay so I would not suggest you to use star for giving background color because it will be for each and every element use body if you want in this case okay uh certificate yes so guys first of all are you cleared with this basic idea of selectors tell me that don't worry how to color what is universal selector everything I'm going to be telling you that in some time don't worry guys that is this whole session about so don't just wait we'll go there step by step but first of all guys are we cleared with all these things that we have learned here till now okay hopefully now let's talk about one more thing okay uh we apply CSS and head tag only no no you can also put it in body but remember that if you're writing in lines internal CSS it should be above your elements so what better place to head what better place than head to put your CSS because head is always on top of your body right generally the idea is style should be on top of your elements so the best position is just put it over in the head it will be always on top right that's why we go with head okay and I also don't want to make my body Messier my body basically simply only has HTML element so that's good right how do we put image in the background don't worry don't worry boom now I'll just teach you in some time don't worry okay now then guys let's move ahead let's move ahead now this was internal CSS now internal CSS is completely good it has no big problems but there is one small problem and that is in future when you're working on very big big web pages where you have thousands of lines of HTML and thousands of lines of CSS in that case guys we have a problem and the problem is your CSS will be on top and your HTML will be on bottom so you have to again and again scroll scroll scroll up and down scroll up and now you have to continuously scroll up and down if you want to start working with C7 HTML both now that's a problem right you have thousands of lines of CSS on top and thousands of license and bottom right so you have to always go up and down up and down to do coding and that will take a lot of time it will also increase your web page size right so first thing is problems in coding code maintainability becomes tough secondly your page size increases so the load time will also increase and that's a problem and guys to solve all these small problems we have the Third Way which is external CSS which is 99 similar to internal CSS guys there is no change in terms of writing there is no change in terms of writing the main change is what you're going to do now is you're going to take all the CSS okay we're going to take all these CSS from here now you no longer read style tag remove it now what we're going to be doing is we are going to be creating a new file okay we're going to be creating a new file and this file will be completely dedicated to CSS so we're going to be calling it a csys file okay give it whatever name you want so let me call it as style and the extension should be dot CSS okay that's all dot CSS okay so it's a CSS file a file completely dedicated to CSS and now you can paste to your scissors here guys no need of style that you can see now we have all the CSS here in the same way in which we wrote Our internal CSS but right now will it work will it work let's see no it's not working why it's not working because guys fine you have written CSS separately but how does the HTML file will know how will the HTML file know that this is my CSS in a separate file they should know about each other right so that's why guys now you have to link both of them and to link both of them you again have to use the same tag which is linked at which you use to relate icon now you're using it to link a stylesheet so guys now when your linking a CSS file with your HTML file you have to use relation equal style sheet because you're simply saying the file which I'm linking is my style sheet it's a place from where I pick my CSS and then here just put the path so dot slash style.css and that's all guys save it and now here we go all started working that means guys coding wise no difference right coding why is no difference it's the same thing selector CSS selector CSS everything's same okay the main thing was just linking it and now your HTML file will no longer look like a mess it will look good because now there's only HTML here and CSS is here is that cleared guys everyone are we cleared with this please confirm that so that now we can move ahead to the next task so are we cleared everyone now our task is to learn more and more about properties because now we know what is CSS what is the basic idea of writing CSS how to apply it in the inline way how to apply it in the internal way and how to apply it in the external way okay hrf stands for hyperlink reference HIV stands for hyperlink reference okay Google is asking this external this is increased loading time of website uh no it is actually used to reduce the loading time of your web page and also but not that is not the main thing because I don't think the loading time gets that much affected the main thing here is to increase code maintainability and code readability that's the main thing so that development can become faster okay so guys and yes I think someone was asking about hrf right so it's just hyperlink reference that's all linking a file that's why is that cleared guys now from now on our job is to understand how many different properties are there because right now we have only seen few of them right background color color then font size we have only seen few properties from now on guys our job is to learn how many properties are there so I'll talk about display I'll talk about flexboxing we'll talk about many more properties we'll talk about you know font a different kind of fonts we'll talk about colors we have a lot of properties to discuss on guys is that yet everyone we'll talk about height we'll talk about width we'll talk about percentages so we have a lot of things to do is that clear everyone hello Positive Vibes hello buddy all cleared guys can we move ahead now now before we move ahead in understanding any properties can you explain properties and attributes of C for CSS uh Navidad I didn't understand the question buddy like we have we are learning properties only right these are all properties which properties are you talking about Naveen you can remember the basic ones like white and black and in between a little bit about gray and all that stuff but I don't think it's easier to remember hex codes because there are lacks of hex codes for different of colors right so I don't think so it's it'll you it will be a good thing to remember you can maybe remember 10 20 30 of them like I remember five or six which I basically use a lot but to remember all the hex codes I don't think so it's a good thing to do what is the difference between attribute and property C Naveen General meaning of property and attribute is same General meaning is same a property an attribute is kind of fun for example this hand this hand is my property this hand is also my attribute it defines me so property and attribute are kind of same for example this class is the attribute of this H1 tag this class can be also called as property of this H1 tag so technically property and attribute are one and the same thing Naveen there's no difference this is CS property color or css attribute color so attribute and property are technically same is that clear Naveen okay so I don't think so there's any difference because in terms of object also we talk like this only this is the attribute of this it's about the perspective it's about the perspective like for example an apple can be a food you can call a apple a food you can also call Apple a fruit depends on from where you're coming from for eating it's my food but it's also fruit at the same time right just like that attribute and property even in the same thing depends on the perspective that's all okay cool then guys let's move ahead and let's talk about the most important thing that you should learn in CSS and why I'm calling it as the most important thing because if you understand this the whole layouting thing will be very very easier for you okay everyone ready guys can we move ahead so for that guys I'm planning to create a new file I'm planning to create a new file so let me go ahead and create a new file called as day3.html and guys see in this case I'm gonna have a really small and CSS so I'm not planning to create a separate file I'm planning to put it in inline internal way you can also create it let's create it let's create let's create a new file called as day 3.ccsus as well so day three dot CSS so guys I have a HTML file I have a sales file now let's go ahead don't worry guys all the people asking about box sizing and all that stuff don't worry I am telling you that as I said let's go step by step guys let's go step by step okay please so yeah guys let's write the basic HTML tag quickly and let me remove all the extra things that we don't need right now and guys the next thing that we are learning is Box model so all your questions will be answered now box sizing what is box sizing what is padding what is margin don't but just wait now I'm going to tell you about this everyone okay yes I'm doing it in external only I thought it would be it will be good for you to understand it so that you know we'll have a practice directly and guys how do we link it we have to link it right so let's link it using link tag link and file path is dot slash day3.css okay now guys please Focus for the next few minutes guys just focus every element that you create on a HTML page can be considered in terms of a box please listen to make a fully guys every element that you create on your HTML page is actually wrapped inside a box remember this guys is wrapped inside a box no matter if it is looking like a box or not every element is wrapped inside a box let me show you guys please Focus everyone please Focus okay let's have a P tag okay inside this P tag let me just some normal text like you know hello everyone something like that hello everyone okay all good simple save it give it a class so that we can apply CSS so let's give it a class of para one now guys how do we apply CSS everyone dot para one okay let's give it a font size of 30 pixels so that it becomes big and let's give it a color of blue cool simple guys everyone I hope you're understanding this let's run this file quickly so I'll copy the path go in our browser and paste it here okay nice you can see we have a very simple p with 30 pixel and hello everyone let me just zoom it okay nice now if you look at it it doesn't look like a box if you look at it it doesn't look like a box but if you go ahead and give this P tag a background color you will see something like this it's putting the background color like this that means internally guys you can see if the biblical is coming like this the background color is giving color to the whole P tag that means if you now look at it the whole P tag was actually a rectangle a box right everyone you can see that right if I didn't give it color I thought that P is only this much if I didn't give the color I thought p is only this much this much text but when you gave the color you now see a really different thing that P is actually a big box like this and guys not only P every element as I said even if H1 for example if I hit an H1 now and just write let's say hello okay and let's apply some CSS to it sorry not DOT hello it's an H1 so let's directly use the tag selector H1 let's just give it a background color off you know yellow and see guys H1 looks so small like this much but you can see it's also inside a box so every element that you create is wrapped inside a box and guys not only block element everyone bhanupriya Mohammad kufra not only block elements even your inline elements are rubbed inside a box for example see guys now span is an inline element right now I didn't want to introduce it but I just want to show you don't worry about the width don't worry about the weight guys don't worry about this how wide receiving full width we'll talk about that later on right now the main here main thing you have to understand is simply that it's a box exactly yes yes Naveen not only all these elements any kind of element you take any element like for example let's take a span and let's put content in it like you know uh I am a span element even if this element is not taking the entire width you will see if I apply scissors on it and give it a background color of you know gray something like that see that it's also inside a box even if this box is not taking the full width it is still a box you can see this right try to understand this this this borders they're a box so the main thing guys here is everything is inside a box image video audio no matter what element you create every element is wrapped inside a box sometimes you might see it sometimes you might not depending on if you give color to it or not but every element is wrapped inside the box that's why guys it's very important now it's wrapped inside the Box because of some reason because boxes are much more easier to arrange and handle have you guys ever thought why why these puzzles and everything are square cuts have you guys ever thought that because they are easier to manage and fit it here and there right everyone that's why here also everything is wrapped inside the box so that they can be placed easily they can be aligned easily they can be arranged easily only if they're boxes this is much more possible okay guys don't worry about inline and block right now I'm gonna tell you about that please wait let's go step by step what do we say guys can we go step by step everyone okay cool use of span all that I'm gonna be talking about everyone all that I'm going to be talking about don't worry now see guys these elements are wrapped inside a box nice very good no issues but they are technically not supposed to be used like this because they are textual tags they are basically created to use like a text but in reality guys when you go on to these web pages like for example if I go to you know flipkart.com here you will see that here this section now now see you guys here we have images and all that stuff and text so I know that this is not a P tag but here if you see guys its whole thing is wrapped inside a box here also if you see this whole thing is wrapped inside a box so what if I want to create my own box so you haven't taught us tags for HTML audio and video tags don't worry buddy that was not the main thing but if we get time I will definitely cover it I would love to cover it and it's very easy so don't worry tomorrow just remind me I'll download a video on audio right now I don't have the audio and video Don't Worry tomorrow just remind me I'll cover audio and video quickly don't worry okay Sharon Kumar don't worry so guys if you see all these elements if you see this whole thing this whole collection of elements is wrapped inside a box even if you see your navigation bar this whole white thing is nothing but a box so guys even though this P elements and all of them are creating boxes for you internally but sometimes you might need an empty box in which you can put your elements okay so how to create empty boxes guys how to create your own boxes to which you can arrange them easily and all that stuff how to create those boxes or guys technically they are called as containers okay so see you guys again understand last Point here that the P tag every tag that you're going to be using is going to create a box it's going to be wrapped inside a box but those boxes are only for their users what if I want to create my custom box to which I can give easily height width I can make it big or small and I can start putting some content in that how to create our own custom boxes so guys those boxes are called as containers why containers because they help you to contain n number of elements inside them see this white box is containing these many elements this white box is containing these many elements so every box is containing a lot of elements okay so that's why they are called as containers containers or boxes so how to create your own containers or boxes guys so because see everyone this p is specifically used for paragraphs H1 is specifically used for heading so that means they have a meaning these tags even though internally they are also wrapped inside a box they already have their own use if you use a p it will behave like a paragraph if you use the H1 it will behave like a heading so what if I want to create something which will be just a box in which I can put any element so guys those elements can be created using tags like Dev tags like section tags like nav tags like header okay these are all the various tags which will help you to create boxes okay simple plain boxes these are all the elements now you might ask why like if I really want to create a box why I need so many tags and trust me guys it's a good question to have like for example if I'm using a div let's say div okay nice let's apply some CSS to it div okay let me remove all this cases from here now see guys Dave is not made to do anything by default so even if I give it you know uh See by default it does nothing you'll see here see this it does nothing right not like H1 or something even if I put some content in it that content also looks normal see that content also looks normal it's not you know getting paragraphed or it is not getting bold because of it when it's normal because divs are not supposed to do anything on their elements whatever you create inside them they are generally there just so that you can create blank boxes okay now if I apply some CSS for example you know let's give it a height by default they don't have any height and weight so let's give it a height like you know 300 pixel let's give it a bit like 400 pixel and let's also give it a background color of red so now you will see it is just a blank box that's all okay simple it's just a blank box see that's how you create a blank box of any size and guys just like that I can use a section tag as well I can create a section tag and I can apply scissors on that as well so let's go let's use a section tag oh why I'm using these brackets again and again okay give it a height of 200 pixel width of 200 pixel and background color of blue I will see here we go simple and just like that guys let's use the header tag in between them and if you see now it's also just creating a box for you thank you 300 pixel height 200 pixel and background color yellow and guys you will see it's just a box so now guys here you have to understand that all these tags even though they have different names they are just there to create containers or boxes okay so now it will be a little confusing for you right I didn't think then why like then why just we don't have div why is we don't have section like why do I have to give them different names if they are literally doing the exact same thing so guys till html4 it was like that you only had div but after that guys you have these many different elements so so that while creating the box you can tell or you can make the browser understand why I'm creating this box for example if you're creating the top section which we call as header for that you can either use dim or use header but if you use a header tag browser or the search engine we will easily understand okay this is a header so according to the semantics according to the convention it's like if you are creating a top box which is like this one if you want Flipkart like this top one you can use a header tag right you can use a section tag for any kind of section for example electronic section Beauty food toys section sport section this whole box is a section so in that case you can use a section tab for the bottom part like this for this kind of thing you can use a footer tag like that guys so what they say is if you want you can completely just use div for any kind of box but if you follow the rules basic conventions basic semantic you can use section for any kind of section that you're creating you can use div for any now see guys the logic is for header you should use header for footer you should use footer tag for the between area you should go for main tag like that if you're creating a navigation box use the nav tag they will do nothing guys they are not gonna support you in anything these elements will not do anything they will just create boxes it's just they will have a good name that's all guys is that cleared then by the difference between driven section technically is nothing coding wise they are just same they are just box the main difference is the semantic that if you use a section tag for SEO it will be easier to understand okay this is the whole section which belongs to something yes Naveen yes you can say that they are semantic elements are we cleared guys so technically they just have different names but those different names are just for the understanding of SEO and the browser so that your website can be more optimized but guys other than that they are just all boxes they are not gonna do anything for you don't think that if you use section it will be behave like a section nothing guys I can just use the div and create my whole site is that cleared everyone okay semantics are like conventions rules some basic rules and conventions that you follow right like it's like this let me give you a simple example guys let me give you a simple example explain nav and Main Anand as I said they don't have any special meaning guys they are just boxes what standards what WCC says is just simply go ahead and if you're creating the top box like see I can create this top box using div also but what they say is okay let me show you the footer tag as well guys please try to understand it makes no difference here if I use the footer tag it will do nothing see here let's go even if I use the footer tag I'm using it once don't worry I'm using it once you wait if I go ahead and you know just give it some height and width it depends on me whatever I am doing to it high 200 pixel with 200 pixel background color you know let's say purple it's up to me wait okay see this here we go a simple box now it's up to me if I want I can also put footer on top I know technically it's not correct but up to me guys I can put footer on top no one is stopping me guys it's just a box everyone it is just a box is that cleared everyone guys are we cleared now they are all just creating boxes for you it's up to you no matter what kind of height and width you give it's just they tell you that follow them properly so that it will be easier for the SEO to understand which is footer which is header so that when someone searches for your website they can easily come into your website understand oh this is the header this is the footer this is where I can find the navigation this is where I can find the footer this is where I can take the links is that cleared everyone understanding my point here now that means they don't have any specific use case guys it's up to me I can use footer for creating the header I can use header tag for creating the footer understood everyone please can you confirm that now it's just a basic rule a basic ideology that you should follow that if you want to create your header use a header tag if you want to create a footer user put attack but if I want I can use the div tag everywhere just dip tab I can use section tag for everything but just a good convention to follow exactly for S7 for the screen reader it will be much more easier to understand so guys your website will perform better you don't want write that search engine should ignore your website so your website will perform better if you use proper semantic rules and regulations okay guys I hope it's cleared everyone that means technically they don't mean anything it is just naming convention okay it is just naming convention I hope it's cleared guys I know that it's little confusing in the start it's because our mind thinks like why I can just have div it's completely fine but guys that's the base logic that's the base idea those names don't mean anything for us I can totally use just div for everything and that's what I used to do when I started creating websites I just used to use dip for everything but then I got to know if I use proper names my website will be more it will be more performance oriented seos will better understand my things it will be also easier for disabled people to read my websites because they use screen readers right okay cool cool everyone so guys I hope you understood everyone hopefully okay hopefully good good enough okay now guys now the next thing is going to be very very very important okay so please I want you to focus so for now let's ignore all of them we don't need them right now and let's also remove this whole CSS okay now see you guys now from all of this we got a better understanding that either you create whatever element it is already wrapped inside a box or you create own box by using Dev section header but at the end you have a box guys right everyone that means every element that you create is just a box correct guys can we say that everybody yes or no come on quickly can we say that either whatever elements you create they are already inside a box or you create boxes yourself by using div section all that but at the end everything is in the box that's the base definition everything is a box right now don't worry guys a lot of people are asking about how to put images or you know how what is padding margin just give me some time guys just give me 10 minutes I'll explain you all that stuff yes I will also explain span home car don't worry I'll also explain span don't worry okay now guys let's move ahead so that means now we have understood that everything is a box now we need to understand how does a element takes up size on the web page okay that's very important to understand okay so for that guys for testing now please Focus everyone please focus on the next topic let me get a dummy div okay simple div let's give it a class of one okay simple one like this and let's apply some CSS so one I'm gonna give it height of 300 pixel and width of the 100 pixel and background color of thread okay simple okay very simple element 300 by 300 and uh that's it color red all good all simple all nice fine now guys height and width are not the only properties responsible for sizing of a element on the web page understand guys height and width are not the only elements risk are not the only properties responsible for the element to take up size on the web page there are a few more properties and to know about them guys what you can do is right click on the element click on inspect in your web page just right click click on inspect and then this developer tool section will open up okay in this Element Section only in this Element Section only if you scroll down not in the elements in the style section so just below elements you'll be having the style section just move it up and you can see your CSS that you have written right to that element you can see your element which is nothing but a div you can see it here right your div with class one and you can also see your CSS that you have written now if you scroll down you will reach at this place now this here that you see is what we call as the Box model this gives you a complete box information of that element this gives you a complete information of how that element is taking size on the web page and right now it's telling me your element now guys the whatever is mentioned in the center area its height and width into height that means your element is not having any margin it's not having any border it's not having any potting it's only having width and height of 300 by 300 and that's why your element looks like this and guys every element that you create has this every element that you create has this this is called the Box model as I said every element is wrapped inside a box okay so every element has its own box model which makes it easier for you to understand how that element is sticking up size on the web page is that clear that and right now you can see this element is not having any margin not any padding not any border just width and height that's all but let me show you one more thing if I create a H1 here H1 of hello now guys don't worry everyone I will teach you padding you can see right we are going there right now we have seen somewhere padding margin so don't worry everyone just wait just wait I will teach you and I can see almost 400 people watching but likes are only 300 so everyone come on come on show some love guys show some love if you're understanding everything please like the video okay now let me show you one more thing now see guys we have a H1 I am not giving any height to it not giving any bit to it simple but I know that it's also wrapped inside a box and every element on my page is wrapped inside the box so every element has a box model so now even if I just go to that element so if I just go on that element right click you know and inspect you will see that H1 is selected now and if you just go down in the style area that H1 is also having a box model and see guys if you see H1 is also having a margin see now don't worry guys don't worry if you don't know margin I'll teach you in some time I'll teach you what margin is doing well but you can see it's having a margin it's not having any border it's not having any padding but it waits it's 782 by default and height is 37 that's why it's taking up space so this MOX Box model helps you to understand how your element is taking up size on the web page hi David how are you buddy okay so guys every element has its own box model on the web page and we need to understand that better because we have only seen width and height we want to understand what is this padding what is this border and what is this margin so guys we'll understand that on this element okay because this element is not having anything no margin no water no padding only height weight so it will be easier for us to understand all that stuff so now guys let's see what is padding because right now this element is having zero padding so what exactly is padding so guys padding is nothing but a extra fake size that you give on top of height and width that's all guys an extra fake size why I'm calling it as a fake size because in that size you cannot put any content for example if I go ahead and put some content in this div let's say I put like you know let's upgrade now I say that div whatever content you'll be having it will be having font size of 30 pixels so that you know it looks big that's all so now guys here we go you can see it's having some content okay nice and guys by default that text is in the width and height area nice all good okay now as I said padding is nothing but an extra fake size added on top yes Charan Kumar that's one way of saying that you know it is a space between all that don't worry but in reality padding is nothing but a extra fake size that is added on top of height and width so if I go on that element and if I say that I want you to have padding of 50 pixels so now guys from all the sides from all the side 50 pixel will be added on all sides here we go now see the element size has increased if you see here we have a padding of 50 pixel see that guys you can see right all around you have a 50 pixel increase in size height and width is still see guys when I hover here see it's getting highlighted so height and width is still 300 by 300 but on top of that we have padding but you can see contented content the content that you wrote it is still inside the height and width area so guys that area is what you also call as content area because content will never go outside that whatever child elements or content that div will have it will never go outside the content area so width and height is also called as content area remember that guys width and height area is also called as content area please never forget that guys content area and on top of that you have padding and guys in the padding area you can never put content so guys it's just extra extra fake size that's the real definition but guys in CSS a lot of people also say that padding is the gap between your content and the border and you can say that why not it's not a wrong thing because if I say that this is the border of the element right we can say that it's a border because that's the edge so border and this is the content so there is a gap so a lot of people say that padding is the gap between the content and the Border but now what if I put my content in Center then am I going to consider from here till here expanding no that's why the main definition should be padding is just a extra fake size added on top of your element secondly if you're saying that it's a space Sharon Kumar you were saying right so if you even if you're spraying it to space don't tell content because content can be also moved in Center say that the space between the content area and the Border can be considered as padding so don't say content say content area because if I go like guys for now you know let me just put this content in Center let me just put this content in the center let's just for now guys I'm using some properties please guys don't worry I'm just using some properties don't focus on them it is just to show you because tomorrow will you'll learn it so let me just put that in Center okay let me just put this in Center so now guys I'm putting this let's upgrade in center of that box here we go now it's in center but if you see guys this is your content area so am I gonna say that padding is now the gap between my content and the Border no because guys content ends here so is this whole thing padding from here till here no so padding is a space between the content area and the Border or what I like to say is always it's nothing but extra size that is added on top of your element that's all that's what I say simple because guys in reality also that is padding right for example if you want to deliver a glass as a gift what do you do you put it in a box but if that glass is not fitting the whole box that will move here and there so what do you do guys you put some extra paper rolls tissue papers cartons and all that right so that the Box fills up completely now according to the box it's having a element which is having a full size but in reality the content is only the glass the extra thing is just a fake size so that the element doesn't move that's what you call as padding everyone okay now guys please don't worry about Flex right now tomorrow the whole session is only for this okay right now I just did it so that you can understand what is compading properly that's all guys okay everyone don't worry about Flex right now understood guys everyone understood you also understood the question right what I try to tell here I hope okay good enough nice okay so guys that was padding simple extra size on top of the element now the next property that you have if you see on the Box model you have something called as border okay you have something called as border waiting for quiz guys are you not enjoying the lecture then if you're waiting for quiz tell me are you not enjoying the lecture guys okay now everyone see your second property that you have is border so let's see so guys you can also go to the element and give it something called as border but the best part guys and one more thing guys forgot about padding padding cannot have a different color whatever is the color of the element that will be always the color of the padding padding cannot have a different color that's all guys okay now second you have is border so now border you can give size of the Border 20 pixel but the best part about border is guys it can have a different color and also borders have type by default I want a plane border so I'm gonna give solid solid means plain straight border so border 20 pixel solid plain border and let's say the color I want is black so I can give a different color to the border and now guys you will see here we go now see 300 height and width on top of that 50 pixel padding on top of that 20 pixel border and guys the best part is border can have a different color is that cleared guys everyone and what I can have different type right now it's solid that's why it's plain but you can also you know make it dashed so now border will become dashed which I don't like a lot but here we go you can see this is what Dash I don't like it guys I don't like it a lot but fine it's there okay everyone so Dash border can also have but and there are more types you have dotted you have ridged but I just want to don't do that right now you can figure it out it's very easy so guys let's keep it solid for now now guys the third thing that you saw here was this a very very mysterious thing which is margin now guys for some people they say that margin is a movement and I am also guilty of that initial in the initial days I also used to say that margin is moving the element but guys it looks like that in reality guys margin is also just like padding it's also extra fake size which is added on top of the element on top of the Border guys the sequence is followed okay margin is added on top of the Border okay so margin is also extra fake size added on top of the Border but the difference between margin and padding is margin is invisible margin is invisible so if I go ahead and give a margin of let's say 50 pixels like that you will see now a 50 pixel margin will be added everywhere on top of that element see that guys everyone can you see that a 50 pixel margin has been added on all sides okay but guys it's also a size it is invisible that's why we say space or it's moving or all that stuff but if you think of it like a size it will be much more better for you to understand so don't think any of them like a space guys think of them as extra sizing it will make your CSS much more easier if you think of them space in future if you think of them as space in future if you're using display flags and using column Gap and row Gap you'll be confused then how come these space is coming from that's why I never call them space I always call them as extra size the difference is padding is visible border is visible margin is invisible but it's also a size but because that is invisible we feel like it's moving but guys it's not moving okay it's just an extra size but it makes it look like it's moving okay everyone hi Thor hi buddy how are you okay so guys are we cleared here everyone and guys inside the box you can do whatever you want I put a Content you can do whatever you want guys like I can also put an image here why not I think someone asked right how to add an image up to you guys inside the deal go ahead and you can use the image stack to put an image why not let me remove the alt or let me just put like you know Thor IMG let me give this image a height of 200 pixels and let's put some image here imagine you can get online so you know let's search for Monkey D Luffy okay let's take one image like this one so copy the image address you can also download it guys but let me just put it directly so now I have an image tag which is having a height of 200 pixel that's all and here we go is that clear guys yes guys see first of all you can also call it a space you can also call it a size I call it a size because I understand it like that and because it's actually size but guys it's up to you right you can also call it a space because there is no element in that so you can also call it a space thank you so much Tariq thank you so much for that uh compliment buddy okay so guys you either call them space or you call them as size up to you but main important thing is understanding yes yes I'm a big fan of One Piece yes yes now the that is also outright the live action and it's really good it's really good it's really good as well by default it's black color yes yes even if you don't give it's black by default border is always black is that cleared guys everyone I hope I really really hope everything that we have learned here is cleared guys okay do you use padding or margin torches between other elements when Place each other I use padding if I want to I use margin if I want to give space because it's invisible so it makes it look like a space I was padding if I just want to increase the gap between you know the Border area and the text or the content area so what we say in definition okay so that's all that's it use margin if you want to create space between two elements use padding if you just want to give some extra you know area to your content that's all okay everyone so guys technically they look like space that's why in definition also you can say it's space so as I'm saying guys I'm not denying you can also call it a space you can also call it size I understand it like space but I call it as extra sizing because in reality it's sizing but technically you can when you see oh there's a space Oh there's a space that's why you can call it a space as well okay so what is css3 and HTML5 uh it's simply the current version of CSS and HTML that's all so current version of HTML is five just like you know you have versions of applications version one version two So currently we have HTML5 version going on in the world and also currently we have css3 they have updated properties updated tags and all that stuff okay let me use this Anish let me just ask the mod uh uh have we uploaded the Netflix project dimension okay I think guys there's some problem I asked the team to upload a Netflix project but I think there's some problem with that so I'm asking the mod to do that don't worry guys if at all it doesn't get uploaded today tomorrow it will be first or available I will upload it don't worry then I will upload it I've asked the team to upload it but don't worry if it only doesn't happen I will upload it okay don't worry can we use the same yeah yeah guys you can use it for any element Box model is for every element you can use it for any every element guys because every element is a box right that's what we learned in the start every limit is a box now guys this was the idea of Box model now for everyone asking about how to align how to arrange don't worry guys tomorrow session is still there tomorrow once you come back I'll show you how to align elements how to arrange elements how to put content how to put images in your divs we'll learn all that guys so guys tomorrow's session according to me is gonna be the most important session everyone we'll learn about arranging we'll learn about aligning we'll learn about moving things here and there we'll put images in our Dev we'll put text we'll make our site look good we'll be getting prepared for the final day project okay guys okay is that clear guys I hope you're understanding it okay so guys tomorrow is gonna be the most important day of this whole five days because tomorrow we'll be learning everything that we need for project so we'll also I'll also teach you how to put background image guys don't worry okay tomorrow time six six o'clock no sorry not six six thirty six thirty sorry 6 30 guys yes audio video as well don't worry audio and video yes yes yes audio and video as well can you tell me what to do if the span tag is not showing if span tag is not showing because it's an inline element you can convert it to block in this pan element right display block the chill guy just make it display block because spam tag will not be visible if it is not having any content because it's a inline element inline elements cannot have height and width inline elements cannot have height and width so you have to either convert it to block or put some content in it okay so now guys we it's a time for the quiz right the thing that you're waiting for right it's time for the quiz everyone I hope you're ready for that and also guys if you want to connect to me you can just go on LinkedIn and search for saurabh Gupta let's upgrade and you can easily connect to me there if you just want to get connected to me just search for my name with let's upgrade that's all sort of Gupta let's upgrade okay guys I hope you're ready everyone so open up your second devices everyone open up your second devices open up your second devices mobile 4 or any other device I would suggest you to open up a new device so that you can watch the question here on the stream and guys I would actually suggest you to use a mobile phone use a mobile phone for the quiz because you can watch the questions on the stream and answer it there and guys we're really sorry kahoot doesn't allow to use that 40 second timer so we are still using the 30 second timer we'll figure out some way to increase it but today also we're using this 30 second timer okay so guys all your questions regarding the arrangement alignment will be cleared tomorrow don't worry tomorrow the complete session is about layouting and Arrangement and alignment uh will you speak about the css3 selector combination like first child Etc a little bit a little bit Nicholas tomorrow I'll teach because we only have a limited days right we only have five days so we have to plan it accordingly so I'll talk about a little bit about all those Studio classes they are called as sudo classes Nicholas so I'll teach you a little bit about it definitely definitely okay so guys let's go everyone let's go let me start the quiz and everyone here's the pin if you want you can also scan it using your QR scanner no no no we have not completed box sizing tomorrow I'm also going to tell you that don't worry so guys here we go the game pin is here and you can also scan the QR code if you want so guys come on exactly once 300 people have joined I'll start okay and guys please don't forget to like the video everyone and thank you so much for all the compliments guys thank you komal thank you Tahir thank you everyone okay so guys here's the game pin everyone go ahead either scan the QR code or just write down this pin in your application okay we have okay 12 people and yesterday's winners please guys put your email address in the chat without using the tag the red Gmail so if your email address is sort of gmail.com just write saurabh so all the three people who want yesterday please go ahead and just put your email ID without the red gmail.com in the chat so that we can connect to you all the winners of yesterday and for today also guys if you win today just put your email address in the chat without using at the rate Gmail or address whatever it is just your username of that email that's all okay 140 150 people already joined let's wait for 300 okay not 300 because I think 350 people are watching so I want everyone to join so I'll give you a timing Banner timing uh you know barrier so what I'll do is let me see the time it's 8 11. so guys exactly at 8 13 I'll start the quiz okay you can see it's 8 11 so exactly at 8 13 I'll start the quiz so that it's fair it's fair for everyone okay okay I think Google has given the email ID you can see that okay I think so who suruchi won right yesterday suruchi and Tony Stark oh name of the site proven it's kahoot.it you guys just have to go on kahoot.it that's all guys kahoot.it everyone just go to kahoot.it kahoot.it you know David Milan I think he's a teacher right David I I I oh no no there is also cricketer name David Milan right there's also a cricketer named David Mullen I think he plays for South Africa maybe South Africa or England maybe I I I'm um okay in South Africa It's janeman Milan in England it's David Milan so yeah David Milan is a cricketer I know maybe I'm just confirming that I know tell me tell me if I'm wrong David are you the cricketer one then big fan of your batting if you're the cricketer okay it's almost yes England player right yes yes and exactly a England player in South Africa you have janeman Milan thank you so much teacher I think it's the teacher who took that CS courses right cs50 courses on Howard Channel cs50 courses right who the he's also called he's also David Milan right so we have two David malans one cricketer one teacher yes yes now I know 91 oh yes yes yes I like his teaching I have watched a lot of his session I'm a fan actually yes yes I'm a big fan of him when I was in college I used to learn a lot from him about the basics of programming and basics of web how does yes yes yes cs50 yes I have learned a lot I'm a big fan of his teaching in the meantime guys if you just want to connect to me you can search my name on LinkedIn as well is it 8 13 are you sure yes so okay so I'll count till 10 sir please start Java yes definitely we are planning for that maybe in the next month we'll be starting with Java sessions as well so guys 10 second counter and I'll start 10 nine eight seven six five four and I'm really sorry for all the people who were unable to join three really sorry two final sorry one let's start give you guys we have started it and let's go thank you so much Thrive nuke thank you so much for the compliment buddy thank you so much thrive guys be ready let's go which HTML element is used to create a video button I think it's very easy right it's very easy very very easy hopefully everyone will be able to answer it yes I can already see people answering it yes foreign you can say that okay guys let's go for the next question and who is on top lacks M oh nice name are you lakshman lacks M nice name let's go next what does the CSS Box model consist of I think it's very easy I think it's very easy we learned it just right now right now we learned it no issues Vishnu tomorrow also there will be a quiz day after tomorrow there will be quiz vishnuvardhan don't worry buddy don't worry don't worry I know I know you have to answer it in 15 seconds you guys only get 15 seconds to answer it I know because of the stream delay because of the stream delay I've actually I plan to increase the you know increase the size the time of the quiz but there was no 40 seconds and there was only one minute directly and one minute will be too much so guys don't worry we are planning we'll do something on kahoot and make it don't worry we'll do something on count and make it good okay next and still on top oh Ria's in shop top now it's nice yes welcome on top let's go over to the next question I think there should be a pause button in this so that I can at least pause the timer for 30 seconds maybe okay inform validation what is the common technique to ensure that required field is required out oh guys we learned it yesterday we learned it yesterday form I know I know Bilal the timer the timer has having an issue don't worry we'll solve it we'll solve the issue nice all the 47 people nice let's go to the next question and riyaz is still on top nice so streak what is the purpose of metadatic okay it's easy it's easy meta relates to metadata right so I think you can figure out the answer meta relates to metadata and yes I think we talked about metadata right so hopefully you'll be able to answer it hopefully I know black Sayer I know buddy question pointing a timely right I know we will don't worry guys don't worry we will solve this delay issue I'll talk to team let's just go with this quiz I'll talk with your team up so that further quizzes won't in those quizzes something like this won't happen there okay everyone don't worry guys don't worry don't worry everyone who is facing the timing issue just adjust it for now in the future courses will make this time better don't worry right now we're not getting the option so I'll have to talk to the team once don't worry I'll solve it for you I'll definitely talk to the dream I'll solve it for you don't worry okay oh Riaz is having a streak here nice third question back to back in serious syntax what is the correct order of property value and declaration No it should be easy it should be easy it should be easy hopefully foreign I can understand that I know there's a timing issue and don't worry our team is also watching it they will definitely solve it they will definitely solve it guys trust trust trust us they will definitely solve it nice guys only 15 people I think there's an issue in understanding the question maybe a little bit but no issues played for fun guys don't worry played for fun here and Riaz is still on top okay fine fourth question back to back and now guys last question the decider let's see which CSS property is used to control the style of the font bold italic let me give you a hint it's not font weight is for making it bold Bond decoration is different textile let's see I'm not going to tell you the answer but just trying to confuse you a little bit here let's see guys well so don't worry zishan don't worry buddy we'll solve the timing issue we'll saw that we have to consider the stream deal art image bossing it our team is watching it they will definitely solve it and guys this was the last question so let's see now who is the winner here let's see on third we have Sai Sai please don't forget to put your email ID without at the rate gmail.com in your this summer is second and on first I think it is Ria so congratulations riyaz congratulations Suman if not summer don't worry the name was hiding congrats riyaz congrats Suman congratsai and congrats said in coming on top four and guys I know I know subhashree don't worry I know guys it might be a little delay so I'll try to solve it I have already asked the team who makes the quiz to solve the timing issue so they will be definitely solving it I'm really sorry guys I'm really sorry for the timing the quiz is not just funny okay do you guys need a funny quiz do you guys need a funny quiz so we can make it a little funnier no issues and guys everyone please please don't worry about the timing issue I have already talked to the team about this issue and they will solve it so from further quizzes you won't face this issue okay guys everyone trust me on that I have already asked the team okay I know I know I know this because of the stream delay the stream is only taking 15 seconds so it's already taking 15 seconds of your time okay so guys don't worry don't worry okay don't worry sorry email ID is here uh Suman and Sai you also please go ahead and put your email ID and I know Gus okay guys don't worry about the quiz take it for fun here it's completely fine we'll try to but I'll still try my best to solve the timing issue I'll ask the team I'll talk to them I'll try to solve this issue don't worry guys don't worry okay so everyone that's all that's it for today thank you so much thank you so much guys thank you so much I hope you guys have understood everything that's the most important increase the secondary guys the main thing was the teaching for today so I really hope that you understood everything you enjoyed learning all the things from me and I'll see you exactly at 6 30 tomorrow when we start with aligning arranging the elements and making our site look much more better and guys don't worry about the quiz it's okay I'll solve the timing issue don't worry trust me guys okay sushant this thing yes yes because of timing it's like that only don't worry I know that don't worry we'll solve it so yeah guys thank you so much everyone bye bye guys good night I'll see all of you tomorrow at 6 30. okay and I'll solve the delay issue guys I'll definitely swap the delay issue cool okay bye-bye everyone bye good night guys good night bye bye see you tomorrow at 6 30.

Channel: LetsUpgrade

Views: 17,352

Keywords: html css tutorials free, what is html, html tutorials free, basics to advance html, free certificate, nsdc certificate, html css for beginners, html css project, free course html, complete tutorial, free certification course html, basic html css course, why to learn html css, what is css, whytolearnhtml, create website using html, html css course, why html, learn css, free course, responsive website, itm, certification course, googledevelopersgroup, htmlcss, free, letsupgrade

Id: oPpJsxSAhGk

Length: 97min 15sec (5835 seconds)

Published: Wed Sep 27 2023