All right guys In previous video, we have seen what is CSS, why CSS is used all this things we have seen, But here we will see more about it and we’ll see how CSS is actually implemented and used. Here i will close all the files I’ll create a new file and name it “, tut 13.html”, And along with naming “ tut13.html”, i will put a boiler plate of my html and after putting html boiler plate. I will write here CSS tutorial. Okay Great now. I have written CSS tutorial now. I will show you the techniques to implement CSS on our page.
Okay. Now here, if you remember, i created a harry.css, and here i created harry.html and harry Css we won’t consider Javascript, we will only see links of html and css. Here i will close harry.html and harry.css Just because it was a tut. I will create a tut13.css in some time, but before that i will write a paragraph here and before that i will write heading “.
This is CSS tutorial” and after that i will write a paragraph “. This tutorial will teach you everything you need to know about. Html/CSS”, okay, so this i wrote here oops. I made a mistake here: no problem I will do Go live and after that my live server. If VS code will run and my this file will open live, so any changes i make will be reflected here without reloading. Pretty much this is what this extension does. So what i will do here is inline CSS, so i told you there are 3 ways to implement CSS in any HTML. So here one i told you Style If i make style like this “ style, =, “, color, red” and save it. So here you will see so it’s color will be red. That means i wrote 1 line CSS and changed the style till now.
You will feel that it is best technique, but i will tell you this is not the best one and why it is not the best technique. I will tell you if you use inline CSS and wrote all the styling, so your HTML will become so messy that you won’t handle it. So for now, listen to me – and i say we only use internal and external CSS okay. So here we will come to internal CSS, so this was our inline CSS. We have written it on 1 line. Only and property has changed. I can do one more thing here. I can add a background. Color also assumes i added background color yellow. So, i can write many properties on 1 line like you can see and see the background.
Color has become yellow and, along with this, i can do many more things, but i won’t go there now here. I will only take you to next step and say: add style tag inside the head like this, i wrote style, so my style tag is added now. What i will do is, first of all, add selector. I will say paragraph okay after this. What i will do is write “ p” and after this “ color black;”, okay, i wrote paragraph a color black at one place, I’m saying color red at another, I’m saying color black, you will ask which one of them will come in effect, which CSS will It take so see here what this will do. This is giving priority to inline CSS.
Okay, inline CSS is given priority over internal CSS, but i remove inline CSS from here. I won’t remove it. Basically, i will comment it out and before commenting it out, i will do this and i will remove this style tag only So see here. As soon as i removed style tag, it’s color should be black and see its color became black. Now its color was already black, so let’s change its color to something else. We will make it purple if we make it purple so see here, its color becomes purple, and now you understand how this works? Okay, so this was our internal CSS.
So now what is external CSS, so i will tell you a thing that i can add more properties also.
So, if i make background color assume, if make “ background, color sea green”, so i can see it see here we got sea green. Obviously, it is not looking good but again here, I’m only telling you now, I’m not trying to make a beautiful website, I’m only teaching concepts.
Okay. So now what we will do is add a style sheet here and where we will add that style sheet. We can add that style sheet like this. We will write, link and CSS and automatically our code is autocomplete using emmet and we can link any style.
CSS sheet here i will make “ tut13.css” named CSS file. I will make it here: “, tut13.css” and inside it. I will write paragraph’s “ color:”, make it which color i should make. I will make it. I will make it green, yellow. Okay – and i saved it, see here as soon as i save it, its color became Gree yellow. Is this means that external sheet takes precedence from internal CSS? No, i will tell you what happens here. The link which i put the styling i used. It will bring content of tut13.css here so write this or else i will copy this content here same thing, so i hope you understand this thing and i will bring this up again.
You understood this also the tut13.css which i made i had to include it here while making and the properties which i will add in this assume i put background color here i will put “ background-color, hotlink” and VS code. Helps you a lot to choose all the colors here and see hotlink came here and this hotlink background color, if i put it there, if here i changed its color like this, i will show you. If i hover over this, i get a picker so easily. I can select any color okay, so i hope this is clear to you all. What is internal CSS, external CSS and inline CSS.
Now guys what happens here is if you wrote any CSS afterwards, it would take precedence. I will give you an example. I placed my tut13.css file here and then i gave this color okay now see here what will happen? I have opened this side by side. I have to show you this. I gave here color green yellow and gave background-color hotlink, but it is not working. Green, yellow is not coming and my background pink is also not coming, but if i bring this stylesheet down, okay, i brought it down. I haven’t saved it till now.
Here background is green, but when i save it see what happens i saved it see, background became pink, so the thing which is written afterwards will take more order, and here you all keep this in your mind, the thing which you wrote afterwards in internal and external CSS will take more order, but if you want that first CSS should take more order. So here you can write “ important” in “:” see like this put important here now.
No one can stop its background, color to become sea green because you made it important. Okay, so if you want this to take precedence, so make it important, so this is important.
We will talk more about which thing takes precedence over which in CSS, but for now, inline CSS will take more precedence and, after that, between internal and external, the precedence will be the one which is afterwards. That means the property which is at the end, because it will override old property. So in this case this background color and this color is overriding, but because we have put important, this thing cannot be overridden afterwards.
Also, so important means no one can override me and here, if you have included “ link, reel =, “, stylesheet”, her, =, “, tut13.css”, so rest all of the things which are in this tut13.css, which is written afterwards.
That will come as the same.
So, i hope you understand this thing.
I will tell you not to go deep inside this internal working just understand this, that browser collects all the sheets and all the styles at one place and parse your markups and after that, put style on them. The thing which comes afterwards is overridden if important tag is not used.
If you put important here so it becomes important like here my background color become sea green, so i hope you understand this thing. What are 3 types of CSS? How are they used, and in coming days we will study properties of CSS? We will see one by one, how the things are done in CSS. For now, i will say this that you access this playlist. If you haven’t done it yet and bookmark it and save it by clicking here, if you are liking and enjoying this video, so do like it. Thank you so many guys for watching this video, and I will see you next time.
Vocal Vibes AI
https://warriorplus.com/o2/a/q6ny47z/0
Offer at 100% commissions
Free Stuff
https://warriorplus.com/o2/a/byj7rws/0
Discover more from Making Money Is Easy
Subscribe to get the latest posts sent to your email.
