You are currently viewing ‘How to do this’ today is our first lecture of CSS

‘How to do this’ today is our first lecture of CSS

‘How to do this today is our First lecture of CSS in which we will discuss CSS font alright… CSS lecture 1’ ok you well know that font can be used on paragraph also used on head tag as well and also change font of paragraph in MS word, you can change font of text also increase size of text and decrease as well and can change font-family all these things we will discuss first of all i discuss font-family… what is font-family today i will use inline CSS styling in this tag, i write style=”” and here i will write ‘font-family’ alright…. this is ‘font-family’ alright i have done it and which type of font family you want to change and i want to change to ‘times’ alright…now i save it and open in browser look here you can see ‘CSS lecture 1’ and showing its font-family and i will change it and now i will change to Serif you can also change to sans-serif but i change to sans-sarif Open in browser and refresh it Its font family has been changed There are alot of font families, check them by yourself I only told you the method You are now able to learn yourself just by knowing little bit Next we will see font-size Here I will write font-size You can see by its name that font-size will decrease or increase the size of the font Just like we did that before I write 120px Save it Open the browser and refresh it. You can see that its font size has increased Let me tell you one thing That is whenever we make

'How to do this' today is our first lecture of CSS

‘ a website we make it responsive means that the website will be opened on laptop desktop and mobile So these are the devices that we use The major disadvantage is that if we have set everything according to the laptop just like I have set CSS lecture 1 on my laptop when I will open this website on my mobile It will be viewed differently because the screen of mobile phone is not that larger Let me show you This is the screen of my laptop. I make it smaller Now see CSS lecture 1 It is divided into 2 lines For example, the screen of my mobile phone is of the same size I make it a little bit larger. See this is the size but CSS lecture 1 is divided into 2 lines However, when I wrote it on the laptop I wrote it on a single line. It’s on a single line. I was thinking that it will appear on one line but the person who opened it on his mobile phone came to know that my website is not responsive He sees it differently so that doesn’t look efficient The website is made to be responsive How to do it? How to make the font size responsive? We can make other things responsive too. Today I’ll only tell you how to make font-size responsive? Wherever we use ‘px’ instead of ‘px’ we will use ‘vw’ which means ‘viewport width’ For example, I write 1vw Just like we give the percentage that is 1%, 2% or 3%, it works, in the same manner, You can give the value up to 100. I have written 1vw save it Open it in browser You can see the font size has Today decreased Let me make it larger to be responsive I make it 50 Now see Sorry the size has increased much Make it smaller, let’s say 10 let’s see CSS lecture 1 is Tody written in a single line As I make the screen smaller like the screen of mobile phone You can see as I will make it smaller its size will decrease and as I will increase the screen length the font-size will increase You can see it The font will adjust itself according to the screen If you are using the smaller screen like that of mobile phone the font size will automatically decrease If you are using a laptop or desktop pc, the font size will increase accordingly. So its the advantage of using ‘vw’ view port width So you have understood the concept Now move towards font-style The font-style just like its name suggests, it changes the style of fonts Here I write font-style In styles we have italic normal and bold Here I choose italic Open it in Browser You can see its font-style has changed to italic Just like that we have bold All those styles that we see in MS Word all of them can be used here You will soon be able to make a website of you own font-variant we will not going to discuss now… we will discuss later font-weight those things that i have not discussed in previous lecture and now also you cannot get better understand now because these thing we will use in bootstrap and javascript so these are not much valuable so dont worry about that why are skipping these things now we will see font-weight from name you can notice weight of text that how much you want to be bold how much you want to set weight and now i want to set its weight to normal normal weight… now look here alright… now open in browser now look here… now its weight is normal as i change to 900 simple you no need to write in px just assign simple value you can assign 0-1000 here i will refresh it now you can see that its weight is now much bold now so this is font-weight so this was out css font and it’s done now so now we will discuss css icon so this topic also important so this will be our last topic of this lecture so listen it clearly and understand it if you will not focus then you cannot understand so i request you that please listen it clear css icon is just like when we type user name then user icon will use and we type password then we use password icon we can see Facebook and twitter icon as well so all these icons are called css icons so today i will tell you how can we use that first of all you need to download a library alright… that is font-awesome i will give you link of library where you need to download in description i have written link of this library you just go there and click on link and download it…Today ok when you have done download then you will get this type of file font-Today Today awesome free 5.12.0 you just extract it extract here ok now it is extracting now now look here now it is extracted now you just open it now it is taking some time so one thing i tell you that to run font-awesome icon you must have internet if you have no internet then you cannot perform it well you cannot see icon so that’s way internet is compulsory so here we have files where we need to copy two files because we are going to add css icon and css bootstrap icon also there … this one we will see later when we start bootstrap so we will also work on database and php as well on that icon as well so how can it work so first of all you need to copy only two files first one is css and second is web font these two files you need to copy it here i press ctrl+c for copy and paste where you have saved your project and here i have saved my project with ‘css lecture 1’ on desktop and paste here and you need to paste where you have saved your project here i have pasted my files here we can see these files also contain files and in css folder also contain files all these are links that already written in library form we just we will use and now tell you that how can we will use it as we give link of external css file same as that we will give link of this library and we will use link tag alright in href write ‘css’ alright / all.css alright you just keep in same folder where you have main folder of this today .html file in that folder then you can give this reference of library otherwise you need to give whole path of library location so i have set link of library so after that we have <i> tag for icon we can also use span tag and <i> tag as well and we can use both first i will use <i> tag here you need to give attribute of class you use ‘fa fa-‘ then comes the name of icon that you want to show for example i want to use twitter icon twitter alright…Today I write twitter here you no need to write here just it is for understanding… alright save it with ctrl+s and here i will refresh it here you can see that it is not showing because hers is the problem of the internet I just let me know the problem here there is some issue of twitter i just change it ‘fa fa-user’ save it with ctrl+s and here I will refresh it and look here you can see that it is showing user icon here alright same as that there are a lot of icons I use span tag now… as I told you that we can also use span tag and can also use <i> tag for showing icon class I write class=” fa fa-car” alright i will also deliver a list of all icons so you can know which one you can use look here… it is showing the icon of the car same as that I just show you another as you can see on the Instagram icon of heart I just show you that here we will write ‘fa fa-heart’ alright save it with ctrl+s and refresh here Now, you can also see heart Like this you can make ‘thumbs up’ icon For like. We’ll say it ‘thumbs up. Class: today ‘fa fa-thumbs-up’ Maybe my spelling would be wrong Save the document and Refresh the page. You can see the thumbs-up icon. We can use it in the button. You can use this icon anywhere you want. In Button tag and in an anchor tag and can use it in many more tags. Depends on you. Pasting the icon code in Button Tag Saving the document and refresh the page Now it becomes a button and you can click it.We can change it using CSS If I want its color to be blue I would use the style attribute in <i> Tag and the Color would be blue. Save the document and refresh. Its color becomes blue You can change the color of the button. By using the style attribute in Button Tag along with background Property. Save the document and refresh the page. Background color does not change because I use the ‘color’ property instead of ‘background-color If we click on it. Everyone has seen that text color changes no google when we click any link. That we ”ll learn in JavaScript Session. i:e on click, hover, Hoverout Events You can use the Icons in <input> Tag First of all write <i> tag Than use the ‘fa fa-user’ class in it. and then use <input> Tag in it. With type ‘Text’ Refreshing the page. We can see out resultant Input field and icon. This goes wrong because i used <input> tag in <Button> Tag So you would have to write the <i> and <input> tag outside the Button tag Now you can see the user icon along with the input field You can use these icons anywhere as you want. You just have to download it and extract it And have to give its path. and then use any ”fa-” class You can get the whole list of icons from the internet or Rather i would provide you. So good Bye for today. We’ll meet in the next lecture. If you haven’t joined our Facebook group I have given its link in the description You can join through it. Allah Hafiz This is your task in which there is a paragraph then use <span> tag to change its color Then used Heading and changed its font weight and size Then i make a table and make some fields inside it. This is ‘fa fa-user’ icon This is ‘fa fa-lock’ icon and This is the ‘fa fa-comment’ icon And then there is <textarea> and these are Buttons and I changed their Color and Background colors It is so much easy task. So submit it Early. Good Luck!.

Leave a Reply