Hi, Hello, everyone. In this chapter, we're going to have an introduction for Cascading Style Sheets, also known as CSS. Well, I have a separate course for CSS, covering a lot of topics, but these issues are going to thicken production in order to understand what we can do with CSS. Okay, so what is CSS? It's basically for styling, I need to change how my own pins look like. So let us see a good example in order to understand exactly what can see is true for us.

Now, if you who open this first file, as you can see is that I have some text having color text, and it has a background as well. And we never get over when the care suits Just like this. Okay, so let us see how we can create this by. Now, first of all, this is normal HTML regarding the body. This is P, for paragraph. And this is no money because this is another paragraph having some text.

What's different here is that inside the head tag, we have another tag name. So you have link, and it should have equal sign one dot CSS, and the relation is stylesheet and type equals text slash CSS. Okay, so I need to have a separate file for my style. This is how you link in your HTML page. This is the name of the file and this file should exist in the same folder with the There's Okay, what does this style one contain? Let us open this.

Now see? Let's open them together so that we understand. How's it going? Okay See, now, I have used the photograph in order to write my contents, you have seen this before and it looks normal. But now, in order to make this appear different, so, you simply type you take, so My take is p four and this is what I have used inside my beach, then use curly braces like this. Then you see says styles in order to change the style.

So, for example, I have here background color blue, as you can see here, so, the background color These blue and color equals zero this is a text color, and capsule is weight. So whenever I move like this, see the cursor changes and font size is 50 pixels. As you can see, the font looks very big. So this is simply one way in order to change my style, take care that I wrote and used paragraph, the t take multiple times. So I'm here using this style, I'm overriding the style of the t take to look exactly like this. So it can be mentioned only once.

And it applies for the whole tea things using the same page. So this is simple. Use any take and come here in your style. type you take, like curly braces and override the style is p What you this is one example. Let us take another example regarding the scroll bar holds this we for Internet Explorer see the style of mind scroll bar looks like this. Okay.

Let us take a look at the HTML file which HTML point of view, we link it here, the style to file and just type some contents to make it bigger so that I can have scroll. Okay, what does stay to here? See, now you're trying to override the scroll bar to simply you overrides the body tag. First of all, I can make some properties like direction or theme as you can see, direction starts by too late and also I have overridden some styles like this. Like for example, what is the base color or moist grown ball? Okay, this color is with the scroll bar, or Oh color like this.

This is our Oh come see. This is our Oh color. And the highlight color is yellow. As you can see this is yellow color. Okay, and you can have also some text like a 3d light shadow or whatever. Well, this may not be that much clearer.

But anyway, this is how you can change the size of your scroll bar. Let us take another example I have some tickets with background and will never yoga looks bigger. Okay Let us see how we can do this now here we're linking style three Okay. Now in this case we're creating an info here like this it should this is normal means that we have learned before but now let us see how we avoid the style all the Tony kit look like what you see now see no we use Take a take in order to create a link. So, in order to override it, then we have four states for the link a link is a normal state without doing anything. As you can see that this is the normal link.

This is how we avoid to have fun size 14, this is a color and the background color as you can see, you have these background and color Okay. Now visited whenever you visit the link like this has been visited like this. Now see, because this link is now visited, then my style changes then grown color Changes in text color changes because it has been visited. Okay, now hover over is whenever your mouse moves, and over over the text, as you can see, I change it font size changes the color and background color. So this is now it looks different. And that it is whenever I click on zoning see I'm now clicking on zoning, okay, when you release of course, it goes to the to the design native link.

So, here we have overwritten the new state for the whole state that will have no money if it is visited whenever we hover on whenever you click on the link, which is known as the active state. Let us also take another example in order to see How we can override styles using HTML and CSS. Now see this is a different style. Okay now are linking here style board and we're going to see how this is going for. Now in previous examples, we will overriding the normal HTML tags. But there is a problem here is that it applies to all tags using the pitch but what if in the same page or need to have different styles for the same thing.

So in this case, use something that we call custom styles. Let us see how we're going to use this. Now I have a table like this And they know I need to have. As you can see, I have two tables. And one table is the normal table who's out sighs as you can see, regarding this, there's about the least one, which is 75% and align equals center. And this is table no table data.

So this is how it's going to appear like without having any style. Now let us see how we can customize the other two tables in order to have totally different styles. Okay. As you can see, I have you use here, a special attribute code clause equals lease table and the clause here for the row. Name. Nice table row like this, ladies Okay, now let us see how we are going to override the slides.

Now see, I need to have my own style, notice style have a specialty of HTML. So you simply put doc and write any style, along with the properties. Take care that in order to differentiate between HTML tags styles and use custom styles. You put though, before the styling, but whenever you're trying to use it inside your HTML, just type directly, the style name moves out. Okay, so now I need to override this keyword. Now.

It has a background. It has a font family and the font size. Now let us see this is now it looks like it has a different background as a font family and this is the font size. Okay now for the table table header row under here, table row here. Now for the table header row I need to have that ground color as white smoke is font family font size and font weight is bold. Okay, so this is no looks like and in HTML of views the key for the table row.

For the normal row, make background color as white vertical align as needed text align and center. So simply you can deploy whatever you need in order to make you rows look like what you also I have some battles I can change for this battle I have here bottom, this is a first battle and this is second button. Now I used against the clause attribute with this style, style one and style to see I have two different styles, they look totally different from HTML. Now let us see how we're going to override these styles. Now. I use background color.

See like this. This has various style has different background legacies. And the About the Lego group. It has font face font size, color is white. from two it is bold, and cave, so is him. See, this is a normal mouse care.

So whenever I move here, the cursor changes. Now this is another style where you have different backgrounds different. They're just different styles. So you have two different styles here. Okay, so in this chapter we have learned how you can control some of the styles of HTML and how to use custom styles that says guides for this chapter. See you next chapter.

Thank you.