Complete CSS Tutorial for Beginners | Part 1

Key Takeaways

Okay guys, we are live. So, let's begin. So, hey everyone. I'm Arsh Al Jain, your mentor at Geeks for Geeks. And guys, in this video we are going to start with CSS and its road map. So, we're not just going to discuss road map of CSS, by the way. We are going to discuss its topics like the stylings, the properties, the background property, color properties, uh font property, and so on. Okay. So, first of all, I'm going to show you I'm going to tell you what we are going to learn today. And also in the part two of the same video, we are going to cover this in two parts. That is, we are going to cover the complete CSS in this video, as well as in the next part. Okay. So, in this part we are going to cover the general CSS like color, background, uh font, and so on. In the next video, in the next part, we are going to cover properties like media queries, um animations, transitions, and so on. Okay. So, I'm dividing this in two parts. Okay. So, let's discuss what we are going to cover in this specific session, and also in the upcoming session. Okay. So, I'll just close this, and I'll just draw a few things here. So, basically in this session, I'm going to uh simply say that this session is basically all about CSS basics and foundation. Okay. So, uh first of all guys, we're going to start with introduction to CSS. Okay. So, we are going to right away start with introduction to CSS. Okay. We are going to basically discuss uh things like what is CSS, importance of CSS, and so on. Then guys, we are going to discuss different ways to apply CSS, that is inline in and we can apply the CSS in the specific line of HTML. Then, internally we can apply, externally we can apply by JavaScript, also. Okay? So, then, guys, we have selectors and combinators, which is basically we have different type of selectors, class selector, ID selector, element-based selector. Okay? Then, we're going to also discuss about attributes like descendant, child, sibling, these type of attributes. Okay? Then, guys, we're going to discuss about different colors, that is how to give different color property, different types of color properties like hex, RGB, and HSL. Right? We have different type of colors. And then, we have units, also, that is the pixel unit, percentage unit, M, REM, VW, VH. Okay? So, these are all the pixel units, which we're going to discuss. Then, guys, we're going to discuss about basic styling, that is how we can style a text, font family, font size, color, and text align. Then, guys, we're going to discuss about box model, that is how to give margin, how to give border, how to give padding, and how to give width and height. And what happens if I change the box properties, box model properties. Right? So, yeah, just after this, we have basic styling. Right? So, this is what we are going to cover in this specific video. Okay? So, this is basically part one. Now, in the next part, what we are going to cover? So, we are going to start right away with the next part. That means in next week, most probably or maybe after 2 days from now. We're going to bring the next part. Okay? You'll be notified via YouTube okay notification. So, please turn on the notification and also subscribe this channel. Okay? So, this would be some other video where we are going to discuss the remaining part. Okay? So, intermediate CSS concepts and layouts. Perfect? So, here, guys, we're going to discuss about positioning and display, that is we have static position, relative position, absolute position, fixed position, sticky position, right? So, we're going to discuss that. First of all, right? And then, guys, we're going to discuss how we can make responsive designs using CSS. We're going to learn about flexbox and grid properties. Okay, then also we're going to learn about media queries and breakpoints. Then, guys, we're going to discuss about advanced styling, which is transitions and uh animations which we have in CSS. Uh we are also going to discuss about pseudo-elements and pseudo-classes, before and after, right? And then we're going to discuss some extra example if we get time after this. Okay, so this would be part one which we're going to cover today, and this would be part two which we're going to cover in the next upcoming session, right? So, I hope you got the very basic roadmap. Will you implement any project here? No, I'm not going to implement a specific project here. I'm going to teach these properties specifically. Okay, but yeah, in the next advanced part, I'm going to create a project definitely, because to use these properties, I would say it's always better to actually work with a project. Okay, so we're going to create a very simple project in the next video. But in this video, we're going to just discuss, we're going to get our hands dirty on these uh concepts, okay? So, yes. Hi Kunal. Hi Taimoor. Hi Astra Gaming. Okay. Chalo, let's begin. So, we're going to cover this part today. So, for that first of all, we are going to need what? We are going to need VS Code. Okay, so VS Code. So, just uh download VS Code, and I hope you have watched my previous session on the same channel, Geeks for Geeks channel, where you would find HTML tutorial, okay? So, I've taught complete HTML in one single video. It's like uh you would have overall knowledge of HTML. You can practice it definitely more in-depth from different other sources, but yeah, if you are getting started with or if you have very less time, then you can watch my 1-hour video on HTML, and then you will know pretty much of it. Okay? So, now today we are going to start with CSS. So, first of all, again, we need VS Code IDE. Just download this IDE and install the setup, and then you would be starting with the project. Okay? So, first of all, guys, what I'm going to do is I'm just going to uh go to specific uh folder. I'm just going to create one folder. New. And uh CSS one. Okay? I'm just going to call it CSS one. That is part one. Right? And I'm just going to open this with VS Code. So, if you install VS VS Code properly, just download the setup from the website, and while installing the setup, what you need to do is just click checkbox. Okay? Wherever you see the checkbox in setup of VS Code while installing, just click that, then you would see the shortcut next time when you try to open VS Code. Okay? So, it's important because, like you can see, I easily open the specific directory in VS Code. Else, what you have done is you would simply go here, open folder, and then locate that folder, then that folder would be open. Yeah, both ways would work, but this is an easy approach, right? Easy for beginners, too. Okay? So, here you can see that we have a CSS uh Actually, I'm just going to rename this. That would be better because else everyone would be confused. CSS tutorial. One. Okay? Yes. Now, I'm just going to uh sorry. I'm just going to open VS Code here. Okay, open this VS Code here. Can see VS Code is here. Right? Now, guys, what we are going to do is we are going to start with the very first thing, which is introduction to CSS. Okay? So, introduction to CSS is pretty much straight right away. And here you can see we have introduction to CSS. Introduction to CSS page is first of all see that what CSS stands for. So, CSS stands for cascading style sheets. Okay. So, it is used to implement HTML styles. Okay. So, wherever you have HTML file, you can implement the CSS style to that HTML file. Okay. You can give those styles through HTML elements. That is you can give them font size. You can give them color property. Can give them background property and so on. If you don't know what is HTML and what properties are can be given to HTML, what basic properties can be given to HTML, you can watch my one-shot HTML video. Okay. But if you know, okay, I can give color property to HTML, width property to HTML, but I don't want that. I want to learn CSS. So, CSS is And obviously CSS is needed. You cannot do that only in HTML because what about animation, what about transitions, what about responsiveness? So, all these are actually handled by CSS only. Okay. So, you need to learn CSS definitely. Okay. So, but yeah, basic stylings can be done with the help of HTML only like color property, background property. It can be handled by HTML itself. But to actually give advanced properties like positioning, display, responsive design, advanced stylings, which we are going to discuss in the upcoming videos, you obviously need CSS only. Okay. You cannot do it alone with HTML. But yeah, we are going to start with introduction first. So, yeah. It is used to style HTML elements. We can give colors, layout, and font stylings, right? And it separates the HTML content from the UI the UI basically the HTML would be uh separated from the styling, that is CSS. Okay. So, HTML is the skeleton. CSS is the beauty. And if I talk about JavaScript, JavaScript is the brain of the website. Okay. So, HTML would be the skeleton. It's like the layout of your website, the UI of your website. The styling of that UI would be CSS, right? And then the brain, the logical functions are handled by JavaScript. Okay. So, basically HTML and CSS are separated with the help of CSS only. Okay. Then we have different importances of CSS. Why do we need CSS? So, basically it enhances the user experience. Okay. It It basically says Like you can see that this I'm using this drawing website, right? You can see it has some kind of UI. So, definitely it's really helpful. The positioning of the elements, the color of the elements, different different things provided here. Okay. So, it's always helpful for me to actually reach out to each of these buttons to see, to recognize them very easily. It is all all possible with the help of first of all the layout which is built in HTML. Okay. Or they might be using some advanced tool like React. And the second thing would be the styling of it. Okay. The styling is done in CSS. Okay. So, yeah. Makes websites responsive also. CSS makes it responsive. For example, if I open the same website in mobile, it would be smaller. Now it's bigger because of my wide screen, my desktop, right? So, that's basically responsive. So, CSS helps to do that. Okay. CSS helps to do that. That means adjust the font size, adjust the shrinking of the elements, adjust the card size, and so on. Suppose if I open any shopping website like Amazon, you would see that in your browser Amazon looks something else. In your mobile Amazon looks something else. Okay. Because obviously because of the stylings. Okay. Different different stylings. For the mobile it's styled differently. For the desktop it's styled differently. It's all because of CSS. In CSS you can have different different media queries. Media queries are something like which are which have which contain the size of your desktop. Suppose size of your desktop is this full screen. So, media screen would be styled accordingly. Then after that we can style it for mobile phone. Then after that we can style it for smart watches. And so on. Okay. So, yeah. It actually makes the website responsiveness. Then the third thing would be it allows customization through animations, layouts, and interactivity. So, we can have animations, we can have transitions, different layouts, grid layout, flex layout to actually make things look better. Okay? And it plays the key role in modern web development. Without CSS, your website won't look that much attractive, right? So, we have different like childs of CSS. We We call it Tailwind, we call it Bootstrap. Basically, they internally those use CSS only, but you would find it way more easier. But, they have lack of customization. So, I would say go with plain CSS only. Okay? I never use Bootstrap or Tailwind CSS. Tailwind sometimes, but Bootstrap never because Bootstrap does not have any customization, honestly. Okay? But, yeah, you can use use Tailwind in future. But, right now, we're going to jump with raw CSS, okay? Raw CSS only. So, this was pretty much basic introduction of CSS. Now, guys, we're going to style with the properties. Okay? So, I'm going to go here and I'm going to create a very basic file here. I'm going to create an index.html. Here only I'm going to provide my CSS for now. Okay? Later on, we are going to discuss how we can provide CSS in specific styles.css file, then import it in the HTML file. But, for now, I'm going to write my CSS in this HTML file only. Okay? So, here you can see that this is a very basic HTML document. And suppose I want to style something. I want to write CSS. For example, I have this H1 tag. Okay? And I'm just going to write here "Hey there." So, right now, I haven't styled it. So, let me just check how it looks. So, I need to install a extension, which is what? Which is Live Server. Just install this extension. Okay? Mine is already installed. What I'm going to do is I'll just right click here, open with Live Server. Fine. So, you can see that it looks like this. Okay, it looks like this. Fine? It looks like this. You can see no stylings. Looks very ugly. So, would anyone be interested to visit my web page? Obviously not because it looks ugly. Why would anyone visit my web page? So, we need CSS, obviously. So, uh if I talk about uh some other websites, okay? So, let me just try this with Geeks for Geeks, okay? So, if I search for Geeks for Geeks, right now you can see that yeah, wow, the layout is really good. You can see that yeah, we have everything in position, okay? But, suppose if I want to remove the uh remove stylings from this, that means suppose if it only contain HTML. Let me just do use an extension. Uh I think it would work. We have different different extensions for a CSS remover extension. If you just search for it, um you'll find different different extensions. Okay, right now I might not be able to find different extensions, but yet you can play on your own. You can find an extension from Google Play Store, I'm sorry, Google uh Web Store. And uh from here you can just say that this would basically remove CSS from your website to actually say that yeah, without CSS how your website would look. Technically, it would look very ugly, okay? So, you can just say that right now GeeksforGeeks website has HTML, CSS, and some JavaScript. Looks good, but what if I remove CSS? If I remove CSS, this positioning of the elements, the styling of each card, and what happens if I hover on each card, and color of everything would go away, would go away. So, it would look definitely ugly. No one would visit GeeksforGeeks, and GeeksforGeeks would go bankrupt. So, that's why we need a proper website, we need proper UI, we need proper HTML, we not we need proper CSS, and then JavaScript. Okay, so to make a website look pretty, so that audience would come, so that company would grow, right? So, paisa paisa hoga tabhi, right? So, that's why we need CSS. Okay, so now if I take our example, our example, we suppose need to style this. Okay, our website right now have nothing. So, one way of styling is inline. So, I'm just going to say that style equals I can just write the style property, and I can just write color, what uh like what I want to target. Okay, what property I want to target, so I'll just write the property name. Suppose I want the color to be red. Okay, color to be red. Okay, red. So, if I go to my website, you can see the color is red. Okay. So, you can see this is the one way of styling. Okay, this is one way of styling. Right? The other way would be you would be writing the styles tag here. styles styles tag here. Okay? Inside this, you are basically going to write a selector. Okay? It can be anything. Right now, you can assume that this term is known as selector. And inside brackets, we have the property. We have some property, and then we provide its value. Okay? Selector is that element which you want to style. It means suppose I wanted to style this element. So I'll provide H1 here. Okay? Right? And property would be what? Property would be color, value would be red. Okay? Let's try to do that. So H1 property, that is color. And red. Fine? Looks good. So selector, property, and value. Right? So if I just remove the styles from here, this is another way which you can write the styles. And this is obviously a better way. You can see that styles is style is totally separated from the HTML. So it makes the UI, like the developer see things easier, and there are a lot more benefits. Right? You cannot add animations directly here. You would need a CSS file. Okay? So you can add CSS elements here. Or else you can CSS you can create a separate CSS files, like style.css, and there you can add the CSS. We'll do that. Just wait. So now let me just show you how it looks. Okay? So again, if I just save it, you can see it looks like this. Perfect. So this was the second way. Third way would be what? So third way would be here. You can simply write styles.css. Okay? Styles.css. And you can just copy this whole and paste it here. And now you don't need this. You need to import that specific file so that you can connect this HTML to CSS file. Okay, right? So I'm just going to write here link tag. rel stylesheet Okay? And here you need to provide the Just a minute. Let me just read the live chat. M power one says link the style.css. Yes, exactly what we are doing. Okay, now let's continue. Okay, so where was I? I need to mention the path of style.css, right? So here what I'm going to do is href equals and here I'm just going to write the path of my file. So I would just write dot slash, that means in the my same folder look for style.css, fine? Suppose there was a folder named as CSS, okay? And I provide it inside this one. That means you can see we have HTML and in same folder we have CSS folder, inside this we have style.css, then what we can do. So you need to first of all go to the same folder, go to the current folder. Then inside this go to the CSS folder, then go to style.css, fine? So this would be the path. Okay, so I hope you now you got it. Okay, so there are different different methods of giving path, you can give that later. Okay? Right? So you can see this is another way. So suppose let me just change this color to green. Let me just check if it's working or not. So now if I go to this, you can see that color changed to green, right? Perfect, looks good. Now guys, this was the third way of giving styles, okay? First way was writing CSS directly here, second way was writing it inside the style tag, third way was creating a separate file, okay? Now I can give more properties also. First property which we explored right now is the color property. Similarly, suppose I have one more property which gives background, so I'm going to give background as aqua. So if you see aqua, aqua would simply give this property, okay? target this. Now, you can write target multiple elements also. Okay, suppose I had an H2 tag. H2 tag. Okay, I had an H2 tag. And uh I want to style this. So, I'm just going to say my H2 tag would be styled here only. So, I can just write the next styling in the next line only. There's no problem. Okay, so I can write the whole CSS in single file and so on. Okay, so I'll just give it blue color. And I'm just giving it a red color. Okay, so I'll just save it and let me just show you. So, you can see that the H2 tag is going to have this style. But suppose, what if I want an H1 tag? I want an H1 tag to have separate styles. In our case, what would happen? What would happen? So, you can see both H1 tags have same styling. Why it happened? Why it happened? Because your H1 tag, you have simply said all of my H1 tags are going to be styled like this. I'm going to be styled like this. So, the problem would be suppose there is another H1 tag. I want different styles for it. Then what can I do? So, this is the way when you want to style all the H1 tags in your page. This is the way when you want to style all H2 tags in your page and so on. But if you want to style that tag specifically, if you want to style that tag specifically, then you need classes and IDs. Right now, we used element. Okay, we used the uh Yes, we used the element directly, right? We used the H1 tag, H2 tag. That means we used the HTML element directly. But this is very problematic when you have restrictions, right? You You don't need all H1 tags to be styled like this. You don't need all H2 tags to be styled like Maybe I want different styles for different different H2 tags. Then what can I do? So, what you can do is you can just give it a style. So, I'll just give it a class for now. Class as my head one. Okay? Class as my head one. And similarly, I'm going to give it style as my head two. Okay? And uh I'll just say that my small head. Okay? One. And similarly, I'm going to have one more, which is my small head two. Right? So, basically, I'll just keep them grouped. Okay? And I'll just add a BR tag, and I'll just close it. Okay? So, what I'm saying is one of my H1 tag would be having this class, other app would be this class. One would be this class, one would be this class for H2. Right? So, now if I want to style them, what I'm going to do is I'm just going to say to call the class, you need to write dot first and this. Okay? So, I'll just copy this. And I'll paste it here. And I'll just simply say uh brown for now. Okay? Similarly, for this one, I'm just going to copy this. And paste it here. Okay? And paste it here. Something like this. Okay? So, you can see that my first H1 tag would be this, second H1 tag would be this. First H2 tag would be having this, second H2 tag would be having this. Right? That's the benefit of classes. Okay? So, here you can see that yeah, H1 tag is like this, another H1 tag is like this. H1 tag is like H2 tag is like this, another H2 tag is like this. So, that's the benefit of giving classes. You can style the elements separately. But what if I have another element with same class? Okay? Same class property. So, here there Okay. You can see I have elements now with same class. So, what would happen? These two elements would be having same stylings. This would be having another style. This would be having another style. This would be having another style. Okay, so that's the benefit. Now, if I come here, you can see these two have same style. This has a different style. Okay, and all the other have different styles. Okay, so if you give same class name to two elements Okay, same class name to two elements like this, you can see same class name to two elements, they would have same stylings. Okay? But what if I would say that I want a class I I want I want a property name which would never be repeated. Okay, which would never be repeated. In that case, you use ID. Suppose I am sure that this specific H2 property this specific H2 H1 element is never going to be used again. Neither of its same styling. So, what I can do is I can give ID. Okay, ID. Okay. My ID one. Something like that. Okay, so I cannot do this now. Okay, I cannot change it to something else. Okay? I cannot change I cannot do this. Two elements having same ID is not allowed. Okay? This is allowed. This is allowed. Two elements having same class name is allowed. But this is not allowed. Okay, so what you would do is you would give separate IDs. Now, how to style them? So, it's pretty easy. So, for example, you wanted to style it. So, what you would do is now is you would provide a hashtag. So, it would simply style that specific element. Okay? But you know that this would never be repeated. This specific element is unique. Its styling would never be repeated. In that case, you can give it ID. Okay, you can give it ID. You can see that these two elements are having different different styles because of IDs. Right? So, that's what you can do. So, I've styled my ID one. Similarly, you can do it for my ID two. Let's see how my ID one looks. So, you can see my ID 1 basically looks like this. Okay? Similarly, you can style my ID 2. Perfect. So, these are classes, IDs, and elements. Okay? Three way of styling. Okay? Three way of styling which we discussed. Right? So, now guys, I'm going to simply say I'll just remove everything. And everything would be removed from here. I'm going to style directly here only. Okay? So, that I don't need to shift pages again and again. Perfect. So, first of all, we would talk about some basic properties. Okay? So, for example, I'll just write here lorem 10. Okay? So, it would give me 10 words. Right? And suppose if I style the P tag, so what would happen? I would style the P tag. I'll just say that the color was blue. Okay? Color was blue. And I'll just give it font size. Suppose I want to provide it font size. So, I'll just say 16 pixel is the font size. Okay? So, 16 pixel is the font size. Right? So, now you would go here and you can see that yeah, this is the property. Suppose if I increase the font size, I'll just make it 26. You can see the size actually increased. Okay? So, I'll just reset. Okay? So, 26 pixel looks like this. Okay? If I make it 16 pixel, so it looks like this. So, you can see that yeah, that's how it actually works. Okay? So, this is it. I'll just make it 26 pixel so that it looks bigger. Now guys, I have taught you basic properties. We must give the tag ID. Yes, exactly. We must give the tag IDs for tags. Like basically, when we want unique unique properties, unique stylings. Okay? So, now we discuss very basic styling. Yeah, we have color property, we have font size property. We can change the font family also. So, font family property, what is it? Suppose if I give this font family, so what would happen? You can see it looks like this. Okay? Suppose if I change the uh font family, if I change it to something else like Apple. Okay? Apple font family. Okay? So, now it would look something like this. Okay, so you can change the font family also. Okay, what else can you give? We'll discuss that later, but yeah, these are some basic properties which generally a person gives. Okay, so now guys I'll just tell you what ways we applied CSS. The first way was inline CSS where we simply wrote it like this. Color. Okay, sorry. Style. Color. Blue. Like this. Okay. And by the way, you can comment this out so that it's ignored by your web web page website. Okay, it does not take these styles, but I want to keep these styles. So I'll just press control and forward slash. Control and forward slash. Forward slash is along with that question mark button, right? I'll press this and you can see this would be commented out. And what I said is this way is inline CSS. Okay, inline property, inline CSS. Right now if I remove this also, okay, if I remove this also, I just save this right now. Nothing is here, right? Nothing is here. Perfect. If I say that I give this style, this is inline CSS, right? So you can see inline CSS looks like this. Okay, I don't want inline CSS. So I can say this is internal CSS. Okay, this is internal CSS where we give the CSS in the same file but inside the style tags. Okay, this is internal CSS. Now what would be the third type? That would be external CSS. Okay, so this is known as external CSS where you are targeting the element but from outside. This is external CSS, right? So three ways. This is the most preferred way because your code looks more structured, but since you are a beginner and you don't want to jump in between these two files, so you can directly style it here for now. And then once your task is done, you can create a separate CSS file, paste your code there, and import that file. This is also valid. Okay, you can do that. Right now I'm just going to write my all my CSS here for now. Okay, so three CSS, inline, internal, and external. Okay, all do the same job. It's the way you write the CSS. That's it. Okay, so yeah, we have done this. Now guys, what we're going to do is we are going to see that what's the priority. What's the priority? So for example, I taught you about ID and I taught about classes. Okay, so if I just copy this and paste it, okay, for now. Suppose you have this P element which has a class of my P one, suppose. Then it also has the ID of my ID P one, something like this. Okay? Right? So suppose I style this P tag directly, what would happen? What would happen? Can see that P tag would be styled like this. But suppose I style the class, will it take the property from P tag or will it take from the class? So suppose I style the class here. Right? I'll just give this color as red. Can see same property is overridden. Same property is overridden. Let's see what happens. So you can see that class property would be taken because class has higher property than element itself. Okay? So this this specific tag has class. So I've styled the class, so this class property overtakes this one. Okay? If there is something else written, suppose font size as 40 pixel, okay, that property won't be taken. That would still be 40 pixel. But whatever are the common properties, their proper their priority matters. Okay? So here, priority of class is more than the element itself. That's why a styles would be taken for this color, okay? For color. You can see that yeah, font size increased but the color is still the same, okay? That means font size would be taken from whatever is given, okay? In any case, right? But whatever are the common properties, their priority matters. Suppose here I've given color property. Suppose now if I style the class, okay? My ID uh P1. Suppose now I style this and say color equals green. Right? So you can see that it was the element, this was the class and this was the ID for same element. Now tell me which would be which color would be taken? Either this, either this or this, right? So basically highest property is of ID. Second property would be of class, third property third third priority would be of P, okay? So yeah, this would be having the highest priority, then second highest, then the third highest priority. Fine? So let's see what it takes. So you can see that it takes green color. It does not take red color, it does not take blue color, it takes green color because it has the ID, right? So that's the priority, okay? So priority matters. This is such an underrated channel. Thanks, Chief Priest. Okay. So yeah, we have discussed about priorities, okay? Then we are going to talk about selectors and combinators. So basic selectors are we discuss about color, okay? We discuss about basic selectors that we that we have the P tag, okay? Basically element selector and we have class-based selector and we have ID-based selector, okay? So three types of selectors, three types of selectors and then this is the property, this is the value, this is the property, this is the value, this is the property, this is the value. So generally there are three types of selectors. Uh element, class, ID. Three selectors, three type of selectors, right? This is it. Now uh what else you want to do is suppose um you have one element inside another. Okay? Let's see that. So, for example, suppose I have a div tag. Okay, I have a div tag. And it contains a p tag of and shows lorem five. Okay? So, you can see inside this div tag I have this p tag. So, what can I do? I can just say that go to the div tag. Okay? I want to suppose just style the div tag directly. What can I do is I'll just say that this div tag is having background color of aqua. Let's see what happens. So, if you come here, you can see div tag is having this. But, inside this div tag I want to style this p tag. So, what I can do is I can say that the p tag and here I can just say I'll just say that the background color background color is already given. I'll just say that color of this CSS would be blue violet. Okay? And font size would be uh 30 pixel. Okay? Now, let's see. You can see that it takes it, but suppose there was another p tag. Okay, suppose there was another p tag, but it's outside. So, both p tag would be styled. Okay, both p tag would be styled. And they both are styled. I only want that p tag which is inside div. So, what I can do is I can just write go to div. Inside that, look for p tag. How many however many p tags can exist, those all would be styled. But, it would look for all the p tags inside this div inside this div. Okay? And it would style it. Okay? So, you can see that now only this styled. Now, suppose there was another p tag inside this, so both of them would be styled. Okay? But, what's outside this div won't be styled. Right? Suppose there were multiple divs. Suppose there were multiple divs, then you can just see that these are styled. But, I want only this specific div to be styled. So, what I can do is I can just give it a class or an ID. Okay, so I'll just give it ID of my div one. Okay? Now, I'll just say that uh go to that div my div one. Okay? So, my div one p tag would have this property. All the divisions are having this background color. It's different. But, I'm saying that go to my div one and give the specific p tag this property. So, if I just save this, you can see that this my div one p tag is only having this. Okay? Rest other divisions Rest Rest other division, that is this is a whole division, would be having normal things and also the background color aqua because all divisions are going to have background color aqua. But, this specific division's p tag is going to have this property. Right? So, this is This is something which you're going to use a lot. Suppose I In this also, I only want to target this specific p tag. So, I'll just give this an ID. So, I'll just say that ID equals my p one, suppose. Okay? So, I'll just say that #my p one. Okay? So, if I just save this So, you can see that only this specific p tag is styled. Okay? It can be an ID also. Okay? It can be an ID also. You It can be a class also, by the way. Sorry. It can be a class also, right? Previously, it was an ID. Now, it's a class. Okay? So, it can be styled on a class also. That's also fine. Okay? So, you can play along. You can have multiple classes of p tags. Now, you can see that whatever my p one are inside this one would be styled. Okay? So, class would be for multiple p tags for same styling. Right? So, you can play around with this. Okay? So, now you would know, "Okay, I can just play around with this. It can be ID for us or class for us and so on." So, it's like priority. I want to style this div inside this I want to target this p tag or this p tag or this p tag. So, I can just say write it in order and then write the class or the the stylings. Right? That's how it works. Right? Now, let's continue. That's how it works. So, uh one thing is what? So, here you can simply see that suppose I had one more division. I had one more division. Okay? You can see I had one more division. Now, tell me I have said go to this division. Inside that, look for my P1. So, this is my P1 and this is my P1. But, this is not directly inside this division. This is directly inside this division. Okay? So, let me just check will this be styled or not. This would be obviously styled, but will this be styled or not? Let's see. If I just save this and go here, you can see it's styled. But, I want only direct children to be styled. That means this is what? This is my direct children. But, this is what? This is my direct children. I don't want to go inside this another div and then this P. I don't want this one to be styled. So, what I can do is I can just say that here here write this. Okay? This sign. So, if I just save this and now if I come here, you can see only direct children is styled. Non-direct children is not styled. Okay? So, that's also something which you're going to use. You can see this would target only direct children. So, you can see in this division, this is the direct children. Okay? This is the non-direct children. That means children of children. Okay? So, this won't be styled if you provide this sign. Okay? So, if you ever see this sign, this is meaning that it only styles the direct children, right? So, this is it. Now, we have one more thing which is adjacent. Adjacent. Okay? So, for example For example um I can just say that suppose suppose I have this H1 tag. Okay? Hey there. Okay? Actually, let me go inside this and let me just give it class of my P2. And suppose I'll style my P2 here like this. Okay? My P2 like this. So, my P2 is going to have background color of red and color would be white. So, let's see where is my P2. You can see this is my P2. I want to say adjacent to this is H1 tag. I want to style the adjacent element. Okay? That means adjacent element of this specific P tag. That is the H1 tag. So, what I can do is I can just write target my P2. Okay? And plus plus go to the H1 tag after this or you can write the class or the ID, whatever you want. And here I'll just say that background color would be suppose black and color would be aqua. Let's see how it looks. So, you can see that the adjacent H1 tag is styled. Pretty easy, right? So, plus simply means adjacent. Okay? Adjacent. Suppose there was one more H1 tag, what would happen? So, if I just copy and paste it and paste it, let's see what happens. Okay? So, you can see other H1 tags were not styled because they were not adjacent. This H1 tag was adjacent to this one. Okay? This This H1 tag was adjacent to this one. Suppose if I mention an H1 tag above this, let's see what happens. Okay? It's still adjacent. You can see it's still adjacent. Okay? So, you can see but not styled. That means whatever elements come after this one, then only it would have It would work. Okay? So, um That's it. Now, suppose I want I I mentioned it something like this. Okay? Suppose I mentioned something like this. Uh Right? Suppose if I mentioned something like this, then what would happen? So, you can see all the siblings after this would be styled. Okay? So, that's what it helps. So, above ones won't be styled. Okay? But, below ones would be styled if you mention it like this, all the below ones. Right? That's the thing. That's the symbols which we have. And generally, when you are a beginner, you're not taught these, and in future, you get confused. Okay? So, these are very useful. The this sign, whatever you call it. Then, we have plus sign. Then, we have greater than sign. Right? Now, guys, we are going to discuss about color units and measurements. Okay? So, you can see that you can give actually the color property. For example, I gave this my P2 red color. Okay? So, this is general named color. Okay? Then, the second one is hex code. Okay? So, uh this is known as This is known as hex code. Okay? You don't need to learn this, but yeah, this is known as hex code. General namings. Okay? Which starts from hash and is of six digit. Okay? Then, after that, you have HSL. Okay? So, HSL has different different more properties. Okay? Then, after that, you have one more, which is HSWB. Then, you have RGBA. So, all the extra ones generally have some extra property, that is opacity. Okay? So, you can see you you can play around with opacity. This last term is known as opacity. Okay? So, if I go here, you can see that it has very less opacity. Okay? So, if I increase it, and now, you would see it has full opacity and so on. Okay? So, this is like this. You can style it like that. Okay? So, yeah, these are the properties. Then, after that, we have pixel properties. Okay? So, uh basically, suppose I have to style it like this. Okay? So, I'll just style it. Okay. So, uh it would be like suppose I have this division. Okay? And this division is going to be inside another division. Okay, so I'm just going to have another division. Okay. So, I'll just give this class as parent. Okay. Parent. Parent. Okay. Parent. And this is suppose my child. Okay. So, here you can see that suppose if I say that the parent, so I'll just target the parent. Okay. And suppose if I say that width of this is suppose 500 pixel. I'll just give it a border property for now. Border 1 pixel solid red. Okay, red border. Let me just see and let me just give it an height of height of 500 pixel. So, it would actually create a square of 500 by 500. It would have this border. Okay, let's see how it looks. You can see that this is how it looks. Okay, so let me just reset it for now. So, you can see this actually created it. Right? Now, if I talk about my child, okay, now if I talk about my child, let me just give it a background color of aqua. Okay, let's see how it looks. You can see my child only takes this much. Suppose if I say that the width of my child is suppose 300 pixel. You can see that the child only takes up 300 pixel. Suppose if I give it more than 300. I don't know what my parent is taking. So, suppose if I give it more than 300. Suppose 1500. What would happen? You can see it's taking a lot of space. What I want is I want this child to take as much space of the parent. What can I do is I can just say by default you can see by the way you You it's taking some top space. Is by default padding given? Okay, so to remove the default padding or something, we're going to discuss what's padding and margin. First of all, here you can simply write star P0. It would remove default padding from complete page. Okay, so M0. So it would remove complete padding and margin from complete page. So you can see that now there isn't extra space. Okay. Now, I'll just write here margin as 20 pixels so that I have some kind of margin. You can see, yeah. Now you can see clearly. So the child element you can see it's taking 1,500. I don't want it to take 1,500. I want it to take, suppose if I write 50%. So 50% basically would be of what? It would be of parent. So parent was 500 pixel, it would take 250 pixel. Okay, similarly if I say that height would be 90% for now, suppose. Okay, so let's see how it looks. So you can see that height is 90% and width width is 50%. Exactly, right? So that's how you can just style it like this. So if you write percentage, it would take properties from parent and then take percentage out of it, right? Then we have M. So again, M is relative to the font size of parent. M property, wherever you see it, it's related to the font size of parent, okay? So suppose um if I say font size Okay, font size It's specific to font size, by the way. So font size, if I say uh 30 pixel. Okay, suppose if I say 30 pixel. If I give this parent 30 pixel font size, that means the inner child would be having the property of that parent. Okay, so you can see that the P tag is also getting 30 pixel. Suppose if I say that the child is having font size of 20 pixel. Okay, font size of 20 pixel. Now let's see what happens. You can see it's taking 20 pixel. Okay, so whatever is having in the nearest element, that property would be taken. Okay, so for this child was 20 pixel, so it took 20 pixel. If child wasn't 20 pixel, then it would take property from parent as the default 12 pixel 16 pixel is taken. Right? So now if I say uh suppose one M Okay, one M. What if I write it like this? Okay, so you can see it's taking my default 30. If I write 2 M You can see it's taking 60. Okay, that means double of the size of the parent. Double of the size of the parent. Right? So this is the M property. If I write a 0.5 M 0.5 M So you would see it's taking this much. Okay, so it's like the size would be uh decreased and increased according to the parent. Okay, whatever is the parent, accordingly it would be increased or decreased. Okay, so that's it. Now we have the REM property also, so it would be again related to root font size. Okay, root font size. So it's like suppose if I say that default font the size is 50 pixel. Okay, default font size is 50 pixel. Okay, and if I write one REM Okay, one REM So you can see 50 pixel would be taken. Suppose if I write two REM So you can see uh like not more than that would be taken, but suppose if I write some lesser, maybe I'll try some lesser. So 0.5 REM. Okay. So yeah, it would actually take the root font size. Okay, root font size, whatever is mentioned. I think it would be mentioned in the body. Whatever is the body's font size, accordingly it would be taken. Okay, so when you change the body's font size, then it would work properly. Right now it's not working because we are not changing the size. Anyways, the main one was pixel. Okay, and then second one was M. Okay, I usually don't use this one, REM property. I usually use this when I want to make some very responsive design. Okay? But generally, I look up to parent only. I don't look up to the font size of the main parent. Okay? The main outsider. Okay? That is the body. But anyways, we learned about these. Now guys, we need to know about one more thing, which is VM and VH. Okay? VM and VH. So, suppose width of this was 500 pixel. Okay? Width of this what was 500 pixel. Okay? I'll just comment this out. You can see that this width is having 500 pixel. Fine? What I want is What I want is I want to give I want to give this uh some full space of screen. Full space of screen. So, what I would do is 100 VH. If I write 100 VH Sorry, 100 VW. That means view ports width. 100 100 width 100 width. That means full screen size. Okay? So, if I write 100 VW Okay? So, you can see it's taking size of full screen. But it's going outside. Why it's going outside? Because you're giving some margin. So, that extra space is taken outside. Okay? So, that's why generally, I don't give margin so easily. Okay? But yeah, it was just for reference. Right? So, you can see that basically, it took full space because of VW. Okay? Similarly, if I want to give full height. If I want to give full height, you can see it's taking only specified height. I want to give it full height. So, what I can do is I can simply specify it 100 VH. Okay? 100 VH. So, you can see that yeah, 100 VH height is taken. Right? 100 VH height is taken. Perfect? So, you can see full height is taken. Okay? If you still not see it, I'll just make it 10 pixel. Okay? So, then you will be able to see it. You can see that 100 VH height is taken. Perfect? So, if you want to give full screen width and height, you can give it like this VW and VH property. Right? Then guys, we have discussed about some basic stylings that is font family, font size, color property. Then guys, we need one more thing. Suppose um you have this P tag, okay? Suppose, you have this P tag. So, P tag Let's style this. For an example, it has background color of aqua. Let's see how it looks. So, you can see that this aqua. I want first of all, let me just keep one P tag only for now. So, I want to style this P tag in such a way that the text comes in center. You can see it's taking first of all full space. I want this to take to to come in center. How can I do that? So, for that we have one property which is text align as center. The text align property simply brings the text in center. That's it. Whatever width you are taking, whatever width this P tag is taking bring it in center of that width, okay? So, it took in center of that width, okay? So, this is one thing. Now, um We are going to discuss about box model, okay? Box model now. So, text align is one property which I wanted to tell you in basics. So, now guys, we are going to discuss about box model. So, let me just say that its width is 500 pixel, okay? And its height is also 500 pixel, okay? And I'll just say that if I just save this background color as aqua, okay? Background color as aqua. So, if I just save this you can see that it's taking 500 by 500. Looks good. Looks good. Now, you can see that it's coming before text Canva, okay? Before N. Okay? Around N. Now, let me just give it some border of around suppose 10 pixel. If I just save this now if I just save this now can see that now the extra space is taken, okay? You can refer to the text. You can see extra space is taken. 10 pixel increased from here, 10 pixel increased from here. That means now total width is what? Total width is 500 plus 10 plus 10, that is total width. I'm just going to write here. Total width equals 540, okay? Total width is 540 cuz 500 plus 10 plus 10. 500 plus 10 plus 10, right? Now, suppose if I give it some padding also. Padding of around 20 pixel, okay? Some padding also, okay? Suppose if I give it padding of 20 pixel from each side, okay? So, what would happen? Inner space actually is here. You can see now I got some padding. And also the size also increased. That means from inside from inside, okay? That means uh if I just give this uh style property here only and background color of blue violet for now. Can see that from here to here from here to here. This is what padding is. This is what padding is. So, 20 pixel padding is taken. That means 20 pixel from this side, 20 pixel from this side. So, plus 20 plus 20. Okay? So, you can see that this is what This is general styling. Okay? But, if I write box sizing as border box, box sizing as border box. So, what you would see is now it's again back till end canva of in the end in later of canva. That means now it's taking 500 pixel. So, what actually happened? 500 minus 10 happened for border. 500 minus 20 happened for the border. Now, remaining is what? 460 by 460. Height is also doing the similar job. 460 by 460. Now, from 460 by 460, the width of this P tag would be what? 20 pixel is taken from this side, 20 pixels is taken from this side. It means 460 minus 40, that is 420. So, this whole is taking 420 pixel width. Okay? So, once you give box sizing uh border box property, it would take the exact space which you mentioned. And then, whatever properties are mentioned here, it would be from inside. Okay? Width won't be increased. Okay? So, that's box sizing property. Okay? That's really helpful. In future, you would see uh you would notice why my element is taking unnecessary space. I want to remove this. So, I can actually give box sizing border box property. Okay? But, this does not work on margin. Okay? So, if I give it margin, and obviously obviously must not work in margin, but let me just test it with 20 pixel. You can see didn't work on margin. Okay? It didn't work on margin. You can see that it shifted up. It means it's fine. Okay? But, yeah, definitely. But, uh if you have other properties like padding, or if you have properties like border, it would definitely work. It would give spacing from inside. It means width would be 500 pixel only. It won't become 560 or something else. Okay? So, that's that's the thing. Okay? So, this is the property which I wanted to tell you. Now, I hope you understood this one. Now, we discuss about box model. This is basically a box model. We uh actually can go to this Okay, let me just give the margin again. Okay, let me just give the margin again. Uh I'll just say that margin 20 pixel. Okay? Basically, this is the box model. This structure is basically a box model which contains everything. So, if I just go to inspect, and uh you can see this is the box model. Right? You have margin, you have padding. Okay? You have border, you have padding, then you have the element. Okay? So, this is the box model. Right now, you can see my inner element is actually going to take maximum 4 5 440 by 440 because box sizing is border box. Suppose now I change it to normal, by default one. Okay? Then what would happen? Box sizing became 500, then padding was 20 20 20 20, and then border is was this, and margin was this. Right? That's what happened actually. Right? So guys, this was it. I hope you understood this part. Now I think I have told you all these things, and I have also taught you about basic styling. Now I have also you I hope you know one more thing, that is what is padding and what is basically margin. So margin is basically you can see that element shifted from outside. Padding simply means you can see element shifted from inside. If I say div has some padding, that means this blue area is my division. So div has some padding, so you can see that according to the padding the size changed. Okay, suppose if I want to modify my padding, I think from here only I can do this. So suppose I want to modify my left padding. So if I suppose Suppose if I decrease it, okay, the whole padding. So as soon as I decrease it, you can see that the padding as soon as the padding is zero or less than zero, it doesn't take less than zero by the way, you can see that extra spacing has gone has been gone. Right? If I increase my padding, you can see inner extra space is there. Okay, inner extra space is there. Okay, so that's how you also you can play around with the elements. Now suppose if I increase the margin, so you can see spacing from outside increases. Okay? So that's margin. Right? And from inside it was padding. Right? I hope now you know what's padding and margin. Okay guys, so today we discussed the basic properties, all the properties which we use in CSS. Complete things were discussed today. Now in the next video we are going to discuss about animations and also guys we are going to discuss about this CSS positioning, display, responsive design, and advanced styling. Right? So, guys, I hope you enjoyed this session. This was part one. If you have any doubts, please tell me in the live chat. And I'll wait for it. What is the full form of CSS, please? CSS stands for cascading style sheets. And I hope you were watching you weren't watching from the beginning. That's why you are asking this. Anyways, uh you can watch this video from the beginning. I have taught everything from the basics. What CSS where is it used and what makes CSS important? That is giving example of GeeksforGeeks going bankrupt. It won't, but yeah. If it didn't had CSS, it would have. Okay, so that's why we need CSS. Right? So, if you have any doubts, please tell me in the live chat. I'll wait for a few more seconds and I'll just do one more thing. Uh since I have done some stylings here. So, it's always the best practice. It's always the best practice to shift your styles in specific style.css file. It would have been a very huge file of a hun- hundred or thousand lines of code here. And I've simply imported it here. We don't need the styles tag here. Okay? And you can see that it would take the styles from that page only. Okay, by the way, this was just for reference. So, I'll just remove this. I'll let it be. Let it be only. Okay? CSS what level of people know in interview? I would say complete CSS because CSS is not something which is too much difficult. Okay? So, difficulty level in CSS is not so much difficult. So, that's why in interviews they ask the complete CSS. Either you have complete knowledge or you don't have any knowledge. Okay, that's why I would say complete CSS. Whatever elements, whatever properties you can see, you can just check out on your own. Now, I know it's too difficult it's too difficult for someone, even for me sometimes, to remember properties. But it happens with the help of learnings like after HTML and CSS you would learn JavaScript, right? So suppose initially you learned HTML so you created a very simple project out of it then you learned CSS. So you would create HTML and CSS based projects. Then you would learn JavaScript then you would create HTML, CSS and JavaScript based projects. Okay, so you can see that my older skills are being used again and again and again. So that would actually help you a lot. So definitely create projects on that and I would say complete CSS must be known. It's not like only basics of CSS is known and my interview would be won. No, no one wants a developer who builds very basic website. They want a developer who build a complete website. They They want a developer who know animations and transitions. So you must know complete CSS. Okay? And it's not difficult definitely. So it's like you must know complete CSS. Right? So then one more question is here, when will be the next session? So the next session would be I think most probably on next Friday. But if possible I would arrange it around in next 2 3 days. But I don't think so it would take another week only because we have some upcoming sessions at GeeksforGeeks on some other topics. So they would be given priority for now. Because they have been scheduled already, right? So now I think this is it. We can just end the session. I hope you enjoyed this first part. In the next part let me just tell you what else we are going to cover. In the next part we were going to cover static, relative, absolute, fixed properties which you might have seen. Okay? In CSS positioning. Then we have block elements, inline elements, inline block elements, flex, grid. Right? So you can see this P was taking full space. Span tag like it takes very less space. This happens because of inline and block elements. Right? Then we are going to discuss about responsive design. That means we are going to create a UI. We are going to create a very simple project in next video. And we are going to show it in desktop as well as in mobile view. How the UI changes. Okay, so we're going to create a very basic project in the upcoming video to actually tell you about responsive designs, how you can make a design responsive. That means look good in desktop as well as in mobile, right? Then we are going to discuss about advanced stylings like transitions and animations in CSS. And also we're going to discuss about pseudo classes, pseudo elements like you might have seen about before property, after property. We're going to learn about that, okay? Then we are going to take some basic examples like we are going to design a website, very basic webpage to learn all these, right? So that's it for today. I hope you enjoyed this session and I think we can end this now. So I will see you in the next one. If you have any comments or queries, you can comment below, right? So till then see you have a good day. Bye-bye.