 My name is Sampreet Patel, assistant professor, department of computer science and engineering, Vulture Institute of Technology, Sholapur. Today, we are going to see about CSS, its introduction and its syntaxes. At the end of this session, students will be able to understand the use of CSS in web designing, and they will be able to apply CSS through HTML. In today's video, we'll be covering its introduction, advantages, syntaxes, and ways to apply CSS. So the prerequisite for CSS is the basic knowledge of HTML. You should be able to build a basic HTML page using different tags of HTML. To do the coding of HTML and CSS, basic Notepad can be used, or there is an application called Notepad++, whose URL has been shared below. So CSS is cascading style sheets, also referred to CSS. It is used to design the HTML. For example, take an analogy of a building structure. When you construct a building, it's just a building. But when you apply different colors in the interior, exterior, and when you build up a furniture, that's the design for the system. That is called the CSS. So CSS describes how the HTML will be displayed on the screen, paper, or in other media. This is used to simplify the process of making the web pages presentable. So the advantages are it saves time, page loads faster, easy maintenance, superior style to HTML, and multiple device compatibility. So how does it occupy with these advantages? Saves times is you don't have to give a style or design to every element differently. Through CSS, you can write the code once and reuse it again and again. CSS being a different file, it loads only once. So the loading of new HTML file doesn't load the CSS file again and again. It just calls the definition and declaration of its styles. It is easy to maintain as you have to change only a single file. For example, if you have designed or styled an H1 tag from HTML, you have to change the style only in CSS rather than to select every H1 tag in the HTML page. It gives a very superior look to an HTML as it has a wide range of attributes and properties. Through CSS, we can make a web page compatible to multiple devices. For example, when you switch to a mobile phone or a parallel, you will see that the web page design automatically changes according to the compatibility of the screen. So the basic syntax of CSS is the element that is H1 followed by a curly braces. And inside the braces, we have property and value differentiated by a colon. And every property and value is ended by a semicolon. So these are some properties we can use for an example, color, used to change the font color, background. For background, we have four properties, background color, background image, background repeat and background position. We can apply border using border style, border width, or only border. We can give margins like with the properties called margin. If you want to apply margin for a single side, then you can use margin top, margin right, margin bottom and margin left. So CSS can be applied in three ways, that is inline, internal and external. So in inline CSS, it can be applied for a single element rather than applying to a single page or multiple pages. So the syntax is, you have to write an element tag and use the keyword style with equal to its properties and values. You can give multiple properties and values. For example, see the below example, that is we have used H1 tag. We have used style as a keyword equal to, we have given the color as blue and margin left as 30. And the content of H1 is this is a heading. So we'll see an example. So here, this is an inline style H1 and we have given style color as red and background color is red and the font color as white. So we'll run this particular file. So see the background color is red and the font color is white. So moving forward to an edge. So internal style sheet is used where you can apply the style to all the elements used in a single page. So if you see this example, style H1 is given the particular color and the body is given a particular background color. So this will be applied wherever the H1 is used in the complete web page. So internal CSS is written in a head tag followed by a style tag. So in style, we write a particular properties and its values. So this style tag is written inside the head tag. So we'll run this particular page. So see, this is a header one. Now, when you use again, say H1, this is the second time I'm using the element. So we'll say this is a header two. We'll save this and we'll run this. Now see again, the header will be red. Now if I change the color of the header, that is H1, we'll give it as Y, E, R, O, W. We'll save this and we'll refresh this. Sisu, look, the header color is changed everywhere in that particular HTML page. So take a time and try to solve this particular problem. Write an internal CSS to change the font color of H1, H2, and H3, where H1 is to be red, H2 is to be blue, and H3 is to be yellow. So during applying this style, you have to use three ways. So color name is for red, you should use hash code to apply blue color and an RGB value for H3. So we'll see the example or rather the answer. So we have to apply an internal style sheet. So we'll write a style tag. We'll just remove this link or rather we'll put a comment. Now we'll write a style code in the style tag. We have to apply first for H1. So the syntax is H1. So we have to give the property to H1 is red and we have to use the color name. So we'll use the property color colon and we'll give red. Now we'll declare second element that is H2, we'll give the color blue. So blue is RGB within a hash code 0000FF. So this is the hash code for blue. Now we have to use H3 and the color will be yellow. We have to use RGB. So say 255, 255, and the color will be blue. And zero, this is the RGB value for. So we'll run this file. So see header one has red, header two has blue and header three has yellow color. So moving forward to an external style sheet. So when an external style sheet is used, it helps you to use the style sheet again and again on different HTML pages. So in internal style sheet you have seen that the styles can be used only on that single HTML page. But when you make external style sheet or CSS style, then you can import that particular page again and again in multiple HTML pages. So first thing is you have to write a different CSS file and you have to link that file into an HTML page using this syntax that is link. So we are giving the relation as it's a style sheet. So we are telling it's a style sheet. So the type of the file is either text or CSS file and the href will give the location of the style. So we'll see an example. So this is the style sheet which declares H1, H2, and H3. The properties of H1 are the color is red and the font style is bold. The properties of H2 are the color is blue and the font style is italic. And the properties of H3 are that RGB color is yellow and the font is all caps in small. So this is the property of font variant. So we'll remove this style tag, we'll remove this and we'll also remove the comment section. So see, we have used this particular line to call that particular CSS file. We'll save this and now we'll run this file again. So see the second thing is italic and the third is all caps, we'll just change the color. So you'll be able to understand, we'll give zero. We'll save this CSS and we'll refresh. So see, all the letters are in small cap. These are some references where you can get more details about CSS. Thank you.