 Hello, everyone. My name is Sampreet Patel, Assistant Professor, Department of Computer Science and Engineering, Walchand instead of Technology, Sholapur. Today, we are going to learn about IDs and classes into CSS. After this lecture, the student will be able to understand what are IDs and classes in CSS, and they will be able to apply these IDs and classes in an HTML pages. The content that will be covered are IDs and classes. So an ID is a selector which is used to apply a specific style to an ID, defined element. Each element can have only one ID, and each page can have only one element with that ID. So ID is an unique selector, which can be applied to an HTML element for formatting. So the syntax for ID is hash with an ID name. And in the curly braces, you can give its property and value. Similarly, classes. Classes select the element with a specific class attribute. So the syntax for class is dot class name into brackets property name and its values. To select element with specific class, write a period character followed by a class name. Classes can be applied to any number of elements. A single class can be applied. Similarly, one single element can have multiple classes to be called. So the syntax is you can also apply the class to a certain element. For example, you have to write the element with a space dot class name and its properties and values. This will be applied to that particular element in an HTML page. So we look to an example. So this is the HTML file. This is an ID that is defined, which gives a background color as red margin left is 20 margin right is 20 pixels. The border style is solid border with is three pixels. The border color is blue and the border radius is 20. So we had seen these properties last time. So these properties will be applied to a paragraph because the ID has been called to a paragraph. So I'll run this file and you can see that this paragraph has been applied with background color red and the border to blue will change some things like say text align to be center will save and refresh. So this text is aligned to the center. So this is applied when we change the actual definition of hash demo that is an ID demo. So the ID demo is called here. Now these are the two classes which define intro and heading which formats the introduction section and the heading of that particular page. So for heading, we'll call your. So this is the syntax to call the class or ID. The class is equals to class name that is heading. Now we'll see we'll save this and we'll refresh this page. So the ID has been aligned to center and this color is changed to red as we have defined here. Sorry, yeah, it's aligned to the center and it's given a red color. Now with this ID, we will call a class to this particular degree class is equals to the class name. So this particular thing has been changed. So you can see the pixel, the padding has been left or the margin has been left as 2020 pixels. If we change this pixels to 40, so margin left will change again. But for that only particular part of paragraph because we have given to the paragraph. Now, as the page goes on increasing, it's formatting will go on increasing. For example, now if I give a page break again, it will go on increasing the page as we are using that space for page break. So I'll save now you'll see that the portion of yellow and red will increase why because we have we are using page break outside the paragraph the portion of yellow has been increased. Similarly, if I increase the break line in P, the red as well as the yellow part has been increased because the diff section, the paragraph section is inside the diff section. So the both of these formatting have been increased. Now moving forward, take an example or rather pause the video and try to solve this particular statement style two elements, particularly H two and P using class selector and apply it in an HTML for multiple tags. Styling for H two is font color should be red and the content should be aligned in center and styling for P is font color should be dark red and the content should be justified. Now justified means the content should have equal length on both side. It should not look like the first line is bigger. The second line is smaller. So we have to justify that particular page. Okay, try to solve that. Now, this is the particular answer for it. We have taken two things paragraph for element P and heading for element H one. So we have called this heading in H one with class is equals to into double quotes heading and we have used para for P. So see the hash code for dark gray is 6 9 6 9 6 9 and its alignment is left justified. So I'll run this file. Now see this particular page is justified. Now this particular thing span. So if you want particular words to be highlighted, so these words you can see they are in bold some some words like ID or say full stop. So these words, we can bold it using a spam element. So span has been formatted over here. That font weight should be bold. We'll also increase the font size of span, say 20 pixel. I'll save this and run. So see, this font has remained the same only the font of the highlighted words has been increased. So to see the difference, I'll just again change it to say 40 pixels. So this is an example of font size of attribute. I hope you have understood this problem statement. Now we can also use an external style sheet to design or format than HTML element. In spite of writing all this will just comment this particular part in HTML. And we'll call an external style sheet with an tag link with relation as style sheet. And its reference is that is URL where to find that file. So the file is in the same folder. So we'll just be required as file name. And we'll close this style. Now we'll refresh. Okay, we have to refresh this particular line. So it again changed to the given attributes in the style sheet. So we'll change the background color to blue color as we'll give it as white font size 20 pixels. And we'll refresh. So you can see it exactly. Okay, so the difference between IDs and classes is IDs are unique and can only be applied to at most one element on the page. classes are not unique and can be applied to multiple elements on the page. The difference in the syntax is it can be defined using hash. And the classes are defined using full stop or dot. You can use only one ID per element. You can use multiple classes per element. For example, see this example. This is a P where ID main is single ID where classes one, two and three are called for a single formatting of an element. So used when a single element that you want to apply styling to classes are used when you have multiple elements that you want to have a same styling. For example, in a web page, we usually have all the headings in the same font and same structure or same styling. So during that we use class because classes can be used at multiple times. These are some references where you can get more examples regarding CSS. Thank you.