‫Hey, there.
‫Welcome back, everyone this side.
‫Welcome to this new section about CFS, what it is, how we are going to utilize it, why it is important,
‫everything we are going to discuss any day.
‫The first thing is CFS is known as cascading style.
‫And this information is going to be of no use.
‫But let's discuss what it is and how we are going to utilize.
‫We use this to give styling to our current structure.
‫So as you know, we utilize HDMI designed a structure of our website, a about different dogs, understand
‫about different attributes and how we can structure content.
‫Now it's time for us to understand how we can make that content look good so you can create a paragraph,
‫add some text you can use.
‫I am your dog.
‫I had some image.
‫You can do a lot of things, but how to present that content?
‫We now have structure, but we need some understanding about these styling, these design.
‫That's where this whole thing coming out.
‫Picture.
‫Now in this section, we are going to understand about whole styling.
‫And then we will merge our knowledge about HDMI and CFS and build some project.
‫Now let's start our journey of a test and write some code.
‫So there are multiple ways by which we can add access to our current HTML file.
‫I'm not going to discuss all of them right now.
‫We will understand them one by one.
‫But for now, let's start with the common methodologies external file.
‫So what I'm going to do is I'm going to link my CSV file here, but I don't have one.
‫What I'm going to do is I'm going to create my own new file and just give styluses.
‫So that's the name of our file, which has filed our test.
‫You can write any other name, but this is the most common one for the entire web, actually.
‫So if you start walking with CFS, people usually call it styluses.
‫So head, I'm going to link it in memory.
‫I use Link.
‫Then that's stylesheet, which is the relation and head.
‫I'm going to call this as my style or CSIS.
‫Now, once we have multiple cases file, we usually create a folder first and then add all of them.
‫So it's a common practice.
‫As a beginner, you can do that.
‫Now, everything we are going to write inside this file that is our CSI score will affect our complete
‫body.
‫Remember this fact?
‫So it's important for us to write things inside this for all this filing purpose and it really affect
‫everything that we write.
‫So let me take one common example maybe let's create multiple heading.
‫OK, so now we have these three hurting what my task is going to be, add some color or edge one bag.
‫So here let me jump on to my access now how great to see if the first thing is we write these selector
‫back.
‫What I'm going to select and basically what I need to customize.
‫Here I am writing each one down.
‫OK, then use these braces.
‫Now I need you to find a property that is what property I need to edit and then value.
‫What is the value that I'm providing to that property?
‫For example, I'm going to change color, so I'm going to use color.
‫This is the property colon, and then I need to provide the value.
‫The most common thing here is you can either give the value name.
‫You can either provide the hex color or you can provide the IGB color.
‫So I totally depend on you.
‫We'll be discussing about this during the college lecture, so I kindly let me provide the most common
‫one.
‫I can use any one of them.
‫Maybe not to say if I say dark blue here and then use semicolon.
‫Let me save this one now.
‫If I jump back here, you can see it's dark blue.
‫Let me try something else.
‫It's much easier to.
‫And her ongoing views.
‫And the Blue Winery quarter, I save this one.
‫Get back here.
‫OK, this is qualified.
‫I hope you got the idea.
‫Basic thing, this is going to be Selecter.
‫This is going to be our property.
‫This is going to be our value.
‫Now we can add multiple values.
‫All I could do is add the next value.
‫So maybe I want to customize the font size.
‫Maybe I want to change the foreign family.
‫Maybe I want to do anything else.
‫Now here, remember, you don't need to remember all these property names as we move forward, you will
‫understand more about them.
‫If you write anything, you will get citation by default with this code.
‫You don't have to remember every single thing.
‫Remember, as we grow, you will understand them and you will have common names in your mind.
‫By default, don't remember them.
‫They are going to be lot of property for phone itself.
‫Maybe here if I write Border Bill, you can see there are tons of property you don't need to remember.
‫The first thing is you just need to understand if you are and you will understand their relation with
‫that nurse.
‫So this is the basic task of a test.
‫We select a bag and then just this property.
‫Now, if you remember, we discussed about it as well as we have discussed about classes.
‫Now we are going to utilize it.
‫It's pretty important during our citizens journey.
‫For example, I have several feedbacks, let me call them lorem then and let me pick few dogs.
‫Now ahead, I have multiple Blue Dogs, and maybe my requirement is I need to add customization to only
‫alternative tags, that means alternative products, so maybe I want to add color to this one and color
‫to this one only.
‫So if I need to do something like this, I can use glass here.
‫What I can do is I can add a class and call this as alternative.
‫And something similar I knew to perform with this.
‫Let me minimize this side.
‫Yeah.
‫So I can do something like this and then I can attack this, I should say I can select this and add
‫some property if I jump here and I just need to use alternative.
‫That is my last name.
‫Now remember, whenever we are attacking our class name, or I should say, targeting our class name,
‫selecting our class name, basically, we need to use this dark.
‫Remember this when we are directly choosing an element of dog?
‫We use H1 or be dog.
‫Whatever the tag is, when we are targeting any type of class, then we use these start before our class
‫name.
‫So that's it.
‫And then I can define a color.
‫Maybe I want to add something like this.
‫If I get back here, you can see all these alternatives are in a different color.
‫I showed you the spectacular technically.
‫Maybe this and if I see this one get back here, you can see all these alternative ones have some different
‫color.
‫Now it's important for you to understand that that's how we utilize glass.
‫But suppose if I want to select this particular one among these two?
‫So we have this one on this one.
‫If I want to select this particular one, what I can use is, and I suppose this is a paragraph that
‫is going to have some information related to a player.
‫Or maybe we are discussing about travel so I can have I.D. names, according to location.
‫Maybe this paragraph has information related to London, maybe New York, so I can give our I.D. as
‫NYC get back here.
‫And then if I need to attack, target or select this dedicated paragraph itself, then I can use this
‫NYC that has hash for IDs.
‫Remember NYC and then I can add information.
‫So maybe I want a different color, or maybe I want to change on site?
‫Or now let's use these colors.
‫That is easy to understand and visualize.
‫So I'm going to select this one.
‫Save this one.
‫Get back here.
‫Now this is a different color.
‫This one is these two are different color, and this is our current color.
‫So that's the basic floor work.
‫We will talk about everything else, but here you need to understand the force point.
‫How to add your see as this file, which is through link and we created a style dirtiest, not the most
‫common thing.
‫And the second thing we have to discusses how to add property and value dual element so we can either
‫use tag directly or we can use Dot and then the class name.
‫If you hover over this, you can see we have some element and the glasses alternative, then we can
‫utilize this I.D. We can go to element.
‫And then it was too.
‫Now here one important thing if you hover to +1, if you see this specific score, that means how we
‫are selecting it as a Euro zero one.
‫That means, look, we are directly selecting our cat.
‫But when we select the class, it increased to zero one zero.
‫That means OK, we have some more focus.
‫We are preparing things.
‫But if I go to I.T., it is one 00 that is at the highest level.
‫That means I'm pretty sure I have a proper unique ID.
‫So this is lowest.
‫Zero zero one.
‫This is greater than that zero one zero.
‫And then this is a higher than that.
‫That is one zero zero.
‫OK, we are getting into depth.
‫I hope you got the basic idea.
‫For now, I strongly recommend to create a page that means create a webpage, try out, befriend these
‫dogs and do some basics, something similar to what I do know friends and stuff where you are talking
‫about more properties soon.
‫I hope you got the idea of the basic thing now, head.
‫I want to discuss about a few other things.
‫The first thing is that by default, if DML have its own property.
‫So if you see by default, we have black and white because that's the basic property of HDMI.
‫By default, you can see background as white.
‫Why?
‫Because as Yemen has its own property, its own property and its value.
‫By default, the phone size is 16.
‫So if I just said this one.
‫So this is 16, the default font size and there are few other properties that it still carry by default.
‫So even the font that we are using the phone family, the actual font that we are utilizing, it's by
‫default checked by HDMI so we can override everything and customize according to our requirement that
‫Steve Austin.
‫The second thing I want to discuss is.
‫If you jump on to any Web page, if you just click on Inspector.
‫You will realize that you can watch CSI different page directly right there, going to that particular
‫element just to do that and get all these property, we are going to do a lot of things, but this is
‫the basic stuff that we are going to utilize.
‫So if I just jump, right click here, click on Inspect, and I will get multiple properties about this
‫input.
‫So had I have selected the input?
‫Scroll down.
‫You can see all these information.
‫Here, I'm just updating you about this.
‫This will help you to give basic idea that how he says it is working with a different website.
‫You don't need to copy this.
‫You don't need to visualize anything here.
‫It's just the basic idea that how they are writing CSS.
‫That's all for this lecture.
‫I hope this was helpful.
‫Thank you for calling.
‫And in the next lecture, let us understand how do our courses in different manners?
‫Currently, we use this external option, which is linking our style sheet, and that's the correct
‫one.
‫We have created a new pile and everything is inside the stylesheet.
‫What we can do with more different methods and we'll be discussing about in the next one.