How to Insert CSS - Inline, Internal and External CSS

Hello friends! Welcome to our series of CSS.

In our last segment we covered the introduction portion of our CSS.

What is CSS and why is CSS needed? What all we can do with its help?

All this we have seen through an example.

And along with that we have also seen a little about the selector.

About, what are the basic selectors in CSS. And we have also seen what its Syntax are. I hope you have covered our earlier segment carefully.

If you have any doubt or query regarding the basic program in the first segment, you can tell us about it on forums.learnvern.com.

We will try to revert your query as soon as possible.

Let’s go ahead with our today’s segment.

Our today’s segment is how to add CSS.

How to add CSS means, how many ways do we have with us, with which we can add the CSS in our current html file.

So, there are a total of 3 ways available.

1st is “inline CSS”.

2^nd is “internal CSS”.

And the 3^rd is “external CSS”.

These are the 3 ways with whom we can add CSS in html.

We will see all about these one by one in our today’s session. So, let’s start with our today’s session.

Our 1^st way of including the CSS in html is “Inline CSS”.

As we can see in the slide, We can apply CSS in a single element by inline CSS technique.

Means there are different html elements available with us in html file and in the tag of that particular html element, we add CSS.

The Way of adding CSS in one line or in a single line, this technique is known as Inline CSS technique.

Because we are directly inserting in our html tag, so, here in 2^nd line it is written, that the inline CSS is also a method to insert style sheets in HTML document.

If you want to use inline CSS, you should use the style attribute to the relevant tag.

Means whichever tag we have; in that same tag we will add inline CSS.

As we go ahead, like it is written here in the slide, here one syntax has been given, html tag and then style.

So, here if you see the Syntax carefully, the html tag that has been written here, this indicates any tag of html, that is div tag, input tag, p tag or any other tag.

After that, mandatorily or it is mandatory to add style attribute here.

After writing the tag’s name, immediately after the space, we will add style attribute.

In that style attribute, all the CSS properties that we want to add, we will add those many CSS properties in it.

And after the content we will close our tag.

Like we’ve been given an example here, in h2, style has been given, red color and even margin is given 40px.

Now let’s perform this practically.

Let’s say that this is my Sublime Text. In Sublime Text I’m setting it as html. Okay!

Now, for an Example Inline CSS.

In the body tag we will generate one h1 tag. In h1 we will write this as an example of Inline CSS. Okay.

Now, I will save it.

For saving we will go to our folder, programs, inline css.html. In programs, inline CSS.

We will do it open with Google Chrome.

So, here my program is running. Since we have added only h1 in our body tag.

 So, we are able to see “This is an example of Inline CSS” I will zoom in a little. Okay.

Now we have not taken any CSS here.

Let’s say I add one inline CSS in this.

So, to add inline CSS in h1 tag we will add style, style=, let’s say the font that I want is in red color.

So, let’s say color red, save, reload.

So, I am getting red color here.

Now, this is just one property I have added.

If I want to add multiple properties.

So, after the semicolon, can be with or without space, let’s say I want a font size of 20px.

So, let’s say font, here options come of font size, 20px, save, reload.

As soon as I have reloaded my fonts have become small, they become of 20 pixel size.

So, here I have added Inline CSS which means.

 In my tag through style attribute, I have added Inline CSS.

So, this is my way, how we add Inline CSS.

Let’s say in the same thing I want to add p tag.

“This is a P tag” Oaky. In this let’s say I write style.

 I will add one more line of CSS.

So, in this I have to add padding pf 20pixel.

And let’s say I take the background color as red and I will take the color as white.

Okay. Save, reload.

 So, here I am getting one P tag, where I am getting a padding of 20px.

 I am getting a font in white color.

 Here whichever CSS I had to apply, specifically in P tag.

I have applied it inline through style attribute.

So, this is a way how we can add inline CSS.

Now we will go one to our other way.

So, this was our Inline CSS.

Before moving on to the next way.

There are some disadvantages mentioned of Inline CSS. We will take a look at them.

The 1^st point is that you cannot use quotations within inline CSS.

If you use quotations the browser will interpret this as an end of your style value.

 To understand this line, we will see out last segment.

In our last segment whichever CSS, we had added, those we had added in style tag, in this way.

Style, text CSS and then here whichever CSS we wanted to add, we had added.

 So, when we add any CSS under style tag, in that case we can make use of the quotes.

Quotes are these. Okay.

 If I want to use those same quotes here.

 I will not be able to do that because inline CSS starts from the starting quote and ends by ending quotes.

So, in between starting and ending quote whatever, we write is our inline CSS.

So, let’s say I want to add, such CSS, where the quotes are used.

 So, if I add quotes anywhere here.

So, my starting CSS ends there. (7:44)

So, based on that I cannot use quotes anywhere in inline CSS.

So, this is one disadvantage.

If I want to add such CSS where the quotes are used, so that I cannot add in inline CSS.

Next, these styles cannot be reused anywhere else.

