 Hello, everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. So today, we have day 70 of this Salesforce learning bootcamp. And as you all know, yesterday I started like explaining you the basic concepts of HTML so that you can properly understand lightningwap component going forward. So in continuation today also, we will be understanding HTML, but we'll be understanding how we can style our HTML with the help of CSS, right? So once again, like welcome everybody on the channel. And I hope you have gone through yesterday's video and you have practiced little bit HTML. So today I'm going to focus on styling HTML with CSS, right? So it is day 70 in front of you. And we are going to learn everything practically. And I will be explaining all the concepts like how you can apply CSS to your HTML. And what is the purpose of using CSS. So you will be understanding that properly today. Okay, so let's begin the session. So moving forward, like if you have joined this, if you have joined the session for the first time, this bootcamp and if you want to follow me, so just see who am I and what I'm doing for the community. So everything is written over this slide so you can just go through and you should know with whom you are interacting with whom you are learning things, right? So moving forward, so these are some virtual learning best practices. So if you are learning something virtual, so I, as per my opinion, like these seven points are very much important for everybody, right? So I follow all these best practices whenever I start learning something. So that's why I just listed them down. And if you follow all the best practices, so I'm sure you will be able to understand and you will be able to build a successful career in Salesforce ecosystem. So be consistent because consistency is the key and do regular practice whatever we are discussing. So I hope with the help of this bootcamp, you are able to follow a proper schedule. So right from the January, we are having a proper schedule like every week, I am explaining something to you, right? So I hope you are learning week by week, day by day, and it is giving you a proper schedule so that you can practice as well, because without any mentor, like it is very, it is very difficult for us to maintain a proper schedule. So I'm just being a reason for you so that you can understand the things on regular basis. And if you want to discuss anything, any doubt, and you want to become part of a community where lots of folks who are preparing themselves to become part of Salesforce ecosystem to find a job to learn new things. So you can just scan this QR code and you can also join that group. So this is week 20 where we are discussing about HTML and CSS. Next week I will be talking about JavaScript and then we'll be jumping on to the Aura and LWC. So these are some upcoming timelines like I'm just sharing it with you so that you should know like what topics we'll be discussing in the future. So just follow Sanjay Gupta Tech School on YouTube, LinkedIn, Instagram and Telegram so that you can receive all the session reminders and timely notification and all the links are available in the video description, right? So here, like you can see, please share a review or feedback about the bootcamp so you can write a review on YouTube, you can share it on Telegram, you can share it on LinkedIn, right? And for your information, like I just want to share, for non-tech people, I'm just starting a bootcamp which will be focusing on the basic coding skills with the help of C and C++. So I will be having an overview session on Thursday and regular session will be starting from Monday. So timing will be different. So Salesforce bootcamp will be going with the same pace every week and apart from that, there will be one more timing where I will be teaching C and C++ to the beginners. So it will be beneficial for BTEC students. So if you know any BTEC student who are in their BTEC first year, second year, third year, fourth year or they want to start their BTEC journey. So you can just share this channel and ask them to learn basics of coding with the help of C and C++, totally free of cost. So everything I will be explaining in detail on a daily basis so they can also learn those things. So moving forward, now we have the topic that we need to discuss. So it is styling HTML with CSS, right? So now I'm going to explain you a little bit about CSS first. Then we'll see how we can use CSS with HTML, right? So first we need to understand what CSS is. So basically CSS stands for cascading style sheets, right? So styling can be added to HTML elements in three different ways. So we have three different ways through which we can apply CSS to HTML. So in this first is inline, second one is internal and third one is external, right? So in case of inline CSS, you need to apply the CSS with the HTML element, right? And you just need to use a style attribute. So whenever you are writing any element, so let's say you are implementing any H1 tag or you are implementing any P tag or element. So with that element only you will be implementing the style. So that will be known as inline styling. So inline styling basically goes with that element only. Now, if you have implemented a particular element, for example, if you have implemented P element or P tag more than one time, and you want to apply a common CSS for that particular P tag or element. So what you need to do, you just need to implement the internal CSS. So that internal CSS you will be writing with the style tag or element and that you need to write inside the head section, right? So here we have second type that is internal CSS and internal CSS is basically page centric. So on particular page, whatever elements you are using and if you want to apply some common CSS, so for that purpose we can apply internal CSS. And third one is external CSS. So if you want to apply a CSS on more than one HTML pages, so in that case you can apply external CSS, right? So repeating again, inline CSS is basically element specific. Internal CSS is basically page specific and external CSS is basically it can be applied on multiple pages, right? So we have three different ways to write CSS. So now we'll be understanding these one by one. So first of all, I'm focusing on inline CSS. So in case of inline CSS, here you can see if you write H1 tag. So if you're writing heading for two times. So with the heading element, you just need to write the style tag like here it is written. So if you want to apply color blue on this heading. So this way you can write your code. So the same I'm going to write for you so that you can understand. So I'm going to implement it here. So you can see we are on web 2.html and here we have some headings. So let's create new file. So from here I'm going to create a new file. I'm selecting a language and choosing HTML. So beginning code I'm copying from here. Now inside body I'm writing H1 and with that I'm going to apply style. And here I'm writing color as blue. Right. I'm closing H1 and here I'm writing first heading. Right. Now what I'm doing I'm just copying and pasting it and writing second heading. Right. So this way I just implemented it. So I hope you understood like if you want to apply inline CSS. So here I'm writing a comment as well. So it is basically inline CSS example. Okay. So with this H1 tag I'm going to apply inline CSS. Now if you want to apply CSS with the element so you can do that as well. And for different different elements you can set different colors as well. So let's say here I'm setting red color. Right. So for H1 we have same color for two headings but for P we have different colors. Now I'm going to save this code. So I'm saving it as WAP3.html and the folder is same that is WAP. So under WAP folder this WAP3.html will be created. So now I'm just clicking on save. Okay. So here you can see all the CSS I implemented around H1 and P. So I just saved this code. Now moving here so we have WAP3.html. So what I'm going to do I'm double clicking on this file so that a new like web browser will be open and the result will be available there. So here you can see headings are in blue color. First paragraph is in green and second paragraph is in red color. Okay. So this is the outcome the things which we have applied as inline CSS. Right. So inline CSS you need to define along with your elements whatever you are implementing. And if you see any doubt anything you want me to revise so you can just write your question in the chat so that I can go through and I can explain you. Yeah. So I just focused on the Anuj and Lakshya chat and I have a smile on my face like you guys are kidding. That is good. Okay. So if you have any question you can ask in the chat and I think this is very simple like how to apply inline CSS in HTML. So everybody understood. I don't see any question. So if you have your mohan like those videos are also same. Those are for HTML and CSS. So here in live sessions like we are discussing and on daily basis I am explaining something and if you have if you have anything in your mind like if you have any doubt so you can discuss with me. So Sudhakara if you scroll to the chat so you can just read and you can have a laugh. Okay. So moving forward we have one more style that is for body. If you want to change the background color so you can apply the CSS with the body element or tag. So here what I'm going to do style then here I am writing background color. Yep. So here I just applied light gray and I don't think it will be showing any difference. So let's see. I'm refreshing this page. Yeah. So it is visible like you can see background color changed to light gray. Right. So this way if you want to apply the background color so with body tag you can do so you just need to use style equals to background color and then you can apply the color whatever you want. Okay. So this is about inline CSS. Now let's jump to next type that is internal CSS. So here you can see we have an example and in this example you can see we have on left hand side we have the CSS which is enclosed in style tag. And at right hand side we have body where we have H1P H1P. So what will happen like for body background color will apply for all the H1 whatever H1 you are using color will be blue and for all the P color will be green. Right. So this way you can just define the CSS in your files with the help of internal CSS. So if you want to apply common CSS on multiple elements or tags so instead of writing inline CSS you can prefer internal CSS. So I'm going to modify this for you. So here we have web three. Okay. So now I'm going to copy this code and I'm going to create one more file and that will be web four dot html. I'm pasting the code here and from here I'm removing this comment. I'm removing all the styles because I will be applying internal CSS. So removing all removing all the inline CSS. Now what you need to do inside had here you can start style tag and inside style tag you will be writing the CSS. So from here I'm removing this as well. So right now there is no CSS no inline CSS. Now I need to write internal CSS. Okay. So in this style tag I will be writing the code. So here I'm writing body and inside curly basis. I will be writing background color and here I can write light green. Okay. Then for H1 if I want to write CSS so I can use H1 then open curly basis then you can write color and then you can write green. Then P open curly basis then you can write color. Here I'm writing red. So this way you can apply CSS. So this is basically internal CSS. So inside style tag we are writing body H1 and P styling and whatever tags or elements you are using here. They will be following the CSS which is defined here. So I'm just going to save this file. Web 4.html. So here we have web 4.html. I'm double clicking opening it. So here you can see headings are in green paragraphs are in red and background isn't gray. And this is the CSS that we defined already here. So you can see headings are green and paragraph in red. So that is happening here. Now sometimes what we need to do we need to mix inline CSS with internal CSS. And you might be thinking which type of CSS will win in that case. So in this example here H1 and P elements CSS is written. Now I am going to override. So for P we are using color as red but for this one I just want to change it. So I am applying color as blue. So for this P element I applied inline CSS. So basically first priority will be given to inline CSS. If inline CSS is not available for any element then it your code will be checked for internal CSS. And if internal CSS is available so that will be applied if internal CSS is also missing then external CSS will be checked. If external CSS is available so that will be applied. If that is also not available so nothing will be applied. Okay so now you will see first paragraph will be in red and second paragraph will be in blue. So I am going to refresh the page. Here you can see the result. So first paragraph is in red and second paragraph is in blue because inline CSS is winning over internal CSS here. So this way anytime if you want to apply a particular CSS on a particular element so you can use inline if you want to apply a common CSS so you can go with this internal CSS. Right so I hope it is very clear to everyone. I just try to explain everything in very neat and clean way and I just executed the example as well. Still if you have any doubt you can ask in the chat so that I can answer. Otherwise I am going to show you how we can implement the external CSS. So here we have lots of pages like web one we have code we have p tags in web 2.html we have h1 tags in web 3 we have h1 and p both in web 4 also we have h1 and p. Right now if you want to apply a common CSS for all the pages like all the headings all the backgrounds all the paragraph should be in same color. Right so what you can do you can remove all the CSS all the inline and internal CSS and you can implement external CSS. Right so if you want to implement external CSS so there should be a separate file. Where you will be writing all the CSS and then you need to use that file in your HTML code. So first of all we need to understand like how we can write external CSS. What is the syntax then I will be showing you how we can create the file and how we can utilize that external CSS in our HTML code. Okay so this is the example for external CSS. So here you can see we will be having two different files. One file will be having CSS code that will be saved with dot CSS extension. Right and another file will be with dot HTML extension. Right so dot HTML extension is having all the HTML code. There is no CSS but here inside had we have one option that is link relation equals to style sheet and here we are providing the reference like what is the name of your CSS file. What is the extension and what is the location of that file. So right now as you all know like yesterday also I showed you everything whatever we are creating we are putting in this folder. So in one folder if you put everything so you don't need to specify the fully qualified path. Okay so here we have all the HTML files we have image so here only we will be creating our dot CSS file and that dot CSS file we will be using in different different HTML files. Okay so now first of all what I am going to do from here I am going to remove all the CSS that I applied. So I am removing all the CSS I just saved the code. So no CSS no CSS is available here from here also I am going to erase all the CSS. Okay so this is plain HTML from here also I am going to erase it. So no CSS in web three so I am opening all one by one so web one dot HTML there is no CSS only pure HTML. So in web two we don't have any CSS only pure HTML code is available. If we go to web three dot HTML here also you can see all the HTML code is available and web four dot HTML again we have simple code HTML code. Now we need to create one more file we need to create one more file and in that file I will be implementing all the CSS code. Okay so clicking on plus sign select a language so here I am writing CSS so you can see this CSS option is available and here I will be implementing the code. Okay so here I need to implement this left hand side so I will be creating a body block H1 block and P block right. So first I am creating body then background color so I am putting light gray. Okay so this is body then I am creating H1 so here I am putting color as red so H1 color is red then I am creating P so here here is here I am providing color as green right. So this way this way two blocks are created one for H1 and one for P right so heading color is red and paragraph color is green. So this is common CSS file that I am going to create and this CSS file I will be using in different different HTML files. Okay so here I am going to save it so I am naming it as styles dot CSS. So your CSS file name can be anything but its extension should be dot CSS. Okay so here I am going to save it and this way our CSS file is created so if you go here so you can see in this folder at the end we have type of files as well. So first file is PNG second is CSS and remaining all are HTML right. So now what I need to do this CSS file is created now with the help of the syntax which is available inside had what I need to do I just need to import that CSS file in all HTML files. Okay so what I am going to do one by one in all the files I am going to write this statement. So here we have title so we are using link we are using link then we need to set the relation. So relation I am setting as stylesheet and here I need to put href equals to styles dot CSS right. So here we just provided a relation like stylesheet and then href is having the CSS file name. So file name is styles and extension is dot CSS right. So this you need to provide so now what we need to do you just need to save it. So the same code I am going to copy and paste in all the HTML files under head. So here I pasted I am saving it then in Web 3 also I am just saving then here in Web 4 I am pasting it and I am saving the code. So in all four HTML files I just used this statement so that I can include the CSS file. Okay now one by one I am going to open all the files and we will see whether CSS is applied or not. Okay so moving to the browser so first of all I am going to refresh this. So this is my web 4.html so here you can see headings are in red and paragraph is in green. If I go to web 3 and do a refresh so heading is in red and paragraph is in green. Okay and if I open web 1.html so here you can see all the paragraph is in green. If I open web 2 through this link that we created yesterday so here you can see h1 heading is in red and rest of the headings are black because they are h2, h3, h4, h5 and h6. So this way I hope you understood like the common CSS is applied on all four different HTML files and whatever code we implemented over here in the CSS file that is being applied to across the HTML files that we have created. Okay so till now if you have any question you can ask. So I just explained you how we can apply inline CSS, how we can apply internal CSS and how we can apply external CSS. Now one more thing at the time of internal and inline CSS I told you if you apply internal CSS and you apply inline CSS as well so inline CSS will be given the preference. Right now we have applied external CSS and by any chance if we apply internal CSS so preference will be given to the internal CSS and along with external internal you have implemented inline CSS as well and then preference will be given to the internal sorry inline CSS. So that I am going to show you. So here I am writing style equals to color. So here P color is green. So here I am writing blue. So in web4.html the first paragraph will be in green but second paragraph will be in blue. So if I take you here to web4 if I refresh. So you can see second paragraph is in blue color. Right and if we go to any other page so there will be no change. If we go to any other page there will be no change. Right because modification I have done in the web4.html that too with particular element. So first preference will be given to inline CSS. Second preference will be given to external CSS and third preference will be given to external CSS. Okay so this way I hope you understood how we can apply three different types of CSS and these we will be using in our Aura and lightning web components as well. So in Aura and lightning web component we will be having separate HTML files where we can write the code and we will be having separate CSS file where we can apply the styling. So that is kind of external CSS like separate file is available but that file will be used within the component itself. So if you have created a CSS file and that CSS you want to apply in a component so in that component you can create a file and that file will be like that CSS will be applied to your HTML code automatically. Right so this way I hope you understood the differences between three types. Now if you have any doubt so you can ask in the chat so I will be answering your questions. Now if you don't have any question so just focus on this slide. So in this slide you can see along with color we have different styles as well. So if you want to change the font design so you can have font family. If you want to change the font size we have size font size then if you want to align your text left center or right so you can use text hyphen align. Okay so these kind of CSS also you can apply. So I'm going to show you this with the example. So here I'm going to apply. So let's say font size colon 300% then I'm using text align center. Now here for P I'm using text align right. So this way I just added more CSS to this external CSS file and I'm refreshing. Sorry I just saved it and I'm refreshing the pages. So here you can see here you can see heading is in center and paragraph is in right. If I go here and refresh so you can see this heading is in center. If I go to this page and refresh so you can see heading is in center and paragraph is in right. So this way whatever CSS I applied here in the external CSS that is being applied on the HTML files as well. Right and Pooja is asking like how to check errors. So basically if you apply something and that is not being rendered on the UI so it means you did a mistake. So there is no way like whenever you are writing some code and if you are saving so it will give you an error message. So you just need to take care of yourself whenever you are writing the code so it should be appropriate. Otherwise there will be no error and you just will be seeing incorrect results on the browser's page. Moving forward next is like CSS box model. So if you want to apply a border around ptext so you can apply this border attribute. So how we can apply this so for all the ptext I'm going to apply this border. So one px means one pixel it will be the thickness solid means like lines will be solid and color I'm picking as red. So with all the ptext there will be a border border thickness will be of one pixel it will be solid and color will be red. So let's see. So here you can see paragraphs are having red border if I refresh so here also we can have the borders. If I go so here we don't have any paragraph if I go here. So here we have paragraphs if I refresh so you can see each paragraph is having border in red color. Okay so this way I hope you understood how we can apply the border along around the paragraph. Okay now we need to understand how we can apply padding and margin. So basically you can consider like this is your page in dotted line you are writing the content and in green line you have a border. So the distance between border and content is known as padding and the distance between border and your outer screen that will be known as margin. So we can set padding and margin as well padding and margin as well so how we can apply that. So here you can see in left hand side with P element if we apply a border so we can apply padding as well. So padding means the text and the border the distance between text and border will be known as padding and outside border if you want to give some spaces so you can use the margin. Okay so Praveen is asking what are the attributes we often use in CSS. So Praveen for your knowledge like we are discussing the attributes only. So here you can see for P I already explained color text align then border now we are going to apply padding as well. So padding I am writing as 10px. So let's apply padding first. So I'm just saving the code and doing refresh. So you can see there's a distance between border and text earlier it was slightly close to text border was border was close to the text. Now border is border and text are having a little bit distance. So this is because of padding. Right now if you want to have a distance outside of the border so that will be done with margin. So this way we can apply the margin and if I refresh so you can see left. So this paragraph border is having some distance from left some from right some from top and some from bottom. If you increase 30px to 50px so you will experience like from all four places top bottom left and right margin is given. Okay so these are some additional attributes those are available with elements that you can apply. So if you have any question you can go ahead and whatever right now we are discussing it is basically all like your foundation to lightning aura and lightning web component. So don't take it like lightly understand everything properly because whatever we are understanding here it will be directly used in aura and LWC. So whatever I am explaining just do practice and if you are from non-technical background and if you don't know about HTML and CSS. So for you these sessions are very much important because if you don't know the basics of HTML and CSS. So in that case understanding aura and LWC will be little bit difficult for you. Okay so now I am going to show you one more thing that is how we can float something from left or right. So if you have a P tag and inside P like if you are using any image so with image you can use a text as well. So here you can see we are specifying style. So style here we are using float left. So what will happen picture will be available on the left hand side and paragraph will be available just after that picture. If you write float right so picture will shift to right hand side and then your text will be left to that image. Okay so I leave this example with you just implement it and see whether it is working fine or not. Okay so Dushyant is asking about HTML tables and like Dushyant your wishes like completed sort of you said about HTML tables and the next slide is about HTML tables right. So I wish like you could have asked something else and you could have get that as well. So here you can see we have one more thing like in HTML we can create tables as well on the page. So if you want to show something in form of table so you can create that also so tables are basically defined with the table tag and tables are divided into table rows with the help of TR tag and table data with TD tag. Okay so we have headings as well so that will be written through TH and table data are the data containers of the table. They can contain all sort of HTML elements like text, images, lists, other tables etc. Right so now let's understand how we can create tables in HTML. Okay so this is an example so with this example you will be able to understand like how we can create a table. So table is having style like table is having style with colon 100% then TR inside that we have TD then TR is closed then again it is started so this is an example that I'm going to implement in front of you. Okay so I'm going to create one more file. Okay so here I'm just copying initial statements. Okay so inside body I'm going to write table then we have style so style here you can see width colon 100% so style equals to width colon 100% so that table will be available in the full window. Now here we need to put TR tag so TR is for table row. TR is for table row one row will be created and inside that row you will be having some data. Right so here we need to write TD tag so that we can have table data. So here I'm writing my name first name one more TD my last name one more TD. So let's say here I'm writing what I do so I'm writing instructor. Right so this way this table row is created now I'm just copying and pasting and I'm creating one more row through TR and here I'm writing name of another person first name because second name Gupta and here I'm writing architect. Right so this way two rows I have created like two rows will be created and each row will be having three columns. So now I'm going to save it with web 5.html so it is being saved now what I'm going to do here I'm going to refresh. Okay first I need to open that file so I'm going to open web 5.html so here you can see the table is created. The names are shown here like first name last name and the job profession. Everything is available but you can see table is not having any line borders are missing. Okay so if you create any table with this code so table will be available but lines won't be available. So now before moving to that we have one more thing like if you want to show headings. So you can use TR tag and inside that you can use TH table heading so let's put headings as well. So that I'm putting here so this is for first name then we have last name and then we have profession. Right so this is another heading so I'm just saving the code and refreshing the page. So at top you can see we have heading so headings will be available in the center automatically and in bold. So headings are available in the center in bold and values are available in left side left aligned. Right so I hope this way you understood now the next thing is how we can apply the lines how we can have borders. So for that we need to understand this code so you can apply this thing like table border equals to one so it will also work. If you want to apply internal CSS so this way you can write and okay so let's write this table comma TH comma TD and then we will be writing this border property. So here I'm going to write it so I'm just creating internal CSS. So here I'm writing table TH TD so whatever style I want to apply I will be applying on these three elements. Okay I just saved this code now moving here and I'm refreshing the page. So here you can see borders are available here you can see borders are available. But if you notice we have two borders one for the whole table and one for each block. Right two different borders are available one for whole table and one for table heading or table data. So now how we can resolve this so here you can see on right hand side we have a property border collapse colon collapse. So if you write it here if you write it here and save the code and refresh your page so now you can see your table is having only one border. So this way whole table is available in front of you so you can see first name is available last name is available and profession is available. Right so I hope this way you understood now if you want to move the text from left to right or center so you can use text align as we used it for H1 and P elements so those will be same. Okay moving forward like table with cell padding so if you want to apply padding so you can apply this so for TH and TD you can apply padding. So here you can write TH TD and then you can write padding suppose 30px. So if I refresh so you can see the table so padding is applied so some distance from the border will be available with the text. Okay so this way padding will be applied on your code so I hope till here everybody is understanding whatever I am explaining. So this way I hope you understood like in this code we are using external CSS that is applied and we are using internal CSS. So that is also working because in external CSS we have different CSS in internal CSS we have different CSS right so both are applied together. Now moving forward if you want to apply alignment so you can use text align so right now in this table you can see our text is on left side for table data. So what I am going to do here I am writing TD and text align center and if I refresh so you can see first name last name and profession everything is available in center. So this way you can apply text align as well and we have background color so if you want to apply background color on the table. So this CSS you can apply so this is basically hex code so instead of writing color name you can use this hex code as well. Okay and for this you just need to search it so you can search like hex code in HTML so lots of links will be available and you can open anything. So let's say I am opening first one so here you will be finding different codes against different colors. So you can copy and use them right so this way different colors are available that you can use. Now this is one assignment for you so you need to create this table in one column you will be having name of the companies in another column you will be having the website links and in another column you will be having the logos. Right so for website you will be using a anchor tag in the TD and for logo you will be using the image. So let me just give you a brief idea about that how you will be using that so let's say here in place of TD heading will be website or logo. So here I am going to put a website so I am writing a href equals to HTTPS slash www dot let's say study salesforce dot com. Right so here what I did I just implemented this code inside this TD I just wrote a and a hyperlink references this website and hypertext will be this. Study salesforce and here I need to use an image so I am going to use an image that I used yesterday right so this way I am using image. Okay so this is TD and inside TD I am using a and here also inside TD I am using IMG. So you can break like if your statement is too lengthy so you can break them in different lines as well. Right so this way things are available here now if I save and refresh the page so you will see hyperlink as well as image. So here you can see first name last name are in text form and here study salesforce is having a link if I click on it so study salesforce will be opened. So here it is not opening but it will open so if you right click open in a new tab. Okay so with this browser it is not opening no problem but in your case whatever link you will be providing so it will open and here at the bottom you can see we have an image. So the same way you need to provide logo and links so instead of this like if I provide Google dot com so it will work. So I am just refreshing I am just opening that page again yeah so here you can see Google is available and if I go back so link and image both are available. So this way what you need to do you just need to complete this assignment so that you can understand whatever I demonstrated today. So this is all about today that I was prepared for you and tomorrow we will be understanding more about HTML and CSS. So few more things are available that you need to understand before jumping to JavaScript and then we will be moving to Aura and LWC. And I see Dushyant send some amount to me so thank you Dushyant for sending the amount I appreciate your cause. Thank you so much and if you have any doubt anybody if you want to ask so you are free so you can post your question in the chat so I will try to help. And tomorrow there will be one more session that will be on HTML and CSS both so do join that session as well so that you can understand lots of things. Okay so if you don't have any questions so I take your leave thank you so much for joining today's session. I tried to explain all the insights about HTML and CSS and we'll be understanding them tomorrow as well. Okay so Mamta is asking like how we save the code and see the output so Mamta it is very simple so what you need to do whatever code you are writing here you just need to press control S. So if you are saving it for the first time so you just need to type the name of the file and .html.css whatever type of file you are creating. Make sure you create a folder on your desktop and all the files you are saving here and if you want to open it so just double click it will be opened with a default web browser automatically. So this is the process you can like create save and run your file with the help of web browser. Okay and here are some stats like 3, 26 people joined this session live so it is great and I have 44 concurrent right now 49. So this is great great going so I don't see any more questions so I take your leave thank you so much for joining this session will be available tomorrow with some more topics. Till then do practice and all the best thank you bye.