CSS Tutorial: CSS Display Property | Web Development Tutorials #24
CSS Tutorial: CSS Display Property | Web Development Tutorials #24
► Source Code \u0026 Notes: https://codewithharry.com/videos/web-…
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutorials For Beginne…
►Click here to subscribe - / @codewithharry
►Checkout my English channel here: / programmingwithharry
Best Hindi Videos For Learning Programming:
►Learn Python In One Video - • Python Tutorial In Hindi 🔥
►Python Complete Course In Hindi - • Python Tutorials For Absolute Beginne…
►C Language Complete Course In Hindi -
• C Language Tutorials In Hindi
►JavaScript Complete Course In Hindi -
• JavaScript Tutorials In Hindi
►Learn JavaScript in One Video - • JavaScript Tutorial
►Learn PHP In One Video - • Learn Php In One Video In Hindi - हिं…
►Django Complete Course In Hindi -
• Python Django Tutorials In Hindi
►Machine Learning Using Python - • Machine Learning Tutorials For Beginn…
►Creating \u0026 Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Development Using Flask a…
►Advanced Python Tutorials - • Intermediate/Advanced python Tutorial…
►Object Oriented Programming In Python - • Object Oriented Programming Tutorials…
►Python Data Science and Big Data Tutorials - • Python Data Science and Big Data Tuto…
Follow Me On Social Media
►Website (created using Flask) - http://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
►Personal Facebook A/c - https://www.facebook.com/geekyharis
Twitter - https://twitter.com/Haris_Is_Here
Content
0.001 -> Guys in today's video we are going to talk about
2.518 -> A very important topic
3.79 -> And that is display property
5 -> And how much important is display property in css
7.54 -> Maybe you will understand it after watching this video.
9.845 -> Here what will I do firstly,
11.845 -> I will request you access this playlist.
14.785 -> Because even today many people come to me and say
16.785 -> We don't want to see from middle,
19.44 -> We don't want to start just with label
21.315 -> Some people suggest me to make playlist
23.315 -> When already the playlist is being made.
24.653 -> So kindly come to this playlist
26.183 -> Book mark it and save it from here.
28.183 -> And watch video's from start in order.
29.973 -> HTML, CSS full web development.
32.062 -> I will teach you in this playlist.
34.274 -> Without wasting anymore time, I will create a file over here.
37.79 -> tut24.html
39.79 -> And here I will add html boilerplate
42.401 -> And after that here in title I will add
44.882 -> Display property
46.898 -> Or rather css display property
50.011 -> I will save it.
52.48 -> And here I will add style tag.
54.48 -> To write my css
56.458 -> What am I going to do?
57.871 -> Firstly here I will make a div.
60 -> And its name,
61.413 -> I will do one thing I will make header.
64.659 -> Header. I will get it top as a class.
67.575 -> And inside it I will write,
69.058 -> H3 and I will write
71.058 -> This is welcome to
74.106 -> Welcome to my blog.
78.434 -> Or else welcome to Harry's blog.
82.854 -> Ok, I did this
84.337 -> And along with that what will I do?
86.337 -> I will close my old port and open live server port.
89.896 -> Look over here, welcome to harry blog is here.
91.692 -> In this there is nothing big as such.
93.375 -> Along with this I can add an image.
96.044 -> So here if I search images
98.524 -> And here if I come in images.
101.594 -> Suppose I want to add logo of anything
104.403 -> Like consider I want to add logo of code with harry
106.457 -> So I will do one thing, I will bring this image from here
109.155 -> I will copy it and what will I do?
112.259 -> quickly over here I will write< img(src=)> I will add this
116.797 -> And look over here, this image will come.
119.102 -> Image is here, and welcome to harry's blog is here.
122.041 -> Now , what can I do? I can target it with my css.
124.722 -> And here I will keep in mind display property and tell you
128.249 -> So firstly, over here I will tell img
130.588 -> set its width,
132.322 -> Consider it as 34 pixel.
134.351 -> Along with that, what will I do?
136.539 -> In my H3 what will I do?
140.235 -> In H3 I can do something
141.694 -> I can change any font or anything.
144.318 -> In font family, consider
146.647 -> I can do this,
148.482 -> And I saved it,
150 -> And I can change font size too,
152 -> But that should be fine,
153.225 -> Here I did right click and did inspect.
155.525 -> And look over here in this already the padding,
158.821 -> That is added,
160.212 -> If over here,
161.554 -> Infact margin in added. If I do margin 0 pixel
164.282 -> Then it will come up ok.
165.742 -> So I want to make margin 0 in this 3.
168.047 -> So I will do margin also 0. so I will write,
170.667 -> margin: 0 px
174.161 -> Ok
175.86 -> And look over here it became like this.
177.86 -> Now, over here look one thing very carefully
179.62 -> If I use my element selector
181.914 -> So then look , this is an inline element
185.568 -> It is just taking that much place as much it needs.
187.59 -> And what is this? It is a block element.
189.836 -> Which means it takes full block
192.563 -> And throws next thing on next line
195.258 -> What I want to do over here?
196.6 -> I want to make it center.
198.445 -> My div, My div that is this there
200.656 -> My header , as you can see my header
202.963 -> What is my header? Header is my block element.
205.856 -> How did I knew that it is block element?
207.386 -> Because it is full space,
208.282 -> Look if I take my arrow to this it takes full space
211.974 -> If I do margin auto in my header
213.974 -> If in my header if I do my margin auto
221.425 -> Margin: auto
223.425 -> Now, look over here we did margin: auto
225.995 -> Even after that our element is not centered.
228.45 -> Which means I did header margin to auto.
231.046 -> If I have to do center
232.776 -> With the help of margin auto
234.141 -> So what does margin auto do?
235.34 -> By giving equal margin to left and right
237.161 -> It centers the element.
238.425 -> This is our logic.
240.088 -> But why is this not working over here.
241.76 -> To make it visible over here what will I do?
244.163 -> I will give it a border, 2 px: solid - red
247.33 -> And you will understand things so properly then see
250.155 -> Look, the border that I gave
251.937 -> What is that? It is a full element.
253.192 -> And now in this, if I gave automatic margin
256.107 -> When in right and left same margin is there
257.671 -> Which means I need to give width to this
260 -> I have already blocked its display
261.812 -> What is display block?
263.201 -> What is display line?
264.003 -> Let's understand that ok.
265.045 -> Display block means
267.059 -> This is a full block.
268.472 -> By taking full block full width it will sit over here.
272.061 -> If I do its display inline
273.897 -> If I do its display inline
276.331 -> Then it means that
277.635 -> It will just take as much place as it is required.
280.623 -> Now, as I did header display inline
283.152 -> I got a weird look.
284.502 -> The reason is inside it there is a block element
286.447 -> So I won't make it inline right now.
288.024 -> If I make this also inline,
289.548 -> If its block element is also made inline
292.123 -> Then look over here I will get the border
294.149 -> And this is getting overflow.
295.023 -> But now, that is not our topic of discussion.
296.496 -> So what will I do over here
297.735 -> I will l reload it again.
299.449 -> Now, listen to me very carefully
301.033 -> Header is my block element
302.759 -> And I can width of my block element.
305.233 -> If I set the with of it
307.367 -> In this way if I set its width
310.539 -> 10%
311.684 -> So look at this big my this will be 10% of the width
316.432 -> So I will do it this much like this.
318.15 -> I will set its width like this.
319.817 -> I can do it in pixel or in %.
321.922 -> Here, I did in %.
323.649 -> So In header what will I do?
325.003 -> I will do width 15%.
326.396 -> So in header what am I doing to width, I will make it 15%.
330.062 -> And why am I able to set width?
331.799 -> I am able to set width because
333.44 -> Because this is an block element.
335.357 -> In line I can't set width.
337.301 -> This line means, as much place is there take it that much.
339.71 -> As much place you need take it.
341.393 -> And here block means set the width.
343.813 -> So along with width if I add margin auto
346.084 -> Then it will center so look over here,
347.107 -> Mt element is centered.
349.436 -> Along with that the img over here
351.812 -> What is its display? It's display is inline.
354.493 -> So firstly I will block its display.
357.433 -> And as I blocked its display look
359.433 -> It started taking all places.
361.269 -> And now over here, if I do margin : auto of this too
364.041 -> Then look over here this is also centred.
366.107 -> So what will I do? I will do same work in my image.
368.664 -> I will do margin:auto
371.532 -> And along with that what will I do?
373.845 -> What did I do? I already gave its width.
376.267 -> Here whatever I did , I will do that.
377.891 -> I did display, so I will do display block.
380.919 -> Display block ok.
383.514 -> And as I do it, look over here
385.819 -> This is centered.
387.279 -> So I can increase its width too.
389.279 -> And here if I come in responsive design,
391.749 -> In this way, then look
393.068 -> My responsive will come something like this ok.
396.125 -> So look one thing over here
397.373 -> When this becomes huge
399.373 -> Then look, it creates a problem.
401.118 -> I make this much big
403.087 -> So look my text is going here
405.369 -> So I will do H3 text-align : center
408.06 -> So my H3
410.154 -> So to its text align what will I do?
412.765 -> I will make it center.
413.802 -> So this will come in center ok.
415.802 -> And this 15% width that I have gave
418.221 -> I will make this also big.
419.571 -> Umm, where is my 15% width?
421.572 -> I will make this big.
422.984 -> I will make it huge, I will make it so huge
424.541 -> Because eventually everything is in center.
426.042 -> Even if I make it huge
428.033 -> Then too any problem should not occur.
430.344 -> Even if I remove it, then too there should not be any problem.
433.467 -> Ok, so why is this problem not happening?
435.833 -> Because I have centered its inner elements also within.
438.283 -> So if I remove its width and margin of header
441.264 -> Then too work will be done.
442.849 -> So I will remove its width and margin auto.
444.849 -> Now, my element is centered.
447.898 -> So now here I can make layout like this.
449.96 -> Look this is fully responsive
451.911 -> If i do this small or big in phone
454.716 -> Then too I can do it.
456.474 -> But now I will come on my computer layout
459.507 -> And now this is looking like this ok,
460.802 -> So here we wrote welcome to Harry's blog
463.084 -> So this was our display inline display blog.
466.024 -> Now, I will do sum again
466.896 -> Display inline means
469.13 -> As much big the element is it will take that much space.
472.274 -> Display block means you can set its width.
474.791 -> And by doing margin: auto you can center it.
477.949 -> Along with setting width.
479.748 -> But if you want to inline any element
482.335 -> And along with that you want to play with its width too,
485 -> Then there is a special thing that you can use.
487.658 -> And its name is inline blog.
489.822 -> Now what is inline block, I will tell you
491.822 -> SO suppose here I have 3 box
493.822 -> Here I will do one thing,
495 -> In my div .container
498.598 -> I will make 3 boxes.
500.152 -> So I will make div.box
502.191 -> And inside it I will add h4
505 -> And here I will do h4.heading
507.517 -> Here I will do heading.
508.883 -> And I will write a paragraph ok.
510.883 -> I will write p and lorem 44 ok
514.865 -> And along with that we will replicate it.
517.482 -> I saved it here.
518.801 -> And look over here of lorem 44 box is present.
521.153 -> I will do one thing
522.448 -> I will give styling to these boxes.
525.403 -> And what will I do over here? Firstly
529.612 -> I will give border.
531.119 -> 4 pixel solid black.
533.636 -> And I will give background.
535.636 -> Grey ok.
537.566 -> I have given background grey
539.602 -> And I will give them margin too ok.
542.687 -> Margin 4 pixel.
544.687 -> And padding 23 pixel.
548.013 -> Ok, and I can change this also.
549.602 -> There is nothing as such ok.
550.663 -> That is you can't change.
552.785 -> Now look over here what will I do?
555 -> In my this container inside this box
557.923 -> What will I do? For the box the CSS that I have written
560.393 -> In that I will add more css.
562.346 -> If over here I do display inline
565.145 -> Then problem is being created
566.464 -> Because inside it there are some block elements
568.464 -> Ok we can understand this.
569.9 -> If I do it inline block
572.216 -> Sorry not inline inline block
576.037 -> Then what can I do?
576.862 -> They can be inline too and I can set width too.
578.862 -> If I do block, let me show you one thing by doing block
581.401 -> And suppose I do this width to 30%
584.458 -> So look what problem is arising
586.552 -> There are block elements so they are taking full space.
588.552 -> They are taking full space.
589.662 -> They are taking full space.
590.957 -> But I want them to stay inline too
592.957 -> And there width also should be set
594.635 -> So I will set this as inline block over here
596.837 -> So I will do one thing, I will copy width & display
600.261 -> And I will paste here.
603.623 -> And here I will do format document.
605.999 -> And now you can see that they have jumped in new line.
608.657 -> But if I do its display to inline block
611.855 -> So look what are they doing
613.855 -> These 3 are not coming together
615.524 -> Because I have not set box sizing property
620.001 -> What happens through box sizing?
621.32 -> By doing box sizing border box
623.101 -> Your... one minute I will make display inline block again
627.45 -> By doing box sixing border box what happens?
630 -> Your total width, it stays as much as you gave it.
632.986 -> Including margin and padding.
634.399 -> Or else what will happen, the margin and padding
636.399 -> That will change your width.
638.475 -> So if you want to keep same width which you gave
641.14 -> Then you can use this ok.
643.703 -> Now this is container, and here in container if I add,
646.549 -> Margin auto
649.254 -> Or display block
651.63 -> And display is blocked, why am I blocking display?
653.959 -> And in width I am giving 1200 px
656.311 -> So as I gave 1200 px in width ,
658.428 -> Then look all heading got centred.
660.428 -> If we talk about its responsiveness
662.763 -> Then it is responsive up to some time
664.294 -> But yes look over here
665.803 -> My harry's blog above this
668.254 -> In that there is some problem.
669.126 -> So I should have centered this box.
672.596 -> Here I added in margin auto
676.181 -> And the width also that I added
679.614 -> 1000 px I should do that
683.047 -> And I do like that
684.554 -> Then it will be good for me and its width
687.545 -> And this width I want to keep equal.
689.545 -> So here the margin auto and width I have kept
692.417 -> I will copy this and add it to header again
695.305 -> If I am keeping 1200 width here then here also I will keep same
699.772 -> I will keep my width 1200
702.218 -> In my container.
709.246 -> 1200
711.152 -> I will save this 1200 pixel
713.152 -> And as I will save it
715.03 -> Look over here, look what will happen now.
720.014 -> And here there is some problem
721.468 -> I need to set inline block to display.
723.468 -> Display inline block.
725.426 -> Not inline, inline block
728.223 -> I saved it , now look over here
729.847 -> what I want should happen over here
731.471 -> It has still not happened.
733.964 -> What is the problem?
735.822 -> I did display inline block
737.141 -> Here I did its width
741.091 -> Here I also gave box width
743.772 -> 30 % box size is also given and padding is also given
747.135 -> And I...
748.289 -> ok we have to do it for box
750 -> Display inline block and not for this
751.906 -> Why do I have to do display inline block
754.305 -> Because I want box to come in my this container.
757.291 -> I don't have anything with container.
758.52 -> In container I have to margin auto
760.52 -> So, I hope I haven't confused you
763.565 -> So I will make you understand what I have done over here.
765.433 -> So look by doing margin auto what will happen?
767.443 -> I will make this big
768.47 -> So this will be centered.
770.144 -> Within itself.
771.181 -> Inside it , it will be centered ok.
772.955 -> So, here still I can see inconsistency
776.616 -> And here I have overridden the display
779.199 -> Of .box
780.125 -> So previously I blocked box display.
783.641 -> But after that I did it inline block.
786.134 -> And I will save it like this ok.
787.782 -> So its width I have given
790 -> And after giving width I did something like this.
792.822 -> So width of this and width of that
795.762 -> In that I have made a difference that
799.195 -> In this I haven't done box sizing as border box.
801.406 -> So what will I do?
802.02 -> In all elements I will make box sizing border box
806.472 -> And by doing this what will happen?
807.668 -> My this property will be applied to all the elements
810.655 -> Ok, so even if I remove it from here
812.138 -> Then too my should should happen.
814.138 -> And here now you may not see this thing in center
816.137 -> And it has only reason
817.262 -> I have not done it 33% I have did 30%
820.944 -> So 100 upon 33 is 33.33
824.565 -> And here I have done box sizing as border box.
826.921 -> So now over here this should be aligned.
829.187 -> So If I reload it,
830.968 -> I have did box sizing border box.
833.754 -> This should work.
835.308 -> If here I do 33
837.308 -> And if I save it
838.822 -> Then I need to reduce some margin.
840.615 -> I will do one thing, make margin 0 px.
843.185 -> So it fits
844.606 -> And in fact I will increase margin top
848.73 -> I will do 4px and after that
850.354 -> And I will do it like this
851.109 -> And now our system is ok.
853.547 -> Look on system how cool is our website.
855.84 -> And look at this
857.053 -> At there will be one point its responsive
859.784 -> But we will come on responsive design later
861.574 -> And there I if I will explain you
862.954 -> But for now I hope you are clear,how to do this?
866.739 -> And how you can divide these things.
870.666 -> I hope you have understood,
872.313 -> Hope its is cleared.
873.138 -> Until now if you haven't accessed my playlist
875 -> Then kindly access it.
876.295 -> And in upcoming time we are going to make good analysis
878.976 -> And projects will come soon.
880.577 -> So access this playlist.
882.366 -> Book mark it and save it.
883.994 -> For now only this much for this video guys
885.467 -> If you haven't like video then do like it
887.953 -> Thank you so much guys for watching this video
890.035 -> And I will see you nect time.
Source: https://www.youtube.com/watch?v=YJtlXrzXXFk