hello guys welcome once again from the last five blog's I have been showing you how to write your basic HTML web page code and when you run your code it looks like this but when you see the original pages which you see on the website it doesn't look like this because this is very a simple text and we want to style our website in a certain manner and which is certainly not this so in from this blog I am starting the other part of this tutorial which is called CSS or cascading style sheets so what this CSS will do is it will provide the style to your web page the HTML provides the basic building block of the web page and CSS will provide the style to your web page so for that I will just delete my code and I will just make my code only the bare body code no title known so this is the basic body of our HTML code which I have already told you now in here I will just add a heading and a paragraph for example so like this I added h1 heading I have h2 heading and I have a paragraph ok and now I want to style my headings and paragraph and I also want to change the background color of the web page so how can I do this the styling you provide in here so go in the head tags between the head tags and in here you will write smaller than and greater than sign and write style and when you start a tag you have to close it so close this and inside this whatever you will write will be your style code or CSS code so now for example first of all I want to change the color of my web page so what is my web page web page code is contained in the body right so I will copy this body tag or body and write it here okay same this body and write it here and I will give a space and I will provide this curly braces and in here I need to provide the property and the value so I need to change what background color back background color so this is the property which I need to change and after the colon I will give the value so I want it to be yellow and after you write your property and value you need to close this with this semicolon okay so this is the property which I want to change and this is the value which I want to give so I will just save my code and I will see my code works or not so I will just run it in the Firefox and yes it works my webpage background color is yellow now okay so what I have done is I wanted to change the property of the body so I have taken the name of the body and I have provided the property name and the property value okay so this I have done now next if you want to change this h1 tag what you will do in the same wave you whatever you have done with the body you know you will do with this h1 gold so right here h1 and give a space make a curly braces and provide the property which whatever you want to change okay so for this I want to change color for example blue so property and this value save it and then run it and my color of my h1 heading changes to blue now in the same way I can change the properties of this h2 tag and paragraph tag also right so I just need to write the name of the tag so h2 or P like this so I will just paste this code because you understand I think the basic concept so just write the name of the tag and the property which you want to change so for h2 I once again want to color it it with blue h1 I want to change the color or the text size to 36 PT and for the paragraph I want to give the margin from the left side so this is the left side and this small space is called the margin so I want to give the margin to this paragraph 250 pixels so px is pixel okay so you can write this code like this this you can just make your code shorter by just providing the semicolon and after your semicolon provide this font size also so after semicolon you can provide the second property and value after this semicolon once again you can provide the other property also so this you can delete now now when I save the program and now I run it my header is of 36 point my this h2 header is blue right and for this paragraph I have provided the margin margin is the left side so whatever you see here is the margins of 50 pixels I have provided the margin to this style sheet now I want to align this text at the center this is at the left side left aligned I want to align this text edge Center for example I want to align this heading at the center so I will go to the h1 tag which is for heading 1 and after this semicolon I will just add this text align text - aligned and semicolon the value which is center-right save it and run it and now my h1 heading is at the center ok now for example I can have many h1 tag for example this one two three three headings I have four h1 so this style will be applied for each of this h1 or every h1 in your code so in a way it will be easier to style your tags because it applies to all the tags so you just need to write it once here and it applies to all the tangs and similarly if you can do for the paragraph it applies for all paragraph or and all headings so I just save it and once again run and you see the same heading at the center and three all three tags have acquired the same style in here also the paragraph have acquired the same style we have provided for first paragraph so it applies this style to each and every paragraph okay now I will talk about the classes because sometimes you want this heading to be different in color this heading to be different in color so basically you want everything differently style so I will provide some more modularity to my Styles by using the classes so what are classes so instead of using these tags we give a name to these tags for example I have three edges on tags so I make instead of this h1 tag I delete it and I will write dot and the name of the class for example center-aligned class this is class name which is provided by me so this can be anything Center one two three or it can be anything so this is user defined class okay now when you copy this class and when you want to apply this class to any one of this H one not all all h1 tags but only one of this h1 tank just go here in which you want to change this or you want to apply this class and just go there and make a space inside this h1 tag and write class is equal to now double quotes and in inside this double quote write the name of your class okay so class is equal to double quotes and inside this the name of your class now this class whatever this style for this class will apply to this h1 only and not these h1 okay so let's see save and run so you can see for the first h1 tag it applies and for the others they stay same right now go back to the notepad this class you can apply to any of the tags so this class can be applied to this paragraph also because it's not specified that it can be used only for these headings so you can just copy this class and use this in this prior paragraph also and same thing will happen with this so let's see what happens yes the center tag is applied Center style is applied to this also the paragraph but for example you want to define this class only for a particular tan for example you just want to define this class for h1 tag so what we will do is copy this h1 tag and just before this dot paste it so h1 dot last name and your style will remain the same and when I will delete this and when I apply this class to other paragraph also it will not be applied so let's see for this we have tried so we tried for this second h1 tag and save it and run the program and it will apply for the second so first is this second paragraph is this and third is this right and now let's try to assign this same class to the paragraph and what happens save and run the program nothing changes here paragraph is same why because we have defined this class only for the h1 tag right and not this paragraph so even if you write here the class name it will not be applied so in this way you can define the class for the particular tags also so I think I will stop this blog here only and in the next blog I will show you some more HTML and CSS code so please stay tuned and please rate comment and subscribe and bye forhello guys welcome once again from the last five blog's I have been showing you how to write your basic HTML web page code and when you run your code it looks like this but when you see the original pages which you see on the website it doesn't look like this because this is very a simple text and we want to style our website in a certain manner and which is certainly not this so in from this  blog I am starting the other part of this tutorial which is called CSS or cascading style sheets so what this CSS will do is it will provide the style to your web page the HTML provides the basic building block of the web page and CSS will provide the style to your web page so for that I will just delete my code and I will just make my code only the bare body code no title known so this is the basic body of our HTML code which I have already told you now in here I will just add a heading and a paragraph for example so like this I added h1 heading I have h2 heading and I have a paragraph ok and now I want to style my headings and paragraph and I also want to change the background color of the web page so how can I do this the styling you provide in here so go in the head tags between the head tags and in here you will write smaller than and greater than sign and write style and when you start a tag you have to close it so close this and inside this whatever you will write will be your style code or CSS code so now for example first of all I want to change the color of my web page so what is my web page web page code is contained in the body right so I will copy this body tag or body and write it here okay same this body and write it here and I will give a space and I will provide this curly braces and in here I need to provide the property and the value so I need to change what background color back background color so this is the property which I need to change and after the colon I will give the value so I want it to be yellow and after you write your property and value you need to close this with this semicolon okay so this is the property which I want to change and this is the value which I want to give so I will just save my code and I will see my code works or not so I will just run it in the Firefox and yes it works my webpage background color is yellow now okay so what I have done is I wanted to change the property of the body so I have taken the name of the body and I have provided the property name and the property value okay so this I have done now next if you want to change this h1 tag what you will do in the same wave you whatever you have done with the body you know you will do with this h1 gold so right here h1 and give a space make a curly braces and provide the property which whatever you want to change okay so for this I want to change color for example blue so property and this value save it and then run it and my color of my h1 heading changes to blue now in the same way I can change the properties of this h2 tag and paragraph tag also right so I just need to write the name of the tag so h2 or P like this so I will just paste this code because you understand I think the basic concept so just write the name of the tag and the property which you want to change so for h2 I once again want to color it it with blue h1 I want to change the color or the text size to 36 PT and for the paragraph I want to give the margin from the left side so this is the left side and this small space is called the margin so I want to give the margin to this paragraph 250 pixels so px is pixel okay so you can write this code like this this you can just make your code shorter by just providing the semicolon and after your semicolon provide this font size also so after semicolon you can provide the second property and value after this semicolon once again you can provide the other property also so this you can delete now now when I save the program and now I run it my header is of 36 point my this h2 header is blue right and for this paragraph I have provided the margin margin is the left side so whatever you see here is the margins of 50 pixels I have provided the margin to this style sheet now I want to align this text at the center this is at the left side left aligned I want to align this text edge Center for example I want to align this heading at the center so I will go to the h1 tag which is for heading 1 and after this semicolon I will just add this text align text - aligned and semicolon the value which is center-right save it and run it and now my h1 heading is at the center ok now for example I can have many h1 tag for example this one two three three headings I have four h1 so this style will be applied for each of this h1 or every h1 in your code so in a way it will be easier to style your tags because it applies to all the tags so you just need to write it once here and it applies to all the tangs and similarly if you can do for the paragraph it applies for all paragraph or and all headings so I just save it and once again run and you see the same heading at the center and three all three tags have acquired the same style in here also the paragraph have acquired the same style we have provided for first paragraph so it applies this style to each and every paragraph okay now I will talk about the classes because sometimes you want this heading to be different in color this heading to be different in color so basically you want everything differently style so I will provide some more modularity to my Styles by using the classes so what are classes so instead of using these tags we give a name to these tags for example I have three edges on tags so I make instead of this h1 tag I delete it and I will write dot and the name of the class for example center-aligned class this is class name which is provided by me so this can be anything Center one two three or it can be anything so this is user defined class okay now when you copy this class and when you want to apply this class to any one of this H one not all all h1 tags but only one of this h1 tank just go here in which you want to change this or you want to apply this class and just go there and make a space inside this h1 tag and write class is equal to now double quotes and in inside this double quote write the name of your class okay so class is equal to double quotes and inside this the name of your class now this class whatever this style for this class will apply to this h1 only and not these h1 okay so let's see save and run so you can see for the first h1 tag it applies and for the others they stay same right now go back to the notepad this class you can apply to any of the tags so this class can be applied to this paragraph also because it's not specified that it can be used only for these headings so you can just copy this class and use this in this prior paragraph also and same thing will happen with this so let's see what happens yes the center tag is applied Center style is applied to this also the paragraph but for example you want to define this class only for a particular tan for example you just want to define this class for h1 tag so what we will do is copy this h1 tag and just before this dot paste it so h1 dot last name and your style will remain the same and when I will delete this and when I apply this class to other paragraph also it will not be applied so let's see for this we have tried so we tried for this second h1 tag and save it and run the program and it will apply for the second so first is this second paragraph is this and third is this right and now let's try to assign this same class to the paragraph and what happens save and run the program nothing changes here paragraph is same why because we have defined this class only for the h1 tag right and not this paragraph so even if you write here the class name it will not be applied so in this way you can define the class for the particular tags also so I think I will stop this blog here only and in the next blog I will show you some more HTML and CSS code so please stay tuned