In this session, let us learn what are the different types of CSS and how to add a stylesheet to a HTML page. The types of CSS are internal CSS, external CSS and inline CSS. Let us discuss one by one now. In dental fear says if you want to add styling to the current HTML page go for internal CSS. This will be added inside the head section. Have a look over here I have added style.

Already we have seen that style is a child type of head slash type. Inside style you need to specify some extra curly brace property colon value. So the selector I have chosen over here is body for the body. I want to change the background color. So I have given background color colon pink, I am trying to add styling to a pizza trying to add styling to our h1 tag. So if you want to add styling to our current HTML page going for internal styling, internal CSS.

Next, let us talk about external CSS. External CSS will be used when you want to add the same styling across multiple web pages. assume you're adding two HTML pages having different paragraph tags. If you want to use the same styling to go through all the paragraph tags in both the HTML pages, you need to use external styling. Create a separate file and save it in a name dot CSS. Then add all the styling.

I have created a separate CSS file. So this file name is XP style dot CSS. This is why They have given and I'm trying to add styling to the paragraph tag. What is the next step, I have to include this indeed, HTML page. So in the head part, I need to go in for link tag. So this is my HTML page in the HTML page.

In the head section. I have added link link Aria equal to stylesheet. head strap equal to ESP style dot CSS. It is inside styles folder. So I have given the path style slash ESP style dot CSS. So what will happen, this particular feature that will take all the styling from this yesterday style dot CSS file.

Not only that, CSS can be used for this particular HTML. It can be used across multiple web pages. That is an advantage of using external CSS. Next, inline CSS. If you want to add a style for a particular Color elements then you need to go in for inline CSS. For this you need to use a style attribute I have given an example over here and what h1 style equal to the attribute a style and within double quotes you name colon value ending with semi colon.

So here it is color colon red color see attribute and sorry color see property red to see value background color again is the property XYZ value. So, this inline style sheet is used for adding styles to a particular element, which has got the highest priority of course inline style sheets in which Okay, now let me categorize it. If you want to add the same styling across multiple web pages, go in for external style sheet if you want to overwrite that and include styling for a particular page going for you Internal stylesheet if you want to add styling to a particular element going from inline style sheets, so inline style sheets has got the highest priority. Now let us try all these stuff. So create an HTML page internal dot html. I'm having h1 and p tag inside body, I want to add styling to this particular web page.

So I'm going to use internal stylesheet I need to add the style tag inside head section. Let me do that. So here, angle bracket style. Inside this i'm going to add styling for the body tags, h1 tags and P tags. Let me do that. So first, this body curly brace I want to add a background color.

So this background hyphen color green. Next, for pee pee curly brace inside which I Want to add a background color separately for that? Let me give this as a demo. Then I want to change the font text color also, say this color, simply color color colon red. Next, I have got h1 tag. So for each one, I don't want to change the background color.

I just want to change the color alone. So let me give it a color colon say, orange. Okay, you can see that when I just type something like mean text, I have given texts automatically I'm getting the content This is how it is possible. It is because I have added CSS content, I mean CSS package to Sublime Text. I will also explain how to add this in the end of the session. Now, let me start I have completed the spot.

Let me save this. Let me run this. So Right click open in browser output the background color is changed to green. And what is this this is heading for the heading we didn't give any background so it is taking the background color of the parent that is green we change the font color to orange so it is showing in order this paragraph for the paragraph we gave the background colors and font colors red automatically is getting rendered the HTML page. So this is internal stylesheet you are adding style to the current HTML page. Now let us see how to use external stylesheet to create an external dot html.

Now I need to create a CSS file. So select your folder right click new file. Let me save this the file should be saved as dot CSS. Already I have explained when you are working with CSS or images you need to put them in separate folder. It is for easy maintenance. So I'm going to create a folder inside the CSS.

Let me give the name of space. Inside styles, I'm going to create ESC style dot CSS. Now I have to add all the CSS styling to this dot CSS file. What I will do is I'll go to internal dot html. Let me just take the same body p tag h1, we have read the M and added some styling, right and copying that styling pattern off, and I'm adding it to this dot CSS. This is that service, come to this external dot html in this external, yes, I want to include the CSS file.

In this HTML page, I want to include an external CSS file, the tag for that link. Links are really cool to start. sheet head set up equal to you need to specify the path so it is inside style style slash ESP style dot CSS. Now I will close the tag also properly. Now let me just run this, I have to run only the HTML file, not the CSS file. Just okay.

So here let me just give it us. Let me change the title of the external CSS saving it right click open in browser. The output is getting rendered properly you can just verify the title outside of external CSS. Let us see how to use inline styling. I have created a HTML file of inline dot html. Let us use inline styling I want to change the color of this h1 tag.

So go on add the style attribute h1 style equal to color, colon red, there are multiple property values not only color, I mean not only color, but you can work with background rub which takes us with the list font and many much more. So now I will change the color of h1 tag to red. Let me change the background color of p tag. So style equal to background color. Colon green semi colon, colon colon yellow. If we can understand you have to give property colon value semi colon property colon value.

So how many of our properties you want you can add it to this particular style attributes. So let me save this right click open in browser. You can see the output So I turn this coming in red color, and the paragraph has got a background as green and the color is yellow. So this is for inline styling. Now, let me add all the three in a single HTML file, and I will show you the difference. I will create a demo dot html with the same P and h1 tag.

The first thing is I want to add a static external stylesheet. Already we have created an external stylesheet, which is having a background color for body and paragraph. Let me use the same thing. So let me go to this demo that HTML I need to add this link here this styles slash ESP style dot CSS. Okay, got it. Now, right they want this I want to override the color of PETA.

So let me go and change the color of PETA. Let me go back to the subject. Here, I will add type B that I want to change the color color colon Brown. Now I have added an internal stylesheet. So the idea over here is using external, I am given the color for all the P tags was read. Now to the current HTML page alone, I want to change the text color of the paragraph tag.

So I'm changing it to brown. Let us see this. Let me save here I will come and refresh. Now we can see that the color is getting changed to ground in the inline style sheet. Let me change the color again. So now I will go here style equal to color, colon.

And for h1 also let me add style. When you're adding color, don't give the color names Directly you need to give a value which starts with has followed by six digits. So, let me just give a random value the 00 a b. Let me save this, you can see that text color of the paragraph tag is getting changed to APA and the h1 is getting a color a different color like I have given a hexadecimal value. So, which is getting the highest priority inline stylesheet is getting the highest priority when you want to apply styling across multiple web pages going for external stylesheet if you want to override it and have a specific color to a current page, then go in for internal stylesheet. Again, if you want to change the styling of a particular element use inline stylesheet so inline is having the highest priority.

What we have seen is the basic part that is color and background. That is Much more in HTML and CSS, like changing background font tests, which we will be learning in the upcoming session. Let us