Learn the basics of CSS | Web Development Ninja | part 2

1. Introduction to CSS: Welcome to the CSS module of this course. In this module we will learn about CSS. Css stands for Cascading Style Sheets. It is used to style the webpage. Now recall that whenever teaching you about HTML, I have shown you this diagram, which is if I have to clear different ends of a webpage, I will divide my work into three parts. The first part, I will structure the webpage. In the second part, I will design it with pitch. And in the third part, I will add the logic countered with patient. Now, we have seen that to structure the webpage, we use HTML markup language, not to descend it webpage we use CSS, also known as cascading style sheets. 2. CSS syntax: To write CSS, we have to follow some rules. We call that rules syntax. So first of all, we have to type the selected, which in this case is dP, dy. Now we will discuss more about selectors in the selectors lecture. After that, we have to open and close the curly brackets. Then we have to add the property name, which in this case is colored. And then we have to add the colon. After that, we have to add the property value, which in this case is red. And then we have to type this semicolon to end the statement, not to quickly recap. Uh, first of all, we have added this selector. After that, we have added this property selector. After that we have added this property value. 3. Using CSS in HTML file: In this lecture, we'll learn about how to add CSS and HTML file. So first of all, I will create a document named adding CSS dot HTML. Knowledge of gender, the boilerplate code. I will change the title to CSS. Inside the body tag, I will generate a P tag. And I will add here adding CSS and HTML. Now let us see if this document and copy the path. Considered my paragraph has appeared here. There are three ways to add CSS and HTML. The first way is the inline CSS. For that, I will add a style attribute here. Now inside this style attribute, I will add the property name, which in this case is colored. Then I will add the property value. So I will add here. Now I will add the semicolon. Now let's save this document. You can see a normal paragraph is in red color. This is the first way to add CSS. Now the second way is internal CSS. So I will remove this from here. So for that we have to add the style tags inside the head tag. Inside the style tag, we have to add the selected, which in this case is p. And then we have to open and close the curly brackets. Inside this curly bracket, we first have to write the property name for it. I will add here color. Now we'll change the color to blue. Now let's save this document. Reload the page. You can see at the paragraph has blue color. Not heard of it is external CSS. For that, I will remove this tile deck from here. Now let us save this document. And now let's create one more file. And I will name here styles.css. Now you can name anything you want here, but you have to add the dot CSS extension. Now inside the CSS file. First of all, we have to use the selector, which in this case is p. Then we have to open and close the curly brackets. Will discuss more about selectors in this lectures lecture. Now inside the selector refers to have to write the property name. So I will let hair color. Then we have to read the property value. I will get here green. I will save the document. And then we have to link these styles dot CSS file to this HTML file for that insect the head till, we have to use the link tag for that type here link. And then press the Tab key. After that inside the HREF attribute, you have to add the path of the CSS file. So now my HTML and CSS file IN same folder. So just I will let the name of this CSS file. Now let's save this document and reload this page. Now you can see it paragraph has green color. So to quickly recap, we have seen that there are three ways to add the CSS and the HTML file. The first way is inline CSS, the second way is internal CSS and it's hard way is external CSS. Css is the good way to write CSS and the HTML file because while creating large projects, we have to write a bunch of CSS code and we counteract all that code in one file. This is the good way in which we separate the CSS and HTML. 4. Selectors in CSS: In this video, we will discuss about selectors. So what I have done is I have created this HTML file. Now inside this HTML file, I will generate a boilerplate code. In the title I will get here selectors. Now inside this body tag, I will generate a p tag. And then inside this p tag, I will write here, this is a paragraph. Now let's say I want to style this HTML element. To stand this HTML element, the first way is I will add your style attribute. Then I will add to your color. Then I would add 200. No, I will see if this HTML document, after that, I will copy the path from here. Now you can see that the color of this paragraph is not. This is a fast way to style this paragraph. Let's say I have a very large as demo file. I don't want to add styles inline li here because I want to add a lot of styling this element. What I will do is I will remove this tile from here. Then I will save this document. Then inside the CSS file. I will write to my styles here. First of all, I will link this CSS file and now I will save this document and reload the page. Now can see the color of my paragraph is black because I haven't added any styles there. Now what I will do is I will go into this CSS file and then I will style this p elements to style this PLMN. First of all, I have to select this p element. The first way to select this p element is to use div tag selected. For that I will go into the CSS file. And then I would add here p. If, if I wanted to select a tag in from the HTML file, I just have to type this tag name. So that's why I have written here p, No, I will open and close the curly brackets. Then here I will get my styles. So for example, I will add here color blue. Don't worry if you don't understand this property. I will explain this poverty in the colors lecture for now just to understand that this property gives us the color into the text. So I will save this file. Then I will refresh this page. You can see a dark color of this paragraph has become blue. Now I will add your H1 tag and then I will add here heading. I will save this document. You can see at my heading has appeared here. Now I will tell this heading. Similarly what we have done here with the P tag, I will do that with the H1 tag. I will type in H1, and then I will open and close the curly braces, and then I will change the color to, let's say green. I have also added here semicolon to end this statement. Now let us save this document and reload the page, not Doctorate of my heading is green. The second type of selector is class lecture. What I will do is I will copy and paste this several times. I will write here two, here, three, and then I'm not here for now. I will remove this heading to heading one. I will save this document and reload the page. You can see the headings appear. Now let's say I want to style this all elements. The first way I can do this, I can add all of the texts and style here. What I'm trying to tell you is I will style all the tags separately. For example, if I wanted to stand the h2 tag, I will get here is two. And then I will let color. And then let's say brown. Then I have to do this for all the elements. Now for example, I want all of these elements to add the same style. This example I want to add the same color in all of these elements, which is brown. The first way I can do this is I will copy this and then I'll paste it here. And then I'll paste it here as well. And then I have to do this to all of the tags. In this way, I have repeated the same thing over and over again for all of the tags. And generally it is considered a bad practice to repeat the same things. So what I will do is I will add an attribute to all of the tags, which is the class attribute. For that I will press the Alt key and then I will click here, also here, and also here. Now we'll press the space and then I will not have class. This is the future of VS code. I can add multiple cursors. Let her class equals two and then double quotes. So let's say my class. You can add any value here. Now I will copy this and save the estimate. Not to select the classes, we have to use the dot key. So first of all, I will remove all of this from here. Then I will type a dot, and then I will paste the same thing, which I have copied it here. So basically, all we have to add the period key, and then we have to add the same value, which we have given in the class attribute. Now, I will open and close the curly brackets, and then I will let you have color. And then I've got here brown. No, I will save this file. Then reload the page. Now you can see that all of my elements have no brown color. Now let us say I have one more H1 heading. Then I will add here heading one. I will remove this all classes attribute knowledge, save this file, and then reload this page. You can see all of my styles are decided. No, I will zoom out from here. Then let's say I only want to style this heading. Heading. If I select this heading with the text letter, this heading will also be automatically selected because this is also an H1 heading. Then what I can do is I can add a class attribute here. And then I will add here heading class. Now I will copy this class from here. And let's see if the document, and then I will paste this class here. For now, I will remove this styling. Now I will open and close the curly brackets. And then inside these curly brackets I will add color. Now let's save this file, reload this page. Now consider this only this heading. This the right way to do this, but I only want to select this heading. And generally we use classes to select one or more type of headings or elements. What I can do is I will get here ID, and I will save this document. And then inside the CSS file to select the ID, we have to use the hashtag, hashtag knife and save this document and refresh this page. And you can see that nothing has changed here. What I will do is I will change this color to red. Now I will save this file, reload this page. You can see that the heading has separately styled using the ID selector. 5. Colors in CSS: In this video, we'll discuss about colors in CSS. First of all, I will create a new file named colors dot HTML. I will close all of the types from here. In the title. I will add hair colors in CSS. Now inside this body tag, I will type D. Then I will type here, this is a paragraph. Now I will save this file. To clearly see this, I will zoom by pressing Control and then most will for this final, I don't want to create a specific CSS file, so that's why I will stand using the internal CSS. We know first of all, I will select this p tag using the tag selector. If I write here color, now I will save the document. You can see the color of my paragraph is because I've added a color attributed. Now what color attribute does is agendas the color of the text. It doesn't change the color of the background. It only changes the color of the text in the backgrounds lecture, we'll learn how to change the debate on this p element. For now, just understand that the color buffer t only changes the color of the text. Now there are many ways I can add values in the color for d. The first way is I can directly write the name of this color, which is in this case I have done here. Now the second way is I can type the hex value, you know, hexadecimal value is a six digit color-coded. The first two digits represents the radical and the second two digits represents the green color, and then the last two digits represents the blue color. For example, if I write here 00, FF, B15, and then now if I save this document, now you can see that the color of my p tag has changed. The second format of writing color is RGB format for the syntax of writing, IJ format is RGB. And then we have to append close the brackets. And then inside these brackets, the first value we give represents the reticular. The second value we give represents the green color. And the third value will give represents the blue color. And all of the value ranges from 0 to 255. For example, if I write here 59. And then let's say 5795, saved a document and reload this page. You can see that my color has appeared here. Now, you don't have to remember all of the color codes. If you end up VS code. And then you can directly who are here, and then you will get this color picker. Now you can choose any color of your wish. Let's have on this good, and this is the color code of this color. Now if I save the document and reload this page, you can see at Micron has appeared here, the part of the off writing the value of the color is RGBA. Value. For that, I will add here RGB. The first three letters, RGB represents the red, green, and blue. The last eight represents the alpha. What I meant by alpha is two hundred fifty nine, thirty eight. Then 75. Know, I have to write here the alpha value. This value ranges from 0 to one. If I type here 0, then the color is totally transparent. If I add here, then the color is totally opaque. For example, if I write here 0.7, and if I save this document and reload this page, you can see the Alpha effects here. If I add a 0, then the color become totally transparent and we can't see it. You can see it. I can't see the color. If I add here. Now if I save this document and reload the page, you can see the color is totally visible. Next way of writing Kennedy's HSL value. So I will add here. Then the curly brackets. The first value represents the u and the second value represents the saturation. The third value represents the lightness. The value of this huge is in-degrees ranging from 0 to 360. If I add here 25, and then this saturation value is in the percentage, so I will not have 9%. Then the lightness also is percent daily value. I will add here a T6 percent knife and save the document and we load this page. You can see that the color appeared here. Now, I will show you a trick for that trick if I add here. And then over here, you can see at my color picker has appeared here, 95 change this color to, let's say, greenish type. And then if I click here, first time, I will get this hex value. If I click your second time, I will get this HSL value. 6. CSS comments: In this lecture, we'll take a look at comments in CSS. First of all, I will create a new file named comments dot HTML. Now inside this comments dot HTML file, first of all, I will generate a boilerplate code. And then I will let her comments. Inside this body tag, I will generate an H1 element. Then I will get here hurting. Now I will generate a style tag inside this head tag. Now, while learning HTML, we have seen what comments is and how to write comments in HTML. So to quickly recap, to write comments in HTML, we first have to type the angle bracket, then the exclamation mark, and then we have to type d double dash also, we have to type this to close this comment. And anything between this, we'll consider it as a comment. For example, if I write comments and then it will consider it as a comment and it won't render in the browser, not write comments in CSS, we have to type the exclamation mark. And then the then to close this comment, we have to type the exclamation mark. Now, anything between these well-considered as a comment in CSS. For example, if I write here command, it will consider this as a comment. 7. CSS backgrounds: In this video, we will discuss about backgrounds in CSS. First of all, I will create a new file named backgrounds dot HTML. Inside this file. First of all, I will generate a boilerplate code. Then I will change this title to background. Since CSS inside this body tag, I will generate the H1 tag. Then I will add here heading. After that average generate a p tag. And then I will add here, this is a paragraph. Now let's save this document and then copy the path from here. You can see at the heading and paragraph appeared here. Now I will type hair styling. Now let's talk about background since CSS. So CSS background properties allow us to style backgrounds of an HTML element. For example, if I write her body. Then let us discuss about the first bygone Verde, which is background color property. So I will add here background color. Then I will type a color name. Let's choose chocolate color. Now let's save this document. Then refresh this page. You can see that the background color of the body has changed to chocolate color instead of background color. If I have colored. If I save this document and refresh the page, you can see the text color of everything inside the body tag has changed to chocolate color. Now, I can also add background color in HTML elements like HL7 and P. For example. Type here. Then let's add the background color. Not accept this document. Then refresh this page. You can see that the background color of heading has changed to blue. Now I can't see these texts in this background color, so I will also change the text color to white. Now let's save this document and refresh this page. You can see the color has changed to white and then the background has changed to blue. Now let's talk about second background property, which is the background image property. For that, I will select a body tag. And then inside this body tag, I will add here a background image. Now inside this background image, I have to use the URL function. So for that I have to type a URL and then open and close the brackets. Now inside this bracket I have to use the quartz, so I will use the double quotes. You can also use single quotes. Now inside this double quote, we have to give the path of the image. Now you can see that my image and this file is in the same folder. So I can directly type the name of this image here, bg dot GIF. Now let's save this file, reload this page. You can see that my image has appeared here. No, I can't clearly see this text, so I will change the text color to white. For that, I will add hair color. Then I would type here, right? You can also give this text color one and p tag separately. But if I have a container, which in this case it's body, I can directly type color white and everything's at this body will have discolored. So now if I refresh this page, you can see that my color has changed to white. Now I can also give this background image in elements as well. So your task is to try this by yourself. Now by default, the background image property is repeated the image both horizontally and vertically. So to prevent this, we have to type here background repeat. Then we have to write here no repeat. If I type node repeat, then the, then the image we wanted to repeat in both horizontally and vertically. And if I want to repeat this image horizontally, then I can write here, repeat x. Now if I save this file, reload this page, you can see that my image has repeated horizontally. Now if I want to repeat this image vertically, I can add here repeat by nine. If I load this page, you can see at my image repeated vertically. Now we don't have any extra content in this body tag. So the image has cut from here, not the second background properties, background position property. So first of all, I will let her know that beat. Then I will let her background position. Then if I write here right, then if I save this document and reload this page, you can see at my background is in the right as well as in the top. If I type your center, save this file and refresh this page, you can see it now my background isn't centered. I can also set this background position proper D in this element as well in order to discuss about the background attachment over t. So if I type here bearing on attachment, generally we can type here two values. The first value, scrolling, if I type your scroll and then save this file and refresh this page, now you cannot see anything new here. For that. I will type here p, then I will type loading 25. Let us see. Now what I have done is I have copied and pasted this p tag two times. Now if I scroll this document, you can see that this image also scrolls. If I change this to fixed and then save this file and refresh this page. You can see it now if I scroll the document on the image is fixed here. Now, I also have a background shorthand property, which means I can replace this ALL background parties with a single property. So the syntax of that is, first of all, we have to add a selector. Then we have to type here background. After that. First of all, we have to add a background color. After that, we have to add a background image. Now we have to separate these properties with speed after a diverse background, repeat. After I have to type your background attachment. After that I have to type here background position. I will comment this part L. Let's see an example of using this bedroom shorthand property. I will let her body. Then first of all, I advertise their background. After that, I've typed here background color. Now if I don't want to add this background color property, I can skip this. So for example, I can directly add this background image property. So for that I will type that URL. And then I will type the name of the image. Then I have to type your space. And then I have to add this background repeat property. So I will let you know repeat. Then I have to add this burden attachment property. Now if I don't want to add this property, I can skip this from here. After it. I have to add this background position over T. So I will write here center. Then we have to add this semicolon to end the statement. Now let's save this file and then reference the speech. Now you can see that the background parties have applied here with this single shorthand property. It is very useful while creating websites. 8. CSS box model: In this lecture, we'll discuss about the box model in the CSS. Box model is very important concept to know NCSS, know every HTML element like a rectangular box in the webpage, contains many properties like margin padding, etc. Now I will sum up all of these properties in short, padding create a space between the content and the border. The border property, as the name specifies, adds a border on the element. The margin property creates a space outside the board. 9. CSS Borders: In this lecture, we will discuss about borders in CSS. So first of all, I will create a new file named borders dot HTML. First of all, I will generate a boilerplate code. Now inside this title I will write here borders in CSS. Now inside this body tag, I will generate a p tag. And then I will add here paragraph. Now let's save this document and then copy the path from here. You can see that the paragraph has appeared here. No, I will type hairstyle. Then inside the style tag, I will add the CSS. First of all, I will select this p tag. Then I'll add the border properties. Now, borders, as the name suggests, at the border on the HTML element. The first attribute in the border is the border style attribute. For that I would add here borders Thailand. There are many values for the border style property you can see here to the most used one is the dashed Solid and none. So for example, I will add here solid. Now, the second property is border-radius property. Then inside this property I can add values in pixel or some predefined values like thin medium, etc.. You can search on Google for more predefined value for border with liberty. Now for this example, I will let here ten pixels. Not that hard property is the border color property. Now, Border color property, as the name suggests, at the color of the border. For example, I will add here a black. Now let's save this file, reload this page. You can see that the border has appeared here. If I change this solid two dashed. Now if I save this file and the load dysplasia, you can see it. Notice the border is dashed. Know I will change this to solid. Then I will add this border width to five pixel. Now let's save this file, reload this page. You can see now the border looks good. Now I can also specify a border with two or four values. Like for example, if I got here five pixel to pixel. This means that the rate of border in top and bottom will be five pixels and the writ of border in left and right will be two pixels. Now let's save this file and reload this page. You can see at the rate of water and left or at is two pixel and top and bottom is five pixels. I can also add four values here. For example, if I add six pixel and let say ten pixels. Now let's save this file. Now what this means is the rate of the border in top will be five pixel to pixel in bottom will be six. Pixel in the left will be ten pixels. Now if I load this page, you can see the changes here. Now there is a border shorthand property, which means I can specify all of this property in a single border property. For that, I will add here. The first value of this border is the border of it. The second property is border style. Border color. I will comment this. Now I will show you the example of butter shorthand property. I will add here border. And then the first property is better read property. So I will add here, let's say three pixels. The second property is border style over t servlet here, solid property is the border color property. So I will add here. And then I will add the semicolon to end the statement. Now let's save this file. Reload this. You can see that the shorthand property works fine. Now there's one more property name, border radius over t. For that, I will add here border-radius. No border area suburb t is used to round the borders. For example, if I add our two pixel, then it will disappear. You can see that the border is a rounded form here. I will change this to, let's say 30 pixels. Now let's defense this file. Then you can see that the border is now rounded. These are very useful properties while creating websites. 10. Margins and Paddings: In this lecture, we'll discuss about Hoover he felt in CSS. First of all, I will create a new file name hovers dot HTML. Now inside this file, first of all, I will generate a boilerplate code. Then in the title level at here, hover effects. Now inside this body tag, I will create an H1 tag. Now, I will add here heading. Now let's save this file and copy the path. Now I will generate a style tag. Now let's talk about hover effects. To create a hover effect, we have to use a hover pseudo-class. Now we'll discuss more about pseudo-classes and pseudo-selectors later. To create a hover effect. First of all, we have to type this selector. Then we have to type colon. After that, we have to type hover. Then we have to open and close the curly brackets. And then we have to write our properties here. Now you can add many properties in hover effects. First of all, I will type here. And then I will type here, hover. Now I want to change the color. When someone hovers on the heading, I will get here color. Then I will type here the color name, let's say brown. Now let's save this file and refresh this page. You can see if I hover here, the color changes to blend. Now, I can also change the background color. So I will let her background. Then I will type your black, and then I will change this color to white. Now let's save this file and refresh this page. Over here. You can see at the background, color has changed to black and the color of this text has changed to bite. 11. Height and Width: In this video, we will discuss about the height and width properties in CSS. First of all, I will create a file name height and width dot HTML. Now I will generate a boilerplate code. Then in the title right here, height and width. Now inside this body tag, I will generate an H1 tag. And then I will add here heading. Now let's save this file. You can see the heading appeared here. Now I will open and close these title tag inside this head tag. Now let's select this H1 tag using the tag selector. Now let us discuss about the height and width property. So I didn't read properties allows us to add a height and width on the HTML element. Note that the height and width properties are inside the padding and border. To clearly explain this, I will add a border on the one. And then I will add here two pixels, solid red. Save this file. You can see at the border has appeared here. Now let's use the height property. Then inside this I can add the pixel value as well as the percentage value. So for example, I will add here a 100 pixels, save this file, and reload this page. You can see at the non-header heading has the height of a 100 pixels. If I right-click there and then click on this inspector. You can see the Chrome Developer Tools has appeared here. Now what I will do is I will click here. Then I will click here. It will come in the bottom. You can see at the heading which I've added in here shows up here. So I can click on this heading and then you can see here the all of the CSS properties which I have applied on the H1 tag. I can also change the height from here. And for that I will click here. And then by pressing the up arrow key, the value will increase. By pressing the down arrow key, the value will decrease. Now, I can also do this with a border. Then I can also choose the color from here. You can see at the color picker has appeared here, I can change this color. Note that these are temporary change. If I refresh this page, then all the changes will be gone. To set the changes. You first have to make the change and then copy all of the changes which you have done here, and then paste it into your source code. In order to save this file. Remove it from here. Save this file. Now considered, the changes appeared here. Now let's talk about rid the property. I will change this to 100 pixels and then I will type here. Then I can also add the pixel value as well as the percentage value in the root property. For example, I will type here 60 pixels. Now let's save this file and refresh this page. You can see at the writ is 60 pixels and you can see that the heading is overflowing here. If I write here overflow hidden, save this file. Now if I refresh this page, you can see at the phone part has hidden. I can also set this overflow in the horizontal and vertical direction. In this case, the overflow is from the horizontal direction. I will change this to, let's say, 200 pixels. Refresh this page. You can start with here. Now I can also set the rate in percentage value, like I can also add here 50%. Save this file, refresh this page. You can see that the 3D stuff 50, 50% percent is calculated from the parent element because the parent element have the rate of a 100%, the child element has automatically calculated. It's rid. Now I can also start the height 250%, it's here. Now let's save this file, reload this page. You can see that nothing happened here because because you can see that the rate of parent element is not the total width of this browser. If I hover here, you can see that the height of the parent element, it does not cover the full webpage. That's why in this problem occurs. Now I will tell you how to fix this problem in the responsive sex then, when we will talk about responsiveness. 12. Hover effects: In this lecture, we'll discuss about Hoover he felt in CSS. First of all, I will create a new file name hovers dot HTML. Now inside this file, first of all, I will generate a boilerplate code. Then in the title level at here, hover effects. Now inside this body tag, I will create an H1 tag. Now, I will add here heading. Now let's save this file and copy the path. Now I will generate a style tag. Now let's talk about hover effects. To create a hover effect, we have to use a hover pseudo-class. Now we'll discuss more about pseudo-classes and pseudo-selectors later. To create a hover effect. First of all, we have to type this selector. Then we have to type colon. After that, we have to type hover. Then we have to open and close the curly brackets. And then we have to write our properties here. Now you can add many properties in hover effects. First of all, I will type here. And then I will type here, hover. Now I want to change the color. When someone hovers on the heading, I will get here color. Then I will type here the color name, let's say brown. Now let's save this file and refresh this page. You can see if I hover here, the color changes to blend. Now, I can also change the background color. So I will let her background. Then I will type your black, and then I will change this color to white. Now let's save this file and refresh this page. Over here. You can see at the background, color has changed to black and the color of this text has changed to bite. 13. Styling a button: In this lecture, we'll create a simple and small projects using HTML and CSS. So first of all, I will create a new file named buttons dot HTML. Now I will generate a boilerplate code. In the title I will add here button. Then inside this body tag, I will generate a button tag. And then here I will let Click Me. Now let's save this document. Now you can see that the button appeared here. Now I will stand this button using CSS. I will stand this using the internal CSS. For that, I will type your style. After that, I will select this button. Now first of all, I will add a padding to this button. For that, I will let her padding ten pixels from the top and bottom and 20 pixels from the left and right-hand. Now let's refresh this page. You can see the padding has appeared here. Let's increase this padding to 15 pixels and 25 pixels. Now let's reload this page. Now you can see that the effects of padding here. Now let's add a background color. Then let's add on baryonic color. Let's save this file, reload this page. You can see the background current has appeared here. No, I don't want this borders. What I will do is I will type their border and then I will add here none, none. Save this file, reload this page. You can see the border has gone from here. I also want to increase the font size. For that I will type their font size. Then I will type here, let's say 20 pixels. No, I haven't talked to you about this font-size property. Basically, it increases the size of the font. You can research more on this property in the MDM ducts. Now let's save this file, reload this page. You can see that the font has increased. Now I want to add some properties. When someone hovers on this button, type here button. Then I will add a hover effect. In this, I will change the background color to something darker color. Now let's save this file and refresh this page. You can see the changes. If someone who was in this button, I don't want discursive. What I can do is I can type here cursor. Then I will add here a pointer. Now, I haven't taught you about discursive property as well. And basically the cursor over t changes the cursor when someone who was on this button, like if I save this file and refresh the page, you can see that the cursor has changed to 0.9. If I inspect this button, then you can see all of the styles which I've written here. I will click on this. Then I will click here. Basically it activates the hover style. What I can do is I can change this quantum property from here. And you can see the values of course are properties. You can experiment more values from here. These are simple button which we are styling. 14. CSS Positions: In this lecture, we'll discuss about positions in CSS. So first of all, I will create a new file named oppositions to the HTML. Now let's generate a boilerplate code. Then inside this title, I will add here positions in CSS. Now inside this body tag, I will generate a div with a class of container. So for that I will type dot container. And then I will press the tab key. It will automatically generate a div with a class of container. Now let's style this difference. So for that I will use internal styling. Then I will select this div with the class lecture. First of all, I will give this DBA height. Then I will give a height of, let's say, a 100 pixels. Then I will give a writ of a 100 pixels. Then I will add a border of two pixels. Solid. Knowledge, save this file and copy the path from here. Now you can see the div has appeared here. Now what I will do is I will create one more div with the class of channeled. If. Now I will style this div. First of all, I will select this div using the class lecture. And then I will give this a height of 50 pixel. Then I will give this a rate of 50 pixel. After that, I will give this a border of two pixel, solid black. Save this file and refresh this page. You can see a diverse appeared here. Let's increase the height and rid of this development. So I will type here five hundred and five hundred pixels. Also increased the item rid of this div. I will type their 100 pixel and then a 100 pixels. Save this file and refresh this page. You can see now it is looking good. Now CSS position properties are used when you want to position a specific element in the webpage. If I wanted to position this generally meant I will add a property of position. Then there are many values in the position property. The first value is positioned relative. So if I type a or position relative, then we have to specify the top CSS property. Type here top. And then I will type it 20 pixels. Save this file and refresh this page. You can see that there is a gap of 20 pixels from the top of this element. Nine-fifths inspect this element. Then if I increase this gap from top, you can see that changes in pitch. Now I can also add one more property, which is the left. And then I will add here 20 pixels. You can see that now there is a gap of 20 pixels from the left. I can also increase and decrease this value. Can also add the bottom value, as well as the right to property. The reason that this right and bottom property is not working now because I have already specified the top and left CSS property above. So if I refresh this page, you can see that now everything is normal. Another position, relative property positions, the element with respect to its parent element. It's talking about Persian absolute property. So if I type in your position absolute, not this element portion itself with respect to the body element. So if I type left, then 0. Now if I save this file and reference this billion not left, I will type here right. Now if I save this file and refresh this page, you can see it now this element has position itself with respect to the body. If I type her position relative in the parent element. Now if I save this file and refresh this page, you can see it now it has positioned itself with respect to its parent element, which in this case is the container, because I've added the position relative in its parent element. Notice your tasks to play with dispersion properties. 15. CSS Floats: In this lecture, we will discuss about floats in CSS. So I have already created a new file named floats dot HTML. Now inside this file, I will generate a boilerplate code. In the title I will get here floats in CSS. Now inside this body tag, I will create a div with a class of container. And then inside this div, I will create two more divs with the class of box one and box two. So I will do this with the help of amateur. For that I will type here dot box, dash dollar. Then I will type into two. Then if I press the Enter key, then you can see that I have gendered two more divs with the class of box one and box two. Now I will stand this do for that. I will type hair styling. Now I will select this container with the help of class lecture. After that, I will give it a height of 200 pixels of upper-right. I will give a border. And I will type here to pixel solid black. Knowledge to see if this phi there, then I will copy the path from here. Now you can see that D has appeared here. I will select this box. For that. I will type here dot box1. Then let's give it a height of 200 pixel. After that, I will give it a rate of 50%. I will give it a background color. First of all, let's save this file. And then the first this page, you can see that box has appeared here. I will also add the same styling into the box too. I will change this background color. Now let's save this file and refresh this page. You can see that two bosses have appeared here. Now if I type here, float left. Let's save this file and refresh this page. Not this box is in the left of this container. What I will do is I will type here, float right, save this file and refresh this page. You can see that this box is now in the right and this box is in the left. Floats are useful while creating navbar. You can see it in here. I can write the company name, and here I can add a navigation. No floats are very useful in early days. But now in modern CSS, we have flexbox and grid to make our life easier. We learned about flexbox and grid in the later modules. Now your task is to read more about floats property in the MDM. Ducks. 16. Creating a navbar: In this lecture, we will create this navbar using HTML and CSS from what we have learned so far. First of all, I've already created a new filename, navbar dot HTML. Now I will generate a boilerplate code. Inside this title, I will write here navbar. Then inside this body tag I will create a div with a class of navbar. Inside this div, I will create a more div with a class of logo. Now inside this div, I will create an H1 tag, and then I will type company name. Not this will be our logo. Now I will create a URL with the class of and navigation will be our navigation links. I will type here. Then inside this LI I will type a. After that, every type here. If the user clicks on this link, I want the user to stay on this webpage. For that, I will type here hashtag. After a double gender tomorrow, like tags. For that, I will copy this and paste it several times. In the second one I will write here, contact. In the third one I will write here about. Then end up fourth one I will write here, gallery. Let's save this file and then copy the path from here. Now you can see that H1 and UL tag has appeared here. Now let us style this. Afforded I will use internal CSS, so I will type your styling. Then here, first of all, I will select this navbar class. Here. First of all, I will give it a height of 80 pixels, and then I will give it a border of, let's say, two pixels solid and then black. In order to save this file, you can see the button has appeared here in order to style this. So first of all, I will select this logo. I will type here height. Then I will give it a height of 80 pixels. Then I will give it a rate of 20%. After it, I will add a background color. Let's add a background color. Now I will stand this navigation. For that, I will type here dot navigation. After I double-tap here, height, ATP. Then the written of 80%. Then I would add a background color of, let's say green. Save this file. Now I want this to be float in the left eye. I will apply here the fluid property. Then I will type your left. And then in the navigation, every type here float right. Now let us see if this file and refresh this page. The reason that this is not operating in left is because of the margin. So if I inspect this, you can see in the navigation there is by default margin of 16 pixel in both top and bottom. So to remove this margin, I will type here margin. Then I will type 0. Now you can see that margin has removed from the top and bottom. Now you can also see that there is also a padding in the left of 40 pixel. I will also remove this padding. For that I will type here padding. Then every type here is 0. Now you know, you can see that it is perfectly in there right? Now I will copy this to properties. And I will paste it here. Save this file, and refresh this page. I want to remove this dots from this LI tag. What I can do is I will select this LI tag. So to select this all electronics icon, the first way is I can give all of these electric subclass name. And the second way is to first of all select this navigation. And then after that I will add a space and then I will type here. Now what this property does is it will look for all the lines which are in the navigation. Plus. Then inside this alliance, I will add a property which is list style type. Then I will type here none. Save this file and refresh this page. You can see it all of the dots has disappeared from here. More values in this list style type, you can play with all of the values by yourself. Now I also want to remove this underlining in the ETag. For that first of all, I will select this a tag. So to do that, I will select this navigation for whatever type it. And then I will type here. Now what this does is it will look for all the alive which are in the navigation. And it will look for all the ETag which are in the LI tag. It will select this all a tags. No, I will type your text decoration. And then I would type here none, none, and save this file and reference this patient. You can see that all of the underlined has disappeared from the ETag because of this text to degradation property. No, I want this to be in centre. What I can do is I can select the H1. Then I will type here text align. Then I will type your center. Not accept this file and refresh this page. You can see that our text isn't center. Light tags. I didn't call them. I want to make this intro. What I will do is this LI tag. I will type here, float. Then I will type here right. Now let us save this document and refresh this page. You can see that now these all are in the right-sided. What I want is I want all of this in the left side. For that I will type here, float left. Knowledge, save this file and refresh this page. You can see it now, all of these Aryan left now I wanted to add the margin in their life, Dagan. So I will type here margin. And let's add 20 pixel and ten pixels. Save this file and refresh this page. You can see a margin has appeared here. I wanted to change the margin. What I will do is I will right-click here and then click on this inspector. Now I will click on this light area. Then I will change the margin from here. I will increase this margin. 30 pixels will be good. And then I will also increase this margin. And 20 pixel I think is good. What I will do is I will copy this and then I'll paste it here. Now I want to increase the font size of this a tag. Now I want to increase the font size of this a tag. For that I will type in font size 20 pixels. Now let's save this file and you can see it now it is looking better. Now what I will do is I will remove this background from here. I will remove this background-color. Also this background color. Then I will add a background color in the navbar. Then I will paste the background color which I have copied. Save this file, and then refresh this page. You can see the texture is not looking good. What I will do is I will change this text color to white in the Etag. Then I will also change the text color for the heading. Now let's save this file and then refresh this page. You can see it. Notice looking good. Now one thing I noticed that there are pieces from here. I will inspect this. Then you can see that in the body tag there are some margin from all the sides. What I will do is I will first of all select this body tag. And then I will type here margin. Then I will type here 0900, save this file, and then refresh this page. You can see it now it is looking good. So this was our basic nav bar which we have created using HTML and CSS. We don't use float. So while creating navbar in modern CSS, rather we use flexbox. We will see what Flexbox is and we'll learn about flexbox in upcoming lectures.