Welcome back once again in this lesson I’m going to talk about the three ways that the CSS provides for adding the CSS properties to the HTML web page.
Now we’ve been talking about CSS even from the HTML lessons and I have introduced one of the ways of
adding CSS which is also the simplest one which is inline CSS.
And what we do in case of the in-line CSS is that we simply add the style attribute inside the opening
element tag and then we provide the properties and values and in case we have multiple properties and
values then we can provide them all within the coats.
Then the content inside does take that property and we can see them on the web page but there are two
more ways of adding CSS and those two ways are more suitable when we have to create bigger projects
like a complete Web site or making some landing pages or in case of so many style properties applied
to the elements.
Well let’s start with the second option which is internal CSS.
So in case of internal CSS what we do differently is that we provide the style tax inside the head tag
and then we select the element to which we want to apply the properties like suppose we have inside
the body we have to be taxed and we want to apply the color of blue to this paragraph then we can select
this P overseer for the p tags.
And this piece called selector in this case and then inside we have the property and the value just
like we mentioned here inside the style tag we mentioned them the same way.
We can also bring all of them on the same line.
The closing parentheses and the value they can all come on the same line but this is easier to follow
like this, if we have multiple properties then we can add them all inside the paragraph and then we will
have the properties applied to this tag which is mentioned over here as a selector so that’s the internal
success.
And let me show you on our document as well.
So here we have the HTML document and we have a bunch of different elements inside and we can see them
over here as well we have a heading and some paragraphs.
Now let’s say I want to change the color of all the four paragraphs to blue.
Now if you were to follow the first wave which is in line C Ss then we would have added the style attribute
over here and then we would have said the color to you inside if I save it and refresh then I can see
this only in the first paragraph because we added this only for the first paragraph.
If I copy this and paste it to all the four paragraphs then they would have also become blue in color.
Now let’s say I want to add another property in future let’s say I want to change the font size of all
the paragraphs to let’s say 20 pixels.
And I would again have to add the font size to them and then would have to mention the value twenty
pixels and then we’d have to copy the same to all the other paragraph tags as well like this.
Now one problem that we see of this year is especially when we have a bigger code and when we are adding
so many properties to just each individual element then it’s not only going to mess up the entire code
it’s also going to make it very difficult to navigate on the document because there’s a mix of both
the CSS and the HTML.
So as a solution to that the style option that the internal CSS auction does make it easier to style
these elements while separating the CSS from the HTML.
So if I just remove all the style tags from here it’s even going to take me some time to remove these
style tags.
Now you can imagine how difficult would that be if we had a big code and now what we can do is I can
go inside the head tax and then add the style tag opening and closing style tag and then inside I have
to select the element which is going to be the selector.
So I want to apply the properties to the pretext that this paragraph I select be overshared.
And then the parentheses and then inside I add let’s say the color of blue and the font size of that
say 20 pixels.
If I save it and refresh then nothing changes.
We still see the same style effects that we provided using the internal C assist method so clearly it’s
very handy because we are kind of separating the C assess from the HTML all within the HTML document.
Now this option might sound like a good solution and might sound very useful when creating an entire
website but there’s one downside of this option as well.
Now suppose I do have a big HTML document and there you have a lot of elements and a lot of style properties
as well.
So in that case, while you are separating the style from the HTML all still the paste land is going to
be very big because we are going to be having a lot of style rules over here and then you are also going
to be having a lot of elements over here.
So it’s still kind of makes it messy.
So this is where the third option comes into picture which is also the most commonly used one for creating
a website or for creating other different bigger projects.
And that option is external CSS so using the external CSS is very very similar to using the internal
CSS we still represent our rules the same way we have a selector and then we have the properties inside.
The only difference here is that we create a separate file for CSS and we named this file as anything
we want but it has to end windowed CSS.
So just like in each G.M. file ends with DOT each GM all CSS file has to end with dot CSS and then it
starts working but that’s not all we have to provide a link to the external sheet because when we are
creating an external sheet it can be inside the same folder it can be inside another folder and maybe
a dedicated CSS folder.
So there we have to provide a link so that this each diamond knows which files you refer to so for that
we use this tag inside the head tag again and this is a link tag and the first actually boot we add
inside is real is equal to now the real stands for a relation which kind of tells the browser the relation
of the document that we are linking to this HTML file.
So that relation is tile sheet which means that the external document that we are linking is a style
sheet for this page.
It has got all the style code that is the CFS and then we have to provide the location of that file
and we can use the H refactor good for that and adding the location of the file is same as adding the
location of an image that we discuss in the lesson on adding images and then we have the type attribute
which is very optional you can even choose to omit that this kind of tells what kind of a file it is.
So we mentioned that as text CSS CSS is the type of file we are adding but since it’s already understood
that the style sheet is written only in CSS.
So it’s kind of OK we can even omit that and then our Page is ready.
So let’s take a look at the text editor as well.
Here we have our text editor and we can see that on the folder structure on the directory that we
have to HTML file with the name index or a steel mill.
Now we are going to be creating another file that is gonna be an external CSS file.
So I repeat the same step.
New file and I’m gonna name it anything let’s say style.
That’s the commonly used name but we can name it anything we like that makes sense to us and then we
can just end with DOT CSS.
That’s the only requirement.
It has to end with dot CSS.
And now if I save it and here we have the new file and what we can do is we can copy the same from here
controls X I can actually cut it from here because we are no longer gonna be requiring it after adding
it in the external CSS file and then we don’t have to use any tax here.
This is a purely CSS file and it’s only going to recognize the CSS index which is like this.
We have a selector and then we have the parent disease and we have the properties and values if no I
come back to the H G.M. page and if I refresh then we are going to be losing.
Let me just save this A.T.M. page as well and refresh it.
Now we have lost all our properties because even though we have created this external file the Hall
on itself doesn’t know which file we are referring to or whether we are actually connecting this HTML
with any CSS or not.
So we know what to do for that.
We are simply going to be using the link tag with well is equal to the style sheet.
We have this in the suggestion as well.
And then we are able to provide the location of the file and since the file is in the same folder we
can simply use the name of the file styled or C Ss.
Again it’s the same way as adding the image file location so we can refer to that and then we can provide
the type is equal to taxes SS and now it’s done.
We have added our CSS file.
So if I save it and as soon as I refresh I’m gonna see my style properties back now if I want to add
some style for this H2 as well then I can simply go over here and then create another rule with the
selected this time as H2 and let’s say I want to give it a color of orange and I want to set the font
size to let’s say 40 pixels.
Now I’m only using these two properties for this lesson because we haven’t yet started with the differences
as properties.
We are going to be covering them very soon and then we’ll have even more examples.
Now if I refresh then here we have the heading well with different styles.
So I think it’s a very handy V and the B are completely separating the HTML and with the CSS so that
on the HTML file, we only get to see the HTML tax and on the CSM file we only get to see the SS rules
and this way we are separating it.
And another advantage of that is since we have created this external file and let’s say in future we
create a new page for our website which is quite common we have multiple pages on the website.
Let’s say we have created a rule let’s say for a navigation menu we have created a set of properties
and we want to have the same navigation menu on our news page as well.
So for that new page instead of typing that code again or copying and pasting and increasing the size
of the file itself, we can simply provide the link to this time load success and then it will work and
in addition to that we can also provide a link to multiple standard sheets as well.
So if we have two or three style sheets for various different styles we can do that or if we want to
have a dedicated style sheet for each of the pages then we can have multiple CSS style sheets as well.
It’s totally up to us which way we like the most but in most cases, we generally create one main thesis
file and then we provide a link of that file to our HTML pages and that kind of works pretty well but
again it’s totally up to you.
Which one do you find the more convenient?
And another thing that I would like to mention here is that like here since we have the different elements
now you might be wondering that this option then as soon as we type P paragraph it applies the effect
to all the paragraphs and let’s say you want to have a certain effect for the second paragraph or maybe
the effects that you are adding over shear the style properties to only one that for the first two paragraphs
and not the third and fourth paragraphs.
But these could be any element that you want to apply them to when you want to be specific with the
selectors.
Then we have a couple of different options within the selectors then I’m going to be covering very soon
in one of the next lessons and then we’ll have an idea as to what exactly do we have to type as a selector
so that we select the specific element.
One last thing I would like to mention is that we can also combine different ways of CSS.
So let’s say we already have provided an external C assist link over here and all this paragraph are
kind of following the rules created by the paragraph.
But let’s say I go to the second paragraph and then add style is equal to and then set the color to
maybe yellow and maybe I said the font-weight to bold
just to make it bold and if I refresh now then we have the second paragraph having the color of yellow.
So yes when we are providing the same style over here to a paragraph to an element in general and we
have already provided a certain style for the same property then this one is gonna take the precedence
and if we add an additional property like this then it’s gonna be applying that property as well so
we can combine different styles as well.
Most of the times you will find yourself using just the external C assessed and getting the work done
over there itself because this one adds more to our code and kind of makes it messy.
Now since the external CSF method is more scalable it’s more advanced we are gonna be using that for
the rest of the lessons but are always free to use any of the options like if the page has a very less
code then you can also try using the internals SS option.
That’s also quite useful for that.
Eventually, you will find yourself working on the big projects so you will want to separate the CSF from
the HTML and then you would like to use the external C as matter so this was it on the ways of adding
C assess and in the coming lessons we are going to be discussing the different properties of C assessed
and at the same time the different ways of selecting the elements and the individual or specific elements
or a bunch of elements.
So keep learning and see you in the next lesson.
Also, Read –
