Inline, Internal & External CSS Sigma Web

In this video, we will see how to add CSS to an HTML page. There are 3 ways to add CSS to HTML. The first way is inline CSS which is used as a style attribute and added to HTML pages. The second way is internal CSS. Internal CSS means to put a style tag and put the CSS of that HTML in the style tag of the HTML page.

And after that, the most used one is external CSS that is make a .css file and put all your styles in that .css file in this video I will tell you very closely what is the difference between the three when to use and when to avoid I am very excited do like this video and in the comment section don’t forget to write Sigma patch op let’s comment section below. Let’s go to the computer screen. Let’s roll the intro.

So I told you three ways that if you want to add CSS to any HTML page, then here I will do the first thing quickly. I will make a folder named video 15. I will open it by right-clicking, and I will do a folder named video15, right click on it and open with code I will create an index.html and add a boilerplate template If you haven’t accessed the playlist yet, then do it.

Accessing the playlist is very important.

Now I will come back to my video15 html code. Let’s say we have a basic html I have written here I am a good boy and after that I have put an h1 here and I have written about me and I have put it in div I am a good boy suppose I have also put a paragraph everyone is good in some way or the other does this even make any sense? I will click on view and toggle word wrap. I will not click shift right, I will click right. I will go to the command palette and toggle the screen cast mode.

Now listen to me carefully. See, if I have to style it here, then there is a very short cut method, which I also call the desi method. I mean, I have a very quick and dirty way that I will put a style tag here.

First of all, let’s preview it and see how it looks. So, this is how it looks.

I have zoomed in to show you, but you will see it like this. Which is fine, okay. But I am zooming in to show you so that you can see. Now what is written in about, suppose I want to make the background yellow and the font red for some reason.

Let’s do it.

So, what I have in a very quick and dirty is that I will put a style attribute here. After this, I will write color here and I will write yellow here. And you see VS Code is helping me completely, it is supporting me in writing. Whatever I am thinking, it is giving me an auto-complete. And that’s one of the reasons we are using VS Code and if you are in replat or in any online IDE you go then you get this kind of support, this is the reason that we don’t do coding in notepad, in starting many people asked me questions, why don’t we do it in notepad, why do we do it in this what is there in this which is not in notepad, so this is fine, now let’s say I want to add one more property, first I will show that this property has been applied, you see its color has become yellow, now let’s say I want to add another property first I will show that this property is applied you can see that its color is yellow now let’s say I want to make its background red background color red and here background will also be red so here whatever I want to do with the help of CSS I can do that I want to add individual elements so I can do that now this is not considered a good practice it is not considered a good practice.

It is not considered a good practice. Why is it not considered? I will tell you in a while. But I will tell you two more ways. Adding CSS to a webpage.

I do one thing. I do one thing. I will write the title of this. 3 ways to add CSS to HTML. Okay.

So our first way which I have written I will do one thing, I will use div here and I will use ordered list I will write another list item and I am going to write the first method is inline CSS so I have told you about inline CSS, this is called inline CSS that by holding any element and in style attribute what will happen to give a link to CSS that to grab any element and write in style attribute what will happen that CSS will be applied in that element this will happen so till now we have read about inline CSS first method now I will tell you the second method here I will write li second method is internal CSS so the second method says that don’t do like this ok, I will replicate this and remove this style attribute now we will say don’t do like this let me replicate this and remove this style attribute don’t do like this write a style tag listen carefully listen to me carefully put a style tag in the head and your selector and declaration write it here so our selector is h1, i will say all the h1 of this page what to do make background yellow and color it red i think i made color yellow earlier so i will make color yellow background red ok, color yellow background red so i made color yellow and background red, same thing.

So, I made the color yellow, background red, it will still be the same as before. But how is this different from inline CSS? Inline CSS, I have to add style to every element. You understand?

Here if I have 100 h1 on my page, then I can do this automatically. But here I have to do style is equal to, style is equal to, style is equal to, style is equal to, again and again. So I don’t want to do it again and again. Okay, let’s say I did it again and again. I have also put style is equal to in every element.