It means that whatever we have seen here in Sublime text, where I wanted to style h1, I wrote h1 there.

 I wanted to style p, I wrote for p.

So, here when I have to style any element, that will go especially to the same tag, we cannot apply it on another element, so that is a disadvantage.

External and the in another CSS that is available, there is one advantage in that we can make multiple use of CSS.

Going ahead these styles are tough to be edited because they are not stored at a single place.

 Let’s say we have a big webpage.

If our webpage is of 5000 or 6000 lines.

So, when we will have to edit any particular CSS.

If that is written in inline way. In this way.

So, we will face the difficulty which is, we will have to go in the code and search for that line.

And after going there we will be able to edit it.

External CSS is a thing which we will be seeing today.

What happens in External CSS? There is a different file made of CSS and we can directly go into that particular CSS and get it changed.

So, here this is the disadvantage of inline CSS is that we have to search a lot.

We have put in the efforts that where is CSS written.

Next disadvantage is that it is not possible to style pseudo codes and pseudo classes with inline CSS.

Pseudo means the hover effect, active or deactivate, pseudo elements like before and after, which we are going to see in our CSS course.

On any such elements if we have to apply CSS.

Means over the event when we have to apply CSS.

That we cannot do through inline.

That we can do to only through External and above where we write under Style tag in that only we can apply.

 Means whichever our CSS are event based, that we cannot add in inline way.

Last inline CSS does not provide browser cache advantages.

This means our External and the CSS that is written in style tag, that can be stored in browser’s cache memory.

But the CSS written inline, does not get stored in browser’s cache memory.

So, these are the points described here are the disadvantages of the inline CSS.

Now we will go on to another way. (10:17)

Second is Internal CSS.

First was Inline and second is Internal.

 Internal CSS means that whichever CSS we add in style tag, we call that Internal CSS.

We call it Internal CSS because that CSS is been added in our webpage itself.

That is the reason we call it internal CSS.

 So, I will close this program of mine and we will go into Internal CSS.

 In Internal CSS it has been written that, the internal style sheet is used to add a unique style for a single document.

 It is defined in head section of the HTML page inside the style tag.

So, lets here in Sublime text I will generate one more program of html and I name it example internal CSS.

In body I will take a same h1 tag, “This is the example of internal CSS”.

And along with it I will take a P tag, “This is a P tag”.

Okay. And I save it in the name of inter.css.html.

 And after going into the program, internal CSS, open with Google Chrome.

So, here is our inline example and this is our internal example.

So, we are getting 2 things here.

 So, this is our heading tag that comes here and this is our P tag.

So, inside this we will add Internal CSS.

So, internal means inside our webpage.

So, like it was written on the slide that in head tag we add internal CSS.

So, this is our head tag.

And here in style tag we will add our internal CSS.

So, style, type = text css.

That means that our CSS is written in text way.

 So, I have to apply CSS to h1 and p.

 So, I will write h1 here and my element is h1, So, with the help of element selector, I will give CSS to it.

Like we saw in the last segment, this is my element’s name.

Curly braces open and here in h1, I have to give font color.

Color-red, font size 30 pixel, padding 10 pixels.

So, I have applied 3 properties for this h1 tag, I will save it.

As soon as I run it.

Here I am getting the padding, that means I am getting a little space here.

 To identify the padding, I will do some work.

We will give the color as white and background color property we can add ad red or you can add any color. Save, okay.

So, this space that we are getting up and down and to the left-hand side.

 That is our padding and inside we are getting this text in white color.

So, what did we do here in h1 tag? We have not added CSS, to give CSS to h1.

So, here in the style tag, with the help of a selector, we have added few CSSs.

Let’s say that I have to some CSS to P.

So, after writing P here. Let’s say I take the color as black, font size- 20 pixel, padding is 10 pixels.

 Let’s say that I take the background color as light green.

Save. So, here after 10 pixels padding, our font is in black color, we are getting light green color in background.

So, these 2 CSS that we have added currently.

We are able to see a colorful output. So, these we have added with the help of internal CSS.

 The CSS that we have written are on the internal page.

Now, the advantage of internal CSS is that, the CSS that we have given in h1 and p.

If any next h1 tag I add in it.

 So, with that this CSS gets applicable by default.

For example, I write here h1, “This is another h1 tag”.

Save, as soon as I have reloaded.

The CSS that was there on the earlier h1 tag.

Same CSS is applicable for my another h1 tag.

 This indicates our advantage of writing the code only one time.

Means we write the code only once; we are giving CSS to any one element.

As many times we will add that element in html.

That many times our CSS will be applicable to that element.

So, this is one advantage of internal CSS.

That our line of code in our program, reduces.

We have to apply CSS only once; it gets applicable everywhere.

 So, this is a good advantage. We will go into the next slide.

Our last way to add CSS is called External CSS. So, what is external CSS.

Let’s say normally when we generate website, it is not of one page.

 For example, in my Chrome, I open learnvern’s website.

In my learnvern website, this is my home page, which you can see is quite big.

Here below a lot of menus has been given.

 And here if we go in all courses.

