Implementing CSS

Implementing CSS

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.

Implementing CSS

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 –

Leave a Reply

Your email address will not be published. Required fields are marked *