In this engaging tutorial, learn all about using fonts, height, and width for optimal responsive design in web development. Unlock the secrets of CSS and frontend development as we delve into importance of font size, width, and height in creating visually appealing and user-friendly websites. Discover expert tips and tricks on achieving responsiveness across all devices and screens. Whether you're a seasoned web developer or just starting out, this video is a must-watch for mastering the art of designing with fonts. Stay ahead in the digital world with these essential skills for enhancing user experience and optimizing your designs for maximum impact.
#font #width #heightincssforresponsivedesign #fontwidthheightincssforresponsivedesign #fontwidthheightincssforresponsivedesignfigma #heightincssforresponsivedesignand #fontwidthheightincssforresponsivedesignandwebsite
what are fonts in css?
what is width in css?
waht is height in css?
How to make responsive design?
how to use height and width for responsiveness?
#font #width #heightincssforresponsivedesign #fontwidthheightincssforresponsivedesign #fontwidthheightincssforresponsivedesignfigma #heightincssforresponsivedesignand #fontwidthheightincssforresponsivedesignandwebsite
what are fonts in css?
what is width in css?
waht is height in css?
How to make responsive design?
how to use height and width for responsiveness?
Category
📚
LearningTranscript
00:00So, today we will cover in this video that what are the types of selectors, background colors, phone colors, and all the properties of the phone, we are going to see them.
00:14So, first of all, let's see what are the types of selectors.
00:19So, as we have covered in our previous videos, by using the name of classes and tags, we can start them directly in CSS.
00:28So, let's take a div and give a class inside it.
00:38We have this div. Let's take another div and give it an id.
00:49Now we have two divs. So, let's give a class to it.
00:54Let's give a container to it.
01:01Now, the purpose of id and class is the same.
01:07But what do we do in id? Whatever element we get in JavaScript, we do it in id.
01:14That's why we believe that we can't use id in multiple places.
01:21For example, we have two divs. We can give two divs the same class.
01:27We give them the same classes, then the same styling will be implemented on both of them.
01:34There won't be much of an issue.
01:37But the id is a sensitive piece of information. We can assign it to multiple places.
01:43But what will happen is that when we use JavaScript, we will get some information from our id.
01:50So, what will it do? When the id of the same name is used in multiple places, then it will be difficult to retrieve the data.
02:00So, that's why we try to use id in one place.
02:07We can use multiple classes.
02:10So, let's take these classes and understand that we have two types of selectors.
02:17One is div. We can select things by tag name.
02:21The other is class name.
02:24Class name selectors are id-based selectors.
02:30We use dot and class name for class selectors.
02:36We use the id for the id name.
02:41Container2
02:45So, we can style them like this.
02:48As we have seen our tag name selectors.
02:53And now we see the class name and id-based selectors.
02:58We give it a height of 100 traces.
03:04We also give it a height of 100 pixels.
03:11So, as it is a block-level element, we give it a text inside both.
03:16For example, ptext
03:19For example, ptext
03:24For example, ptext
03:29For example, ptext
03:32For example, ptext
03:35So, we have two containers.
03:38One is this container.
03:40Container1 and container2
03:42We give it a border of 2 pixels.
03:52SolidRight
03:55We give it a border of 2 pixels.
04:03SolidRight
04:09So, as you can see, we have two containers.
04:17One with class name and one with id name.
04:22The styling is exactly the same.
04:25Now, for example, we want to change the font.
04:30So, we see the font of the container.
04:34We see the font of the container.
04:37We see the font of the container.
04:40We see the font of the container.
04:43We see the font of the container.
04:46We see the font of the container.
04:49We see the font of the container.
04:52We see the font of the container.
04:55We see the font of the container.
04:58We see the font of the container.
05:01We see the font of the container.
05:04We see the font of the container.
05:07We see the font of the container.
05:10We see the font of the container.
05:13We see the font of the container.
05:16We see the font of the container.
05:19We see the font of the container.
05:22We see the font of the container.
05:25We see the font of the container.
05:28We see the font of the container.
05:31We see the font of the container.
05:34We see the font of the container.
05:37We see the font of the container.
05:40We see the font of the container.
05:43We see the font of the container.
05:46We see the font of the container.
05:49We see the font of the container.
05:52We see the font of the container.
05:55We see the font of the container.
05:58We see the font of the container.
06:01We see the font of the container.
06:04We see the font of the container.
06:07We see the font of the container.
06:10We see the font of the container.
06:13We see the font of the container.
06:16We see the font of the container.
06:19We see the font of the container.
06:22We see the font of the container.
06:25We see the font of the container.
06:28We see the font of the container.
06:31We see the font of the container.
06:34We see the font of the container.
06:37We see the font of the container.
06:40We see the font of the container.
06:43We see the font of the container.
06:46We see the font of the container.
06:49We see the font of the container.
06:52We see the font of the container.
06:55We see the font of the container.
06:58We see the font of the container.
07:01We see the font of the container.
07:04We see the font of the container.
07:07We see the font of the container.
07:10We see the font of the container.
07:13We see the font of the container.
07:16We see the font of the container.
07:19We see the font of the container.
07:22We see the font of the container.
07:25We see the font of the container.
07:28We see the font of the container.
07:31We see the font of the container.
07:34We see the font of the container.
07:37We see the font of the container.
07:40We see the font of the container.
07:43We see the font of the container.
07:46We see the font of the container.
07:49We see the font of the container.
07:52We see the font of the container.
07:55We see the font of the container.
07:58We see the font of the container.
08:01We see the font of the container.
08:04We see the font of the container.
08:07We see the font of the container.
08:11We see the font of the container.
08:24Webabeword
08:29Webabeword
08:32Webabeword
08:35So you can see the difference between these two lines.
08:43Our text is lying on the left corner.
08:47We want to put our text in the middle.
08:50So for that we use a property called text align.
08:54If we want to put text align in the center,
08:58we will call it center.
09:00So our text will come in the center.
09:02If we put it on the right,
09:05then our text will come on the right.
09:09So these are some properties that we can use.
09:14Other than that, height and width.
09:18Height and width are very important properties.
09:21Let's see them too.
09:23Like we used height.
09:26Height tells us the height of the container we are using.
09:31We just specified it.
09:34We want it to be 100 pixels high.
09:38If we set it to 50, then its height will be less.
09:42If the width is a block element,
09:46then this width will be complete.
09:49If we set it to 50%,
09:53then it will be 50% half.
09:57If we call it 50 pixels,
10:00then it will be 50 pixels.
10:05So we will use 50%
10:09So now if we
10:13have these pixels,
10:17we will have a percentage.
10:21The second property is viewport width.
10:24For width, viewport width.
10:27Viewport is the width of our screen.
10:32We have to cover 50% of it.
10:35VW is viewport width.
10:38It means that we have to cover 50% of our screen.
10:45Let's look at it.
10:47It will cover exactly 50%.
10:50If we say that we have to cover the entire screen of 100 viewport width,
10:56then it will cover the entire screen 100%.
11:00The margin from here is also filled in that place.
11:04Now the body tag
11:09where the html starts
11:12body tag
11:13Now you will see that there is padding margin on its side.
11:19So let's call it padding
11:23Let's make it 0 pixels.
11:26And let's give it a margin of 0 pixels.
11:31So you will see that it has covered the entire screen.
11:36Let's take it as width
11:42100 viewport width
11:48So this is how it looks.
12:00Now let's look at the height.
12:03Height, we had only told it normally that we will use 50 pixels.
12:08We can also use it in height.
12:12100%
12:16So what will it do?
12:18All the text in it, all the elements in it,
12:22it will set its percentage according to it.
12:27But if we give it a viewport height,
12:30then it will cover the entire screen as far as we can see.
12:38We can see the screen from here,
12:41so it added us here.
12:45Now whoever comes down, we will see it below.
12:49Now if I give it 100 viewport height,
12:55then it will give me the height of the entire screen.
13:01So this way we can change our multiple pages.
13:15Our last point was that we used percentage, pixels and viewport height and viewport width.
13:23There are two points left.
13:25What is the difference between an EM and an REM?
13:30We use them for our responsiveness.
13:34For example, we have this container.
13:38We used p tag in it.
13:41This container id,
13:43p tag used in it.
13:45How will we access it?
13:49This element is used for the relationship between parent and child.
13:57It is telling that all the p tags in this container have to be targeted.
14:03All the changes will be in these p elements.
14:07Now let's understand font size.
14:11For example, we have given font size of 14 pixels to our container.
14:18So definitely the unit we will use is EM.
14:26What will EM do?
14:28The parent element of this p tag will set its relative font size.
14:40So we use font size.
14:44We say we need 2EM.
14:472EM means the size of our parent element which is 14 pixels.
14:53We need its double size.
14:552EM means this.
14:57So the size of our parent element is 14 pixels.
15:01So 14 multiplied by 2 will be 28 pixels.
15:05So let's see.
15:08So this is the size of our container which is 28 pixels.
15:13So if we use 28 pixels instead of EM,
15:20then it will not make any difference.
15:25Because both are same.
15:28So whether we use 28 pixels or 2EM,
15:32If we change it to 10 pixels for example,
15:37and multiply it by 10, it will become 20 pixels.
15:43So let's change it first.
15:49So 2EM.
15:532EM is saved.
15:56If we change it to 20 pixels,
15:59then it will not change in 20 pixels.
16:03Similarly, if we take 2EM.
16:062EM means root element.
16:10So the root element we have is 16 pixels.
16:15If we take 16 pixels,
16:18body tag which is our root element of HTML,
16:23we can use it as a static root element instead of body tag.
16:32So let's use it as a static root element.
16:34So if the font size of our root element is 16 pixels,
16:42if the font size is 16 pixels,
16:45so if we give it 2REN,
16:50which is the size of our root element,
16:53we will need the size of this P twice.
16:57So what will it do?
16:5916 multiplied by 2, 32.
17:02So let's go and see.
17:0532 is saved.
17:08Now if we give it 32 pixels manual,
17:14then there will be no difference with 32 pixels.
17:19So this was our font.
17:21This is used for responsiveness.
17:24Often when we go to a small screen on a mobile screen,
17:28then we reduce the font size of the root element.
17:34So according to that,
17:36for example, if we give the root element 16 pixels,
17:39then we give 32 pixels.
17:42If we go to mobile devices,
17:44then will we change the font size everywhere?
17:47So to avoid that problem,
17:49we use EM and REM units
17:53so that it can change its font size with its parent and root elements.
17:59And in responsiveness,
18:01so that there is no issue in our text.
18:05Thank you so much for watching.
18:07I hope to see you in the next video.
18:10Until then, take care.
18:12Goodbye.
Comments