There are lot of menus available. If I click on any menu.

So, the related pages are available here for us.

For example, in technology, I am opening advance java page and I am opening advance C language.

So, here in advance java I am getting a specific design, here on the left-hand side there is a side bar.

There is a blue color background.

On a white color background, I am getting my content written.

Same if I go on to my C language pace, I am getting blue color background there, I am getting the side bar and I am getting the content.

Here if you see design, the design is almost the same. (17:00)

 But our content varies.

 So, if we want to make this kind of website which contains lot of pages.

 So, in that case we are not able to write a different internal CSS for each page.

 In that case what we do is, we generate a particular CSSs file with .css extension.

 In that all style related tags and design related all our property attributes, that we add in one file.

And we link that file in every page.

What happens because of that is we don’t have to write same CSS in every page.

We write the same CSS only once, in one file and from there we link the file to all our html pages.

So, all the CSS gets applicable there.

So, we will see it today with an example that what is External CSS.

Our CSS file that is there. To link that file with the html page or the way and procedure to add it, that is what we called External CSS.

Now, we will see, how we can do that.

so, let’s say I generate a 3^rd page here and I give it html.

Okay. “Example External CSS”. Save, external css.html.

Okay. So, we have named it externalcss.html.

And I am adding a heading inside it.

 “This is an example of External CSS”, save, if I run this program.

 I have zoomed in it.

So, this is our External CSS program in which we are getting “This is an example of External CSS” written.

 Now we have not added any CSS.

Now we are going to add it through external file.

So, Now let’s say I create one more file in my Sublime text.

This time instead of html, I will select CSS.

You can see here there is CSS written.

So, from there select CSS and in this I have to give style to h1 tag.

So, let’s say I write here, h1.

In h1 padding, 10px, background color- red, font size- 30px and color white.

So, here I have added 4 properties.

 I have added 4 properties and given it to H1 tag.

And when I will save it pressing ctrl S. Since I have selected CSS, I can see the CSS extension.

90% of the CSS files we give name as style.css as this is a style sheet file.

 If you want, you can give some other name.

There is no restriction on naming convention.

But for user friendly purpose and the programmer can be easily identified.

So, to every file we give the name, style.css.

So, here I will give the name style.css.

 If you are going to generate more than 1 style.css files for your html page.

 You can name it style 1, style 2 or any such name but usually for proper naming convention we add CSS file as style.css file.

As soon as I saved it, when I see it in the folder, I am getting a file named style here and we don’t have editor icon here.

 There is a settings icon on the page.

This indicates that this file of ours is a CSS file.

Now I want to add this style file into External CSS.

So, what will I do? I will go in this External CSS and I will type link, after clicking of ctrl space, I get this generated format.

 In the link I am getting relation, style sheet is a default, because in a html file whatever I add or link it from outside that is majorly a style sheet file.

There are other files also there, like we can add a java script file as well.

 In that case we have to add here java script.

 But the default value that the editor is giving us is stye sheet.

 In type we are getting text css.

 Now, what is href? Our file is on which location.

That file’s location we have to add with file name.

 So, because my file that is there it is there on the same path where is my html file.

So, I will simply write here style.css and I will save it.

 As soon as I saved it, I am running my program.

As soon as I run it, in the external CSS file, that CSS that I had applied that same CSS I am getting here.

 Means whatever I have added externally, I have linked my file in html.

And all my CSSs are applicable there.

 So, this was our 3^rd way, in which we can add the CSS.

We can write CSS in another file and link that file.

So, in total we learned 3 ways. 1^st was inline. 2^nd was internal and 3^rd was external.

Advantage of adding External CSS is that currently this program of ours, externalcss.html is one program.

We have quite long web pages.

There are lot of line of codes inside it.

 In that case we have to go on that particular line and search for CSS and update it later can be difficult.

 In that case, let’s say, if I generate an external file of the name, style.css and in that if I so any change then that change that I made would be applicable everywhere on this particular html file.

So, for this reason adding External CSS has its advantage as in that our time doesn’t get wasted in searching or in looking up.

So, this is the reason we majorly use style.css.

 If we see it, both are our proper ways, Interna and External, both are proper ways.

 But properly when we are working with a big application.

At that time, we use only External CSS. So, lets come on to our slide.

In total we have learned 3 things. Inline CSS, Internal CSS and external CSS.

In Inline CSS, we saw the disadvantages, why they should be avoided.

But if there is a necessity or a requirement.

It is not a criteria that we don’t have to use Inline CSS.

You can use Inline CSS when you have to do some small changes or you have to design some particular element.

In that case you can definitely use Inline CSS.

When you are working with big application.

 In that case using External CSS is more beneficial.

So, today we have learned about all these 3 things.

I request you that whatever we have learned you try it, practice it.

When you are working or practicing, in it if you are getting any doubt or query, then you can tell us on forums.learnvern.com.

We will try to rectify your issues at the earliest and revert to you.

 In the next segment we will see about CSS Comments.

Thank You.