CSS Link-CSS list-CSS table-very easy to understand-Lecture 6-how to do this


Asslam-o-Alaikum friends. This is me Ahmad raza and you are watching how to do this. we covered five lectures of CSS. Today is the 6th lecture. Today we will learn CSS link,CSS list and CSS table and one thing i tell you that we are teaching you in details. This is why video goes too long and lectures are also getting more. be patience. In Sha allah we will teach you better. We are trying our best. If you have any problem then discuss. But patience is important. First of all, we talk about link. link has four properties. a:link mean a normal link. a:visited mean that a link that we had visited. After visit how it is looking. a:hover mean that when we move the mouse over it, how will it behave. And a:active mean when we click on link for a while how will it behave. So let’s start implement. type html as we write. Write title CSS lecture 6. Now, i am creating a tag whose reference i give #. # means when you will click on link , it will stay on the same page. Here i will write sample. Here i use style tag. Because i am using internal properties. First of all, i write a link. As i told you. so we are talking about a:link. Here i am changing it’s text-decoration. none. One thing i tell you, as much as we have learned CSS properties, you can apply. you can change font,background image, every thing that you want. okay. You can apply every property here. Here i used text-decoration property. save it and open in browser. Now you can see, underline has been erased. as you know very well, that a simple link has underline under the text. And be like…..aaaaa sorry when i click on it. Now, it have visited. But it looks like before. We don’t know it is visited or not. Now i change it’s appearance. Here a visited Here i change it’s color. color:green I changed the color to green. I save it and open in browser. Now you can see, it is visited. It’s color is green. As i am moving mouse over it, nothing is happening. we don’t see any change. Now i change it’s hover. a hover okay. In hover, i change it’scolor to red. As i move mouse over it , i will see it’s color red. Let’s see. Now you can see. You can see it’s color is green, as i move mouse over it, It’s color change green to red. One thing look carefully. When i click on it nothing is happening. i am clicking. We are don’t see any changing. For this purpose use a:active. Use css properties. Then you can understand easily. a:active color:blue Now go to browser and refresh. Watch carefully as i will click on it. For a while it’s color will be blue. Did you see? For a while it’s color blue. For a moment. when it will active, it’s color is blue. okay. It is a:active link. We learned 4 things. a:link,a:visited a:hover and a:active.You can use any property here. Now i am making it like a button. As we see that it is just a text we don’t know it is link or button. So, i am making a button of it. watch carefully. Here i write background-color. orange. okay. And it’s color white. okay. text-align center. okay. And change it’s padding. padding 5px. Also i change it’s margin 5px. So, here i used it. copy it. copy from here to here. And in all of these i make paste. okay. Here. And also here. Now we will see. It is not looking very well. Because i have not changed it’s color. Now you can see , it’s look like a button. okay. You can change it’s appearance as you wish. You can create a well button. You can design a very well. I can’t make here because time is short. So i think you make easily after understand . So this was our CSS link. We covered CSS link. Now we will look CSS list. Okay. In CSS list , i just teach you one thing. There are many things but we will learn main thing. As we learned in HTML, There are two types of list. Unorder list i create here. here i type cofee. I create another li. Here i write tea. create another li. Here i write milk Now i am creating an order list. Here i write book. Another li. write pencil. create another li. Here i write pen. I created an unorder list and an order list. Now we will see it’s style . The main thing of list is that list-style-type are you looking?There are many things in list. list-style-position. I tell you about position in a simple way. So let’s do it. next is image. image mean you can paste a image here. list style type is the main. Here i will use it. I going to style unorder list in square. As we have bullets i want to covert it into square. open browser. You can see it’s changed. converted from bullets to square. You can change here as circle. okay. As you see here, you can apply on it. circle . save it. So, you can see. You can style easily. There are some properties for order list and unorder list. Different properties is used for both. for unorder and order . Now i style ol. list list-style-type okay. As you are seeing. There are numbers. I want roman letters. As you see lower roman and upper roman. i use upper roman. refresh it and you can see. Be like you can use alphabets. i use upper alpha. You can apply from these options. You can apply anthing. I use upper alpha here. refresh it. You can see upper alphabets. It is known as list style type. Now we look about list-style position. I write here list-style As you see here list style position. click on it. This position means, you want insider or outside. see here. Go and watch hot it is. Inside mean text and circle inside it. If there is border then it will inside the border. It is simple. Here is outside. These are not important. It is outside. When you use it in a table, inside mean bullets and text inside the table. mean inside of table border. Outside mean, that text is inside the border and bullets is outside the border. simple is the difference. list-style-image means, as i write circle here, you can use image instead of this. It is work to do that because you are able to do this. It’s your home task. Now we look CSS table. There are many things in the table. But we will look important things. All CSS properties you can use in any tag. okay. I create a table. write th. i write first name inside it. First name okay. Sorry it is row so type tr before th. Move it inside the tr. here. i create another th. name it as second name. okay. I create tr here. td and write name ahmad. write another td. i write raza. create another tr. This is why we need more tr tags. Because you can understand very well. Here i write muhammad and another is sanawar. inside the td. first of see it how it is looking. refresh here. There is no border or anything else. You know very well how to set border use table write border. border okay. How width should it be? 1px solid and color is black. now the border is this border is known as outer. If you want anything inside it then use here, border as i write 1px solid black okay. Now you can see it has been set. But , here you can set border for rows and for columns separately. I keep it. and i erase it. replace it by border-collapse. one thing i tell you that what you write internally and which you write inline. so it prefers inline. it skip internal if you will write both. it will prefer inner. I just did border collapse. You can apply any property here. inside the tr and inside the table. as i write inside the tr sorry inside the th i want to increase th’s height write height i want 70px now you can see it’s height become 70px. Like that you can change it’s width. for width i write..aaaaa 200 px okay. now you can see it’s width become 200px. Like that you can set text-align. You will write text-align aaaaaa left okay. let’s see. text-align become left. you can apply all properties here. Also you can change it’s color. i want to change it’s background color. red. okay.let’s see Background color become red. Every property you can use here as you wish. The important thing i am going to tell you. watch carefully here are three rows. as you can see three rows. you want….this is very small table. when you will create a big table. then you want odd rows odd rows 1 3 5 7 Their rows color’s turn black for this purpose one thing you will use…nth-row what will you use? nth-row. sorry ..not nth-row use nth-child. nth-child not nth-row. write tr nth-child(odd) i want to change it’s background color orange. Background color is orange. Now this thing mean that all rows that are odd background color will orange.letssee now you can see it’s background color become orange. Like that you can write here even okay i write even when i use even the even rows will become orange. Like that you can change columns’ color too. as you wish odd or even As we have two columns for this time. Simple write here. td and save it. refresh it and look as we have one td here and another is here. You must mention which td you are using. mostly we do for tr. I hope you will understand nth-child. Now we want responsive table. One thing we use that is inside the table we will use aaaaaa….sorry not inside the table we create div here as i told you about div div is use as a container. we move entire table inside the div. ctrl+x for cut write div use style property here. here write overflow:auto overflow:auto. when you have written. Your table become responsive. As i told you about responsiveness. For tablet and mobile how it will look.lets see So i short it’s size. very small. Sorry it is already too short. So i increase it’s width. Here is the table. width i want 100% 100% okay. lets see when you used 100% width it will cover whole page. it short as page will short. If you don’t set 100% ,use px Here i write 1000px okay lets see. now look as i short It add scroll bar here. It is known as table responsiveness. okay thank you guys. See your task in the last.

2 Comments

Add a Comment

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