Style Tag | Inline Styling | External Stylesheets - video Dailymotion

Web Artificer

Style Tag | Inline Styling | External Stylesheets #StyleTag #InlineStyling #ExternalStylesheets #CSS #WebDesign #FrontEndDeveloper #Coding #WebDevelopment #DesignTrends #CSS3 #HTML #CodingTips #ResponsiveDesign #DigitalMarketing #UI #UX #CodeNinja #WebDev #DevLife #CodeSnippet

Transcript

00:00So today we will cover three main things in our topic.

00:06We have seen the maximum HTML.

00:11So now we will see how we can use styling in our document.

00:17And what are the main styling components that we use to style our elements and text.

00:25Then we can also style the body.

00:29CSS is actually used for styling and HTML is used for documentation.

00:37So we will use inline styling.

00:41First of all, we will see what inline styling is.

00:45Let's look at the paragraph.

00:47Now we want to know where is the text.

01:00We have a simple text.

01:04How can we change it?

01:08First of all, we call it inline styling.

01:12Which is a strong method.

01:15Because if there is any over styling, this method will bypass it and implement it.

01:23But this is also assumed to be a bad practice.

01:28Because your code will be visible on the other side.

01:32So we will use style tag for this.

01:37In style tag, if we want to change the color of the text, then only the color property will be used.

01:45And we can give any text.

01:47For example, red.

01:49Let's go and refresh.

01:52So we will see that our text is red.

01:55Now we want to change its background color.

02:06So this is our background color.

02:18But it doesn't look good on it.

02:20So we will divide it.

02:23And let it be a tail color.

02:28So we can also change the height and width.

02:33We have 100% of height.

02:39Let's make it 10 pixels.

03:0210 pixels is too small.

03:04Let's make it 50 pixels.

03:07Okay.

03:08Now as you can see that we can change the styling in it.

03:13Similarly, we can take a style tag separately.

03:22It will come on the body.

03:24And all our stylings, we will take them all at once.

03:30Color will come.

03:39Let's take this tag.

03:49First of all, it will be selected.

03:51And its properties in it.

03:55We will tell it what we want to change.

04:01We will hold the selector first.

04:05And then we will give its properties in it.

04:08Give it a color.

04:11White.

04:13And background color.

04:16Let's give it a blue tail first.

04:19Let's see.

04:22Let's see.

04:23So you see that this method will also work for us.

04:27But suppose you have multiple pretexts.

04:43You have multiple pretexts.

04:46There will be only one styling implemented on all of them, which you do not want.

04:50You want different on it.

04:52You want different on it.

04:53You want different on it.

04:55So for that, we use classes or IDs.

05:00We will choose the class.

05:05P180.

05:07And we will also choose this.

05:12Class P2.

05:17You can keep any name.

05:19But it should be meaningful.

05:22So that even if you know that when you are using it, you have to change it later.

05:28Why did you keep this name?

05:31But the name should not be repeated.

05:33Otherwise, you will have the same problem.

05:37But instead of this P, we are choosing the class name.

05:45If we do P1, then to use the class, we use the dot.

05:50With the dot, P1 will be the class name.

05:54So as we will see, this is our first class.

05:58Your styling has been implemented on it.

06:00And the rest have not been implemented on anyone.

06:04Now to implement on others, we dot P2.

06:09And with that, we want to use our other styling.

06:15Let's make the color green.

06:19And let's make the background yellow.

06:22So in this way, you can also do styling for other attributes.

06:36And if you want, this is our basic styling.

06:48Now we will see how to use the style sheet.

06:54How can we use the style sheet in our document.

07:01Like all these methods are coming in one document.

07:07And the documentation is also coming.

07:11So it is becoming confusing.

07:13It is neither visible nor we can easily manage it.

07:19To make it easy for us, we choose a different style sheet.

07:24First of all, we link it with our document.

07:32This is our style sheet.

07:36We have linked it.

07:40With the document file.

07:42Now we can put anything in it.

07:44For example, we want to style dot P1.

07:48Let's put it in the background.

07:57And let's give it a color.

07:59Yellow.

08:03So as we will see, now we have the style sheet implemented.

08:08And in web development, 99% of people use external style sheets.

08:16It is also preferable.

08:18It is also easily manageable.

08:20And we can easily tackle changes from here.

08:25So in this way, we can do the rest of our style sheets through it.

08:31So in the next lectures, we will see how to style.

08:40We will see through external style sheets.

08:44HTML is almost covered.

08:48Apart from this, we will see the small tags in the middle.

08:54We will see it in the future.

08:57We will cover things further.

09:01Thank you for your attention.

09:03Goodbye.

Style Tag | Inline Styling | External Stylesheets

Category

Transcript

Recommended