What is Inline CSS , Internal CSS and External CSS | Inline CSS , Internal CSS and External CSS Introduction | Inline CSS , Internal CSS and External CSS
.png "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
.png "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:
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This text is red.</p>
<p>This text is also red.</p>
</body>
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:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
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.
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
Content:
Post a Comment