Now let’s say I have to change it. For some reason, my boss told me that in our production website, the background color should be maroon, not red. So what will I do, will I maroon all the elements one by one in sub or instead of red? No, I want to bulk edit. And if I am using internal CSS, and not using inline CSS, then I can bulk edit.

What I have to do is, instead of red, I have to maroon one place, and all the h1 of my page will be marooned.

But if I have written individually in every element, style is equaled. But if I have written style is equal to style is equal to style is equal to in every element individually, then I will have to find all those elements first, after that I will have to do it individually in all of them. So that’s why inline CSS is not used as much. But you should know what inline CSS is, why it is there, how you can use it.

You will do internal or the most used one is external CSS I will tell you about that now the idea of external CSS is that if you are writing internal CSS then your style tag will grow, suppose I am writing CSS here and there, then your html file will keep on growing so why not the write the CSS here why not we write that CSS in a file this is the idea of external CSS that whatever you are writing here don’t write here write in a file so we will use a link tag colon CSS will be written so this shortcut will come here like this so I am saying that I have written my CSS in style.css.

What have I done? I have written my CSS in style.css.

Go and see there. Okay. I have done something like this. Okay. So here I show you that I can write style.

CSS like this. And as soon as I write style.css here, and I will put these styles in it, now I will show you that styles are removed from my page by the way, there is no background red nothing yellow, but as soon as I add here so this style.css I have linked it here so what does link tag do, link says that as a style sheet link style.css so what will happen, this CSS will be added on my page it’s as simple as that, i hope you all have understood and you all have understood this thing very clearly that inline CSS, internal CSS and external CSS what is the difference, now i will tell you all that when you have to use which one see, inline CSS you all should not use at all try not to use it, CSS try not to use it i am saying try not to use inline CSS in ideal scenarios but if inline CSS is automatically generated i will tell you about it later, now you don’t get confused now as a beginner you should understand that you should use inline CSS in fact you should avoid it you will use when Your webpage is small and you want to write CSS Very lightly.

Like I will tell you a very good use case to use internal CSS. When I used to write websites in bootstrap Then in my website All the styling was done by bootstrap. But sometimes I had to do tweaks. Then I used internal CSS External CSS you will use But sometimes i had to tweak it. Then i used internal CSS.

External CSS you’ll use when you’re making a big production grade website. And in most of the cases, if you’re working on a serious project.

You’re making a production grade website. And if you’re making a production grade website. Then you’ll want to use best practices.

And using external style sheet. Is considered a good practice. you will want to use best practices and using external style sheet is considered a good practice, why? because you can detach a style sheet from an html you can also attach it you can tell your colleagues to work on style sheet and i will work on html you can write styles and i will work on html so you can work very well. Such things become very easy if you use external style sheet.

And in most of the cases, you go in any kind of production grade project, big websites that have been written, whether it is Netflix, YouTube, or it is Quora, or it is Facebook, Instagram, WhatsApp, Web, whatever it is, in most of the cases in all these websites, you will get external style sheets.

So let me make a revision of you, inline CSS means that you have put style tag in the element itself and wrote CSS, internal CSS means that you have put style tag and wrote CSS, and external CSS means that you have made a style.css or any name.css file and linked it to a CSS file. I hope you have understood the difference between the three.

And I know that I am going a little slower because many people are beginners in this course. I am telling you again that we are going to raise the bar like anything. We are going to make very dangerous production grade websites in the coming videos. So you guys will be excited or not, do tell me in the comment section below. Now if you have not accessed this playlist here, then do access it.

I will keep updating everything in the source code, don’t worry about it. That’s all for now in this video guys.

Thank you so many guys for watching this video. And I will see you next time! you.

https://dash.sparkloop.app/signup?origin=newsletter_radar&aff=290086c5

https://udimi.com/p/amoros24k/recommends

We all want more and more traffic to grow our businesses. The increased audience is the only medium to sort out the leads into paying customers to your product or service offers. This guide helps you learn the process of traffic generation very easily so that you can get your work started without any hindrance.