Hello guys welcome to the next video on HTML tutorial for beginners using html5 in this video we will learn how to use CSS or cascading style sheets in HTML now CSS is whole different topic and it requires you know many videos to learn CSS but I’m going to give you a brief introduction how you can use CSS in.
HTML so there are three ways in which you can use CSS in HTML one.
Is internal second is inline and third is external so first of all let’s see how we can use inline CSS with our HTML element so for example I have this h1 tag and I have some text inside this h1.
Tag and I want to change the appearance of this text so right now it looks like this right so for example.
I want to change the color of this text.
So what I can do is I can add a style attribute here and as a style I.
Can add color and the color can be for example red okay I will save it and I will refresh my webpage and now it looks like red right you can change it to some other color and save your code and refresh your page and changes to that color so this is how you can add inline styling to your element now let’s see how to add internal styling to our HTML tags so go inside your.
Element and inside the header element you just need to add style element here and in here in the inside styling and right now we don’t need this text attribute so just inside your style element what you can do is you can choose the name of your.
Elements for example I want to change the font size of this h1 element right so I will just write h1 and then inside the brackets these curly brackets I can provide.
The attribute for example I.
Want to change the font size I can choose font size and then I.
Can choose my size for example 100 px which stands for hundred pixels okay I save it and I will refresh my page and now the font size has.
Changed 200px right now for example i want to transfer this property to this internal style so how what i can do is i can just choose this color colon and then just below this i can add this property and at the last I am need to.
Add this semicolon here and now I can remove this style from here and save it and it will be same style right so we can use these.
Styles like this now for example I want to change the background of my body so I can take the body element from here something like body and inside these curly braces I can change the background color for example background color and I can choose any.
Color here for example yellow okay and save it and refresh your page and the background becomes yellow here okay now let’s see how we.
Can add our external CSS file in our HTML so first of all we need to create a CSS file so I will go to my web content folder and I will create a new and I will choose a new here and this.
Time I want to create a style dot CSS file source just.
Write style dot CSS and CSS stands for cascading style sheet ax as I already told you and just save this CSS file here and in here you can just transfer your style which.
Have provided here like this just copy this and I will delete the style element from here and inside your CSS file you just need to give these Styles like this so for h1 tag same as you have given as an internal style you can give it here right now to add the CSS file in our HTML file what we need to do is we need to add a link tag here so.
Add link tag and as an attribute here we add attribute called arielle and whose value should be equal to a stylesheet right and the second attribute if you want to give here is.
H ref as we give in our link and then is equal to give the part of your CSS file so it’s in the same directory as in my HTML file so I can directly write style dot CSS okay now this will add the CSS file in.
Your HTML file and then once you refresh your page it will look like the same okay and when you remove some property for.
Example this background color and save it and.
Refresh your page it will remove your property right so these are the three ways you.
Can add a CSS file in your HTML file now there are two more important things in CSS you need to know one is called a ID attribute and another is called a class attribute okay so I’m going to remove all the styling code from my styling sheet and once again I will go to my HTML file and for example first of all we will learn.
To use ID attribute with CSS okay so for example I add our attribute called ID here and I can define my own ID for example my ID and then I can go to my style dot CSS file here and then here first of all I will give the name.
Of the element in which I want to add this style so h1 is the name of the element so just write h1 and then write a hash and then write the name.
My ID right so write the name of the ID and then.
Add these curly braces here and then you can provide your property which you want to change for example color and I want to change it to red color right like this and save your code and refresh your page it becomes red okay.
So this is how you can use ID attribute with CSS now there is one more attribute called class so for example I have delete this attribute ID from my h1 tag and I add a attribute called class here and I can define my own class so for example my class and once again I will go to my style the CSS file and instead of using.
This what I can do is I can write something like this so first of all I can take the name of my element which I want to use so for example h1 because this class is in the h1 tag right and then dot my class name which is my class.
Braces inside the curly braces once again the for example color attribute I want to change and this time I want to change it to blue right so I will save my code and refresh my webpage and it becomes blue so in this way you can use class attribute in CSS and HTML okay so that’s it.
For CSS I hope you understood.
The basic concept how to use CSS in HTML so that’s it for this video please rate comment and subscribe and bye for now.