[0:00]In this video, we'll learn basics of CSS. CSS stands for Cascading Style Sheets. CSS is used to control the style of a web page. To write the CSS, we need to follow a specific syntax. First, we need to use a selector, and for that particular selector, we need to apply some property and the corresponding value. So selector is used to find the HTML element on which you want to apply the style. Suppose you have a div tag you want to apply on a div tag, then you have to say div as a selector, and the property is the property that you want to apply on the selector. It can be a color, it can be a border, it can be a background, and the value is the color that you want to apply like red, blue, green, or border like one pixel border, two pixel border, like that. So let's try to understand select more. So CSS selectors are used to find or select the HTML elements you want to style. So there are many types of selector but we going to understand the top three one and the one those are most commonly used. The first one is element selector. When we use the HTML tags for the styling. Suppose you have a P tag and you want to apply some style on it. So in your CSS file you will call P and in the flower bracket you will say color blue. So P is the selector, color is the property and blue is the value. Similarly, if you want to apply on a particular element with the ID. So ID is a attribute in the HTML element to select a specific element. To select an element with a specific ID, we write a hash character in our CSS file. So suppose you have a ID attribute in the HTML with the value username and to apply a style to that particular element with the ID you need to call hash the ID name and the property and the value. And we have the third approach, use the class selector, and we use the class attribute in the HTML element like ID attribute to select a specific element. And to select an element with a specific class, we write a dot notation. So here, suppose in the div tag we have a class attribute with the value username and if I want to fetch that element in the CSS, I will write the dot and the value of the class and the property and its value. So this is how you write the class selector. The difference between the ID selector and the class selector, the ID should be unique to the each element within the page. And in LWC, we don't use ID selector at all. So you need to understand more from the element selector as well as from the class selector point of view. So let's go to our VS code and write some CSS. So I am in my VS code. I'll go to the explorer and I'll create a new file style dot CSS. So style is the file name and dot CSS is the extension. I close this explorer. Now I have two files, one is HTML, one is CSS. Now I need to tell my HTML to use this file for the styling, and to do that, I'll go to my HTML head tag. In that, I'll create a link tag. I'll say its relationship is stylesheet and its reference is style dot CSS. So this is how you embed the CSS in your index.html. I'll create a div here and I'll say hello everyone. So now on my HTML, hello everyone is coming. Now I want to style this particular div element. So I'll say, first, the selector, selector here is the element, that is div, and I want to say color should be red. So color is the property and red is the value. So now you see its color becoming red. So this is how you fetch the element by selector name by the element name. Now let's create another div, I am another div, and here I'll create a ID attribute and I'll say this name username. And now if I want to fetch this particular element in CSS, then I'll say hash, hash is used for fetching the ID. Then the ID name, that is username, and I'll say font size 30 pixel and color green. So always add the semicolon at the end of your property and value. So now you see its font size is 30 pixel and its color is green. This is how you call or fetch the element by ID. Now, in the next one, we'll go to the another element. Let this time go with P tag. I am a paragraph. And if I want to apply some style using the class attribute, I'll define the attribute class and we can say para as the class name. So now if I want to fetch this element in the CSS by class, I need to say dot, dot represent, I'm fetching a class. What's your class name para, and what you want to do? I want to give some border one pixel solid. Now it's see, it's adding the border of one pixel.
[6:36]If you want to give a border of a specific color, like yellow, so you can define the third prop value as a yellow, so it's giving the yellow border. And if you want to increase the size of the border, you can give the pixel size eight pixel. So this is how you define the class. This is how you define the ID, and this is how you define the CSS for the selector element. These are the three ways by which you can apply the CSS. And it's pretty easy, you just need to remember how to apply the CSS by class and how to apply the CSS by element or the tag. So next, we'll learn the types of CSS styles. So there are different types, we can apply CSS. So there are three types of CSS styles, the internal CSS, then the inline CSS, and then third one is external CSS or third-party library like Bootstrap or Salesforce lightning design system. Internal CSS, we're not going to talk about because we never use this internal CSS in LWC. We'll learn the inline CSS and the external CSS. So first, we'll see the inline CSS. I'll go back to my editor and if instead of calling or applying the style from the external CSS, that is the separate file, I can apply the style directly in the tag with the style attribute.
[8:16]I'll say color blue, font size 10 pixel. Now you can see the color has been applied blue and the font size become 10 pixel. So always remember, the inline style is not recommended. It only used in a specific cases like you have to apply a style dynamically without using writing a CSS. But dynamically means through a JavaScript, so that time only we prefer writing this inline styling. Inline styling has the maximum preference over any other style. If you see in the style dot CSS, we have defined div color should be red. But as soon as we give the inline style color blue, it get override, right? So inline style has the maximum preference. And the second type of style is external style, that we already created a separate file. And we include that external file into our HTML. In LWC, we'll create the external CSS very commonly and we include the external CSS to our component. That we'll see in the LWC lectures. So we have seen inline styling, we have seen external styling. Let's talk about the third one, that is third-party library, similar to external CSS. So JavaScript, Salesforce provide us a third-party library of their CSS, that is Salesforce Lightning Design System. So to include that, we need a URL that gives us those CSS. So I'll say go to a URL called CDNJS. Select CDN, the first link. And here you type the library name, design system. You will say lightning, lightning design system. So this library it shows Salesforce Lightning Design System. So your Salesforce UI build on this particular library and now I'll show you how you can use this library in your HTML. Just click on this icon, copy link tag. And paste it below the this link tag. So we have downloaded the tags into our HTML. And the downloading means whenever the page load, it hits the server and call this URL, that is CDN. CDN is nothing, it's the content delivery network. So somebody has written the CSS and it's hosted on the cloud, and we are using those library from the cloud using a URL, and now once this page load, it download the CSS and we can use those classes inside our HTML. And to understand more about it, let's go to the actual library, that is lightningdesignsystem.com. And we'll increase the size this time. So this is the library given by the Salesforce, and we're going to use these classes heavily in the lightning web component. So here you can see the utilities classes they have given us. So if I talk about borders, they have given us the border on the top. You can see the border on the top, and I'll zoom it a little bit. So you can see if you want to give the border on the top, you use this class. If you want to give the border on the right, you just use this class. If you want to use the border at the bottom, this class. Likewise, you have many properties like you want to create the grid, you want to give the margin, you want to give the padding. You want to make the size of the text change. So there are different sizes of text. So I'll pick up some text from here, that is the large, large size text. So I'll pick up this class now. And I'll go back to my editor, and I'll create a new tag, div tag. I'll paste that class that we have copied from there. I'll say I am from lightning. So now you see its text is a little bit bigger from the default text. Let's copy paste another class, that is I guess there is a upper class that converts all the text into the uppercase. I'll go back, I'll paste the class here. It converts everything into the upper CSS. So there are different classes that you can use from the lightning design system. And these are the pre-written CSS given by the Salesforce. So you don't need to write your own CSS for the things. And there are many, many classes available like for adding the paddings, margin, and others. So we have seen the inline CSS, external CSS, and the third-party library CSS. Let's go and understand the CSS box model, and it's very important from the exam point of view, as well as to understand the actual CSS alignment. So the box model consists of content, padding, border, and margin. Content is the text that you are writing. Padding is the space between the border and the content. So if you want to give some space between your border and the content, you give the padding property. And if you want to give some space outside your border, then you use the margin. So let's go and see the difference.
[14:31]So, I'll comment this out everything. We'll start from again. Say, I am content. So this is the text that is coming. I want to give some padding to the div, okay? I'll go to my CSS. I'll comment this out my earlier CSS. I'll say to the div tag, give some padding of 16 pixel. So it will give some space around my content. But it's not visible, right? So let's give some border to my div. I'll say the border should be two pixel solid. It brings a border around it. Now the border is touching to the browser edges. I want some space in between. So I'll give some margin. I'll say margin should be 16 pixel. So this is applying around the content everywhere. You can apply to a specific level, like you want the padding to be top. So it's apply the padding, the space between the content at the top level, not to the left, bottom, and the right. Likewise, you can go with the bottom, but if you'll not specify the location, it will apply around the content. Similarly, it happens with the margin. So the these three properties are very commonly used in CSS. I'll show you the another difference. I'll create another text. I am another content. And I'll say this one as class ABC, and the another one is class XYZ. And I'll go to CSS, I'll say apply this to class ABC. And we are just, we're not applying anything right now. We'll say okay, these these two contents are each other. Like touching each other almost, right? So I want to increase the space in between. I can do a padding 16 pixel, so it brings the space around it. But I don't want it to be around, I want it to be the bottom. There is the first thing that you can apply to increase the space. I want these content not to be touched to the edges of the browser. So I can go with margin. I can go with the padding as well. That's not an issue. I can give the border first. One pixel solid. So it gives the border. And I don't want the space in between the content and the border. So I'll change this padding to the margin.
[17:40]You can apply the same style by comma XYZ. You can apply the same style, or you can change the XYZ to ABC. That's what I was trying to show here. So either you can apply different, different classes with the same CSS by the comma. But if you have the same class, you can give the same class name, that is a preferable approach, and remove the new class. And this is how your box model works. In the exam, most commonly question is like, what is box model? Tell me the sequence from the content. So first content comes, then your padding comes, then your border comes, then your margin comes. And when you are aligning your content, you should know this order when to use which one. So this is all about the CSS that is required to start writing your LWC. And now we have the basic knowledge of HTML and CSS. In the next section, we'll talk about the JavaScript that is very important for LWC. I'll see you in the next section.
