What is Inline CSS , Internal CSS and External CSS | Inline CSS , Internal CSS and External CSS Introduction | Inline CSS , Internal CSS and External CSS

What is Inline CSS , Internal CSS and External CSS | Inline CSS , Internal CSS and External CSS Introduction | Inline, CSS Internal CSS and External CSS

CSS stands for Cascading Style Sheets and is a language used to style and format HTML documents. There are three different method to include CSS in an HTML document: inline CSS internal CSS and external CSS.

Inline CSS

 Inline CSS is CSS that is included within an HTML tag. It is written within the "style" attribute of an HTML element. For example if you want to make the text in a paragraph red you can write the following code:

For Example:

<p style="color: red;">This text is red.</p>

While inline CSS can be used, it's not generally considered good practice since it mixes content with presentation and can become difficult to manage as the document grows.

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 colour 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

What is Inline CSS , Internal CSS and External CSS | Inline CSS , Internal CSS and External CSS Introduction | Inline, CSS Internal CSS and External CSS

Internal CSS

Internal CSS is CSS that is included within the head section of an HTML document. It is written within the "style" tag. This allows you to apply styles to multiple elements in the same document. 

For example:



     p {

       color: red;





   <p>This text is red.</p>

   <p>This text is also red.</p>


Internal CSS is useful when you want to apply styles to a specific document and don't want to create a separate CSS file for it.

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 colour also, assume i added background colour yellow so i can write many properties on 1 line, like you can see, and see the background colour 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 give 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 its color should be black and see it's color became black now it's 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 it's color becomes purple and now you understand how this works okay so this was our internal CSS, so now what is external CSS?


External CSS

External CSS is CSS that is stored in a separate file with a .css extension. This file can then be linked to an HTML document using the "link" tag in the head section of the document. 

For Example:


   <link rel="stylesheet" type="text/css" href="styles.css">


External CSS is useful when you want to apply the same styles to multiple documents. Its also allows you to keep your HTML and CSS separate making it easier to manage and update your websites design. 

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 : seagreen" 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

What is Inline CSS , Internal CSS and External CSS | Inline CSS , Internal CSS and External CSS Introduction | Inline, CSS Internal CSS and External CSS

i will make it green yellow okay and i saved it see here as soon as i save it, it's color became green 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 : hotpink" and VS code helps you a lot to choose all the colors here, and see hotpink came here and this hotpink 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 will 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 hot pink 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 save 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 it's 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 rel = "stylesheet" href = "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 mark-ups 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



Post a Comment

Previous Post Next Post