Coding

CSS – Display | Beginner’s Course | #8

  • 00:00:00 hello welcome to the CSS section of our
  • 00:00:04 beginners guide in the last video we had
  • 00:00:06 a look at the position property which
  • 00:00:08 basically allowed us to specify where
  • 00:00:11 our elements should be positioned and in
  • 00:00:14 this video we will have a look at
  • 00:00:15 another really important property that
  • 00:00:18 you should understand when you want to
  • 00:00:20 work on the style of your website the
  • 00:00:22 display property now
  • 00:00:24 in contrast to the position property
  • 00:00:26 which allowed us to position the
  • 00:00:28 elements the display property allows us
  • 00:00:31 to change the way our elements are
  • 00:00:33 displayed on our website life that might
  • 00:00:36 not sound totally here for you right now
  • 00:00:38 no problem we'll have a look at that in
  • 00:00:40 this video
  • 00:00:44 so let's think about the following
  • 00:00:46 example you have your website with an
  • 00:00:48 HTML element and the body element inside
  • 00:00:51 this body element you have a header
  • 00:00:52 element and other elements this could be
  • 00:00:55 a main element a footer anything like
  • 00:00:57 that just think about these elements as
  • 00:01:00 the general parts of your website's
  • 00:01:02 which are positioned correctly as we
  • 00:01:05 learn it in the last video so basically
  • 00:01:07 you are happy with the core structure
  • 00:01:09 the problem is that although these
  • 00:01:11 elements are positioned correctly the
  • 00:01:13 way the elements that are nested inside
  • 00:01:15 these different elements might not be
  • 00:01:18 according to your needs
  • 00:01:19 let's think about two different here in
  • 00:01:21 this element these two divs are by
  • 00:01:24 default block level elements we also
  • 00:01:27 talked about that in the HTML part of
  • 00:01:29 the series and as block level elements
  • 00:01:31 well they behave the way we see it right
  • 00:01:33 here the problem might now be although
  • 00:01:36 this HTML code is totally fine the
  • 00:01:39 default display option we see right here
  • 00:01:42 is not the one that you want to heaven
  • 00:01:44 CSS therefore we need a way to change
  • 00:01:47 the way our elements are displayed and
  • 00:01:50 that's exactly what the display property
  • 00:01:52 is doing because with the display
  • 00:01:55 property we are able to apply different
  • 00:01:58 values and bited different displaying
  • 00:02:00 options to our elements now what does
  • 00:02:03 this mean well basically we can apply a
  • 00:02:06 block value well wouldn't change a lot
  • 00:02:08 for the diff apparently we could apply
  • 00:02:11 inline this is more interesting right we
  • 00:02:14 could also apply inline block sounds
  • 00:02:16 even more interesting and we could apply
  • 00:02:19 none for example also something we'll
  • 00:02:21 take a look at in this video now we also
  • 00:02:24 have a lot more values available
  • 00:02:26 actually it's not just these four and
  • 00:02:28 this brings us to the question before we
  • 00:02:30 dive deeper into the values where can I
  • 00:02:32 find more information about these values
  • 00:02:34 and again the answer is in the end the
  • 00:02:37 end the Mozilla developer Network right
  • 00:02:40 here because on this page a link can be
  • 00:02:43 found in the video description of course
  • 00:02:44 you can see that we have lots of
  • 00:02:47 different values available for our
  • 00:02:49 display property for example block and
  • 00:02:52 inline right here now we will focus on
  • 00:02:55 to block inline inline block
  • 00:02:58 none in this video but there is one
  • 00:03:00 additional value I would like to bring
  • 00:03:02 your attention to and this value is this
  • 00:03:05 one right here display flex this is a
  • 00:03:08 really cool and a really helpful value
  • 00:03:10 and therefore we'll have a look at that
  • 00:03:12 in a separate video as I said in this
  • 00:03:15 video we'll focus onto these four values
  • 00:03:18 block inline inline block and none now
  • 00:03:22 that was a lot of fury actually and
  • 00:03:24 again I think the best way to see what
  • 00:03:27 these values are doing is to have a look
  • 00:03:29 at it at a practical example now let's
  • 00:03:31 do this and for this example I use this
  • 00:03:35 really basic code actually you can find
  • 00:03:37 it in the video description also so we
  • 00:03:39 have an HTML file with a header in F and
  • 00:03:42 a main element and inside our main
  • 00:03:45 element we have freed ifs we also have a
  • 00:03:47 style file again with some basic styling
  • 00:03:50 applied to make sure that well we can
  • 00:03:52 see some important information on our
  • 00:03:54 page talking about the page the page
  • 00:03:56 looks like this with the open chrome
  • 00:03:59 developer tools right here and as you
  • 00:04:01 can see I kind of recreated the
  • 00:04:04 situation we had on the slide with our
  • 00:04:07 HTML element in the orange part then we
  • 00:04:11 have the yellow part body and we have
  • 00:04:12 the header ot nav empty main element
  • 00:04:15 right here and inside the main element
  • 00:04:17 we have to free divs now that's the
  • 00:04:19 standard situation and everything is
  • 00:04:21 displayed with the default display
  • 00:04:23 property being applied for the divs and
  • 00:04:25 actually for all these elements right
  • 00:04:27 here this is block level now let's
  • 00:04:29 change this in see what we can do with
  • 00:04:31 the display property now let's go back
  • 00:04:33 and for that we should go down right
  • 00:04:36 here to our div and now I will simply
  • 00:04:39 write display right here and start with
  • 00:04:42 display block like that won't change a
  • 00:04:46 thing just save that and let's go back
  • 00:04:48 and reload the page and as you can see
  • 00:04:51 nothing changed of course because as I
  • 00:04:53 said before with this display property
  • 00:04:56 we are able to change the way our
  • 00:04:58 element is displayed and if you apply
  • 00:05:00 the value of block to a block level
  • 00:05:02 element well not a lot changes there is
  • 00:05:05 one important thing though that I would
  • 00:05:06 bring to your mind and this is that with
  • 00:05:09 block level elements we can do the
  • 00:05:11 following
  • 00:05:12 we can write width like that and maybe
  • 00:05:16 type 100 pixels by the way width and
  • 00:05:19 height and pixels and percentages all
  • 00:05:21 that topics will be covered in another
  • 00:05:23 video of this series so we'll just stick
  • 00:05:26 to width and height and pixels in this
  • 00:05:27 videos if you're not sure about how this
  • 00:05:29 works as I said no worries we'll talk
  • 00:05:32 about that also throughout this series
  • 00:05:34 but for now let's just apply with 100
  • 00:05:37 pixels right here and save that if we
  • 00:05:40 now go back and reload the page you can
  • 00:05:44 see that the width of our element
  • 00:05:47 changed and that's interesting to know
  • 00:05:49 because for block level elements we can
  • 00:05:51 change the width and the height for
  • 00:05:53 example if we go back now and delete
  • 00:05:56 display block or just comment it out
  • 00:05:59 maybe this and that save that and go
  • 00:06:04 back and reload the page you can see the
  • 00:06:07 width is still applied so keep that in
  • 00:06:10 mind with block level elements we can do
  • 00:06:12 this going back to our code and now
  • 00:06:15 commenting that in again we cannot
  • 00:06:19 change the value to inline like that if
  • 00:06:23 we save that go back and reload the page
  • 00:06:25 well we can now see that our elements
  • 00:06:29 are displayed as inline elements and
  • 00:06:31 therefore we changed the default way
  • 00:06:34 these block level elements are displayed
  • 00:06:37 and that can be really helpful right
  • 00:06:38 because you might want to have these
  • 00:06:40 stiffs displayed like that but you don't
  • 00:06:42 want to change the initial HTML file and
  • 00:06:45 the way the elements are created right
  • 00:06:47 there
  • 00:06:47 and therefore display inline or also
  • 00:06:50 vice versa so if you have inline
  • 00:06:52 elements right here and you apply
  • 00:06:53 display block to them this would also
  • 00:06:55 work of course well this would allow you
  • 00:06:57 to change the default displaying
  • 00:07:00 behavior of that elements but the
  • 00:07:02 interesting thing is that our width 1
  • 00:07:04 over the pixels declaration apparently
  • 00:07:06 wasn't applied right here if you go back
  • 00:07:08 and maybe change it to 200 saved add go
  • 00:07:14 back and reload the page you can see
  • 00:07:16 nothing changes and that's also
  • 00:07:18 important to understand because the
  • 00:07:21 height and the width of such inline
  • 00:07:23 elements cannot be changed
  • 00:07:25 also an important difference to the
  • 00:07:27 block level elements we saw before so if
  • 00:07:30 you want to change the width of such
  • 00:07:31 inland elements well you simply cannot
  • 00:07:34 do that that's wrong of course we have a
  • 00:07:37 way how to also change the width and the
  • 00:07:39 height for example of such inland
  • 00:07:42 elements how can we do that well if we
  • 00:07:44 go back to our code and now change the
  • 00:07:47 way it is displayed from inline to
  • 00:07:50 inline lock right here
  • 00:07:52 and save that then we can go back and
  • 00:07:56 reload the page and we can see that we
  • 00:07:59 now turned this initial block level
  • 00:08:02 element this diff into an inline element
  • 00:08:05 and with inline block we are then able
  • 00:08:08 to change the width of that well now
  • 00:08:12 inline element and that's really cool
  • 00:08:14 because with that we have really
  • 00:08:16 powerful tools in CSS which allow us to
  • 00:08:19 style the elements just the way we want
  • 00:08:22 them to be of course feel free to play
  • 00:08:24 around with these values and see what
  • 00:08:26 else you can do with them but that's
  • 00:08:27 just the basic core concept that at
  • 00:08:30 least that I think is important to
  • 00:08:31 understand
  • 00:08:32 now before we applied that display
  • 00:08:34 property now to our website there is one
  • 00:08:37 last value that I would like to show you
  • 00:08:39 and this value is display:none
  • 00:08:42 if we change it right here to non save
  • 00:08:46 the page and go back then you can see
  • 00:08:48 nothing because we've display:none we
  • 00:08:52 can simply make sure that our elements
  • 00:08:55 are not displayed anymore now this is
  • 00:08:58 something we won't use right now in our
  • 00:09:00 project but this can be really helpful
  • 00:09:02 especially when you add JavaScript to
  • 00:09:05 your website javascript will also be
  • 00:09:08 covered later throughout this series
  • 00:09:09 therefore for the moment we will not use
  • 00:09:12 display none and simply stick to
  • 00:09:15 display:inline-block maybe for our
  • 00:09:18 example and as you can see not
  • 00:09:21 everything looks the way it looked
  • 00:09:22 before
  • 00:09:23 so that was the theory that was the
  • 00:09:26 basic thing you have to understand
  • 00:09:27 regarding deed this property and I think
  • 00:09:30 now it's the time to go back to our
  • 00:09:31 website and see what you can change
  • 00:09:33 right there so here we are back in our
  • 00:09:36 code you can of course also find the
  • 00:09:38 code
  • 00:09:39 or the link to the code down there in
  • 00:09:41 the video description the important
  • 00:09:44 thing now is that if we look at our page
  • 00:09:46 right here
  • 00:09:47 well our page needs some more style and
  • 00:09:50 we should use to display property to
  • 00:09:52 apply that style and let's focus on to
  • 00:09:55 this navbar because we talked about the
  • 00:09:57 header in the last video so in this Neff
  • 00:10:00 element right here we can see that the
  • 00:10:03 way it is displayed right now it's not
  • 00:10:05 the best one probably because I would
  • 00:10:07 like to have home and context being
  • 00:10:09 written next to each other and it should
  • 00:10:12 also be centered so like Mike's world up
  • 00:10:15 here now let's change that by going back
  • 00:10:18 to our code and I'm back in the
  • 00:10:21 index.html file and right here we could
  • 00:10:24 add a class right here to this list and
  • 00:10:28 this class could be navigation course
  • 00:10:32 feel free to name it just as you prefer
  • 00:10:35 let's save that and let's now go to our
  • 00:10:37 style sheet and here we have the nav
  • 00:10:41 element right there or in a section that
  • 00:10:44 we created so let's not hype navigation
  • 00:10:47 right here and that's the class that's
  • 00:10:50 fine but specifically we don't want to
  • 00:10:53 refer or select the class we want to
  • 00:10:56 refer to the elements inside the class
  • 00:10:59 and if we now at a space and type Li for
  • 00:11:02 the list elements then we specifically
  • 00:11:05 refer to the list elements we have
  • 00:11:08 inside this navigation class that we
  • 00:11:11 just created now let's add the curly
  • 00:11:13 braces and let's now add this play and
  • 00:11:17 let's start with inline like that now if
  • 00:11:21 we save that and go back and reload the
  • 00:11:23 page yes we can see that our elements
  • 00:11:28 will look better but if we inspect that
  • 00:11:31 now yeah we can see I think it's hard to
  • 00:11:34 see but you can see it if you read the
  • 00:11:36 pixels you can see that contact has a
  • 00:11:38 width of about 50 pixels and home only
  • 00:11:41 has a width of front about 39 pixels
  • 00:11:44 that's of course due to the fact that
  • 00:11:46 both are displayed as inline elements
  • 00:11:49 now so we should change that and maybe
  • 00:11:51 change in line
  • 00:11:52 to inline-block like that and also apply
  • 00:11:56 a width of maybe let's say 70 pixels
  • 00:11:59 let's save that let's go back and if we
  • 00:12:04 reload that yeah we can see that now the
  • 00:12:07 list right here has a width of 70 pixels
  • 00:12:11 and the second list element also has a
  • 00:12:14 width of 70 pixels problem still is that
  • 00:12:17 we don't only have the list elements
  • 00:12:20 right there because if we go back to our
  • 00:12:22 index.html file you can see that we have
  • 00:12:26 the class navigation that we refer to
  • 00:12:28 right here then we have the list item
  • 00:12:31 totally fine for home but inside the
  • 00:12:34 second list element we have this anchor
  • 00:12:38 tag right there and this can cause
  • 00:12:41 issues because if we now have a specific
  • 00:12:45 definition for this anchor tag this
  • 00:12:47 would overwrite the rule that we just
  • 00:12:52 defined for the list items in the
  • 00:12:54 navigation class let me show you what I
  • 00:12:56 mean by that if I go back to style.css
  • 00:12:59 and now go right here to the anchor tag
  • 00:13:03 right here and now apply a background
  • 00:13:05 color of red for example like that and
  • 00:13:11 if I now go down to our navigation list
  • 00:13:15 right here I will apply a background
  • 00:13:18 color oops sorry
  • 00:13:21 background color like that of yellow
  • 00:13:24 like that and now let's see what happens
  • 00:13:28 if we go back and reload the page we can
  • 00:13:32 see that home is of course with that
  • 00:13:35 yellow background color as we find it
  • 00:13:37 for the list elements inside the
  • 00:13:39 navigation class but contact well it's
  • 00:13:42 not with that yellow background color
  • 00:13:44 because it is applied for the list
  • 00:13:46 element but as we have this anchor tag
  • 00:13:49 inside the second list element we have
  • 00:13:52 the problem that the anchor tag as it is
  • 00:13:55 a more specific element is displayed
  • 00:13:58 with that red background color that we
  • 00:14:01 defined and this might cause issues on
  • 00:14:05 your websites as we
  • 00:14:06 not well specific enough or precise
  • 00:14:09 enough now how can we change that well a
  • 00:14:12 really easy way to change it is if we go
  • 00:14:14 back and now don't only say navigation
  • 00:14:18 list but also say that this style should
  • 00:14:23 be true for navigation a like that
  • 00:14:28 this means we now want to apply the
  • 00:14:30 style to all list elements inside the
  • 00:14:33 navigation class and also to all anchor
  • 00:14:37 tags right here inside the navigation
  • 00:14:39 class this is important if you would
  • 00:14:41 write it like this then you would say
  • 00:14:43 that you apply this style to the list
  • 00:14:46 elements in the navigation class and to
  • 00:14:48 all anchor tags that's not good because
  • 00:14:51 you only want to apply that to a
  • 00:14:52 specific anchor tag therefore make sure
  • 00:14:55 to add the class in front of the element
  • 00:14:59 now if we save this and go back and
  • 00:15:01 reload the page then you can see it
  • 00:15:04 didn't work because I forgot to add the
  • 00:15:07 dot right here now we have the class and
  • 00:15:10 if you now reload the page then you can
  • 00:15:13 see that it works perfectly because with
  • 00:15:15 that specific let's maybe unselect EE
  • 00:15:18 expect – oh sorry because with that
  • 00:15:20 specific definition l of the anchor tag
  • 00:15:22 inside the navigation class we made sure
  • 00:15:25 that our styling now is fine and with
  • 00:15:28 that we can also see that the anchor tag
  • 00:15:31 is styled like that and the list item is
  • 00:15:34 all the style like that so basically we
  • 00:15:36 have the list item right here the list
  • 00:15:37 element right here and the anchor tag
  • 00:15:39 right there so with that we have the
  • 00:15:42 basic style of turning it into an inline
  • 00:15:45 block element applied but I still would
  • 00:15:48 like to Center these two elements now
  • 00:15:50 just as Mike's word for that we should
  • 00:15:53 go back and now we need to add a new
  • 00:15:55 rule because the thing is that this
  • 00:15:57 centering part should not refer to the
  • 00:16:00 single elements right here but it should
  • 00:16:02 refer to the entire navigation class
  • 00:16:06 right there like this and now we write a
  • 00:16:09 la text-align:center like that if we
  • 00:16:13 save that we did that already in the
  • 00:16:15 last video there from doing it a little
  • 00:16:17 bit faster now so if you go back and we
  • 00:16:20 bad and with that let's inspect that we
  • 00:16:23 now centered the element with the class
  • 00:16:26 navigation right here there is one issue
  • 00:16:28 though you can see it right here we have
  • 00:16:31 some padding applied so let's get rid of
  • 00:16:34 that padding also writing padding:0
  • 00:16:38 right there save that now reloaded now
  • 00:16:42 it's centered but I think we also have
  • 00:16:45 an issue right here in Mike's world
  • 00:16:46 actually yeah it's the same issue we
  • 00:16:48 have some padding here between the page
  • 00:16:51 title class so let's also change this
  • 00:16:54 quickly by adding a padding of zero
  • 00:16:57 right there so this is depending to the
  • 00:16:59 left and to the right and if you know
  • 00:17:01 reload that yes now we can see if we
  • 00:17:05 unselect inspect tool that we were able
  • 00:17:07 to Center this list actually which is
  • 00:17:11 pretty cool as I think let's maybe also
  • 00:17:13 change the background color we have
  • 00:17:15 right here from this yellow to I don't
  • 00:17:18 know let's maybe use this darker gray
  • 00:17:21 let's see what that it what this looks
  • 00:17:23 like like this yeah
  • 00:17:25 looks better we are still not done with
  • 00:17:27 this style right here but regarding the
  • 00:17:30 this property I think this is fine now
  • 00:17:33 let's continue to the main element so
  • 00:17:36 specifically right here
  • 00:17:37 my SF city trip California landscape and
  • 00:17:40 the images because that's also not
  • 00:17:42 displayed the way I would like it to be
  • 00:17:44 because actually it should be like my SF
  • 00:17:47 City trip right here in this part then
  • 00:17:50 there should be the image of these San
  • 00:17:52 Francisco streets right there and then I
  • 00:17:54 would like to have the California
  • 00:17:56 landscape right here in this part of the
  • 00:17:58 page and below that text I would like to
  • 00:18:01 have the image of the California streets
  • 00:18:03 so this image should be somewhere I
  • 00:18:06 don't know right here maybe now let's
  • 00:18:08 also change that so let's go back to the
  • 00:18:11 code and what we have to do is we have
  • 00:18:14 to work on these sort of trip text and
  • 00:18:17 the trip text P mainly because if we go
  • 00:18:20 to index.html we can see that our trip
  • 00:18:23 text this class right here refers to
  • 00:18:26 these two paragraphs and trip images
  • 00:18:30 refers to the images so let's focus on
  • 00:18:32 to the text first
  • 00:18:33 by going back right here and now adding
  • 00:18:36 display like that but we will
  • 00:18:40 immediately add inline-block right here
  • 00:18:42 because we want to specify a width for
  • 00:18:46 these elements so let's let me specify a
  • 00:18:49 width but this time not with pixels but
  • 00:18:53 with a percentage so we will use 50% we
  • 00:18:56 will talk about the details regarding
  • 00:18:58 pixels and percent ensures height and
  • 00:19:00 width later throughout the series for
  • 00:19:02 the moment we will just apply it like
  • 00:19:04 this and the only thing you have to know
  • 00:19:06 right now is that with this width
  • 00:19:08 50% we will simply say that our elements
  • 00:19:12 so each element right here should have
  • 00:19:14 50% of the width of this element right
  • 00:19:18 here of our trip text class so again in
  • 00:19:21 simple words the each paragraph inside
  • 00:19:24 our trip text class so this end this
  • 00:19:27 paragraph should occupy 50% of the space
  • 00:19:31 or of the width of this trip text class
  • 00:19:35 now what we can see already is that we
  • 00:19:37 have some padding right here so we
  • 00:19:39 should get rid of that also so let's say
  • 00:19:42 that we don't want this padding anymore
  • 00:19:45 of trip text right here and with that we
  • 00:19:50 should actually be fine so let's save
  • 00:19:52 that and go back right here and reload
  • 00:19:55 the page yeah and we are unfortunately
  • 00:20:00 not fine because what's the issue well
  • 00:20:04 as I said I would like to have this
  • 00:20:06 element well right here and not below
  • 00:20:09 myself silly trip now the problem is
  • 00:20:11 that if we look at the trip text class
  • 00:20:13 again we can see that this has 740 1.14
  • 00:20:18 so
  • 00:20:19 742 pixels of width and each element has
  • 00:20:23 exactly 50% of this total width so
  • 00:20:27 actually this should work the problem is
  • 00:20:29 that if you apply inline-block
  • 00:20:32 as our value for the display property
  • 00:20:34 then there is kind of an gap added
  • 00:20:36 automatically between the different
  • 00:20:38 elements so in our case between my SF
  • 00:20:41 City trip and California landscape you
  • 00:20:43 cannot see this gap but it's there and
  • 00:20:46 because of that
  • 00:20:48 we cannot display it next to each other
  • 00:20:50 with inline-block
  • 00:20:51 therefore we need another solution now
  • 00:20:54 there is not just one alternative
  • 00:20:56 actually one alternative would be to
  • 00:20:58 turn the paragraphs right here into list
  • 00:21:01 items then this would work but I don't
  • 00:21:04 want you to do that right now because I
  • 00:21:06 want to show you the Flex value in the
  • 00:21:10 next video I talked about that in the
  • 00:21:12 beginning but with using value flex
  • 00:21:15 right here and by that using the
  • 00:21:17 so-called flex box we can easily solve
  • 00:21:20 this issue and additionally also easily
  • 00:21:24 change the way our images are displayed
  • 00:21:27 and because of that we will keep our
  • 00:21:30 main element so this right here this
  • 00:21:33 part the two images and also two people
  • 00:21:36 like my page the way it is right now in
  • 00:21:38 this video but as soon as we know how
  • 00:21:40 flex box works we will quickly and
  • 00:21:42 easily change the way these elements are
  • 00:21:45 displayed now having said that let's
  • 00:21:47 scroll down and maybe unselect the
  • 00:21:50 inspect tool again and see what else we
  • 00:21:52 can change and yes I think this is
  • 00:21:55 something we should also work on now
  • 00:21:57 because I would like to change the way
  • 00:22:00 this image and this text is displayed
  • 00:22:01 because the text should be next to the
  • 00:22:04 image so this text here should be next
  • 00:22:06 to next image this text here should be
  • 00:22:09 next to my image now how can we do that
  • 00:22:12 well we can go back to our code and now
  • 00:22:16 go down to the footer by the way this is
  • 00:22:19 wrong this is feedback so feedback is
  • 00:22:22 actually this part right here which is
  • 00:22:25 actually part of the main element as you
  • 00:22:28 can see it so we should add that right
  • 00:22:30 here doesn't have an issue or an impact
  • 00:22:32 on through bite is displayed I just want
  • 00:22:34 to keep that a little bit or as
  • 00:22:35 structured as possible
  • 00:22:37 but now coming back to our text that we
  • 00:22:41 have because if we go to the HTML file
  • 00:22:43 we can see that our text here right here
  • 00:22:48 and our image is basically wrapped into
  • 00:22:51 a div and the same thing is true for my
  • 00:22:54 image and my text so let's first apply a
  • 00:22:58 clasp right here and let's call it class
  • 00:23:00 may
  • 00:23:01 we review clients something like that
  • 00:23:06 oops
  • 00:23:07 like that and now simply use that class
  • 00:23:11 and also add that class to that second
  • 00:23:14 div like that because that's also
  • 00:23:16 important to know equal classes can be
  • 00:23:19 applied to different elements that's not
  • 00:23:22 an issue that can be done easily in CSS
  • 00:23:25 and it's also a big help when you work
  • 00:23:27 on bigger websites the important thing
  • 00:23:29 is that IDs which is also an attribute
  • 00:23:32 you can add to an element can only be
  • 00:23:35 applied once that's very important but
  • 00:23:38 for classes working like this is
  • 00:23:40 possible and easy to do now we have that
  • 00:23:43 class review clients and now we have to
  • 00:23:46 go to our CSS file of course and add
  • 00:23:48 that class right here so let's call it
  • 00:23:50 review clients but what now
  • 00:23:54 because review clients or let's maybe
  • 00:23:58 save that first and also save that in
  • 00:24:00 this HTML file because review clients if
  • 00:24:03 we reload that well here you can see the
  • 00:24:06 class these classes are now again
  • 00:24:09 basically only the evil containing
  • 00:24:11 elements as we could call them but I
  • 00:24:14 want to change the way these two
  • 00:24:15 elements saw the image and the paragraph
  • 00:24:19 behave now how can we do this what we
  • 00:24:21 talked about that a few minutes ago in
  • 00:24:23 the navigation part because we can again
  • 00:24:26 simply go to our CSS file and now not
  • 00:24:30 select the entire class but specifically
  • 00:24:34 the paragraph and again by the way I
  • 00:24:37 made a mistake right here this should be
  • 00:24:39 review clients sorry for that and review
  • 00:24:42 clients again now don't forget to add
  • 00:24:45 the class name once again and now add
  • 00:24:48 the second element which is an image
  • 00:24:50 like that if we do this now and apply
  • 00:24:55 display:inline because we don't need to
  • 00:24:57 change the height or the width so we can
  • 00:24:59 apply display:inline for the moment go
  • 00:25:02 back right here and reload the page we
  • 00:25:05 can see that it looks better still I
  • 00:25:07 would like to have two text well being
  • 00:25:09 more like there so we should go back and
  • 00:25:11 now simply add vertical align
  • 00:25:15 right here middle like that to our two
  • 00:25:19 elements then this is also a new
  • 00:25:21 property we didn't use so far we can see
  • 00:25:23 that if we reload the page that both
  • 00:25:26 elements now align in the middle or to
  • 00:25:29 the middle of there containing element
  • 00:25:32 basically well and with that if I
  • 00:25:35 unselect the inspect tool again we can
  • 00:25:37 see that our page again got a little bit
  • 00:25:40 more beautiful still a lot of work
  • 00:25:43 though but the important thing is that
  • 00:25:45 you now have a better understanding or
  • 00:25:47 hopefully have a better understanding of
  • 00:25:49 the display property and how you can use
  • 00:25:52 it on your website to make sure that
  • 00:25:54 you're able to control the way your
  • 00:25:57 elements are displayed on the website so
  • 00:26:00 in the next video we will never look at
  • 00:26:02 flexbox as I said before and work on the
  • 00:26:06 main part especially right here and
  • 00:26:07 right there with the images really cool
  • 00:26:10 actually looking forward to that video
  • 00:26:12 to be honest and I hope you do the same
  • 00:26:15 and until then I can only say thanks a
  • 00:26:18 lot for watching
  • 00:26:19 hope to see you there bye