HTML CSS Full course for Beginners [2025] | Learn HTML & CSS | Full Stack Training | Edureka Live

Key Takeaways

Welcome to the HTML and CSS full course. Your complete guide to building the foundation of modern web development. In this course, you will start by learning HTML to structure web content and CSS to style and layout your pages. You will create responsive, visually appealing websites and gain the skills to build userfriendly interfaces from scratch. So whether you're just starting your web development journey or looking to strengthen your front-end skills, this course will help you confidently create and style websites. So before we begin, please like, share, and subscribe to Edureka's YouTube channel and hit the bell icon to stay updated on the latest content from Edureka. Also check out Idureka's fullstack developer course that equips you to build both the front end and back end of web applications using technologies like HTML, CSS, JavaScript and popular serverside frameworks and through hands-on projects you will gain the practical skills needed to become a highly sought after full stack web developer. So check out the course link given in the description box below. Now let's get started with our first topic that is what is HTML. So when it comes to front- end development, three technologies work together to build a website. HTML, CSS and JavaScript. HTML is the backbone. It provides the structure and content of the web page like headings, paragraphs, images, and links. CSS brings style to the page. It controls the presentation including colors, fonts, spacings, and layout making everything look visually appealing. JavaScript adds life to the web page. It's responsible for the behavior like handling button clicks, animations, and form validations making a site very interactive. So together, these three create a seamless user experience. Without HTML, there will be no content. Without CSS, it's just a plain text. And without JavaScript, it's static and non-interactive. That's why all three are essential for front- end development. So now let's have a look at the basic structure of HTML. The first thing here to keep in mind is that whatever you are going to write in your HTML page, it will always be included between these two tags which are HTML opening and the HTML closing tag. Next one is the head tag. So inside the head tag, we place all the information that is for the browser not for the user. Next inside the head tag there comes the title tag. So title tag is basically used to give the title to the document. So outside the head tags comes the body tag. The body tag includes all the things that will be visible on the web page. Everything from images to buttons to links and form tables etc. Everything will be included inside the body tag. So the most important tag that is included in the body tag is heading tag. Every web page needs a heading because heading is what makes your website visible. And then comes the paragraph tag. If you want to add any paragraph to your web page, you can write it under the paragraph tag. So now this is the basic structure of HTML document. So now we will move to our VS code and there we will start learning HTML practically. So now we are on our VS code and let's start HTML coding. So the first step is to open a folder inside your VS code. For that you will just click on files. Here you'll click on open folders and you can create a new folder or you can open the existing one. I have created one new folder that is HTML tutorial. I'll just select this folder and I have opened this folder in my VS code. So after opening this folder, what we are going to do is we are going to add some extension in our VS code. So the first extension that you need to add is live server. So this will help you to run your HTML code. So here you will see an install option. You just have to install that into your VS code. After that you will get this sign in your VS code. After that you can include one more extension that is auto close tag. So while you are working with HTML you have to deal with a lot of opening and closing tags. So there will be sometime when you'll be forgetting to close the tag and that will be throwing an error. So for making that easy you can just add this extension in your VS code that is autoc close tag. And there is one more extension that says HTML boiler plate. So this is the extension of HTML boiler plate that you can add into your VS code. So this will help you to generate the basic structure of HTML that is the boiler plate code. These are the basic extensions that you need to add in your VS code. So after this let us start by creating one file. So as we know we have added one extension that is HTML boiler plate. So for using that extension what you are going to do is you're going to click control shift + P. So after doing control shift + p you will get the option here that will be the name of the extension that you have added you will just click on create the boiler plate. So after clicking on create the boiler plate you will just see the three files that has been created here the HTML file the JS file and the CSS file. So one thing to notice here is whenever you are going to make an HTML document, whenever you are going to write an HTML code, you will always include that code inside the HTML file. Whenever you're working with JavaScript, you will always include that JavaScript code injs. And when you're working with CSS, you will always write the code inside CSS file. So these are the extensions for HTML, CSS and JavaScript file. So we are not going to work with JS and CSS today. We are going to focus on HTML. So we will just click on HTML. And here is the boiler plate code. Here is the basic structure of HTML document. Now let us just understand this. So for now you are not just going to deal with these meta tags. So we'll just remove those. And now this is the basic skeleton of our HTML. So the first line that here you can see is dock type HTML. So basically we mention doc type HTML to tell the browser what is the type of the document that we are working on. So basically this document type will be HTML. Now here is the next line which shows the language of the HTML document. Here en stands for English. You can see here is the HTML opening tag and this is the HTML closing tag. And inside the HTML opening and closing tag we are going to mention all of the content which we want to see on our web page. So the next tag is the head tag. So inside the head tag we have included the title tag. So title tag basically represents the title of the document. Here we can change this title. Let's say HTML tutorial. So I want this to be the title of my document. So I have changed it. And after the head tag we have this body tag. So inside the body tag we are going to mention all of the web content that we want to be present on our website or the web page that we are going to create. So that's it. We will just do control + s to save this file and we will just click on go live. So after clicking on go live. This is the empty web page. We have not included anything inside the body section. So this page is empty. But you can see the name of the document which says HTML tutorial. The file that we are working on is index.html HTML here and the document name is HTML tutorial. Now the first basic thing that we are going to do is we are going to see how the body tag works. So we are just going to include the P tag here and I'll just write hello world. So after this we'll just save this. We'll move to our document. Refresh it. So here you can see the hello world has been printed on the screen. So that means whatever you are going to mention inside the body tag will be visible on the web page. So that's it about the paragraph tag. Now we know about the basic structure of the HTML. Now what we are going to do is we are going to start with the tags. For now we will just comment out. So one more thing to learn in HTML is while you are starting with the HTML you should know how to comment out your code. So for commenting out what we are going to do is we are going to just select this and after that you need to press control and forward slash. So after pressing control and forward slash this line will be commented out and to uncomment again we are going to press the control and the forward slash. So this is how you comment out your code inside the HTML. So now we are done with the basic structure of HTML. We know what is the purpose of document type the HTML tag the head tag the body tag and everything. So now let's move on to the basic tags that are heading tags and paragraph tags. let's say bold, itallic, underline, list and everything we will cover one by one. So after removing the paragraph tag first of all we are going to work with the heading tags. So one thing to know about the heading tag is heading tag goes from H1 to H6. Now we will just mention here H1 right. So we will just write here this is my document right? So this is heading tab. So H1 stands for heading tag. Likewise, we'll just copy this and we will just paste it. We will just paste it six time to know the difference between H1, H2, H3, H4 and H5. So, we will just mention here. So, that's it. I have created these six heading tags from H1 to H6. We will just save this and we will just look at the file. So here you can see six time this is my document has been printed and here is the H1 and here is the H6. So H6 being the highest and H1 being the lowest. So this is how you provide heading to your web document. H1, H2, H3, H4, H5 and H6. So that's it about the heading tags. And after the heading tag comes the paragraph tag. So paragraph tag we have already seen. Inside the paragraph tag you can write anything. Let's say you want to write. So this is what I have written inside the paragraph tag. I'll just save this and we will again look at the output. So here the paragraph has been added. So that's it. This is the use of the paragraph tag. And after paragraph tag comes the break tag or horizontal line tag. Right? So before moving to the break tag or horizontal line tag, we are just going to add one more paragraph. So this paragraph will say this is the long paragraph that I have given. I'll just save this and we'll look at the output. So this is the paragraph that I have added. HTML stands for hypertext markup language and it is used to structure the web pages. So that's it about the paragraph tag. So the next thing that we are going to learn in HTML is about list. So first of all we are going to provide one heading using H3. We'll just write here example of list. So now we are going to understand about the list. So in HTML we have three different types of list. The first one is ordered list. The second one is unordered list and the third one is description list. So these are three types of list in the HTML. First of all we will start with unordered list. So here we will give one more title. Let's say using H3 we will just write we have just given heading as unordered list example. So to create an unordered list what you're going to do is you're going to use an ul tag. So inside the ul tag you're going to mention the list items whatever you're going to provide in the list. So to mention the list item the tag that we are going to use is li that means list item tags. Let's say I want to mention milk. So the next item that I want to mention is bread. So the next item I want to mention is let's say butter. And next I will mention cheese. Next I will mention chicken. And let us add one more item that will be mango. So we will save this document and we will just create one more list that will be ordered list. So first of all we will provide one heading using H3 and we will just write ordered list example. So inside the ordered list example we are going to mention the ordered list. And to create a ordered list you will use the O tag that stands for ordered list. So now again inside the ordered list what we are going to add is list items. We are just going to copy this and we are just going to paste it. We will just change the list item names. Let's say boil water. Again we are just going to add tea to the water. Then let's say we are going to mention boiled milk. So that's it. This is how you can create the ordered list and an unordered list. Last thing that we are going to mention is pour into cup and enjoy. We are just going to remove this. So basically to create an ordered list and unordered list you will just have to use two different tags that are ul and o. And for mentioning the list item it is same tag that is li. And now that we are done with the two list that is ordered list and unordered list. The third list is description list. So again we are just going to write the heading. The heading says description list example. So after this inside the description list first tag that we are going to mention is DL. So in order to create a description list you need to mention the DL tag. After that we will mention the DT tag. So inside the DT tag what we are going to write is HTML. After running the code of ordered, unordered and description list, you'll be able to see the difference and you will understand why there are three types of list. So inside the DD tag what we are going to mention is hypertext markup language. Again one more we will create that will say CSS and its description will be cascading style sheets. Okay let's create one more for JavaScript. So for JavaScript again we will mention DT and it will say JavaScript and then description will be programming language. That's it. We have created all three list and here we will just cut this and we will just paste it here. So this description list is starting here and it is ending here. So you have to keep this thing in mind that where you are starting the tag and where you are closing the tag. Okay. So that's it. We will just save this document and we will just look at the list that we have created. So first of all this is the unordered list. Example here you can see the difference that the pointers that we are getting these are the bullet pointers. So we are getting this we are not getting 1 2 3 4 and all. So this is why we call it unordered list. And in order list we will always get a numeric number. It will be the counting from 1 to how muchever items you have added. So this is the difference between ordered and unordered list. While in the description list what you're getting is there is the HTML and it is the description of that HTML which is hypertext markup language. Then we have added three things and its description. So most of the time we use ordered list and unordered list. So this is why so many people will just only teach the ordered list and unordered list and they will just ignore the description list. But in reality there are three types of list in HTML and these are unordered, audited and description list. So that's it about the list in HTML. Now what we will do is now we will move on to the links in HTML. So now before moving on to the list what we are going to do we are going to see some small small tags. So let us see the break tag first. So break tag will basically like we have this very long paragraph in our web page. But I want this paragraph to come in two lines. So what will I do is I'll just remove this and here and I'll just write BR tag. So break tag is a tag in HTML which does not have a closing tag. So you can just write this break tag and you don't have to mention any closing tag for the break tag and it will break the line from the between. So after that comes the one more tag that is horizontal rule tag. So let's say here I have mentioned the HR. The HR tag will create one horizontal line between these two paragraphs. So after that one more tag that is missing is italic tag. Let's say I want to make this milk itallic. So here I'll just copy this and paste this. So that's it. This will make this milk text as itallic text. And one more tag we are missing is bold tag or you can say strong tag. We will just write B and we will write the closing tag of B. So this will make this bread bold. Let's see. Ctrl S. And here you can see the milk is converted into itallic and the bread is bold here. So that's it. And one more thing we have added is horizontal rule. So here the horizontal line you can see between these two paragraphs. And the first thing that we mentioned is break tag. Here you can see this one paragraph has been broken into two lines. So this is the use of italic tag, bold tag, the break tag and the horizontal rule tag. So these are some basic tags in HTML. So now let us move on to the links in navigation part. So here what we are going to do after this description list we are going to give one H2 heading. Let's say links example. Okay. So inside this links example we are going to mention one P tag. Let's say we will just write you can use links to navigate. So that's it. We have given this paragraph. Now to mention link we have to use this tag which is a and we call it as anchor tag. So inside this anchor tag always the link is provided. So you will just open the anchor tag and inside the opening tag we will just mention the href that means what is the reference of the link here right so we will provide the reference of the link inside this tag and I'll just quickly copy one link and I'll just paste this link here so after this what we are going to do is we are going to write this target target blank and now we are going to provide the text on which the link will be provided. So we will just write visit edureka here. So now we will just save this file and we will look at the output. Here you can see I have this text of visit edureka and it is in blue and we will just click on this and we are redirected to this edureka page. So the thing is what we have mentioned here is target blank. So basically the use of this target blank is that it will make the link open in the new tab. Let's say we will not mention this. What will happen then the edurea site will be opened on the same tab on which we are working. So if we'll mention the target blank that will make the link open into the new tab. Here we can see that the Edureka's website is being opened in the new tab. This is the use of target blank. So this is how you provide link. And now let's move on to the next part which is images. Now we will learn how to add images in the HTML document. So that's it. I have provided one heading here that says images. Now what we'll do is we will provide one paragraph here again. So what I have written here is images can be displayed using img tag. So that's it. Here I have provided this paragraph. Now what we are going to do is we are going to copy one image and we will mention that image in the img tag. So let me just copy one image quickly. So that's it. I have copied my one image and now to add image I'll just use img tag and I'll just write img src. So basically we will give the source of the image inside this src and I'll just mention the link. So I have just mentioned the link of my image which I have copied from the web page and with this image what we are going to do is we are also going to mention one alt attribute. So what is the meaning of alt attribute so basically in some cases let's say the image is not able to load. So in that case instead of that image whatever I'm going to mention inside the all attribute it will be displayed instead of the image. So let's say I'll just write edureka. So inside the all attribute I have mentioned edureka. Now I will close the image tab. Let it save. So here you can see the image has been displayed. I have used this edureka image. And now let us see what is the use of this alt attribute. So what I'll do is I will just delete this. So I've just removed this link of the image and again I'm going to save this but I have not removed the alt attribute. So now let us look at the output. So as we know that I have provided edurea as the alt attribute. So now image is not able to load because I have removed the link and instead of that image I am able to say this edurea tag here. So that's it. This is the use of alt attribute. Now what we are going to do is we are going to move on to the next topic that is tables. So now what we are going to do is we are going to provide one more heading and we will just write table here. So again we will include one paragraph inside this we will write I have given one paragraph that says table help to organize data in rows and columns. Now let us create one table quickly. So to create one table the first tag that we are going to use is table tag. So inside the table tag we are going to mention the TR tag that stands for table row. This will give the row to the table and inside the TR tag we are going to mention TH that stands for table header. So inside the table header I'm going to write name and we are going to create one more table header. So the second thing will be age and then again one more header. So the next thing will be country. One more header. So the next thing will be occupation. So that's it. This is about the table header. Now table row. This we will close. Now again one more table row we are going to create. So again we are going to use the table row tag. Inside this we are going to mention the table data using the TD tag. So let us write Narija for one data. Then again we will write 21 and again we will write the country that is India. One more thing occupation we will write ector. That's it. This is the one data that we have included. Now again one more data we are going to include. So we will just copy this and we are just going to paste it. Again let us remove the name. Let's say let's say Alice here and 22 USA and let's keep it as software developer. Again we are going to mention one more data. I have mentioned three data inside this table row. Let's say one more data we'll mention to make it look good. And we are just going to mention here as these are the table rows and table data and table header heading everything we have added inside the table. Now we are just going to save it by control S and let us look at the output of our table. So this is the output of our table. The table has been created. Here you can see the table header, table row and the table data everything here the table has been created. So that's it. You can style this table using CSS. Further when we will learn CSS, we will learn everything. Now that's it about the basic tags. We have covered the table. We have covered list. We have covered images. We have covered heading. We have covered paragraph. So now let us move on to the media elements of HTML. So we will just include one more heading and we will just write here media elements example. So after mentioning this first example that we are going to take is audio example and again we will write just one paragraph. So inside the paragraph tag we are mentioning HTML allows embedding audio files with let's say we will just tell so this we have added inside the paragraph that says so audio can be added in the HTML document using this inline code tag we have to use one audio tag to add the audio but this code tag will allow audio to get added inside this HTML document in the inline way so we just don't have to mention it in CSS or Java JavaScript anything we can just mention it in HTML document. So after this we are going to apply one tag that is audio control that will help to control the audios. So now inside this audio control tag we are going to mention the source. So currently I'm not going to embed any of the audio here because I have to download one audio. So you can just mention this tag and you can just give any source to this tag. You can just provide the source link here. So you can just add this code to your document. You can provide the source of your audio here. Now after providing the source of the audio, we have to do one more thing. We have to mention here the type of the audio. That means it will tell the browser what is the type. So let's say my audio will be MP3 type. So I'll just write here audio mp eg. So this will tell the browser that what is the type of the audio. Now after that what we are going to do just in case the audio we have provided does not support we are just going to write one line here for that. So just in case the audio is not able to play. Right now we have not even added the audio but just in case the audio is not able to play this will be the line written on the document instead of playing that audio. So this is how using this code you can add any kind of audio to your web document. So only thing that you need to do here is you can add the source of your audio here. That's it. Then you can see. So now we'll just save this document and let us look at here. So here you can see this audio thing is visible here. Now if you will give the source of the audio you can play this audio. So while using the code tag and the audio tag you can just provide here. This is just a pseudo we got this playback speed and everything by adding the inline code and the audio tag. So this is how you can give the audio to your HTML document. So the next thing that we are going to learn about is video. So inside the media element we have audio and video as well. We will just provide this paragraph tag. We will just write HTML also supports embedding video using the code again. We will write same thing. We will just copy it from here. We will just change video. Now let's see. We can just again copy this. So for this audio I'll just give video and here also I'll just write video. That's it. Here also I'll just give type is video and the type of the video is MP4 let's say. So that's it. Your browser does not support audio element. We will just do it as video element. And the video tag is not closed. We will just close this video tag. That's it. We will just save it. And let us look at the output. So here you can see the audio example has been added. The video example has been added. Here you can see this. So by adding the video tag and the code tag, we are able to see this. So this is how you can just provide the source of the video. Here you can just provide the source of the audio and you will be able to see videos and audios onto your screen onto your web page. The last thing inside the media elements we are going to study is how to embed a YouTube video. Right? So to embed a YouTube video again we will just give the H3 heading. So we will just write here embedded YouTube video. That's it. We have given the title here. And there is one problem. We have just written everything inside the table tag. We'll just cut it from here and we will just close the table tag here. That's it. So again let's see how to add a YouTube video. So for adding a YouTube video first of all let me write one small paragraph. And here we are going to use an I iframe tag. So to play a video on the web page that means we don't have to get redirected to any other web page. We use the I frame tag. So let me write one paragraph here. This is how you can use the I frame tag to embed any YouTube video into your web page. So now we are just going to style the I frame tag. So we have to mention everything inside the I frame tag. Let's say we are going to mention the width. After width we are going to mention the height. So inside the height we are just going to give 315 let's say. And again here will be the source of the video that we want to mention. So let's say for now I'll just keep it normally empty. And after this we are going to mention the title right. So inside the title let's say we will write YouTube video player and we will just give the frame border. So these are some parts of CSS which I'm including here. So let's say the frame border will be zero. Now we are giving some permissions. Now after this we are going to mention allow full screen. Now we are going to close this and we are going to close the iframe tab. So this is what you need to mention if you want to include any YouTube video in your web page. So we can just do it via CSS or through JavaScript also. So this is a bit lengthy to include it in HTML. But I have just showed you one example how to add audio video and YouTube video in your HTML document. But you can just use JavaScript to fetch the video. You can just use CSS. You can just use the JavaScript or CSS to add any video or the audio. So for now I'll just comment this part out. It is just a basic understanding how you can use iframe tag and you can apply the CSS styling inside your HTML document. So basically whatever I have mentioned here these are the CSS styling. So if you are a beginner you just don't have to get into all this. I'm just showing you one example. So for now I'll just comment this part out and I'll just save the document. So till now we have covered the media elements, we have covered the basic tags, we have covered the tables, we have covered images and everything. So basically we have covered the basic things in HTML. Whatever you need to learn as a beginner. So these are all the things that you need to learn as a beginner. We have covered all those things. Now what we are going to do is there are few more tags. So in HTML there are too many tags. So what we will do is we will create one form and while creating that form we are going to learn some more tags like how to create text box, how to give input, how to create checkbox and everything. So while creating that form we are going to understand a lot about HTML more. So this basically we have covered the basic part of the HTML. How you can write tags, how you can give headings, how you can include the paragraph and everything. This is the basic part of the HTML. So we are done with the basic part of the HTML. Creating tags, creating tables, creating links and everything. Now we will move on to creating the HTML form. And while creating HTML form, you will learn a lot about HTML. So now we are going to create an HTML form. So while creating this HTML form we are going to explore more about tags and how to create checkboxes, how to create radio buttons and how to take input from the user in the text area. So these all things we are going to cover while creating this HTML form. So let's get started. So let us look at this code quickly. First of all, we know that why we have mentioned dock type HTML. This is the way to tell the browser that what is the type of the document we are writing. So basically this is the way to tell the browser that the language that we are using in our HTML document is English. Now now we have started this head section and inside this we have mentioned the title tag. The title that we have given to our document is complete HTML form. After that we have closed this head tag and then comes the body tag. So inside this body tag first of all we have mentioned this H2 that is registration form and after that we have opened one form tag. So yeah the next thing to notice here is while creating a form you are going to use the form tag. So inside this form tag we have mentioned label. So we have used this label tag for that. This is the opening tag of label and the closing tag of label. So inside this label the first label that we have created is for full name and the full name will be written beside that label. So the next thing here is to take input from the user. So to take input from the user we use input tag and the type of the input that we are going to take will be text type. Then we are going to provide one id to this and that id will be full name. After that we are going to write here required. So this required has been written here because it won't let the user to move forward without him typing his name. So if the user did not write his name and then they move on to the submit button. So that form won't get submitted because we have a required section there. So it is mandatory to fill that section of full name. After that we have added this BR that is break tag twice to maintain a distance between these two labels. Again after that we have created one more label. Similarly we have this input type as email and the label is for email. After that one more we have created for password. You can just look at this index here. Again we have mentioned the BR tag to create a distance between these both. And then we have this input type as email. We have this input type as password. And after that one more label we have created and that is for do ob stands for data point. And after that we have created one more label that is for gender. And inside this gender we have created this radio button. So this input will be basically a radio type. When we will run this code we will see what is the radio type. So inside this we have three options male, female and other. So basically radio type will let you select only one option. So you will have these three options that we have created which is male, female and other. So using radio button what we can do is we can select only one option from all of the options. So after that again we have created one label that is for phone. So you should just look at the tags we are using here. So for creating label we are using the label tag. For taking the user input we are using the input tag and for creating the space between two labels we are using the BR tag. Again the next thing here to notice is this label tag. We have created one label for address and here we have mentioned text area. So basically we all know what text area is. If you have a box in which you are going to write something. So that is basically the text area. So again we have provided rows and column to the text area and we have closed this text area tab. So after that we have one more label that is for country and in this we have created one drop-down. So how do we know that we have created drop-down? Because we have mentioned here option tab and we have given these options to the user and they can select one option from this. We have used the select tag here. After then again we have used the BR tag and after that we have created one more label for interest and the input type is checkbox. So the difference between the checkbox and the radio button is that in radio button you can only select one option while in checkbox you can select multiple options. So where we have created male, female and others. So there we have mentioned only radio button because you cannot select multiple options there. Right? But here a person can have multiple interest. So they can select multiple options here. So we have created the check box here. So after that we have also included one label for ré for a person who want to upload their resume. So for that we have kept the type as file. So this will allow the user to select the file from their system. So after that at last we have created one more check box that is for I agree to the terms and condition. So in this case this is also required because if the person will not agree to the terms and condition they cannot register the firm. So after that we have created buttons here. Input type is submit and the next is input type of reset. So this is it. We have closed the form tag, the body tag and the HTML tag. So that's it. This is the basic forms. So through this form what we have covered is how to use the label tag, how to use the input tag. And again moving forward we have learned about how to use the required tag as well. And then we have learned about how to create radio buttons and how to create checkbox. And after that we have learned what is text area how to create that. And after that we have learned how to create options using select tag. So this basically will provide you a drop-down. Again we have seen how to create a checkbox. And after that we have seen how to create a submit and reset. So here you can provide the value. The value you can write anything. Here we have written register and here we have written reset. We will just save this and we will just run this code. So this is the output that we have created. We have the full name section here. Here we have the email id, the password, date of birth. We can select any one option from here because they are radio buttons. And after that we have a drop-down of countries. After that we have check box of interest. We can select multiple option. So here if I am clicking on choose file, we can select the file and that's it. After that I again have this check box. I agree to the terms and condition and have two buttons which is register and reset. Suppose I have entered anything from here and I can register. It will show me please fill out this field because this is required field. I will enter anything here. So I'll just write nidhi at the rategmail.com. Right. So that's it. And then we will register. Okay. Password is also required field. We'll just write anything. then we will register. So that register button is not functional yet. So that will register your page. If we will click on reset then your form will get reset. Here the input value was given date. So we just got a calendar and from here we can select the date. [Music] So if any of you viewers are actually accustomed to web development coding, you will know that web development is made up of three elemental files. that is the HTML file, the CSS file and the JavaScript file. Now while the HTML file and the JavaScript file are responsible for the templating and the dynamic elements respectively, CSS is responsible for one thing and that is style. So how does CSS actually govern the style? Well, it does that by making sure how elements look like on a certain web page. Example, their colors, the font that is in there. It also helps in the positioning of elements and it also does a little bit of animation. Now let me just show you guys the power that CSS comes with. So let us firstly head over to our favorite website as a developer and that is Stack Overflow. So Stack Overflow as we all know has the answer to most of our questions when it comes to development. It's a pretty beautiful site and it's made beautiful with the help of CSS. So I have this extension out here which is a developers extension that comes with Chrome. And if I go to the CSS tab and just hit disable all styles, you can see that Stack Overflow is not a very beautiful site to look at anymore since the styling has been removed. The web page looks kind of redundant and normally anybody wouldn't actually go through Stack Overflow if it actually looked like this. So let us disable all styles again and we are back to the beautiful version of Stack Overflow. Another site that I want to show you guys to show how CSS can affect a certain website is called CSS Zen Garden. So in CSS Zen Garden, a single HTML file has been designed by many people out there online to look differently. For example, this is a theme that has been created by somebody. And then there is this mid-century modern theme which has been created by Andrew Lman. So let me just click on this and show you how different it is. And as you guys can see the background is different, the fonts are different, the pictures used are different but in the end it is the same HTML file. So this is how CSS affects anything that is residing on the web by governing the way it looks, the way things are positioned and of course simple animations. Now why is CSS called cascading stylesheets? Well, it is mostly because CSS has three manners in which it cascades. The first is through elements. So suppose we had written some CSS and we had attached it to a class called boxes and we had attached the styling of color equals blue. So this will turn every element on the HTML file with the class boxes into blue. Now this is how CSS is cascading. It is applying the same style to multiple elements through the use of the dotboxes selector. Above that CSS cascades through another manner and that is multiple style and one element. To explain this, imagine our boxes had some font written in them. And I want to turn the font of the first box yellow. So for that I can choose the first box. I can write some CSS that will make its font color yellow and then I can go ahead and apply it. Now it is important to understand what is happening here. First of all, the dot boxes styling is already being added to our first box out here and the second style is being added to the first child of the box. So in this way we have applied two different styles on one CSS element with one sheet. So that is the second way how CSS cascades. Now the third way how CSS cascades has something to do with the third word of the technology itself and that is sheets. Now CSS is stored in the form of a sheet in your local machine when you save it. Now this sheet might have some styling written in it and you can apply the sheet on multiple websites to achieve unique and different designs. So as you guys can see if you attach a styling to a certain web page with the help of the link tag it produces a certain design element and this design element will actually differ from each and every website according to how things are styled. So that is how sheets are made to cascade through different websites. Now before this people would have to do inline styling. So having a separate entity which handles your style kind of solves the problems that came with HTML in the beginning. Now let's talk about an important aspect of CSS and that is selectors. So selectors is CSS's way of selecting different elements on an HTML page. Now the two ways you can actually select elements is through classes and ids. Now if you remember my HTML tutorial you will know that there are certain special attributes that you can attach to any HTML element. For example, we are talking about classes and ids. So how are classes and ids exactly used? Well, as the name goes, an ID is used to identify a very unique element on an HTML page. IDs cannot be shared and ids have to be unique. On the other hand, a class can be added to multiple elements. This is for collective styling. So, as you guys can see, we can add the same class to three different elements and it will apply the style that is there in the class to those three different elements. In fact, you can add multiple classes to the same element too to achieve a very unique styling. Now the classes are selected with the dot functionality while ids are selected with the hash functionality. So to select a class called button you would write dot button and then write your CSS. And to select an ID called submit you would write #submit and then write your CSS in the curly braces. Now let's talk about property and value. So this has something to do with how CSS is written in itself. So imagine we have a web page and we want to turn the font color yellow. So our CSS is written in a property and value fashion out here. The property being font color and the value being yellow. Now you surround this property and value with curly braces. You add your selector and you have a style. In fact, you can add multiple types of properties and values into the same styling box to achieve a very unique look and feel. So what exactly is CSS? Well, CSS stands for cascading stylesheets and is generally used to control how HTML tags and elements are displayed on your screen. So this means basic styling of your web page is controlled by CSS. Now CSS was actually made to solve problems that were introduced in HTML 3.2. Now HTML 3.2 to gotten some new attributes like font color, background color, which generally was pertaining to styling of a element on a web page. Now, while this did add some very very needed functionality into HTML 3.2, it cluttered up your code as a developer and made your life pretty miserable. So, to keep the structure of your web page, which is the HTML, and to make the styling a different aspect, CSS was made by W3C. So W3C stands for the worldwide web consortium and CSS till date is still being maintained by the W3C developers. Okay. So that was a general introduction to CSS. Now let's move ahead. So this is the basic syntax of CSS. You basically have selectors which selects or targets the place that you want to attach your styling to. Then you have basic properties and value pairs. Now you can include your CSS into your HTML with a link tag while putting the href attribute as the file name or you can do some inline CSS but that's not actually recommended because that's the problem that we are actually trying to mitigate by putting CSS as a different file. Also if you don't want to create another CSS file you can do some internal CSS by putting in some style tags in your head tag and just writing some normal CSS to it. Okay so now let's see the different type of CSS selectors. So these are all the different type of CSS selectors and basically a selector is a way of targeting an element on a web page. So the star selector selects all the elements and applies the CSS that you would apply to it. Then if you would say div then it would apply your CSS to all the divs. Now div, p will apply to all the divs and paragraphs. Divace P will put your styling to all the paragraphs inside divs. Now going through all the CSS selectors is a pretty cumbersome job. So I recommend that you go through this page on W3 schools which has all the different types of selectors and the different types of pseudo selectors all listed out. So this will very much help you when you're doing your own CSS. So always keep this page open. Now just for basic sake let me just tell you about pseudo selectors. So we also have pseudo selectors which is defined something like this. So pseudo selectors include stuff like hover, active, visited and stuff like that. Now suppose you were hovering over an a tag. So you can say there is supposed to be some specific styling when you're hovering over it. So how would you do that? You would just say a colon hover and then you would actually specify the styling that you want. Now you can also find all these types of pseudo selectors out here and it's all listed out here. So a visited like select all visited links something like that. Now I also want to make you all aware of the box model that is very much used in CSS. Now box model has four things. The content, padding, border and margin. So content is the basic content of the web page that you want to show to you your general audience. Then the padding is the space between your border and the content itself. The border is a line that can be of any size, color and width. And then there's a margin which is this distance from the edge of the screen to the border. Okay. And now the box model looks something like this. So the content comes in between. Then comes the padding which is between the border and the content. And then there's the margin which is between the screen and the border itself. The screen edge and the border. Right? So that's how the box model works. Now the last bit of basics is the CSS units. So there are four kinds of units. Firstly we have the pixel. So pixel is represents any pixel on a device. So you could say something like font size is equals to 25 pixels. So it'll make it actually 25 pixels. Then there's also points which is mostly used in print media. And all you need to remember to use points correctly that 72 points equals 1 in. Now the last two types of units are relative units. Now these are relative to your current font size. So 1 em or 100% is actually equals to your current font size. So if you want something to be double your font size, all you have to say is 2 em. So these are how relative units work in CSS. Okay. So that was all the basics of CSS and how you select stuff and all the units. Now let's get ahead and code some of our own CSS. So for this time, I've actually created a bunch of HTML pages. And we're going to style these HTML pages by adding some CSS into them. And this will stand as good practice for CSS alone. Okay. So for the first page, we have this page called page 1. HTML. And it's a pretty basic page. Let me just open it up and show it to you guys. So this is what it looks like without any sort of CSS being attached to it. Now we're going to create some CSS and we're going to try and practice first of all selecting stuff in different ways possible. Okay. So firstly let's do some very random CSS. Okay. Firstly let's target all the divs in this HTML. So how would you actually do that? Well you'd say div by going selectors and let's actually save this as a CSS file first so that our syntax is colored properly. Okay. So that's a div. So that's how you select any element in CSS. Now suppose we were to say background color or rather just background it will be purple and the text or the color of the text will be white. So now everything inside a div will look like that. So now let's just save this as page one. This is saved as page one.css. Let's reload our page. and everything that is inside div now has a white text and it also has a purple background. Okay, now let's see how we actually select ids. So we select ids with the hash. So we have an ID called quote out here if you go and see. So where is that thing gone? Okay, so this paragraph out here that you see has the ID called quote. So we're going to select that and put in some of our own CSS. So let's see. Now that we've selected our ID, we can say suppose we want to change the font family. So we could say font family is Verdana. And you could also put in alternate font families just in case Verdana doesn't exist in your system like Gillands. Fine. So that's how you set up your font family. Let's also set the color to be black. Let's see what changes now. So this is the code that I was talking about. So that's font should change now. Let's reload. Oh yes, now the font has become verdana. And that's what we exactly wanted. And the text is also black knife. Okay. So how do we select classes now? So if you go here and see, we should have a class called movies, right? So all these have a class called movie. All these a tags. So let's select them. So first of all to select a class you say dot and then you say the class name. Now we could put in some random CSS into this again. So let's make the color. Let's keep it white. And let's make the background steel blue. Let's see. So where are our movies? Let's see where the movies actually exist. Oh yeah, Dota Splinter Cell and God of War. These are the movies. So these should now change. Let's save it. And now they have a background color of steel blue and they have a text color of white. And that's exactly what we defined out here. Fine. Now let's try out some other kinds of selectors. So suppose in the span out here we have this ID called author. So what if we only want to target that? What would we say? So we could say span and # author. Now you could put any type of CSS. So let's say text transform. So this is how you transform any sort of text and you could say uppercase. Now the author will be changed to uppercase out here and this is the author the pope Alexander part. Now watch that. Now it's just uppercase and we have selected it with this selector called span and # author. We can also do some other kinds of selecting. Let me just show it to you. So we could select the allies of the unordered list or the ordered list. So our skills is the ID. This is the ID of skills. So let's select them now. So we have skills and we could go the ordered list and then the LI. And what we want to say out here is the color will be purple. We can do the same thing for the unordered list too. Let me just copy that down. Put this here. Say unordered list. And let's say we change text color to white. Save that. Let's reload our page. So wait, first of all, let me uncomment this. Now let's save it again. Reload our page and see the differences. Now since we had given it a purple color, it's now all purple. And let me just put a background of white so that you can see it. Yeah, now these are purple and these are background white. We can do the same for the unordered list too. Let me just uncomment that. Let me also give it a background of purple or actually let it be like that. Let's just make it blue. Now SAS and Hamill have turned into blue as you see out here. This is the blue thing. Fine. Now that was selectors. Okay. Now let's go ahead and select some other stuff. So what if we want to select all the paragraphs that are after the H3 tag? So if you remember, we can do that by saying H3 + B. And let's say we want a background of black and some text color that is white. So color white. Not being very creative with my CSS at this moment because this is just about selecting. So let's see how that reloads. Yep. Now we have a color of white and a background of black. And that only selected the paragraph just after the H3, which is my favorite video games. Okay. We can also select every paragraph that has a class by just saying something like P and class. We don't even need to specify the color or I mean the class name. So you go background. Let's say we want to give a gray background. Let's see all the paragraphs with the class. So this is the only paragraph with the class. Now you can do the same thing for IDs. Just say ID out here. And let's see all the paragraphs with an ID. So this is the only paragraph with an ID. Okay. So now that we're done with selecting stuff, let's go and actually see how text can be transformed with the use of CSS. Fine. So first of all, I already have a page created for that. So this is going to be our page that we are going to use to see how text is transformed. If you see, I have an audit list with all the types of text transformations or the text stylings that I want to show. And we also have a paragraph out here which will show the basics box elements like the borders, margins, and paddings. So I'm going to demonstrate that through this P ID out here. Right? So let's get started. First of all, let's create our CSS file. And in this CSS file, we're going to save it. And we're going to call it page 2. CSS. Right? Then yeah, it's connected as page two. So let's get started. So first of all, let's target this ID with Lauram. So Lauram ipsum is just some Latin paragraph that is normally used in web development to fill in spaces with text where you can always come back and delete that text and fill it with something more meaningful. So for now we're going to be using this Lauram Epsom thing. So it's in a paragraph tag with an ID of Lauram. So let's go ahead and select it. So we're going to select it with the help of the ID. Call it Lauram. Now first of all let me just show you what the page looks like without any CSS attached to it. So this is what the page looks like right. So this is the part that we are going to target right now. First of all let's give it a background of black. Let's make the color of the text white. Let's me show you what that looks like. Okay. Right now let's give it some borders and padding. First of all to give a border. We could say we use the border property. Then we give three parameters. The type of the border, the size of the border and then the color. And you do it something like this. 3px, solid, red. Now apart from solid, there are a lot of types of borders and those include dashed, dotted, rigged, and many more. These are the ones that are just from the top of my head. So you can try out them out. And you can find other types of CSS border just by going to Google and saying CSS border types. So these are all the types of borders that you get and you can definitely check them out. It's impossible to show everything in one video like that. So let me just show you the solid type. So let's save it and let's see what kind of border we actually get. Let's close this down. Yeah, now we have this neat little border of 3 pixels in size and red in color. Now let me just show you how dot it would look like. So this is what dotted looks like and this is what dashed looks like. Fine and this is what dashed is. Okay. Now let's also give this thing some padding. Now padding exists between the content and the border. So I just explained the box model when we were discussing the basics of CSS. So I hope you remember that. So for padding there are four parameters actually the right, top, left and bottom. So you can define your padding something like this. You can go 13 pixels, 13 pixels, 13 pixels and 20 pixels. Now these are just very arbitrary numbers. But what I want to explain is that this first part will mean that there's 13 pixels of padding from the top and then we move by in a clockwise fashion. So this is on the right, this is in the bottom. So 13 pixels of padding at the bottom and 20 pixels of padding on the left. Now you could also say this really easily if you want to give equal amounts of padding. Suppose now this means that there will be 13 pixels of padding on the top and bottom. And this second part would mean that there's 13 pixels of padding on the left and the right. And if you just put one digit that means there's 13 pixels of padding all around it. Now let's go and put these different paddings around Laura Mipsum. Now it looks much neater. We can also put a margin. So let's put a margin. And the margin also works in the same way. So suppose you were to say 5 pixels. That means it would give a 5 pixel margin all around your content. If you were to put say 10 pixels and 20 pixels, this means that 10 pixels of margin on the top and bottom and 20 pixels of margin on the left and right. And there's also another keyword that I want to make you aware of and that is auto. So what auto does is it gives equal amounts of margin however you specify it. So out here it'll give 10 pixels of margin on the top and bottom and equal amounts of margin on the left and right. So let's see how that works. Yep. So that's how it changed it. Now that was all about the box modeling. So let me just remove this part from the HTML and let's remove this part from the CSS. Now as you guys can see I have this ordered list out here. First of all let me reload the page. Now I have this ordered list out here which shows us all the types of styles and weights and sizes that I'm going to be showing right now and this will include a lot of the units that we discussed like m points pixels and percentages. So let's move ahead. So to select these I'll be using these ids. So let me just remember the first four IDs is normal, itallic, oblique and small cap. So let's go ahead and create them. So firstly let's select our normal ID and say what are we going to try and show here is font style. So all you have to say is font style is normal. So normal basically means that the font style will be normal instead of something bolded. Then I think we had italic. So you go font style itallic. Then we also had oblique. So we go font style oblique. And we also had small caps. So let me just see that again. Yep, it's small cap. So you go small cap and what are we trying to show in small cap is the font variant. So font variant small caps. So let me just reload and see how that changed stuff. Okay, so font style normal just stays normal while itallic and oblique are almost similar. And then in font variant small caps. This is how it would look like where the first letter has a biggerish font size and the rest have a smaller font size but everything is in capital. And next is the font weight. So let's see the ids. It's normal, bold, bolder. So let's go with that now. So firstly we have normal. So font size is the size or weight. It's weight. So font weight will be normal. Next part is bold, bolder, lighter. Okay. So we select bolder like that. We go font weight is bolder and we can say again let's after bolder it's bold. Okay we so w bold and you go font weight is bold. Let's see how that changes stuff. So yeah, bold is bold and font weight bolder is slightly more bolder while font weight normal is absolutely normal. Right, time for some more. So the next is the font size which goes from extra large, large, medium, small, extra extra small. So let's do that. So first is extra extra large and this is the font size that we're talking about. So it's extra extra large. There's also extra large. So extra extra large looks something like this. While only extra large looks something like this. Fine. Then we also have large. So font size will be large. So that's font size large. Next we have medium, small, and extra extra small. So medium, small, and extra extra small. So this is going to be font size medium. This is going to be font size small. And this is going to be font size extra extra small. So let's see how that changes stuff. So this is extra extra small. This is small. And this is medium. Now the next thing that we're going to see is how points work. So our size is going to be 25 points. So instead of just doing that, let me just change extra extra small. And let's say it's 25 points. If you remember that one point is around 2 in. So that's how font size extra extra small would look like if it was 25 points. Then we could also say the font size is 150%. So that shows us how percentages works where 100% means the current font size. Look at the change. And that's how 150% means. The next thing that we want to show is line height. So let's say what is the ID? Let me just check the ID. So the line height ids are line normal, height 25 point. So let's just select one line normal. And this is going to have a line height of normal. Let's put a semicolon. Save it up. And that's how line height normal is. That is the normal line height. Now you could say your line height is 25 points. And that's how it would change. Also, you could say your line height is around 25 em or just 5 em. Let's say that. And that's how it would change even more with EM with 1M being the constant font size that we are using. Or you could say line height is 200%. That is basically twice of what our line height or font is. So that's how it would change. Right? So that was all about text styling. Now let's move ahead and see how positioning and stuff takes place in CSS. So for positioning I have again gone ahead and created this page 3.html. So in here we will be including a CSS page called page 3.css. So let's go ahead and create that. First of all we have to set this to CSS. save it as page three and let's get started. So first of all we have three types of positioning in CSS absolute, fixed and relative. So first of all I'm going to show absolute positioning to you guys. Now before I show absolute positioning let me just show you guys how text and stuff can be centered first of all. So let's start doing some random CSS. So first of all we are going to target this ID called container. So let's go hashtag container and let's go to background some random color. So for color picker we just go color picker. Let's give us this background. Go. Okay. That's the background we chose. Let's also give it some borders. Border will be 2 pixels solid and black. We can also set up a border radius. So border radius gives you a curved border. So you could say border radius is around 5 pixels let's say. Now let me just open up the HTML file that is concerned at this moment. So this is page three. Okay. So this is with some CSS. Now let me just uncomment that CSS first. So this is what our page would look like without any sort of CSS. Now this is what it looks like with the CSS that we just included. Now to make you aware of how box radius works, let me just uncomment that first. Let's comment it out. So box radius should not work. And we should get Yeah. Now if you see, let's zoom in out here. You see that this border is pointed. Suppose we don't want that to happen. Let's remove that first. And let's uncomment this. Save it. Let's reload. And now we have this slight little curve border which looks much neater. Okay. Now we can also center stuff. So a neat way to do that is let me just show it to you. Let's take this part called centered. Now to center it, let me just give it a first background to make it look different. So this background will be let's say 89 CFF0. That's our color. Let's see what our color looks like. So that is the color that we are going to center. Now let's say our width is going to be we can set the width of elements like this. So you say width is 50%. And then you go margin is going to be auto. So what does auto do? It'll put a equal margin on all size. Let's reload our page. Yep. And now it's centered. We can also center without actually centering the element. We can just center the text by just saying text align and center. Fine. Now that will remove the background and just keep the text out here. So that's exactly what we wanted and that's how you align your text. Okay. Now let's move ahead with absolute positioning. Now absolute positioning means positioning based on the document itself which means this whole web browser. So a browser is basically the document that you are actually manipulating. So it's called document object manipulation if you've heard of that term. So let's go ahead and let me just show you how absolute positioning works. So first of all, we have this element called top left and we're going to try and put it on the top left. So let's select that first. So you go top left. Now let's give it a background. Okay, that'll going to be the background. Let's also give it a border. So let's border be one pixel solid and black. Let's say now to position something with absolute positioning all you have to say is position is absolute. Now let's also keep the width around 200 pixels and the height also around 200 pixels. Let's save it. Let's see how stuff changes. Let me just zoom out. Yeah. So that is our element. So this is what top left and bottom right is going to look like. Now we are going to try and select this element and put it in the bottom right of this parent. So let me just show you how that is done. So to select that I've already created an ID for it and it's called bottom right. Let me give it a background of white and you say the position is absolute. Now we want to change the position to actually inside the element. So we have to say it's going to be 0 pixels from the bottom and also 0 pixels from the right. So since it is has absolute positioning, it's going to position this inside of this. So first of all, let's give it a background of white and also make the color black. All right. And now we have this right where we want it. Now there's also something called the Z index. So Z index is what comes first on your screen basically. So if you have multiple things that are stacked on top of each other with absolute positioning, the one with the most Z index will be the one that is shown on top. So you could set a Z index like this and say the Z index is five. So anything with a Z index of four will actually come underneath this thing. Right? So that was all about absolute positioning. Now let's go ahead and do some fixed positioning. So for fixed positioning, we have this ID called fixed which contains a paragraph saying I'm staying right here. So let's select that first. Let me just remove all this stuff so that it's not cluttered anymore. Let me reload the page. Save it. Reload it. And that's how. So I'm staying here. First of all, this is what it's going to change. Fixed positioning, right? Is that what we called it? Fixed position. Okay. Now first of all all you have to say is position is going to be fixed. Now let's make it more prominent by giving it a background of black and a text color of white. So let's see this has become black and position is fixed. Whatever I do if I'm scrolling it just stays there. It doesn't really matter what I do to this thing. Okay. So that was all about fixed positioning. Now the next thing that we're going to see is relative positioning. So for that I already have two elements created. So let's say these are the divs which says this it's going to be relative. So relative positioning as I was just saying is positioning based on the relative position of the element. So let me just show you. So relative one. Now let's go to background first. So let's just select some color. Let's make this green this green out here. Okay, that's going to be our color. Let's give it a border of 1 pixel solid black and let's say the height is going to be around 100 pixels. Now, we're going to select another element and position it relative to this element. Okay, so that is this element right out here. It's going to be relative to. So, to set something with the position of relative, all we have to say that the position is relative and the le rest of the CSS is just arbitrary. So, let's say left not padding left. So you want to position it somewhere left of it. And the positioning is going to be relative. So 20 pixels from the original positions, 20 pixel to the left from the original position, I mean. And you could say from the top it would be around 30 pixels. You could also say - 30 pixels. Move it the other way around. Let's give it a background. I'm already given it the background. Okay. Let's give it a background of yellow. So you say background equals yellow. And you could also get a border and say 1 BX solid blue. Let's get a blue background. Okay. So, this relative layout is going to be positioned relative to this thing. Fine. Let's just reload and see. Yep. And that's how relative positioning works. Now, this might just not look neat at this moment, but I'm trying to drive a point home. Fine. Okay. Now, let me just see uh if I have dog jpg. Okay. Okay, there's a PNG file called Edrea. So, let me just show you something. First of all, let me just remove everything from here. Okay, so now that our things are less cluttered and let's me just rename this now to the image that is already there. So, edurea.png and edurea.png. Fine. Let's save this. Let's see what our page looks like now. So this is what it looks like. Now you can float stuff like images to the left and right. So let's just select the image tag and suppose you say float them to the right. These will float everything to the right. Now that's how you position stuff or images with the float tag. So I guess that was all about positioning of stuff. Now let's move ahead. Okay. So in this part we are going to be learning about overflows. So for overflows what we can do let's say let's go back to page 2.h. html and we have this text out here or this unordered list and this list is pretty big right first of all let's open up a new page or rather let's open up okay wait let me just close these out so let's save this as page 2 CSS or rather let's just call it something new first of all let's set this to CSS right let's save it and let's call it overflow Now, what I want to show you guys is something really cool. So, let's select the order list. So, that's what we're going to select. Let's say it has a width of around 100 pixels. It has some padding from the top and right. So, let's get some padding of 10 pixels and 10 pixels all around rather. Let's give it a margin of 100 pixels and auto. So, I'll bring it right to the center. Let's see. So, it was page two that we're fiddling around with. So, this is page 2.html. Now, let me just replace this with overflow. CSS. Let's see. Now, yeah. So, this is what it looks like. Now, if you see to scroll through this list is quite cumbersome because you have to actually scroll like this. Let's get a background also. Background is going to be black as I just love black. And the color of our font is going to be white. See how that change. Yep. So this is what it looks like. Now what if you do and say max height is equals to 500 or rather only 200 pixels. Yeah. So that doesn't really tell much. So if you say overflow is auto, you get a scrolling bar. Or you could say overflow is scroll. Let's remove this max height. Now you see we have these little scroll bars out here. And that's what exactly overflow does is basically shows us the items and you can scroll through them. Yeah, basically like that. So if you would say that the width is only suppose 50 pixels, let's say make this even smaller. Yeah. So that's how now you have this little scroll bar that lets you scroll through stuff. So that's how overflow works. Okay. Now let's look at some pseudo selectors or some pseudo classes that we can select and style. So first of all let me open up the page that is going to be responsible for that. So we have this page out here that I've created. Now it also has some new tags that you might be seeing. These are some HTML 5 tags. So header tag, nav tags and then the main tag. These are just some new tags that you see in HTML 5. And you can also target them through CSS3. So targeting them is pretty easy. But what I want to show is something pretty cool. Let's save it first. Let's create a new page. Let's call it CSS, right? So let's save this first as page five. CSS. Okay. So now it's time to practice some more CSS. And we'll be doing it on this page that I have created. So this page is kind of a big page to be honest. It has quite a lot of paragraphs, quite a lot of links, a few images also, I guess. And they use a lot of the HTML 5 tags that have been newly introduced like the header tag, the nav ID or the nav tag, the main tag. We have section tags and a lot of other tags like these. Now these tags can also be selected with the help of let's say CSS3. That's what we are learning. Okay. Now let me just remove this part because we won't be needing that. Now let's go ahead and save our content and let me just show you what this actually looks like on the web page. So let's go ahead and open up page 5 and this is what it looks like on a web browser rather without any CSS attached to it. So let's transform this thing with the help of some CSS. So firstly we've created this page called page 5.css and we've already attached it to this page out here with the link tag and the href attribute. Now let's get started. So first of all let me just actually make use of some pseudo selectors. So we have already discussed pseudo selectors while going over the basics. Now let me just show you how they work. So a hover is going to target all the alinks while we are hovering over them. Now when we are hovering over them, we want the background to become black and text to become white. Right? So let's save it. Let's reload. Now if we hover over these, the background becomes black and the text becomes white. Right? Now the same thing can be done with a lot of other selectors. Like this is active. So when you click on a link, that means it's going to turn like that. So let's save it. Let's see. Let's reload our page first of all. Now you see when we hover, nothing happens. But once we click it, it becomes that black and white kind of thing, right? We can also do this for visited. And that will actually change the link when once it's been visited. So if we go and do this, open link in new tab. Well, it's not working out here, but if there was actually a database connected, you would actually see this tool. Now suppose we want to select our body. Let's give it a background. First of all, get out the color picker. Let's give it a nice green background. Okay. Now, that's going to be our background for the body. Now, we also have a div with the ID of rapper. So, let's go ahead and select that first. So, we say rappel. Now, let's give it some CSS. So, we going to say margin is going to be zero and auto. Now, whenever you say zero, you do not need to actually specify the units. So, we can just do that. We'll give it a background color of white. Then we'll give it a width of around 800 pixels. We'll give it a height of around 1,000 pixels. Okay. Now let's save that and let's see what it looks like now. So this is what it has turned to. Now we can also do some more stuff. So let's select some HTML 5 elements like the header tag and let me just show you that CSS still works as we wanted it to. So let's give it some simple padding around 0 pixels on the top, 0 pixels on the right. Then we want to give some 10 pixels on the bottom and 0 pixels on the left too. See what changes now we got that little change. We can also select stuff like with the IDs as I just showed you. Now let's select the navigation which has the ID of horse nav. Let me just check if I'm right. Yep, it's called horse nav with the N being capital. Now we can say stuff like so there's also the display attribute. This shows how elements will be displayed. Now they can be blocked or inline block which means it'll be converted into an inline element. Now we could say display is blocked and you could just give it some background just to make it more apparent. So let's give it a background color of black and make the color white. Let's see. Yep, that's how it's selected. Now, you can also give uh pseudo tags like this one out here like visited to ids too. So, let's say once we're hovering over the navbar, we want this to happen. So, let's save it. Now, if we only hover over it, will the change happen? So, that's how that works. Now, let's go over and see some word spacing. Now word spacing is used for mostly specifying the words. So let me just remove some stuff from here. First of all, let's remove all this. Right? Let's remove the header tags. And we just need this part where we have all these paragraphs. So I'll be targeting the first paragraph to show you all word spacing. So it's going to be this one out here. Right here. Fine. Let's save it. Go ahead here. Reload the page. Now this is what it looks like. Let's remove everything that we have already created and let's just select par one. I hope that's what it was called out here. So it is called power one indeed. Now we can go word spacing and just say let's say let's give it 10 pixels between the words. Right? So the spacing between these words in this paragraph should change now. Now now that we've saved it, let's go ahead and reload. So yeah, now you can see that the word spacing for this this out here is much more different. Now we can also do letter spacing the same way. So let's select paragraph 2 for that. So for letter spacing all we have to say is letter spacing and then we could say something like 10 pixels. Now this will specify the letters and how they are spaced. Now you can see it looks this horrible thing is having 10 pixels of letter spacing. Also put some word spacing into this. So let's see how that looks like it's for word spacing of 20 pixels and make this even more ugly. Yep. So that's what it would look like with word spacing and letter spacing. So that was just for experimentation purposes and you can use that whenever you feel free to. Okay. So another property that I want to make you all aware of that is in CSS is a clear property. So the clear property makes sure that nothing actually appears before it. So in this case the footer tag which is right about here which says only the copyright part. Now it is shown here. This is the footer tag that we're talking about. So we want to say something like let's say so you can say clear and both. So that's how you specify clears. Okay. So let's give it a background color of black. Let's also say the color of the text will be white just to make it a bit more prominent. Yeah. Uh so nothing actually appears before that. So that's how you use clear now. So there's also style types also list style types. So let me just see we have these lists out here first of all which says random 1 2 3 random 1 2 3. Now let's say first of all let's convert this into an unordered list. So find all that's going to replace that with unordered list. Right? I just want to show it with unordered list first. So let's say let's select all the uls and let's say list style is going to be none. Now if you see out here we have these bullet points and now we don't. Okay. So you can also do these with ordered lists. So let's go back and let's do controll and ul find all. Let's select them. Let's make them os ordered lists. Let's see. Now o doesn't work with list type none if you just realized. Now we can do something like alpha lower alpha. So let's see that how that works. Okay. So for lower alpha we have to say list style type. Please remember that. That was my mistake right now. Okay. If you have to select the OS again. Now you see that we have these list types that is saying with small caps. Now there are other stuff like lower latin. Lots of lower latin. So let me just show you what that looks like. Save it. Okay. That doesn't really change because I don't think I have Latin installed. But we can also go Greek. There's bunch of stuff that you can do. It's pretty fun. So I have Greek installed now. It goes alpha, beta, gamma instead of ABC. And that's how you can change stuff. You can also change the position of the list style. So list style position you could say outside. So let's see what that means. And doesn't really change much out here, but that's one of the properties that I just wanted to show. Okay. Now you can also place contents before an element. So let me just show you how to do that. Let's clear all of these things now. So let's say we want to select power one and say so this is going to be a pseudo selector again. So you say after you say content and your content is going to be let's say add the rate. So all these add rates are going to be before this little thing out here. So let me just show you the change. Yep. So since we said after it has all these atter rates after but if we say before this is how it'll change. So now it's all before them right okay now let's go ahead and see how we can use the nth child elements. So for that we're going to select our ul again. Actually let me go ahead and delete everything first of all. Okay. So let me create another HTML boiler plate and this is going to be called list. First of all, let's say we have an unordered list with a bunch of list items. So allies all around. Let me just copy that down and paste it a few times. Right. So now we have all these list items here. Let's just fill them up with some random text. Okay. So let's just say something random like cats. So let's save this. Let's go out here. Now we have these things called cats. Okay. So what if we want them to have alternate paragraphs? I mean alternate background colors. So first of all, let's go ahead and select the allies and give them a background. Let's say this gray color that I have selected. F7 F7 F7. Now you see we have Okay, this doesn't seem to be working. All looks like I've deleted my link tag. So that's why the CSS was not working. So let's see. Now we have that. Okay. So first of all, let's go back and change this to F7 F7 F7. Right? This will give it this gray color that you see out here. Let's also give it the width of around 360 pixels. So that'll bring it there. Let's also give it a margin of 100 pixels from the top and equal on the side. Let's bring it to the center. All right. Now suppose you want to say li in child and you could say something like 2 n. So this will select all the even childs and you could say they have a background color of white. So let's see how that changes things for us. Now you see that all these things out here have a alternating background color where it's gray, white, gray, white, gray, white. And that's how you select all the even childs. Now you could also select the first child by saying first child for that we do not really need this two end counter and now only the first is black. You could also say last child and now the last will be white. That's how stuff changes with CSS. Okay. Now you can also change the first line. So let's go ahead and change our HTML up a bit. So, let's create a paragraph and it's going to have some Laura meips in it. So, let me just show you something really cool. Let's delete all of this stuff. Let's select our paragraph and we're going to say the ser selector called first line. And let's say text transform uppercase. So, let's reload that. First of all, let me just comment this out just to show you what the page looks like without any CSS. So, this is our page without any CSS. And let me uncomment this. Now save it. And there you go. The first line has been completely made uppercase. Now instead of first line, you could also say last line. Last line. And that will transform the last line to uppercase. You could also say something like first letter. And okay. So just to show you that it does indeed work, let me just reload this without any CSS first. Okay. Okay, now you see that the Lauram Epsom begins with a lowercase L. Now let me just uncomment this out. Save it. And now you see that the first thing is a capital. You could also change it to say stuff like text size or rather font size and say around 100 pixels. Now the first letter will be 100 pixel big. And that's how you can do stuff like that. Okay. So another thing is you can also change the pointer or the cursor. So let's see when you're hovering over our paragraph let's say P and huffle first of all we want the background to become black we also want the color to become white and we want the cursor to become pointer so let's see so when you're hovering over it it becomes this handlike thing and when you go out it becomes back to normal so that's how you can change the cursor also now let me show you all something called a box shadow first of all so let's remove this cursor part. So without the cursor, it looks something like this. Let's remove the hover tag. So that's always there, right? Okay. Now, let's also change this to that gray color that I really like. And let's also change this to black. So this is what it looks like. Now let's give it a width of around 400 pixels. So this is what it looks like. Now let's also center it so that I can show you some cool stuff. So margin, let's say zero. an auto. So this is going to center it from the top of the screen. Now that it's centered, okay, so this is what our thing looks like. Now suppose we were to give it a border. So borders are really neat. So 2px solid black. So this is what a border looks like. But there are other stuff also like a box shadow. So this is how box shadow works. Takes three parameters. So one Z, X and Y axis and not really in that order. It's X, Y, and Z axis. And then it also takes a color. So let me just show you how that happens. So suppose we say 0 X, 0 Y and let's say three pixels on the Z axis rather five pixels to make it more prominent. And then it takes an RGBA of zero. We want to make it really really invisible. So 0.5. So that gives it a half opacity. Now you can see this really neat little shadow going all across our content. So that is what box shadow does. It's a neat little trick for when you don't want to use a border or something like that. Now, other than borders, there's also outline. Let's say an outline is black in color. So, outline completely negates our box shadow. And you could also say outline equals none. So, let's remove that now because box shadow looks really neat. Yep. Okay. So, now let's talk about text decorations. So since we have some text already going up, let's decorate it. Now there are a few kinds of text decoration that I want to show. So the text decoration let's say so first say is line through. So put a line through all of the content. So now it's all strike through. You also say something like overline or underline. So let's see that underline will underline our text. Yep. and overline as you might have guessed. We'll overline our text. Now everything has a line on top of it. Fine. Now we can also set the visibility of our text or any other tag to be honest. Visibility. So let's check out all the other visibilities that are there. So to do that always go on Google and type visibility and CSS and let's see the visibility property and how it goes. So you must understand that knowing everything in CSS is kind of impossible. So you should always have a go-to or a backup. So my backup is normally W3 school and they have everything regarding CSS and its properties. These are all the properties that you want to go through and I'm mostly going through the most important ones in this tutorial that you may use in your day-to-day projects and topics. But sometimes you might need the rare ones like counter reset, empty cells, flex, flex spaces, and all these stuff. And you can always go back to W3 schools and go through them. Now you can say visibility is visible or something like that and it should make it visible. Yeah. Right. So that was all about the miscellaneous types of CSS that we were handling. Now let's go ahead and see some gradients and how we can create some beautiful gradients using CSS. Okay. Now before we move on to gradients, let me just show you some white spaces or some more text transformations. Right? So I already showed you all these text transformation. There's capitalize, there's lower case, there's overline, line through, uppercase, and underline. Now capitalize will just capitalize it. So I don't think I'm going to show that to you guys. Now let's close these two pages out here. Let's create a new CSS file. And first of all, let's set this to CSS. Let's save it. And let's say it's going to be page 6.css. Now out here if you see we have a bunch of whites spaces. Right? Now let's see how you can handle whites spaces using CSS. So there is a thing called the ID called whitespace pre. I think that's exactly what it's called. Whitespace pre. Yep. Let's select that. And you could say whitespace is pre. Let's see how that changes stuff. So first of all, let me load up page six for you guys. Right, let's remove the CSS. Save it. Let's reload it again. And what we are actually targeting is this part. Whitespace will be preserved. Right? So whites space will be preserved. Now go ahead uncomment that save it and let's reload. Now see the white spaces that are in the HTML is preserved. Now white spaces can also be handled in other ways. So there are two things that I want to show. So let's select this thing called never wrap never wrap right and we say that the white space is going to be no wrap. So let's see how that works. So first of all this is what we are actually targeting this Laura Mipsson part out here and it's somewhat like this. And let's see how it changes now. And now you see that it goes completely out of here. So, no wrap. It doesn't wrap it around. So, you also have pre wrap. So, let me just show you how that works. So, I'm going to be targeting this part out here with these weird kind of fight spacing. So, let's see. Preserve wrap. So, with preserve wrap, we go pre wrap out here. And that's the property. So, let's see. Yep, Lauram, the wrap has been preserved. Okay. Now you can also set up the direction. So let me just show you how that's done. So we're going to select these two things out here. Left, right, and right, left. So hash, left, right. And also Ctrl C. And let's make this right, left. Fine. Let's remove all the stuff for now. And let's move everything before right left too. Now that we've removed that, let's remove this. Let's save it. Let's see. Okay. So, this is what it looks like right now. And all you have to say is direction is L2R. So, that means left to right. Now, here you say direction is RTL. Let's see how that changes stuff. So, I prefer right to left and I prefer left to right. So, that's how it's working. Fine. So that was all about white spacing and directions. Now let's move on to gradients and animations. So this is going to be the last part and the most interesting part in my opinion. So gradients are those beautiful backgrounds you see on most websites. And to generate your gradient, you can always use this thing called a gradient generator. So this gradient generator out here is a really nice gradient generator. You have to select the direction and you select the ending colors. So, I've already selected a gradient out here. It's going to create this gradient. Now, let's see. Go to page seven. Right now, let's select the body tag. Let's close this off. Let's close this off. I want to save this. And let's create a new page first of all. And this is going to be our CSS. So, we save it and say page 7. Right now, we select our body and just paste in. So, let me just explain how this happens. So there's a linear gradient and there's also another thing called radial gradient. So I'll just show you that. Now this takes in a few parameters. The first is to the right. That's direction. And this is how the colors will change. So let's just see how that works. So first of all, let me comment this out. Let me just open page seven for you. Now if you see it's going to be a blank page. Okay, this is a gradient. I'm sorry. Let me save that. Right. So this is where it looks without a gradient. And you already saw what it looks with a gradient, but let me just show it to you again. This is where it looks with a gradient. Now you can also set the background with other stuff like a image. So for that you go URL and you can paste in the URL. So let's go and search for a beautiful image. I really like Dragon Ball Z. So Goku Super Saiyan 3. So that should be a good image to save as a background. So let's see. This looks like a really nice image. So you go here. Let me just save this image as. So this is going to be Goku and it's going to be saved in desktop and in CSS tutorial going Goku.jpeg. Right. So you could say Goku.jpeg. Right now that's saved. Let's go back to our page and it should have a picture of Goku. Okay. So that didn't work. I think I got something wrong. Let's go and analyze that. Let's open up our CSS tutorial. Okay. So it's a JPG file and not JPEG. So that was our mistake. Small mistake nonetheless. And now we have this picture of Goku. Now you can also set the background repeat. Let's close this off. Say background repeat. And you could say no repeat and it will not repeat the background anymore. Or you can say background repeat is going to be let's check out all the background repeats that are actually available now. Background and repeat. So if you go into background repeat and see the properties you can just try it yourself. So you can repeat it according to the yaxis you can repeat it according to the x-axis. So let's see how that works. So repeat x. So if we say that I think it should repeat it on the x-axis like it was or you could repeat it on the yaxis. I don't think that'll show about here but let's see. Yep, it's now repeating on the y-axis. So that's how background repeat also works. So we've covered that too. Now we've also covered the gradients. Now it's time we do some radial gradient. Now if you remember, let me just go back to the gradient part. So if you have a radial gradient, all you have to say is that it's a radial gradient out here. And a radial gradient doesn't really need direction because it's going to be radial. Save it. Page. And let's reload it. Okay, now we have a gradial rad. Now you see all these lines going in. But if I just zoom out, you can see that it starts from the center and spreads out where it's white on the sides and white on the sides. So that's how radial gradients work. Okay. So now that we've covered the gradients, let's go into animation. So I think animation is the most interesting thing that you can do with CSS. So we have selected the div. So first of all, let's give the div a border. Um, so this border is going to be two pixels solid and black. Now let's give it a background to begin with. Let's say it's going to be of red. Now this is how you do animations in CSS. Okay. So before animations actually let me show you how you can move this thing around. Fine. So there are some stuff that I want to show you guys. So let this be Let me just show you what this looks like. So let me give this a width first. It's going to be four um 100 pixels or rather 200 pixels. And the height will also be 200 pixels. Now let's see. Okay, we have this div out here. Let's make it a little bigger. Give it 500 and 500. Save it. Yep. Let's also make this much more prominent. Let's go a 10 pixel background. I mean a 10 pixel border. And now you see we have a really prominent square out there. Now let's try some really interesting stuff. So let's say div. And when we hover over the div, you want to scale this. So scale and let's say we want to scale. Okay. So that's not how you scale. First you say transform. And how do you want to transform? You want to scale it. And you want to scale it twice. So when we hover over it, it should scale twice. Let's reload. And as you see it's scaling twice. Now we can also transform some other stuff like this. So we can rotate. So we can say rotate 45°. Let's see. When I hover it's rotating 45°. You can also skew it. So skewing is how it works. Let's see. You can skew a 20° to the x-axis and 10° to the yaxis. Save it. And this is how it gets skewed. This is how skewing works. You can also translate stuff. So this is let me show you how translation works. So translate and let's see you want to translate it 20 pixels and 20 pixels. So let's see hover over it and it translates a little. It's translated around 120 pixels just to make it more clear. 120 and 120. Let's save that. Let's reload this. And you see that now it's translating so much. Right? So that's how translate works. Okay. Now that I've showed you scale, rotation, skewing, and translate. Let's see. We can also set up the transitions. So with transitions, you can set up a lot of stuff. So now that we're done with transitions, let's go ahead and see some animation. So for animation, I'm going to be actually targeting this div out here. So let's actually style this div. I've given it a width of 100 pixels and a height of 100 pixels, a background of red, and a border of 3 pixels. solid and black let's say right let's see what that looks like now that's what it looks like fine let's zoom in a bit now all we need to do is actually set up some key frames so we do that by saying key frames now we name our key frames let's call it anime and we have to set up actually what it will look like at different points in time so we do that by saying 0% and it'll have let's say a background color of red and then it'll move. So we want to move it in a square. So let's say it'll be not padding rather it'll be 0 pixels from the left and from the top it's going to be 0 pixels. Let's save that. Copy that down. Let's paste that a bunch of times. Now all I want to say is this is going to be 25. This is going to be 50. It's going to be 75. And this is going to be 100. Let's save that. Let's change their colors. So this is going to be yellow first. Then change this to green. Some pretty basic colors. Blue then. And in the end we'll change it to red. So that brings us back to the original position. Let's first also move it by 300 pixels. Then let's move it 300 pixel both ways. Now it's only going to 300 pixel this way. And in the end it comes back to the original position. Now to use this key frames animation, we have to give this animation name. It's going to be using the animation with the key frames name anime. Now we can say the animation delay is going to be 2 seconds. You can also say how many times it's going to be iterating. So you can say that by 100. Let's save that. Okay. So our animation is not working because we haven't set the positioning. So now let us just save this and let's say our position is going to be relative. Let's save that. Let's uncomment our animation. Now you see that our animation will work as we intended it to. So after 2 seconds our animation starts working and this will just keep going on and on. Now if you want to actually repeat that animation, there's a way you can do that and that is with the animation iteration count. Let's say you want to iterate it 100 times. Let's reload. Let's wait for 2 seconds and voila, our animation will keep going on and on and on. So that's how you animate stuff with CSS. Guys, [Music] did you know that CSS is not a particularly difficult language? Truth be told, even if you have been using CSS for a long time, you will almost certainly come across properties that you have never used or values you have never considered or even specification details you've never heard of. So CSS plays an important role in developing an impressive and interactive web pages. Cascading stylesheets commonly known as CSS is basically a language used to describe presentation of web pages including colors, layouts and fonts, etc. right now it allows you to adapt the presentation to different types of devices like your computer screens or your mobile screens or even the printers. Now here I might also add that it is independent of HTML and can be used with any XML based markup language. Now basically in CSS there are set of rules which are incorporated to HTML elements via our selector which will help us have our stylish pages. Now although I've mentioned that CSS is independent of HTML together HTML, CSS and JavaScript make up the essential building blocks of website. Now with our CSS controlling page appearance, JavaScript programming its functionality, HTML is used to describe structure of the information. It's like you can think that HTML document provides the bones for your web page while CSS provides skin and JavaScript is like your brains. Now again there are several advantages of using CSS in web pages like it's quick in loading and less of a bandwidth which will make the subsequent pages load faster. Now there is multiple browser compatibility making any website based on CSS appear similar in every browser. Ability to position elements anywhere which means a developer can change position of a particular element if it doesn't go well there. Also the colors, images and other things which are difficult to print can be eliminated and printed easily. Adding on we have some more advantages like customization, search engine friendly and a lot more. Now let's move on and understand what exactly CSS transition is. So CSS transition is basically a module of CSS that lets you create gradual transition between the values of specific CSS properties. Right now it's actually going to allow you to change values very smoothly. Now this can happen with a certain set of properties over a specific set of time. Right? Now here you see a web page that is designed without CSS or any kind of your specification or your styling properties versus the web page which has transition property. Now this is a brief about CSS transitions. We'll get to know more about it going ahead in today's session. Now guys, speaking about browser compatibility, by now you already know that transition is extremely compatible with all the browsers in almost all kinds of your screens, right? But here we're going to focus on certain versions of each browser. Speaking of Chrome, firstly we have CSS transition which is partially compatible with a prefix called WebKit. So using WebKit as your prefix, it'll be very compatible. Next we have Safari which is partially supporting with a prefix webkit again. Now so this webkit is a prefix that should be added in order to make it really compatible. Now speaking of Mosilla Firefox this property is supported with the prefix mo. So the prefix used here is not the one which is used for Chrome or Safari. For here in Mosilla you use MOS. Next we have Internet Explorer. To be honest, it doesn't support for certain versions like browser 9 or 6. Uh otherwise it's really compatible. Next we have Opira which has a prefix O to be really compatible. Now let's move on and understand how to use these transitions. So to create a transition effect, you must specify two things. The first one is the CSS property you want to add onto the effect. Now for this there are certain set of properties which we'll get into. For now let's take a look at the second thing that we need which is duration of the effect. Also here you need to keep in mind that if the duration is not specified the transition will have no effect. Now this will happen because the default value is zero. Right now let's take a look at an example. So say you want to display an image of 100 pixel with the transition time of 2 seconds. You can specify the background like a div element is here. And with for this uh div element you can specify these elements like width, height, background, transition etc. Here transition effect will start only when the specified CSS property changes the values. So now I've spoken so much about styling and techniques, right? So let's go ahead and take a look at styling properties. The first one here is the transition property. This specify the name or names of the CSS properties to which transition should be applied. So using this property you can basically specify the name of any particular property you want to implement. Right. Next we have transition duration. This is the duration over which transition should occur. You can specify a single duration that applies to all properties during the transition and this will actually allow you for multiple duration also but over a different period of time. Now next we have transition timing function which specifies a function to define how intermediate values for properties are computed. So most timing functions can be specified by providing the graph or corresponding function. Now this is basically a timing function which specify the transition time. And final property which will help you in styling better is transition delay which defines how long to wait between the time a property is changed and a transition actually begins. Now next we'll look into some of the examples. Here's an example indicating all the properties we have just learned. As you can see here, we defined the transition property in font size and duration and delay in seconds. Now your font size will be in pixel which is basically your image that you need for transition. Now if you have to break down and get a property formula for your transitions, you can take a look at here. transform here is a CSS property while 250 milliseconds is your duration and timing function is linear. So guys, we just learned about delay and duration part of our transition. Right? Now, what if we want to have an accuracy on our speed? Now, let's go ahead and see how this could be done. For this, we have transition timing function property. Right here this basically specifies speed curve of your transition effect. For this to happen there are set of values we should consider. Firstly we have ease which specifies transition effect with a slow start then fast and then end it and this ending happens really slow and then there is linear which specifies a transition effect with same speed from start to end. Now we have ease in which specifies transition effect with a very slow start. Next ease out again transition effect with a slow end. Now we have ease in and out which specifies transition effect with slow start and slow end. Now step start and step end. By now you have already an idea with ease in ease out. It will just step up your start and it will decrease a step in your end. Now next we see here the curve that we have specified and we've just discussed about as you can see your distance which is your image length in pixels increases the speed is faster while as the image length decreases the speed is slower that being your duration speed. Now let's look at our delay for our transition effect. Now this is specified in seconds as to how many seconds of delay would a particular transition for an image would have. Now your delay could even start from 1 second. Right now it's said that transition has a secret twin to operate with that's called transformation. So let's go ahead and learn about them together. Guys, by now already you would be telling the definition of transition yourself. One last thing would be it makes the element smoothly and gradually change from one state to another. Right? It's like transition are the grease in the wheel of CSS transformation. Without the transition, an element being transformed would change abruptly from one state to another. Now what you see here basically could happen even in case you hover on the screen as well. So you see how smoothly the transition is happening. Right? Now that we have reviewed how to make smooth and gradual transition, let's look at the CSS transformation. So guys, this is basically how to make an element change from one state to another. With these transformations in CSS, we can actually rotate, move, skew, scale elements. Of course, all these features are only 2D. Now transformations are triggered when an element changes states such as on mouse hover or mouse click etc. Now here is an example image. You can actually see all the features that is rotate, move, skew and scale that's been implemented here and that too without a mouse hover which is shown for you but the protocol stays the same. Anyhow, it's just an example that I'll be showing here. With that said, let's move on into the final part of today's session. Of course, before demonstration, let's take a look at some of the properties. Now, I'm pretty sure that you guys might already be guessing the property tag that we need to use for specifying the property. Yes, you got it right. It's the transition property. Now, normally it is used as part of transition shorthand. It's used to define what property or properties you want to apply on transition effect. So as you can see here you can give the value to your tag. Now your value could be anything like a single property name or a commaepparated list of property names, a keyword none which basically indicates that no property will transition or keyword all which indicates all properties will transition. Now finally if you remember these are the properties that we learned about in our speed accuracy part of today's session. Here we have applied those properties to hover our box and hence use the keyword hover for your ID box. Now box is the ID here which has basically property for a particular image that should be having in order to display your transitions. Assuming that was understood and clear, I would like to jump into the demonstration part. But before we go ahead, let's look into a small installation and setup. So now to understand the installation and setup. Firstly, we're going to have to install an editor. And here we're using Visual Studio Code. So let's go ahead and install the Visual Studio Code editor. Now I just say Visual Studio Code and you see that there is different options given here. Here I just say download Visual Studio. Now according to the operating system that you're using, you can install your Visual Studio code. As mine is Windows, I'm going to have to use Windows. I say just download or I just click on this button. Now, as you can see, there is an .exe version that's been downloaded over here. Once this has happened, I'm going to have to click on this. And you're going to get a couple of messages and permissions that you'll have to accept. Now, as you can see, it says setup has detected Visual Studio, which means I have already downloaded Visual Studio Code and hence this is the condition that I'm getting. Now there's no problem with that. I'm going to go ahead and open. So this is how your Visual Studio Code will look once you finish your installation and the setup. Now as you can see there are many options here. There is extensions. You have run and debug here and then you have source control. You can search for any particular code over here. And to open your files and explore. Now in order to configure this I will have to go through uh different procedures. I'll just show you some of them. So I go to extensions and in order for us to have our HTML and CSS code work in a smooth way I'll have to install couple of uh packages here. Firstly I'm going to go ahead and install all the packages related to HTML. So I might have to install this. It's HTML CSS support. I have already installed. So it just says I can either disable or uninstall. And then I have to go ahead and install HTML snippets. Again, since I've installed it says uninstall. And then next necessary package is your IntelliSense which you'll have to install. Now there is one more called as HTML hint. If you scroll through, you can find it here. Again you'll have to install this. Now these are the packages that you'll have to install in order for our application to work smoothly. And if we need any particular updation for our code or it will suggest automatically there is auto suggestions things like these. So it's very important for us to practice a healthy style of coding and this is what these packages might help us do. Now I go ahead and install the packages related to CSS. I'm going to install beautify CSS firstly which is important. So that's here. I install it here. And then next we have Intellode. As I said just like HTML and CSS for our Visual Studio Code to work in a smooth way and to have its all the latest features we have to install such packages that could be Intellode Visual Studio. Now I'm going to go ahead and install this. And for our server to give our output, we need to install some of the packages such as live server. Going to install this. And we have live server preview. That's going to be here. And we're going to install this as well. So we'll go ahead and see what these packages will do. For now, let's close this installations. As you can see, there is a blank screen here. Now since all our installation and configuration is done, let's see how we can create a file and establish code and eventually we'll learn about CSS transitions and how to implement transitions in our CSS code. Now as you can see there is open file. So you can open an existing file. Now in order for us to understand how Visual Studio Code would work, I am going to have to take a folder. I'm going to select a folder here. I just see select folder. Let's see what's going to happen. Now, as you can see, the folder that I just extracted or opened has popped up here. Now, to understand, let's say I open this particular HTML file which is already existing. Now, as you can see, these are the things that I'm going to address in today's session. for now just to understand how it will run and how do we execute these I'm just going to say open with live server now if I say that it's going to open here right now you can actually go ahead and open with preview also for that you just have to say view and I'm going to have to say preview and before you do that this is the syntax you use say preview now when you say that it says show live server preview now if I do that you can see the output being shown here itself now if you make any particular changes it would be shown here itself so we'll go ahead and learn more about this for now this This is the installation and setup for your configuring Visual Studio Code. Now, since we've understood installation, setup and configuration of our Visual Studio Code, let's go ahead and have a hands-on demonstration. Now, for that, I'm going to again start with Visual Studio. I'm going to go here and like I've mentioned before, I'm just going to have to create a file. And since I'm going to start with HTML, let me go ahead and create a sample HTML file. I'm just going to call it test.html. HTML should be your extension. And in order for me to have the code and all the basic code structure for HTML, it might take few minutes. But here the perk of using Visual Studio Code is if I just say doc it's going to give me everything everything that a basic HTML tag would have. Now document is the title here and I'm going to leave that as it is. Just save the file. And in order for us to add CSS property I'll have to create a file here again. Let's just call it test.css. CSS. Now, I don't know what property to add to which kind of message. So, I'm going to go ahead and create a tag here, a paragraph tag. To add message, I'm just going to say maybe have a nice day. Just a random message. And I'm going to go ahead into the CSS file and add styling property to it. I'll just say color. I'm going to give maybe blue. I give blue color here. And then let's add one more tag to give multiple styling properties. I say H1 just a heading tag and say good morning or any random message. Save it. Go ahead. Here add your styling property here. Again, I'm just going to say brown color. Maybe save here. And for us to have the styling property to this particular messages, we'll have to call a link, right? In order for us to call the CSS page. So, I'm going to say test dot CSS, just the file that we've been using here to call our CSS property. Save. And now as I've mentioned before in order for us to see the output just say open with live server. Now as you can see all our properties have been implemented. Now let's go back. I've already mentioned we can have a preview. Instead of going to another window just say preview here. And here it is. And you don't have to go to another window. Just can make any changes. Say I'm going to go ahead and make changes in my CSS. I'm going to say remove this. Save. Now we have black. That's the default because I've not given any kind of styling property here. So this is perks of using preview window. Now we know the basics. Let's get into the CSS transition part. Right ahead. Now let's go ahead and see the transition properties. For that I have created a CSS file similarly to our test CSS called transition. There's nothing much here. I've just added a box property as we have already learned. These are some of the properties of our transitions. We have box and box hover. Let's not get into box hover as I'm not addressing box hover at the moment. Now seeing a box I've just added a parameter called background where the background of the box is red and the width is particularly 300 pixel and height is also 300 pixel. Now for us to have these properties being implemented all we have to do is yes you got it right. You have to call the transition dot CSS file. Right now I save it. Nothing is happening. Right. So the thing that I've missed here is adding the class box. Now you should be doing this because it is not going to understand what property should be implemented as the box is a parameter that is present in our CSS. But HTML doesn't know what is box here. So I'm going to go ahead and give a div tag here. I say class because I'm going to have to call my box and here after mentioning box I just say save. There you go. Now this is applied the properties that you have given inside the box class. Now let's go ahead and add some of the other properties like transition duration. Right now I say for 1 second I'm just going to say 1,000 milliseconds. It suggested that we mention all our durations in milliseconds. I save it. Now this is happening because I have not enabled the hover. So if I just save every time I save this is displaying and it's taking 1 second for our box to display. Now say if I change my duration time I save 500 milliseconds and every time I save it's happening a little bit faster now as we mentioned this is happening quick right now let's go ahead and see what happens if I give it in seconds say now I give in 1 second and save it's happening Now do you wonder that it's not hovering on your cursor? Now this is because like I mentioned hover is not enabled because I have given both the colors in hover and in the box as the same. Now what if I say this as black? Now let's go ahead look at that. Now because we're having a little problem in viewing it, let's give this as black while this as red. I save it. By default, it's black. Hover. It turns out to be red. Now, this is happening quite slow because I've given it as 1 second. I'm going to go ahead and change this as maybe 0.5 seconds as we're doing it in terms of seconds. But again, I recommend you to do it in milliseconds. So, I'm going to just stick on to 500 milliseconds. There you go. The hover is perfect. Now let's go ahead and learn about one more interesting topic that is transition property that we've already learned in theory. Now if you notice it's taken for opera. If you remember I mentioned for opera to be really compatible I give prefix as o. So that's what is taking but let's not keep that in mind right now. Let's go ahead and do it for everything in common. The transition property, let's apply the property to our background. Now we have background here for hover. I'm going to go ahead and say background. Going to spell it out right or just copy this, paste it here. And you see it's happening to the background or let's say with respect to the background. Now what if I change this property to width? Maybe there is a property called width, right? So the transition duration is happening with respect to our width. Sorry. Um let's say width. Do you see that it's happening to the width? Now I say height So these are some properties that you'll see not making difference right now but going ahead if you improve your page or your you know website to a greater extent these small properties make a huge difference. Now let's go ahead and give one more property to our hover box which we'll see and probably these things might make a difference then which you might understand in a more clearer format. I'm going to say transform. This is a property and I say rotate. So I'm going to have to rotate this box. This particular box say I'm going to rotate it for 90°. I say save. Of course, nothing is happening because I didn't give my property as transform. Now I say transform. I say this. Look at that. Cool, right? On hovering, it's rotating 90°. Now you can change it to 180. Maybe I save. There you go. One full rotation is there. Or even 45°. That's that. Now this is happening because I have mentioned my property as transform here. Let's say I want to mention both background and transform because you see I want to take all my properties there because it's happening in a very weird format. Now what if I say all? So we've already mentioned and spoken about this. If I say all it's going to take all my properties right here, right? So when I mention all it means it's going to take property of height, width, background transformation everything together. Now generally what happens is all your animations and your rotations and your transitions is happening by our CPU. So sometimes there is a technical glitch inside CPU where even if you have not mentioned that particular transition that will automatically happen. So it is better and cleansing to avoid all and to mention the properties that you actually want. So I want here just background. I'm just going to go ahead and copy this say paste, I say transform. Now I do this. I say save. It's going to take only these two properties. This is a cleaner way of using your properties for transition. Of course, you can go ahead and use all your all or mention particular property or even sometimes not mention. But again, it's for a cleaner view. Now, since we have learned about this transition property, let's go ahead and learn about one more property that's transition timing function. We've already come across this theoretically. Now again I have discussed about cubic per. This is going to help you add certain coordinates where our rotation and transition will have a better way of displaying it. Now uh before we get into that let's see ease in and ease out. If you remember I have mentioned about that. So that's ease. So here in timing function what exactly happens here is when I say ease it's going to take these properties while it's going to ease in like your transformation happens in a more easy way to understand that better let's use all other properties so that we'll see the changes differences and hence do you see that there is a firm kind of rotation happening there but if you say ease there is kind of you know ease there. It's again very small difference which you can make out only with a large kind of operations but you know here we are to experiment with different kinds of properties and how it works and how you can use it things like that. So now you have known about ease in ease out. Now I'm sure you have a little bit of confusion as to how this is actually working. Let's go ahead and see how this works in your front-end page. For that the best thing that you could ever do is you have to inspect. For that to happen, I'm going to go ahead and open this in live server. Now if you see here there is this happening and I'm going to go ahead and inspect this. While I inspect I need to click on this. If you see here come down here to our styles and see our timing function. It says ease out. Now to understand that let's see this. See this is an interesting factor here. how ease in and our ease out works. There is you know different ways of animations and transitions happening here which we do not actually notice when we do it from our front end. But if you see here there is so much happening there you know the curves I have actually explained it theoretically as to how this graph works. Now if you see it there is different ways. Now let's go ahead and see how it works for ease in. These are the curves for ease out. Now looking at ease in say I give ease in here. Save it. Go back to this. Reload as in look now each curve is definitely different. So this is about our transition timing function. Now say what if I want to give all these functions together. It'd be cool, right? So all I have to do for that is I just have to mention property or just say transition and I give my background and then I give my duration and I could comment this out. I could comment this out. I say now this is a syntax used for comment which most of us might already know. Save. So even though I haven't mentioned any of this all the duration and all your rotation is happening and that's because you can do it in one particular property itself. Now before I wind up there's one more thing that probably I might have missed out that is your delay. Now that's something that we have learned already. Let's see how our delay works. I say transition delay and I say 2,000 milliseconds. like let's have our transition occur after now I'll just remove that. Now if you see after 2 seconds your box is appearing after two whole seconds your hover is occurring. See that and nobody wants such a huge delay right? So maybe 1 second or 500 millisecond even that seems a bit slow but it's again fine. Now if I don't have this and save it it's quick enough. Right now that we've almost addressed all our properties, we can put all our properties in the transition. Like I have already told you, I'm going to mention background and my duration and my ease in. Let's add my delay as well just to see all our properties appear there. I have my transform also going to spell it out right now. I comment the rest of it with your all our properties are still being uploaded. So now instead of applying all these properties singularly, you can use one particular property command and implement all your given transition properties. [Music] In this enormously growing technology trends, testing plays a vital role in software development and we require a tool which can perform all desired actions. And one name you can think of here is selenium. Selenium is one of the most predominantly used testing tool which provides all possible functionalities to test a web application. So let's begin this session by learning about what are element locators. As selenium is an open-source portable framework, we can easily inspect the element on the web page and link it using proper codes. This element locators in selenium make it easy to find an element on the web page. It can also be termed as an address that identifies a web element uniquely within that web page. These element locators are basically the HTML properties of a web element which tells the tool that is selenium about the action it needs to perform on the web element. So this is the proper introduction to what are element locators in selenium. Now let's take a look at the different types of element locators that exist. The locators are of six types. We can locate any element on the web page using their ID, name, class, XPath, CSS selector, partial text and link text. We'll understand these one by one. Okay. So first we'll start with the ID. This is the most common way of locating elements. Since the ids are supposed to be unique for each element, this locator looks for an element in the web page having an ID attribute. The target format will be something like this. ID is equal to ID of the element. Okay guys, so this is about the ID locator. Next, we'll move on to the name. Say if there is no ID present in the HTML code, how would you locate the element? We use the name locator when there is no ID to use. The next worth seeing if the desired element has a name attribute or not. But it is for sure that the name cannot be unique all times. If there are multiple names, Selenium always performs actions on the first matching element. Locating element by name is very similar to locating by ID except that we use the name as a prefix instead. So this is about the name locator. Now let's understand what is a link text. Finding an element with link text is very simple. But make sure there is only one unique link on the web page. If there are multiple links with the same link text such as the repeated header or a footer and menu links. In such cases, Selenium will perform action on the first matching element with this link. This type of locator applies only to hyperlink text. We can access the link by prefixing our target with link and followed by the hyperlink text. So this is about the link text. Now what is a CSS selector? This whole session is mainly concentrated on this particular element locator guys. Now let's understand what does it mean? CSS is mainly used to provide style rules for the web pages and we can use it for identifying one or more elements in the web page. Once you start using CSS selector to locate an element, you will love the speed when it is compared to XPath. We can use the CSS selectors to make sure that the scripts run with the same speed in the Internet Explorer browser as well. CSS selector is always the best possible way to locate complex elements in the web page. This type of locator mainly uses some unique symbols in order to find an element. We'll learn more about it when we get to the introduction section. Now, let's discuss about partial link text. In some situations, say you may need to find the links by the portion of the text in the link text element. In such situations, we use the partial link text to locate an element. Okay, the syntax goes something like this. Find element by partial link text where you provide the partial link text of the element. So this is about the partial link text. Now let's move on to another important element locator in Selenium that is the XPath. XPath is a standard navigation tool for XML and an HTML document is also an XML document that is XHTML. This XPath is used everywhere where there is XML. It is designed to allow the navigation of XML documents with the purpose of selecting the individual elements attribute or some other part of an XML document. The syntax goes something like this. It always starts with two consecutive slashes that is two backslashes followed by the tag name and square bracket where you have to select the attribute at specifies the select function and specify the attribute and also provide the value of the attribute so that you can locate the element on the web page. So this is everything you need to know about the different types of locators in Selenium guys. Now let's move on to our key point of this session that is the CSS selector and also understand what is the importance of this locator and why is it used. CSS cascading spreadsheets is a stylesheet language used to describe the presentation of a document written in a markup language like HTML. You might think what does CSS have to do with Selenium? Well, we locate a web element by using the corresponding HTML code. This method is very fast compared to XPath which is one of the most popularly used element locators. Then why does it have more importance than other locators? Well, to answer this, I would say this method is very simple as it uses certain symbols for locating an element on the web page. So, this is about the CSS selector. Now let's take a look at the syntax and a few basic commands that are used. The syntax of the CSS selector goes something like this. The HTML tag followed by the unique symbol used to locate the element and the value of the attribute that is present. This syntax follows when the ID attribute is present. Now what if there is no ID present? How would you locate an element without an ID? Say if the class attribute is present or the name. Again we use the unique symbol to identify the element on the web page. Say if the class attribute is present, we are going to use the dot between the HTML tag and the value of the attribute. Now say if there is no ID specified nor the class, how do you find the element using CSS? In this case, we use different symbols that helps us in locating the elements. As you can see there are three different commands here for partial values. Say if you want to search for a partial value of the target element. You can do it using CSS selector by using the command HTML tag followed by the locator and asterisk specifies that it is a partial value. Now say if you want to match a prefix of a particular element on the web page, you can do it using the CSS selector by using this command HTML tag followed by the attribute and a carrot symbol and also specify the prefix of the string. This carrot is the symbolic notation to match a string using the prefix. Now if you want to match the particular element with the matching suffix, how would you do that? We use a dollar symbol in order to find the suffix of an element on the web page. Now say if you want to find an element which is nested below. Say if there is a header. Say if there is immediate child and there is the ancestors and so on. How would you find the grandchild of an element? Using CSS selector. We can use the inner text to do the job. Inner text helps us identify and create the CSS selector using a string pattern that the HTML tag manifests on the web page. The syntax goes something like this. HTML tag followed by colon contains and the text that you want to search for. This colon sign symbolizes the contains method. What is a contains method? contains method is a value of a class attribute which is being accessed and the text is a particular element on the web page that you want to search. Okay, so these are the basic syntax and commands that you need to know when you're working on the CSS selector. However, in the end, CSS covers almost every element on the web page and makes the process of finding the element easy. Now let's move on to the most interesting part of this session where I will show you how CSS selector works. In this demo section, we'll try automating a very famous e-commerce website ebay.com. So to do that, we require the Java libraries present in our system and also an IDE where we can write our code. As you can see that I already have the Eclipse ID present here. We consider using the Eclipse IDE because it is userfriendly and provides various functionalities. Now if you want to check if the Java libraries are present, just go to the command prompt and type Java version. This specifies the version of Java installed in your system. Okay. Now let's click on our latest Eclipse ID. Launch the process. This is the Eclipse workspace guys. Now, as I mentioned earlier, we'll be automating a website called ebay.com. So, to do that, we require a project under which we'll write our code to automate the web page. So, first we'll create a new project. So, to do that, go to file, go to new. You can't see a Java project here. Okay? So, just go to other and type Java. You can find that there is a Java project here. Just click on it. It asks for a name. So I'm going to give this as CSS selectors selenium. Okay, just click on finish. No, you can see that the folder by the name of your project is being created and you can also find the Java libraries present here. And the source field is where we'll write our piece of code. So first let's link the Selenium libraries to our project. So to do that, right click on your project. Just go to build path and configure build path and add external jars. So we require the selenium libraries now. So these libraries can be easily downloaded using selenium's official website. So now I'm just going to click on this. Copy this. Okay. Go to the control A and open. And we require Selenium standalone server. Okay. So these are the selenium libraries which we require in our project. So you can see that there is another folder being created of the name reference libraries where all our selenium libraries are present. Now in order to write the piece of code we are going to create a package under which we'll write our class. Just create a package. Package always starts in the reverse order. So I'm just going to write edurea code edurea and finish. Okay. You can see that the package is being created. Now right click on the package and go to class. It creates a class. So I'm going to name this as demo class and select the main function and click on finish. So you can see that the project comes under the package code. Edureka under which the demo class resides and we're going to write our piece of code under the main function. So first we need to set the driver to a particular browser driver. So in order to do that I'm going to set the system property to the driver that we prefer. So I'm going to prefer working on chromedriver in this case. So I'm just going to write webdriver dot chrome.driver and and this argument specifies the path in which it resides. So let's see where this chromedriver resides. You can see that there is a folder here which says Chrome and just copy this chromedriver path and go back to our project and paste the location over here. One thing you need to know when you're writing the path is you have to specify if it is an executable file or not. Without that you cannot execute any project on Chrome. So I'm just going to specify the extension that is chromedriver.exe. This is the executable file. Okay. Now we need to link the web driver instance to the new Chrome driver. So to do that I'm going to create an object of the web driver and call it the driver and instantiate it with the new Chrome driver. You can see that it is throwing an error on the web driver as well as the Chrome driver. So I'm just going to click on this. It says import web driver which means we are going to import the web driver packages to our project. The same goes with the chromedriver as well. import it. Okay. And after this we need to get the URL of the web page that we want to perform actions on. So I'm going to consider the object of the web driver that is driver dot get which is of the form string and specify the URL of the web page. So in this case it is the ebay.com. So, http ebay.com. Okay. Specify the URL. Now, we need to find the element on the web page. So, first let's Google search it. We'll search for eBay.com. So, this is our web application guys. We going to perform all our operations on this web page. So, now say if you want to search for this particular element on the web page, each element in this page is considered as a web element. So say if you want to search for this particular element, I'm going to inspect this by right-clicking. You can see that the corresponding HTML code for this location is present here and the ID is present which is the CSS locator. One good thing about Selenium is that allows the plugins to work with them. So Selenium also supports a plug-in called crow path where you can easily find the XPath and the CSS selector of the location. So to get more information about this crow path, how it works and how elements can be located using crow path just check out the link that is put up in the description of this video. So you can see that the CSS selector of this element location is present. So I'm just going to copy this and go back to my project. And now I'm going to write a corresponding code to that location. So considering the object of the web element driver dot find element by I'm going to consider this by the CSS selector and also specify the CSS selector within quotes. So hash will be the string selector of the web element and I'm going to send keys to that particular location. So send keys. Say if I want to search for one of the trending phones, OnePlus 6T. Okay. Now we've found the search box on the web page and then we've sent keys to that particular location and now we need to search for the search icon on the web page. Let's close this. Now I'm going to inspect the search button here. Inspect it. You can see that the ID is present here too. So just go to the crow path. Relative path is present. Absolute path is also specified and the CSS selector of this particular location is also present because ID is present. So copy this location and go back to our project and write the corresponding code. It is driver dot find element by CSS selector. and I'm going to specify the location of the CSS selector and click because it's a button. Okay, so let's see what happens while we execute this program. So I'm just going to save this program and run it. Okay, it opened the website. It checks for oneplus 60 and clicks the search button. I think you guys have understood how this works. Now say if you want to modify this particular process, how would you do that? Let's take a look. Now say if you want to perform scrolling through a web page and also try using the different element locators like the dollars, the carrot and so on. So we can do that using this commands here. So first let's maximize the web page. So it is driver dot manage dot window dot maximize. So this particular command helps in maximizing the web page. Now say if you want to perform actions like scrolling down through a page and so on. We can do that using the JavaScript executor. This JavaScript exeutor is an interface between the Selenium web driver and the UI interface. So now I'm going to add the JavaScript executor here and also create an object of the same and call it JS equal to JavaScript executor. And we'll also link this JavaScript executor to the driver. Okay, you can see that the JavaScript exeutor is throwing an error. So I'm just going to import the JavaScript exeutor functions and packages into a project. So now let's scroll down through the web page using the JavaScript executor. So I'm going to consider the object of the JavaScript executor JS dot execute script. We'll consider only one argument in this case and specify the function window dot scroll by specifying the axis in which I want it to scroll through. So I'm going to specify 300. I'm going to delete the argument here. Okay, now let's save this and run it. Maximizes the page, searches for OnePlus 6T and scrolls down. Okay, so this is a very simple program guys. Now say I search it manually on OnePlus 60 and click on the search button and scrolling through it. Now say if you want to search for this particular element on the web page. I'm going to inspect it and you can see that the class is present here which is an element located in selenium again. So this span that is the HTML tag of the particular element is span. Okay. So we'll write our code. Click CtrlF where the code comes up. So I'm going to consider the span. Use the dot. Okay. You can see that this particular element has been located here using this particular command. Okay. So the dot operator helps in specifying the class of the particular element. Now say if you want to search for the immediate child class after the parent class. So you can see that the division tag is a parent tag of this span. So I'm going to consider the parent tag first that is div greater than. Now talking about the other commands that we use in order to locate the elements. We can use the partial text link. So I'm going to consider this class here. I'm going to copy this class and click Ctrl F where you can get the search box. So I'm going to specify the tag associated with it which is span followed by the locator class and an asterric and specify this element location. Now say if you don't want to write the entire code. So I'm just going to write item price. So I'm going to take off this s. So even in this case you can see that it is located to the same position. So this is how we use the star operator in the CSS selector guys. So now if you want to search the element by its prefix or the suffix you can use carrot or the dollar symbol. [Music] Bootstrap and Tailwind are both super popular CSS frameworks, but they take completely different approaches. Bootstrap gives you pre-built style components for quick development, while Tailwind offers utility classes for full customization. So, which one should you use and which one is better? In this video, we will break down both frameworks, compare their pros and cons, and help you to decide best fit for your project. So stick around till the end. Let's have a look at what is Bootstrap. Bootstrap is one of the most widely used CSS frameworks for a good reason. It makes web development faster and easier. It comes with the set of pre-built design components like buttons, models, and grids. So you don't have to write CSS from the scratch. You can just add a class and you get a fully styled element instantly. For example, if you need to add a button instead of writing the custom CSS, you can simply use this. Bootstrap also includes a powerful grid system that makes responsive design a breeze. That's why it is a go-to choice for developers who want a quick professionallook UI without spending so much time on styling. But while Bootstrap is a great for speed and consistency, it does have some limitations, especially when it comes to deep customization. So now that we understand Bootstrap, let's move on to the Tailwind CSS and see how it works. So Tailwind CSS is utility first class framework that takes a completely different approach compared to Bootstrap. Instead of providing a pre-built components, it gives you a utility class to build your own design from scratch. For example, if you need a button, you don't use predefined class like Bootstrap. Instead, you combine multiple utility classes. Let's have a look at this example. So another cool thing about Tailwind is its just in time compiler which generates only the style you need making your final CSS much smaller and optimized for performance. So now that we have compared the Bootstrap and Tailwind, let's dive into the key differences between them. Choosing the right framework depends upon several factors. Let's go through them one by one. So the first one that we have is design approach. Bootstrap comes with pre-style components like buttons, forms, models. Everything is ready to use. You just add a class and get fully polished UI instantly. On the other hand, Tailwind doesn't give up pre-built designs. Instead, it provides you utility class that lets you to style everything from scratch, giving you a complete design freedom. So, we have already seen an example that to create a button in Bootstrap and Tailb. So, if you want readymade styles, Bootstrap is way to go. But if you prefer complete control over your design, Tailwind is better. The next one we have customization. Bootstrap is great if you want a standard clean UI without tweaking much. You can customize it but it requires overriding styles. Tailwind gives you a full control over the look of your site from the start making it a perfect for unique designs. So if you want quick styling, Bootstrap is when but if you need complete creative freedom, Tailwind is a better choice. Next we have is learning curve. Bootstrap is easier for beginners because everything is pre-styled. You don't need to write much in CSS. Tailwind takes a little more time to learn since you have to get comfortable with utility classes. But once you do it can be faster and more efficient. So think of it like this. Bootstrap is like pre-made meal. You just heat and eat. While Tailwind is like cooking from scratch. You control the ingredients but it takes efforts. So if you're just starting out, bootstrap is simpler but if you are willing to learn, Tailwind can be more powerful in the long time. So the next one is performance and file size. Bootstrap comes with lot of built-in styles even if you don't use them all. This can lead a slightly larger CSS file. While Tailwind's just in time compiler removes unused styles making it lightweight and optimized. So for better performance and smaller file sizes, Tailwind is a clear edge. The next one that we have is community and ecosystem. Bootstrap has been around for over a decade, so it has a huge community, tons of documentation, and many third party themes. While Tailwind is newer but growing fast with tools like Tailwind UI that can help to accelerate the development. So if you want a wellestablished framework with tons of readytouse components, Bootstrap is a great choice. But if you want modern customizable approach, Tailwind is the future. So now that we know the key differences, let's talk about when to use Bootstrap and when to use Tailwind. So first of all, let's cover when to use Bootstrap. If you need a quick and responsive design, Bootstrap's pre-built components make it easy to create a fully functional website without spending time on styling. The next one is if you're working on projects with the tight deadlines. If you need to deliver a clean UI fast, Bootstrap is way to go. Next one is if you are beginner or working with a team of non-designers, since Bootstrap comes with readym made styles, even developers without strong design background can create professionallook websites. The next one is if your project follows standard UI patterns, you are building something like dashboard, admin panel or corporate website. Bootstrap provides a solid structure design. So if speed and ease of use are your priority, Bootstrap is a great choice. Now let's move on to when to use Tailwind. The first one is when you want complete design flexibility, Tailwind lets you to build custom UIs without being restricted to predefined styles. The next one is if you're working on highly unique or creative projects. If you need a unique branded design that stands out, Tailwind is a better choice than Bootstrap gener. The next one is performance is a major concern. Since Tailwind's Jit compiler removes unused styles, it keeps your CSS file small and optimized. So next one is if you prefer writing CSS within HTML, Tailwind's utility classes lets you to style elements directly within your markup reducing the need of external stylesheets. And the last one that we have is if you are building a scalable project, Tailwind works well with the large scale applications where maintainability and customizability are important. So if you want control over your styling and lightweight optimized framework, Tailwind is way to go. So now before we wrap up with the final verdict, let's take a quick look on the pros and cons of both Bootstrap and Tailwind. So now first let us start with the Bootstrap pros and cons. Let's focus on the pros first. So the first one that we have is quick and easy to use. It has pre-built components that saves your time. So the next one that we have is responsive by default. After that we have large community and documentations. And after that we have is ideal for beginners. It is easy to learn with a minimal effort. Now let's move on to the cons. So the first one that we have is it is less flexible. It has larger file size. And the last one that we have is it can look generic. That means many bootstrap websites may have similar appearance. Now let's focus on the pros and cons of Tailwind. So in the pros we have it is highly customizable. Next one that we have is lightweight and optimized. That means git compiler removes the unused CSS. After that we have is faster development in a long run. So once you master the utility classes styling is efficient. After that we have is great for unique projects as it is perfect for custom UIs and creative designs. Now let's move on to the cons. So the first one we have is steeper learning curve. That means it takes time to get used to utility classes. After that we have is no pre-built components. That means everything has to be styled manually. And at last we have can clutter the HTML. That means with too many utility classes, it can make the code harder to read. So now that we have compared the pros and cons of both frameworks, it's time to answer the final question. Which is truly better? So the choice between Bootstrap and Tailwind CSS depends upon your project specifics. So Bootstrap is ideal for rapid development with pre-built style components making it accessible for beginners and suitable for project requiring standard UI patterns. After that we have a tailwind CSS which offers greater design flexibility through utility classes resulting in smaller optimized CSS files which is beneficial for performance focused project. So consider your project's requirements timeline and desired level of customization when choosing between these two frameworks. [Music] How does CSS actually work behind the scenes? Here's a simple breakdown. When you load the web page, the browser starts by loading the HTML file. The HTML is the structure of your web page. The browser passes the HTML and builds the DOM tree which maps the all elements in your web page. At the same time, the browser loads the CSS file linked to your HTML. It then parses the CSS to understand the styling rules like colors, fonts, and layouts. Next, the browser attaches the CSS style to the DOM tree, combining the structure from HTML with the styles from CSS. Finally, it renders the page on your screen, displaying the fully styled web page. Now that we have seen how CSS works behind the scenes, let's dive into the top six CSS frameworks that can simplify your styling process and speed up your development. The first CSS framework we will explore is Bootstrap. Bootstrap is widely used front-end framework designed to streamline the creation of responsive, mobile friendly and modern websites developed by Twitter. It combines HTML, CSS and JavaScript to provide pre-built components and a robust system for building a clean and consistent web designs. With Bootstrap, developers can save time by leveraging its extensive library of pre-style components and layouts, eliminating the need to write everything from scratch. Now, let's look at its key features. First one we have is a mobile approach which prioritizes responsiveness for smaller devices and scale up for larger screens. The next one is built-in components such as forms, buttons, cards and models to speed up your development. And the next one is JavaScript plugins including features like tool tips, corousels and accordians to add interactivity without external libraries. The next one we have is customizable grid system that makes your layout management flexible and easy. And then there is active community support ensuring regular upgrades, a wealth of tutorial and a large pool of resources to learn from. With its versatility and ease to use, Bootstrap remains one of the top choices for both beginners and experienced developers alike. So next one we have is Tailwind CSS. A unique utility first CSS framework that focuses on providing developers with low-level utility classes. This approach allows you to build completely custom designs directly within HTML, giving you a unparalleled control over the styling without writing separate CSS files. What sets Tailwind apart is its flexibility and minimal restrictions. Let's look at its standout features. The first one is utility first design philosophy, which means you can use predefined classes for spacing, colors, typographic, and more to build your layout. The next one is full customization allowing you to tweak the default configuration or extend them to fit your project needs. The next one is built-in responsive design utilities to create layouts and adapt seamlessly to different screen sizes. The next one is it enforces no opinionated styles so you start with a blank slate enabling complete creative freedom. The git just in time compiler generates only the necessary styles ensuring smaller CSS file sizes and faster performance. And lastly, its extensive ecosystem and plugins provide additional tools and integrations to streamline development even further. Tailwind CSS is perfect for developers who want precise control and efficiency while creating fully customized designs. After exploring Tailwind CSS, let's dive into another popular framework that is lightweighted and beginner friendly that is Bulma. Bulma is a modern CSS framework built on flexbox designed to simplify the process of developing responsive and stylish web design. Unlike some frameworks, Bulma doesn't rely on JavaScript making it a lightweight and highly focused on CSS. especially beginners friendly and provide a clean easy to understand syntax that reduces the learning curve for the new developers. Now let's look at what makes Bulma stand out. The first one is flexbox based. Belma uses flexbox as its core allowing the developers to create flexible and consistent layout without extra effort. The next one is responsive grid system. It has a robust grid system that automatically updates to different screen sizes, ensuring your website looks great on any device. The next one is built-in utility classes. With its predefined utility classes, you can easily add spacing, colors, alignment, and more without writing custom CSS. The next one is easy customization. It is fully customizable, meaning you can adjust its styles and components to fit your project's design requirements. The next one is pre-style components. It offers readymade components like buttons, cards, models, and forms saving you a lot of development time. And the last one we have is lightweight and modular. You only need to include a feature you use, keeping your project lightweight and fast. It's a perfect for developers looking for straightforward framework that provides all the essential tools to create modern and responsive web design. So now after exploring Wilma and its features, let's move on to the another versatile CSS framework that is foundation which is known for its flexibility and enterprise level capabilities. So foundation is a responsive front-end framework designed to create robust and accessible websites. So what makes it stand out is its flexibility making it ideal for enterprise level projects while supporting mobile first development. So it comes with the impressive features like mobile first approach. It ensures your designs are optimized for smaller screens before scaling up to the larger devices. The next one is advanced accessibilities. It helps you to build websites that are inclusive and usable for everyone. The next one is motion UI. You can easily add dynamic animations and transition to make your websites more engaging. The next one is responsive grid system. This lets you create layouts that adapt seamlessly to different screen sizes. And the next one is UI components. It offers pre-esigned components that save development time while maintaining the consistency. And the next one is SAS integration. Lastly, with SAS, you get powerful styling capabilities to make your design more efficient and customizable. So, if you're looking for reliable framework to tackle complex web projects, Foundation is definitely worth considering. So, now let's move on to the next framework that is Material UI. It is a Reactbased library designed to simplify the process of creating modern and responsive user interfaces. It follows Google's material design guidelines and provide a wide range of pre-built customizable components helping the developers to save time and ensure consistency in their designs with its seamless React integration, robust theming options and responsive design support. MUI is excellent choice for building professionalgrade application. So now let's look at its feature. The first one is material design compliance. It ensures all the components align with Google's material design standards offering a consistent and professional look. The next one is React integration. Built specifically for React MUI integrates smoothly to enhance the development experience. The next one is pre-built components. It includes the rich library of readytouse UI elements reducing the need to build the components from scratch. The next one is theming and customization. It offers the powerful theming tools allowing the developers to tailor design to specific branding needs. And the last one is responsive design. It automatically updates layout to fit the screen size ensuring a great user experience across the devices. So wrapping up our exploration of CSS frameworks, let's dive into the last one on our list that is semantic UI. Known for its simplicity and intuitiveness, semantic UI stands out as a modern CSS framework designed to make the web development simpler and more intuitive. What makes it special is its use of human readable classes name. You can write code that almost reads like plain English. This not only improves the code readability but also helps the developer to quickly understand the structure and the purpose of style applied. Let's break down its key feature. The first one is human readable class name. This makes your code semantic and easy to understand reducing the learning curve for new developers. The next one is pre-styled components for buttons to models. You can have wide range of pre-esigned elements to use right out of the box. The next one is responsive design. Built with adaptability in mind, it ensures the web page look great across all devices. The next one is custom theming. Tailor the framework to match your branding or design preferences by tweaking its themes and settings. And the last one is integration friendly. It plays well with other libraries and frameworks, making it a versatile choice for modern development projects. So suppose you are looking for a framework that simplifies the process of building visually appealing and responsive websites while keeping your code semantic. In that case, semantic UI might just be your go-to choice. So before we conclude, let's take a closer look at the comparison between two most widely used CSS frameworks that is Bootstrap and Tailwind CSS. In the world full of CSS frameworks, Bootstrap and Tailwind CSS are two most popular and frequently debated options. While both are powerful tools, they cater to different needs and approaches of web development process. Let's compare their key aspects. First, let's talk about their approach. Bootstrap is predefined and it comes with readyto-use components making it easier for quick development. On the other hand, Tailwind is customizable and allows you to build your own designs using utility classes. Next is styling. Bootstrap is component- based which means it provides pre-style components like buttons and n bars. Tailwind CSS is utility based giving you a small reusable classes to style elements directly. When it comes to customization, Bootstrap has more fixed structure, so it's easier to use but harder to customize deeply. Tailwind, however, is flexible, allowing you to tweak designs extensively. Lastly, we have size. Bootstrap tends to be bit bulkier because of its pre-built components. Tailwind is lightweight as you only use the style you need. So, it keeps the size minimal. So, which one you should use it depends upon your project. Use Bootstrap for faster development with predefined components or Tailwind for complete design flexibility. In conclusion, Bootstrap is excellent for developers looking for readytouse solution while Tailwind CSS caters to those who prioritize flexibility and creativity. Both frameworks are widely used. So the choice ultimately depends upon your project goals and personal preferences. All right. that you all need to understand the relationship between HTML and CSS in order to understand how a website can be built using HTML and CSS. Now guys, think of HTML as a skeleton of your web. It basically defines the structure of the web. On the other hand, CSS is like our clothes. We put on fashionable clothes to look better. Similarly, the web uses CSS for styling purpose. So guys, before we start creating the website, let's look at the prerequisites. All right. So, first of all, you'll need a code editor. I'll be using Visual Studio Code to type the entire code, but you can use any code editor you're comfortable with. I personally switch between Sublime Text and Visual Studio Code. All right. Now, apart from that, you must have a good understanding about HTML and CSS. If you guys aren't familiar with these languages, I suggest you go and read about them. I'll also leave a link in the description so you can go and check out our content on HTML and CSS and then you can come back and create this website. Okay. So guys, it's important for you all to have a basic understanding of HTML and CSS. Guys, you don't have to be a master in CSS and HTML in order to build a website. You just require the basic functions and the basic concepts of HTML and CSS to create a simple website. All right. So guys, I'll be creating a website for you dog lovers out there. Let's take a look at how the website looks. All right. So guys, this is how the website is. There is a cute little dog in the background. It is basically a dog adoption website. And here you can see there are several buttons and when you hover over these buttons they have a background. Apart from that there is an adopt now button and there is a cute little tagline to our website. So we're going to do all of this from scratch in less than 15 minutes. Okay. So guys without any further ado let's get started. All right. So guys we're going to begin with creating a new folder. It's always a good practice to store your entire code in a single folder. So I'm just going to name this folder as website. And we have this image of a puppy which I'll be using as a background image for my website. So I'm just going to drag this image and put it into my folder. Now throughout this demo I'm going to be using Visual Studio Code as my code editor. All right. I find it very compatible. So it's a good choice for me. Now what I'm going to do is I'm just going to drag this folder that I created and I'll paste it into Visual Studio Code. All right. So here you can see that there's a website folder with a puppy image. Okay. Now let's start with coding HTML and CSS. So first of all you'll need to create two files. All right. So first is the HTML file which I'm going to name index.html. And similarly I'm going to open a CSS file and I'll name it style. CSS. So, I'm going to begin with HTML tags, of course, and I'm going to add head tags. And within the head tags, I'm going to define a title for a website. Okay, let's name it website using HTML and CSS. Okay, so guys, you can name it whatever you like. This is just the title of the website. I'm also going to link my CSS file in my HTML file. So for that let's just give the name of the file which is style dot CSS. All right and stylesheet. So for those of you who know CSS and HTML know what exactly I'm doing. Now like I mentioned before if you're not familiar with the basic concepts of HTML and CSS please look up the courses that I leave in the description box below. go through them and then come back to this video because you only require the basics of HTML and CSS in this website. All right. Okay. So, I've created head tags over here, title tags, and I've also linked my CSS file. Okay. Let me just save this and let's go to the style CSS file. So, I'm going to begin with adding a margin and a padding to the entire website. So, that's what I'm doing here. All right. Margin and padding. Okay. Now let's define body tags over here. Within body tags, I'm going to define header tag. Okay, let's just leave this empty for a while. And let's style the header now. Sorry for the spelling mistake. So I've just selected the header. Now what I'm going to do is I'm going to add the puppy image as the background image over here. So background image and you have to mention the URL. All right. Now URL here is basically the path to the image. Now since my puppy image is in this folder itself, I'm just going to write puppy. JPG. So guys, if you had this image in any other folder, then you just mention the path of that folder. Okay. So I've set the background image. Now I'm just going to fix the height and background size of the image. All right. And let's fix the background size. Similarly, I'm going to fix the background position as center. All right, let's save this. And now let's see how our website looks so far. Okay, so I'm going to reveal an explorer and open this file. So guys, this is how our website looks for now. Like the image is quite clear, but what we want to do is we want to make it blurry because it's a background image or we want to decrease the opacity of the image. So we'll be doing that later on. For now, let's add the navigation menus. So guys, when I showed you all the website, there was home button and there was about button and all of that. That is the navigation menu of the website. So let's add navigation menus now. All right. So we're going back to the HTML file. I'm going to define a div and let's give it a class. Right? So I'm naming it top. Okay. This is basically for the navigation menu. Now I'm going to put the navigation menu in an unordered list. Okay. I'll give it a class name as well. Let's name it navigation menu. Okay. Now I'm going to add a list of links over here. So the first one would be now these are just empty links because we're not coding the back end of this website just the front end. So I'm just defining an empty link over here and I'll name this as home. All right. So what I did here was I added an empty link over here called home. Okay. Now I'm just going to copy paste this because we have around five such links. Okay, let's name this about. So usually in all the websites you see these navigation menus which have home, about or which have contact services and so on. That's exactly what I'm doing here. All right, let's name this one as breeds. So basically the breeds of the dogs. Okay, now this can be adoption since this is a dog adoption website. Okay. And lastly, I'll add contact. Okay, so this is how it looks. So guys, what I've done here is I've added five empty links over here. Okay, now let's just save this file. Let's look at how our website looks. Okay. All right. You can see all of these links are on the left hand side. Now what we want to do is we want to get these links on the top right corner. Okay. We want to align it horizontally as well. Okay. So, let's start by doing that. Let's go back to the Visual Studio Code and I'm going to go into the style CSS file. And what I'm going to do is I'll select the navigation menu class. Let me select that. And I'm just going to float all of the elements to the right. This will just position all the list items to the right. Okay. And let's also set the list style to none. And I'm just adding a margin on top. Okay. setting it to 30 pixels. All right, let's save and let's see if there's any change. All right, now you can see that all of them are aligned to the right hand of the page, but they're all aligned vertically. Okay, I want them to align horizontally over here. So, let's change that. Now, going back to the CSS file, what we're going to do is we're going to select the navigation menu. In that, we're going to select all the list items. All right. What I'm going to do is I'm going to set the display as inline block. Let's see what happens when we do this. Okay. Let's save the file. Let's open this up. So guys, I made a small mistake over here. I'm supposed to add dot because I'm selecting a class. In order to select a class, you add this dot notation. Okay. So now let's save this. This will basically align all of the links horizontally. All right. Let's save it and let's see if it works. All right. to refresh. And here now you can see that all of these links are aligned next to each other. Okay, this is exactly what I wanted. Let's add some padding. Let's change the font size, font color, and all of that. Okay, so let's go back to our CSS file. Now, what I'm going to do is I'm going to select navigation menu class. After that, I'll select the list items within which I'll select the anchor tags. Okay, so basically all the links. Now, I'm going to change the color. I'll set it to turquoise. So guys, you can change this and you can do whatever you want. Like if you want to have a different color or if you want to have a formal business kind of a website, you can do that as well. Okay, I'm going to set this to none. And let's add a padding. All right, I'm going to add a padding of 5 pixels by 20 pixels. Okay, now I'm going to set the font. Okay, so I'm selecting the font family. I'm going to add Verdana. So guys, you don't have to do all of this. I'm just doing this so that the website looks more attractive. All right, you can mix it up and add your own functions, own styling functions. And please do share your website picture with us. We'll be very happy to see your progress in this. So here we just styled all the links. All right, now let me just open the website and let's see how it looks. All right, I'm just going to refresh. Now there's enough space between the links. And also the color has changed. Okay. But for some reason you cannot see the navigation menu because the background image is too opaque. So let's blur out the background image or let's make it a little bit transparent. Okay. Go to your CSS file and scroll up. All right. Go here where you added your image and what I'm going to do is I'm going to add an opacity function to this. So I'm basically going to make it a little bit transparent. Okay. So, RGBA where A is for opacity. All right. All right. So, I'm basically trying to set the opacity of the image. Okay. Y'all can do this or you all can set it according to your needs. Okay. So, I'm just going to save this. And now, let's look at our website. Now, you can see this entire navigation menu. Okay. So, this is exactly what I wanted to do. Now let's go back to our HTML file. So guys, when we're on the website and when we are on the homepage, I want this home link to get highlighted. All right. So for that, let's go back to the HTML file and let's just add a class to this home link. Okay, I'm going to add a class. Let's call it home button. Okay, now that I've added a class to this home link, let's style it. Okay, so let's go to style.css. CSS. I'm going to select the home button class and let's add some border to it. Okay. So, I'm going to add a border of one pixel solid gray. And similarly, I'm going to add a background color. Background color, I'll set it to white. Now, let's save the file and let's see if these changes are visible. Okay. Open up the website. Yeah. So, this basically shows that I'm on the home button. Now, I'm just going to add the hovering effect on all of these buttons so that they get highlighted every time I'm hovering around them. Okay. And let's try and do that. So, for that, go back to your CSS file and select the navigation menu. All right. And within that, select all the links and add the hover function on them. Okay. And let's give it some properties. Okay. Okay. So the border I'll again set it to 1 pixel solid gray. Similarly I'll add a background color. All right I'll set this to white. Now let's save and let's see if this works. So you see that when I'm hovering around the buttons the buttons get highlighted. This is exactly what I wanted. Okay. Now, what I want to do is I want to add a tagline to my website. Since it's a dog adoption website, I want to add a cute tagline. So, I'm going back to my HTML file. I'm creating a div. And let's give it a class. Let's say tagline. All right. And let me define my tagline now. So, my tagline is share your home with a cute dog. All right. So let's just save and let's see how this looks. All right. So this tagline has come on top. What I want to do is because this is a tagline, I want it at the center. Okay. And I want to change the color and the font of this. So let's go back to the CSS file and let's start styling. Okay. So I'm going to select the tagline class and let's add some parameters to this. So, first of all, the position. I'll set the position to absolute. All right. I'll also adjust the width. Okay. 1200 pixels. And I'll set the margin on the left and margin top. Now, I also want to style this text. All right. Now, this text is within H1 tags. So, let's select the H1 tags first and let's style it. Okay. H1 and let's set the color to white. And I also want to change the font size. I'll set this to 50 pixels. And similarly, font family. Set it to Vana. All right. And I'll also align the text at the center because this is a tagline and I want it at the center. Okay. I also want to set the margin. Okay. So we'll select 275 pixels. Okay. So let me save this and let's see if it brings changes to the website. Okay. So refresh and yes. Okay. This is exactly how I want it. Okay. So you can reduce the size of the font or you can play with it. Change the tagline or you know have it somewhere else. Okay. So just play with the website make it look interactive. I'll leave all of that to y'all. I'm sure all of you are creative enough to do that. Okay. And next what I'm going to do is I want a small button over here which says adopt now. Okay, immediately after this tag line I want a button which says adopt now. Okay, or anything which is adopt or something like that. So for that I'm going to go back to my HTML file and I'll define another div over here. Okay, I'll give it a class. Let's say adopt. Okay. Now what I'm going to do is I'll add a link which will say adopt now. Okay. It's a empty link because we're just coding the front end. I'll give it a class. It's always a good idea to give class or identifiers to your HTML tags. Okay. That way you can select them easily and then you can manipulate them. Okay. So I'll name it adopt now. All right. Let's save this. Let's see how the website looks. Okay. Okay, you can see that this link has come on the left side of the page. Now I want it exactly at the center below this line. Okay, let's style that. So go back to your CSS file and and select the adopt class. Okay, adopt. And let's add some margin to this. Okay, so I'm adding a 30 pixel margin. Also adding margin to the left. Okay. All right. Now I want to style this link adopt now. So I'm going to select this BTTN class and I'll style that class now. Okay. So dot button and what I'm going to do is I'm going to set a border for this. Okay. So 1 pixel solid white. Okay. I'll also add padding. Okay. We'll set this to 10 pixels by 30. Okay. Apart from this, I'll make the text as yellow. Okay. So, I'm setting the color of the text to yellow. And I'll also change the font. It's always good to know different functions in CSS. There are hundreds of styling functions. Okay? The more you know, the better it is because that way your website, it look more interactive because it'll have a lot more styling. So guys, don't add too much of style. It might look too congested, but it's totally up to you. I mean, y'all can do whatever you like. Okay, so I'm setting the font size and let's also set the text decoration to none. Okay, so I'm going to save the file and let's refresh this. All right, so now you can see that there is a button called adopt. Now I want to add the hover function over here as well. So let's go and do that. This is going to be the last step of our demo today. We're almost done. So, first of all, select the div and then I'm going to select the link and I'll add the hover function. All right. So, I'm just going to set the background color. I've already given it good border. So, I'm just going to change the background color. I'll set it to burly wood. Okay. save the file and let's open up our website. So when I hover around this link, this background color changes. Okay, it's just like what we did over here. So guys, this is exactly how the website looks. All right, so you can go ahead and change anything you want. You can change the font, you can have a website of cars or you can have a website about cats. It's up to you. But this is how you create a simple website. I hope all of you enjoyed coding with me. And also if you want to make your website more interactive for that we use JavaScript. So if you want to add any motion in your website then you would use JavaScript. You can check out our content on JavaScript and jQuery. Now jQuery is basically a JavaScript library which makes it very easy to use JavaScript functions. Okay. So I'm going to leave a link in the description about jQuery, JavaScript, HTML and CSS. Okay. So you can go ahead and add motions in your website and make it more interactive. Why you should consider learning web development? So the first thing is it is easy to learn. Web development tools and technologies are designed to be friendly and easily accessible for beginners. With numerous online resources, tutorials and communities, you can quickly start building your website and a web application even if you have no career experience. The second thing is flexible work environment. Web development offers a highly flexible work environment. You can work from anywhere whether it's home, a coffee shop or while traveling. This flexibility is ideal for those who value work life balance and prefer to set their schedules. And the next is high salary package. Web developers are high in demand and this demand translates into high salary packages. The average salary of a web developer in India is about 10 to 12 lakhs perom and the average salary of a web developer in USA is about $120,000 perom. The next thing is freelance opportunities. Web development opens up numerous freelance opportunities. Whether you want to work on project part-time or build a full-time freelance career, there is a vast market for web development services. And next on we have creative and fun. Web development is a perfect blend of creativity and skills. It allows you to express your creativity through design and problem solving while building a interactive and engaging website. The process of creating something from scratch can be highly satisfying and enjoyable. Understanding the reasons of learning web development is just the beginning. Now let's see what web development actually is. Web development is a process of creating and maintaining website and web applications that user interact with on internet. To understand web development, let's have a look on two familiar example. And the first one is Amazon. On Amazon, everything including responsive design, navigation bar, product listing, shopping cart, wish list cart and search bar are result of web development. These features are designed to create seamless shopping experience for the users. Now similarly on YouTube the navigation sidebar, subscription button, playlist creation, live streaming, video player, search bar all are brought together to life through web development offering a interactive and smooth user experience. So this is why web development is so important. It is used to create applications like Amazon and YouTube. If you want to build your web application, learning web development will be your first step. So now that we know what web development is, let's see how it works. Web development involves two key components. The first one is front end. Front end is the part user interacts with directly through web browsers. It includes all the visual elements you see on the website such as button, text and images. Next we have backend. Backend is what happens behind the scenes. It involves web servers where all the websit's data and files are stored. business logic which processes request and handles the application's operation database where all the essential information is stored and together these back-end components ensure the website functions smoothly and can handle the user request efficiently. Now that you understand web development let's move on to the core technologies that makes it possible. First on we have HTML. HTML stands for hypertext markup language. It is a backbone of any website. It structures the content by defining elements like heading, paragraph, images, links. Basically, it forms the skeleton of the web page. Then on we have CSS. CSS stands for cascading stylesheets. It is responsible for website's look and feel. It controls the layout, color, fonts, and overall visual appearance, allowing you to create visually appealing and responsive designs. And next on we have JavaScript. JavaScript adds interactivity to your website. It enables dynamic features like animation, form validation and interactive element making the website more engaging for the users. Now without any further delay, let's set up our developing environment so you can start working on your first HTML program. So there are so many code editors in market but the code editor that we are going to work on is Visual Studio Code. So to download Visual Studio Code, you just have to visit the official website of Visual Studio Code and after that you have to just click on the download link. In case you are using Mac, you can download from this link. But we are using Windows. So I'll just click on this link. After clicking on that link, my download process has started. So after the file gets downloaded, we are just going to click here and then we are going to click on I accept the agreement and then next. So this basically is the address of your visual studio code. Just let it be as it is and click on next. Next. And here we are going to click on create a desktop icon and open with code. Open with code. Then next. And then the last step is to install Visual Studio Code into our system. So the installation process has started. So here I can see that installation has been completed. We are just going to click on the finish button and that will launch our Visual Studio Code. So now we have successfully downloaded our Visual Studio Code. So now that we have installed Visual Studio Code, the next step is to install extension into our VS code. So for installing extensions in our VS code, we just need to click here and then we are going to search for extensions. So these extensions will help you to run HTML, CSS and JavaScript code in your VS code. So I have been using VS code for such a long time now. So these extensions are already installed in my VS code. I'll just show you. So the first extension that you need is liveerver. So this live server basically will help you to run your HTML and CSS code in your VS code. I'll just show you how to install. So after you'll click on live server, you'll get something like this. And you just need to click on install. And after installing this go live button will be added to your VS code. That's it. Just like that we are going to add auto close tag. So basically autoc close tag will help you to close the HTML or XML code automatically and after this you need to add auto rename tag. This will also help to rename the HTML pair tag and after this you're going to add ESLint. So this ESLint will basically help JavaScript to run into your VS code. And after this let us add code formatter. So this is the code formatter that we are going to add. This will basically format the code and increase the readability of a code in VS code. And we are going to add HTML and CSS support. So we are going to add this extension as well. So for now let's you know move on to creation of file into our visual studio code and these extension would be enough for now and for creating a file in your visual studio code first thing that you need to do is you need to add one folder in your VS code. So for adding a folder you just need to click on file open folder and we can just select any folder from our desktop or anywhere in our PC and we can also create a new folder. So what I'm going to do is I'm going to create a new folder here. So this new folder would be basics. That's it. Select folder and this basics folder has been opened in my VS code. So after opening a folder into our VS code first of all we are going to create one file in our folder. So to create a file inside a folder we are just going to click here and we are going to choose a name for our file. We are going to give it as first HTML. So our HTML file has been created. And next we are going to create a CSS file sty I I'll just give style dot CSS. So now CSS file has been created. And then we are going to create a JavaScript file as well. So we are going to give it as a script.js. That's it. So this is how you create HTML, CSS and JavaScript file into your folder. So the steps are you first need to add a folder in your VS code and inside that folder you're going to create multiple files. That's it. Now quickly just see how HTML works. So I'll just show you the code. I'll just run one single code. So let me write one heading. That's it. And you're going to save your code with Ctrl S. And then you're going to click on go live. Here you can see your web page. And this is the content that I wrote inside my web page. That's it. And this is how your Visual Studio Code functions. Now let us look at the overview at the basics of HTML and then we'll again come to our Visual Studio Code and we'll learn how to run HTML codes. So now just quickly understand the basics of HTML. So we use tags in HTML for every specific purpose. So now we'll just quickly see what are some basic tags in HTML. First one we have is HTML tag. So any of the content that we want to include to our web page will be written inside the HTML tag. Right? And after that we have head tag. Inside the HTML tag first of all we are going to create head. And in head tag we basically mention all the headers of our web page. For example title. So we use title tag to give title to our web document. We'll just practically see this within a minute. And after that we have this body tag. So apart from head section, apart from header, we need to include every specific thing. Everything that we need to see on our web page, we are going to include it in body section. So inside the body section, we use heading to give heading to our web page. And after heading, we use paragraph to write any paragraph in our web page. And that's it. These are some basic tags in HTML. And now we'll just go to our Visual Studio Code and we'll practically apply these tags. So we are just going to delete it. And from initial we'll understand what are the tags that are essential. So the first tag is dock type HTML. We basically use dock type HTML tag to tell the browser that the type of document we are writing is a hypertext markup language type. That's it. This is the use of dock type HTML tag and after dock type HTML we'll open our HTML tag. So as I have told you everything that we are going to write will be included in the HTML tag. So inside the HTML first tag we are going to create is head tag. Inside the head tag we are going to mention the title of our web page with the help of title tag. Right? So now inside the title tag I'm going to give the title my web page. That's it. And one more thing that we do inside our head tag is we link our CSS file to our HTML file. For that we use link tag. So link area stylesheet. This is basically written to tell that the document that we are linking is a stylesheet. And after this we are going to give the address of the stylesheet. So we are just going to mention the name and which is style dot CSS. That's it. This is the sign to close the tag. And we have successfully linked our HTML file with CSS file. That's it. Just save the document with control + S. Move to the web browser. Refresh it. And the heading has been gone because I have removed it. Now again we'll go to our Visual Studio Code. We'll just create. So one thing we did not see. So this is basically the title of the web page. You'll provide a title and that will be appeared here. So this is the use of the title tag. So after the head tag, what we are going to do? We are going to create the body section. So inside the body section we write headings, paragraphs, links, images and everything. First of all we'll see heading. So for heading we use H tag and H tag varies from H1 to H6. We are going to see all of them. So we are going to write this is my heading. Right? We'll just copy this heading and we are going to paste it. That's it. And I'm going to change it to H2, H3, H4, and H5 and H6. That's it. I have written my heading from H1 to H6. And Ctrl S. And we'll move to our web page. So here you can see H1 to H6. H1 being the biggest and H6 being the smallest. So this is how heading tags work and after this we'll see the example of paragraph tag. So here paragraph has been included. So these are some basic tags which you include in your body section which are heading tags and paragraph tags. So after learning heading tags and paragraph tags we are going to learn about link tag. So to provide link in HTML we use anchor tag and it is representing using a. So first of all I'll write my paragraph. I'll write here visit and after that I'm going to open my anchor tag and I'll give the reference. So inside this we are going to mention our link. I have just pasted my link and after this I'm going to close my anchor tag. So here we are going to write something visit let's say edure that's it ctrl s and here it is so the link has been created I'm clicking on the link and I have been redirected to the edure website. So that's it. This is how you use link tag. This is how you use anchor tag in HTML. So after learning anchor tag in HTML what we are going to do we are going to learn how to add image. So here I'm going to give heading image example. So first of all what I'm going to do I'm going to copy one image link. So I have copied one image example. Now let us learn how to add any image. So for that we use img tag and we give source to that image. Inside src we are going to give the link of the image. This is the link that I have copied. And after that we are going to give it a all alt attribute. So alt attribute is basically given just in case your image is not loading. So instead of your image that all attribute text will be shown on the website. So that's it. We are going to close the image tag. Ctrl S again and example. So this is the image that I have provided inside my link. So we can see the image. Now let us just take an example how all attribute works. So what I'm going to do is I'm going to remove the image and save. So here we can see a cat because I have provided cat as my all attribute. Again here I can see my image. So that's how you provide image using HTML. So the next thing in HTML that we are going to learn we are going to learn the creation of list. So again what we are going to do is we are going to provide a heading. So list example that's it and then let us create a list. So to create a list I'm going to use ul. UL stand for unordered list. Likewise if you want to create ordered list you are going to use o. So inside ul li stands for list items. So we give list items name inside li tag. So we are going to give three list items. That's it. And then Ctrl S. And the output the list has been created. Here you can see. Now let me give you an example of ordered list. Just Ctrl Ctrl V. And what we are going to do? We are going to change here control S. So this is the example of ordered list. You can see here 1 2 3 and in unordered list you can see the dots or pointers. So after ordered list we have description list. So description list is represented using DL and inside this we give DT which stands for description terms. So we are going to give term one and then inside this we are going to give DD. So DD stands for definition description and inside this what we are going to do we are going to write something definition of term one. That's it. And again just copy this control S. Now let us look at the output. So this is how description list works. So these are the three types of list in HTML. Audited list, unordered list and description list. So after covering list in HTML, we are going to move on to tables. how to create tables in HTML. So for that we are going to create one section. Section tag basically improves the readability of the code. So with the section tag what we are going to do first of all we are going to give a class to our section tag. So the purpose of giving class is that it will group the multiple elements that share the same style or the behavior. So we basically give classes to the components and elements of HTML just to target them into CSS file. So I'm giving the class let's say tables section. That's it. Closing the section. And now we'll create a table in HTML. So for that first we'll give a heading table example. That's it. Now after this I'll just format document. We'll just use this. So my document has been formatted just because I have this extension in my VS code. So that's it. After giving heading we are going to start the creation of table. We are going to use table tag. Inside the table tag we are going to create a table row. Right? So inside the table row we are going to mention DH which stands for table header. We going to provide table header as course. Right? th and duration of the course let's say then one more header let's say instructor that's it these are three headers of my table after that we are going to create one more table row so for that just copy this and paste it three times so just change the content inside it. HTML and one more we are going to create a section for JavaScript. That's it. Ctrl S and let us look at the output now. So you can see the table has been created. Further we can style this table as we want inside the CSS file. So now you know how to create a list, how to create a table inside HTML document. So the next thing that we are going to learn is how to create boxes. So this is the most important part because whenever we are going to make a project, a form or anything in HTML, we are going to need this you know creation of division, creation of class, creation of boxes. So we'll just quickly see how to create boxes. For that quickly create a section and then give it a class. let's say flexbox container and inside this for creation of one division I'm going to use divv and again we are going to give a class to our division so what we are going to write is flex items that's it and After this let us give a heading. We did not close this div. Inside this div we are going to give a heading. So the heading that I'm going to give is this is flexbox. Again I want to format my document. So we'll just go format the document. That's it. And after this what we are going to do is we are going to give one paragraph. So and that is it. The division will get closed. So to make one or two more division like this just copy this code paste it two times. Tha