Coding

CSS – Box Model and Classes | Beginner’s Course | #6

  • 00:00:01 welcome back to another video of the
  • 00:00:03 beginner's guide in the last video we
  • 00:00:06 had our first look at the basics of CSS
  • 00:00:09 and we learned that we can use selectors
  • 00:00:11 to apply styles to elements now there is
  • 00:00:15 one really important core concept that
  • 00:00:18 we have to understand now and this core
  • 00:00:21 concept is the so called CSS box model
  • 00:00:24 now what it is and why we need it let's
  • 00:00:27 find out in this video
  • 00:00:32 so before we have a look at this box
  • 00:00:34 model some quick theory first because we
  • 00:00:37 learned in the HTML part of the series
  • 00:00:40 that we have two types of elements we
  • 00:00:42 have block level elements and we have
  • 00:00:44 inline elements now the important thing
  • 00:00:46 is that CSS refers to all elements
  • 00:00:50 this means all elements really so no
  • 00:00:52 matter if it's block level or inline to
  • 00:00:54 all elements as boxes basically this
  • 00:00:57 means if you use a selector to both
  • 00:01:00 style an element this element is
  • 00:01:02 interpreted or displayed as a box from a
  • 00:01:06 CSS perspective now this sounds really
  • 00:01:09 abstract probably therefore it's not a
  • 00:01:11 time to have a look at our webpage right
  • 00:01:13 here and see if or where we can find
  • 00:01:16 this box model actually so let's go
  • 00:01:18 there and how can we have a closer look
  • 00:01:20 well let's reopen the chrome developer
  • 00:01:23 tools now we are back again in the
  • 00:01:25 elements program right here and let's
  • 00:01:27 maybe focus on three headers so I'm
  • 00:01:29 clicking right here now we have supplied
  • 00:01:32 some basic style to this header with
  • 00:01:34 that purple background and that white
  • 00:01:35 font color but the more interesting
  • 00:01:38 thing now is that if you go down right
  • 00:01:40 here to the header and then to styles
  • 00:01:41 then you can see this well box right
  • 00:01:44 here and in case you cannot see it you
  • 00:01:46 can just scroll right here and you can
  • 00:01:48 also increase or decrease the size so
  • 00:01:50 just adjust it the way that you can see
  • 00:01:52 this entire box now and I mentioned that
  • 00:01:55 already as this is the box this is the
  • 00:01:58 way CSS sees or interprets this element
  • 00:02:02 right here so in our case this header
  • 00:02:04 element now what do we have right here
  • 00:02:06 actually well if you hover over the
  • 00:02:09 center part right here you can see that
  • 00:02:11 this blue color is again applied on our
  • 00:02:13 website to the header part and this blue
  • 00:02:16 part right here is the actual so-called
  • 00:02:19 content of that box around the content
  • 00:02:22 we have a padding the screen part and
  • 00:02:24 you can see on the web site to the left
  • 00:02:26 that we don't have such a padding at the
  • 00:02:28 moment then we have the border also not
  • 00:02:31 available right here or not displayed
  • 00:02:33 right here and we have a margin now I
  • 00:02:35 think the best way to understand this
  • 00:02:37 box model is to just add these three
  • 00:02:39 things to our header element this means
  • 00:02:41 we add padding border and the margin now
  • 00:02:44 for the purpose let's go
  • 00:02:45 our code let's go to the header right
  • 00:02:47 here and let's now add first the padding
  • 00:02:51 and we will then also see what there is
  • 00:02:53 let's say we add 10 pixels as a value
  • 00:02:56 important you can add different values
  • 00:02:58 here so not only pixels but I will dive
  • 00:03:01 into the details regarding the options
  • 00:03:03 we have right here later fraud too
  • 00:03:05 serious for this video we will stick to
  • 00:03:07 pixels then we have the second property
  • 00:03:09 this was the border right here and for
  • 00:03:12 the border we can also define a size
  • 00:03:15 which could be 5 pixels then we can
  • 00:03:17 decide if we want to have a solid border
  • 00:03:20 like that for example or a dashed border
  • 00:03:22 I will use a – border here and then we
  • 00:03:25 need a border color let maybe use
  • 00:03:27 something like red in this case like
  • 00:03:29 that because we will remove the border
  • 00:03:31 after we understood the box model and
  • 00:03:34 then the last thing we had was these
  • 00:03:36 so-called margin right here and for the
  • 00:03:38 margin we could use 10 pixels like that
  • 00:03:41 now let's save that it's always really
  • 00:03:43 important and go back to our website now
  • 00:03:46 if I reload that then you see that the
  • 00:03:49 look totally changed why did the look
  • 00:03:52 change well again I selected the header
  • 00:03:54 right here and if you don't have a look
  • 00:03:56 at our box down here again then you can
  • 00:03:59 see that the content is now the blue
  • 00:04:01 part again we saw that before but you
  • 00:04:03 can see that this blue part now is not
  • 00:04:06 the entire element now actually because
  • 00:04:09 our element which is again this plate as
  • 00:04:11 a box from a CSS perspective consists of
  • 00:04:14 that content now then we have the
  • 00:04:16 padding you can see that green part now
  • 00:04:19 in our element up here we have the
  • 00:04:22 border this is this orange part or that
  • 00:04:24 red dotted line that we created and also
  • 00:04:26 important we have a margin and as you
  • 00:04:29 can see the margin is basically around
  • 00:04:32 our element or it's not displayed it's
  • 00:04:34 invisible but it's still there and as
  • 00:04:37 the name says with the margin we can of
  • 00:04:39 course define the distance between
  • 00:04:41 different elements we'll have a closer
  • 00:04:43 look at that of course also throughout
  • 00:04:45 the series the important thing is that
  • 00:04:47 now you saw the general structure of
  • 00:04:50 this box model with the different
  • 00:04:52 components it has basically and which
  • 00:04:54 allows us to style our elements now I'm
  • 00:04:58 not
  • 00:04:59 option how to get a better understanding
  • 00:05:01 of the structure of the webpage and also
  • 00:05:03 of the box model is if we go right here
  • 00:05:05 there and now select this tool right
  • 00:05:09 here with this tool you can see now it's
  • 00:05:11 blue so it's selected with this tool we
  • 00:05:14 can inspect our website what's mean well
  • 00:05:18 if you go right here you can see that
  • 00:05:21 now we have four that down here the
  • 00:05:24 explanation that we are now in the
  • 00:05:26 header element that's important but we
  • 00:05:29 can see this header element from the box
  • 00:05:32 model perspective basically because in
  • 00:05:35 the center we can again see the blue
  • 00:05:36 part it's the content then we again have
  • 00:05:38 the petting then we have the border and
  • 00:05:40 then we have the margin so with this
  • 00:05:42 inspect tool you can get a really quick
  • 00:05:45 overview of the structure of your
  • 00:05:47 website and this is really important if
  • 00:05:49 you want to apply your CSS Styles now
  • 00:05:52 ice is important well if you think about
  • 00:05:55 the structure of this header element
  • 00:05:56 again you know that we have a nested
  • 00:05:59 element inside that we have the h1
  • 00:06:01 element and of course you can also see
  • 00:06:04 that h1 element right here and if you
  • 00:06:06 think about the logic of the box model
  • 00:06:08 then this simply means that the blue
  • 00:06:10 part right here in the center the
  • 00:06:11 content but what should the content be
  • 00:06:13 off that header element as this header
  • 00:06:16 element kind of consists or wraps this
  • 00:06:18 h1 element then the content of that
  • 00:06:22 header element should be the h1 element
  • 00:06:24 so if we hollow right here then you can
  • 00:06:27 see exactly that let me maybe hover back
  • 00:06:29 can you see it it switches because now
  • 00:06:32 we are in the h1 element in our h1
  • 00:06:35 element right here consists of the
  • 00:06:37 content the blue part again and the
  • 00:06:39 consists of that orange part this is a
  • 00:06:41 margin as you can see in the right lower
  • 00:06:43 part of the screen which means that we
  • 00:06:45 have an automatically added margin to
  • 00:06:48 that element right here but this again
  • 00:06:49 shows you the logic of that box model h1
  • 00:06:53 is now basically the content of the
  • 00:06:56 header element but of course we can also
  • 00:06:58 add appending a border and a different
  • 00:07:01 margin to our h1 element let's maybe try
  • 00:07:04 that by going back to our code and now
  • 00:07:07 simply copying the declarations right
  • 00:07:10 here from the header
  • 00:07:12 paste it right here in the h1 selector
  • 00:07:15 right there let's save this let's go
  • 00:07:18 back and if we reload the page now well
  • 00:07:21 then you can see this well not really
  • 00:07:23 beautiful style but you can see that if
  • 00:07:27 I now go back again into the h1 element
  • 00:07:29 you can see that we now have the content
  • 00:07:31 still the same as before but now we have
  • 00:07:34 a padding around that content we also
  • 00:07:36 have a border and we have the marginal
  • 00:07:40 applied now what happens if I go back to
  • 00:07:42 the header element now did you see it
  • 00:07:44 now the content of the header element
  • 00:07:47 consists of the entire h1 element again
  • 00:07:51 and by entire h1 element element I mean
  • 00:07:54 that this consists of the content of the
  • 00:07:56 h1 element depending the border and the
  • 00:07:59 margin now that again shows you the
  • 00:08:02 general logic of that box model that CSS
  • 00:08:05 uses now we will dive deeper into the
  • 00:08:08 box model automatically throughout the
  • 00:08:10 series when we talk about the styling
  • 00:08:12 and also the positioning of the
  • 00:08:13 different elements but I think for now
  • 00:08:15 it's really important for you to know
  • 00:08:17 that you have this box model that this
  • 00:08:19 is the way CSS this place or things
  • 00:08:22 about D different elements we have an
  • 00:08:24 HTML and additionally that you can use
  • 00:08:27 the chrome developer tools this element
  • 00:08:29 tab and then right here this tiles part
  • 00:08:31 to get a really quick overview of the
  • 00:08:34 current style applied to your website
  • 00:08:37 now as I said we will dive deeper into
  • 00:08:40 the box one throughout the series but
  • 00:08:42 there is one other thing I would like to
  • 00:08:43 show you in this context because if I go
  • 00:08:47 back to the code and well now if you
  • 00:08:49 look at the padding let's use the h1
  • 00:08:52 selector right here if you look at
  • 00:08:54 depending for example already margin you
  • 00:08:56 can see that I just wrote 10 pixels
  • 00:08:59 right here now I talked about the pixels
  • 00:09:01 and that we have different options right
  • 00:09:03 there we will talk about that later but
  • 00:09:05 what happens if I write something
  • 00:09:07 different like 20 pixels right here as a
  • 00:09:09 second value actually well let's save
  • 00:09:13 this and have a look if we love that
  • 00:09:15 well then you can see that the contents
  • 00:09:19 our h1 element is displayed differently
  • 00:09:21 let's maybe select the h1 element for
  • 00:09:24 here and let's go down right there
  • 00:09:26 to the Stynes part because can you see
  • 00:09:28 what happened right here
  • 00:09:29 the padding the distance now changed
  • 00:09:32 because top and bottom is still 10
  • 00:09:35 pixels so that was the first value we
  • 00:09:37 wrote but the left and the right padding
  • 00:09:40 is now 20
  • 00:09:41 so the second value that we wrote you
  • 00:09:44 can also see it now if you look at the
  • 00:09:45 website again with the bigger gap we
  • 00:09:47 have to the left and to the right when
  • 00:09:49 comparing it to top and bottom so this
  • 00:09:51 means that if you only write the two
  • 00:09:53 values you define top and bottom with
  • 00:09:55 the first values and left and right with
  • 00:09:57 the second venue now let's go back to
  • 00:09:59 our code and think about another way how
  • 00:10:01 we could write that because now we have
  • 00:10:03 top and bottom but what if I write 30
  • 00:10:06 pixels now as a third value and 40
  • 00:10:09 pixels now as a fourth value let me save
  • 00:10:12 that and let's go back and if I reload
  • 00:10:15 that now well then you can again see
  • 00:10:18 down here that now the padding changed
  • 00:10:21 like that because the first value
  • 00:10:24 defined the pixels above the content
  • 00:10:27 basic views on the top the second value
  • 00:10:29 defined right the twenty pixels the
  • 00:10:31 third value defined the bottom and the
  • 00:10:34 fourth value defined the left part of
  • 00:10:37 the padding so this is also something
  • 00:10:39 that is interesting to know if you just
  • 00:10:41 write one value then you define the
  • 00:10:44 distance in that case for all four parts
  • 00:10:47 if you just write two values you just
  • 00:10:50 define the top and bottom add in one
  • 00:10:52 value and the left and right in one
  • 00:10:54 value and if you define the four values
  • 00:10:56 well then you define each part so top
  • 00:10:59 right bottom left in that order like we
  • 00:11:02 see it right here now going back to our
  • 00:11:05 code we can of course also apply that
  • 00:11:07 right here to our margin for example if
  • 00:11:11 you want you like that save that and if
  • 00:11:13 you go back and reload the page we can
  • 00:11:16 see that the padding has now 10 20 30 40
  • 00:11:19 and the margin has 10 20 30 40 so this
  • 00:11:24 is what we can do with that with that
  • 00:11:26 approach we can define the size
  • 00:11:28 basically of the different components of
  • 00:11:31 our a box model now with that knowledge
  • 00:11:34 we can actually continue now and have a
  • 00:11:37 look at the structure of our page and
  • 00:11:39 see
  • 00:11:39 if we can already apply some styles
  • 00:11:42 through different parts that we have
  • 00:11:43 right here so for that let's go back to
  • 00:11:46 our code right here and let's now think
  • 00:11:48 about a structure that would make sense
  • 00:11:50 because what I see right here is that
  • 00:11:52 the background color for example could
  • 00:11:55 actually be added right here in the h1
  • 00:11:58 selector like that then we could get rid
  • 00:12:02 of that header right there and with that
  • 00:12:05 we would only have the h1 selector right
  • 00:12:08 here now why am I doing this well we
  • 00:12:10 basically know that the header element
  • 00:12:12 basically consists of the h1 element in
  • 00:12:15 total this means as we just saw it makes
  • 00:12:19 sense to only define the h1 element and
  • 00:12:23 if we then don't apply any kind of
  • 00:12:25 padding border or margin to the header
  • 00:12:28 element so the wrapping element then
  • 00:12:30 this simply means that the header
  • 00:12:32 element only consists of the content
  • 00:12:35 from a box model perspective and
  • 00:12:36 therefore is equal to the style that we
  • 00:12:39 define right here for the h1 element now
  • 00:12:42 as I said we want to have this
  • 00:12:44 background color I will delete the font
  • 00:12:46 size because I will dive deeper into the
  • 00:12:49 font size and text topics later
  • 00:12:52 throughout the series so let's get rid
  • 00:12:53 of that for now the color can be white
  • 00:12:55 this is fine the padding well let's say
  • 00:12:59 we want to have a padding of 10 pixels
  • 00:13:01 all around the actual content we don't
  • 00:13:06 need a border so we can delete that and
  • 00:13:08 actually we also don't need a margin so
  • 00:13:10 let's get rid of that also like that if
  • 00:13:13 we now save dad go back and reload the
  • 00:13:16 page well then we can see that Mike's
  • 00:13:19 world looks like this now now what can
  • 00:13:23 we see right here because we can see
  • 00:13:24 that the that is kind of a bigger gap on
  • 00:13:26 top so let's inspect that quickly yeah
  • 00:13:30 and we can see that we still have a
  • 00:13:33 margin here above and below the age one
  • 00:13:35 element we have kind of an overflow
  • 00:13:37 right here outside of the header element
  • 00:13:39 now I will not dive into the details why
  • 00:13:42 this is happening right now at this
  • 00:13:43 stage of the series the important thing
  • 00:13:46 now is that we can simply get rid of
  • 00:13:48 that actually by going back to our code
  • 00:13:50 and simply define that
  • 00:13:53 margin like that should be zero like
  • 00:13:56 this no pixels nothing just zero and by
  • 00:13:59 that if we go back to the page and we
  • 00:14:00 load that we can see that this margin is
  • 00:14:03 now removed this was automatically added
  • 00:14:05 by the browser basically therefore it
  • 00:14:07 makes sense to define that this should
  • 00:14:09 be zero right now
  • 00:14:11 however let's maybe unselect the
  • 00:14:14 inspector now and think about other
  • 00:14:16 parts of that website I will not talk
  • 00:14:20 about the positioning of the different
  • 00:14:22 elements right here because I would like
  • 00:14:24 to change home and contact it should be
  • 00:14:26 displayed next to each other but this is
  • 00:14:28 also covered later fraud is serious I
  • 00:14:30 would only like to think about the
  • 00:14:32 background now well in thinking about
  • 00:14:34 the background the first thing I see
  • 00:14:36 right here is that we have this white
  • 00:14:38 background right there and actually I
  • 00:14:41 would like to have a slight grayish
  • 00:14:43 background on our website and if you
  • 00:14:46 think about the logic we just saw then
  • 00:14:49 we can actually just go back to our code
  • 00:14:51 and maybe edit right here on top and
  • 00:14:55 specify that HTML so oops HTML so the
  • 00:14:59 entered document like that should be
  • 00:15:02 great the HTML part and with that if I
  • 00:15:06 just write background dad that color
  • 00:15:10 that was the important thing what we
  • 00:15:11 need so that's the property well anti
  • 00:15:14 color should be let's say gray maybe
  • 00:15:16 like that or maybe not that great so if
  • 00:15:19 you're not happy with the color you can
  • 00:15:20 simply go right here and hover over the
  • 00:15:22 color and then simply pick a color that
  • 00:15:25 you would like to have so maybe let's
  • 00:15:27 use this one right here like that
  • 00:15:29 and if we now save that and go back then
  • 00:15:34 we can see that our page now has this
  • 00:15:37 slight gray look so in the background
  • 00:15:40 and with that we have changed our style
  • 00:15:43 a little bit but let's now go back to
  • 00:15:45 our code again and think about the other
  • 00:15:48 parts because if I have a look at the
  • 00:15:50 index.html file right here then I'm okay
  • 00:15:53 with the header this is fine the
  • 00:15:55 navigation part if we look at it yep not
  • 00:15:58 final yet but we'll focus on to that in
  • 00:16:01 the next videos but what I don't like
  • 00:16:04 right here is this main part because if
  • 00:16:06 we look at it
  • 00:16:07 well Yeti image is too big or the images
  • 00:16:09 are too big that's one thing we'll also
  • 00:16:11 work on that in the next videos but I
  • 00:16:13 don't like the structure from a code
  • 00:16:16 perspective because if we go backward
  • 00:16:18 here
  • 00:16:18 well then we can see that we have the
  • 00:16:22 main part so I'm talking about this part
  • 00:16:25 here and we have this list right here
  • 00:16:28 this is okay generally but actually I
  • 00:16:32 don't want to have a list in that case I
  • 00:16:34 would like to change the structure and
  • 00:16:36 what would I like to change well let me
  • 00:16:40 maybe edit up here and explain to you I
  • 00:16:41 would like to have one div and then I
  • 00:16:45 would like to have a second div right
  • 00:16:48 here and like that maybe and in the
  • 00:16:52 first if I would only like to have the
  • 00:16:54 paragraph sorry text so this text and
  • 00:16:59 the California landscape like that add
  • 00:17:05 it right here again select the two and
  • 00:17:09 indent it like this yeah this is fine so
  • 00:17:13 this is the first if and in the second
  • 00:17:16 div I would only like to have the image
  • 00:17:19 right here so landscape image right here
  • 00:17:24 and I know the landscape image this was
  • 00:17:27 the city image and now we have the
  • 00:17:30 California whoops
  • 00:17:32 the California streets image right here
  • 00:17:36 like that this means I would like to get
  • 00:17:40 rid of that list down here like that and
  • 00:17:44 now change the weight is indented and
  • 00:17:47 well now we have a problem because if I
  • 00:17:51 change the structure like that then I
  • 00:17:53 have these two divs and what I could do
  • 00:17:56 now let's say I would like to have a
  • 00:17:58 background color for the paragraphs
  • 00:17:59 right there well then I could say that
  • 00:18:02 the entered div right here should have a
  • 00:18:04 background so what we could do is we
  • 00:18:06 could go right here and write diff as a
  • 00:18:08 selector like that and add a background
  • 00:18:11 color like that that's when we use a hex
  • 00:18:16 code and it's let's use fa9 to free
  • 00:18:20 like that if we do that and now save
  • 00:18:26 also the index.html file and go back
  • 00:18:28 right here and reload it well then we
  • 00:18:32 can see the following the styling so the
  • 00:18:35 background color is applied but of
  • 00:18:37 course not only to our div right here
  • 00:18:40 but also to the div that's kind of
  • 00:18:42 around the images but also the div that
  • 00:18:45 we have with the footer elements so this
  • 00:18:48 is not good this means we actually need
  • 00:18:52 a way how we can specifically target
  • 00:18:55 this div now now one option could be
  • 00:18:59 that we refer to a paragraph this means
  • 00:19:02 we go to the Styles and now defined that
  • 00:19:05 the paragraph like that should have an
  • 00:19:08 orange background color if you do that
  • 00:19:10 save it and reload it we can see that
  • 00:19:12 this basically works it's now orange but
  • 00:19:15 the same thing is also true for do
  • 00:19:16 people like my page because we also have
  • 00:19:19 a paragraph at this position so if you
  • 00:19:21 go back
  • 00:19:21 oops right here we see that we have
  • 00:19:24 these paragraphs and we have two
  • 00:19:27 paragraph down here so also not a good
  • 00:19:30 option because we could then define
  • 00:19:32 something for the paragraph and then
  • 00:19:34 change the paragraph style down here
  • 00:19:36 again not a good idea so let's think
  • 00:19:39 about something different because what
  • 00:19:41 if we would be able to kind of
  • 00:19:43 specifically target this diff right here
  • 00:19:46 now as I'm pronouncing it like that
  • 00:19:50 specifically targeting elements can be
  • 00:19:53 possible if you add additional
  • 00:19:56 information to it and we learned how we
  • 00:19:58 can add additional information to
  • 00:20:00 elements already right we can do this by
  • 00:20:02 using attributes and you know that you
  • 00:20:05 can add attributes to each element and
  • 00:20:07 one specific attribute that we can use
  • 00:20:11 right here and also an attribute that is
  • 00:20:13 only used in the context of CSS by the
  • 00:20:16 way is a class now what does this mean
  • 00:20:19 how does it work well let's add a class
  • 00:20:22 first right here so in the diff and
  • 00:20:24 let's write class right here you can see
  • 00:20:26 the attribute and let's maybe call this
  • 00:20:29 class trip text or
  • 00:20:33 like that just feel free to call it as
  • 00:20:35 you want now if we save that so that
  • 00:20:38 part in the index.html file now go back
  • 00:20:40 to style.css and now change that from a
  • 00:20:44 paragraph to that class as a selector
  • 00:20:46 then it should work the question is now
  • 00:20:49 how can we use classes as a selector the
  • 00:20:53 answer is we can simply type a dot and
  • 00:20:55 then type the class name so in our case
  • 00:20:58 this was trip text what trips text or
  • 00:21:02 trip text I don't remember it was trip
  • 00:21:04 text so let's name it trip text like
  • 00:21:06 that so this must be equal to the class
  • 00:21:09 name so if we save that and go back to
  • 00:21:12 our page and reload it well then you can
  • 00:21:17 see that we now specified the background
  • 00:21:20 color important if you look at inspect
  • 00:21:23 right here the background color is now
  • 00:21:26 specified for this entire div so not
  • 00:21:29 specifically for the different
  • 00:21:32 paragraphs that we have inside that div
  • 00:21:35 but if you scroll down now we can see
  • 00:21:39 that in the other parts no background
  • 00:21:41 color is applied now let's have a closer
  • 00:21:44 look at that actually because what if we
  • 00:21:47 now would like to change the background
  • 00:21:49 color of that paragraphs inside our
  • 00:21:52 class can we do that and again I will
  • 00:21:55 not use the paragraph element as a
  • 00:21:57 selector because then this would again
  • 00:21:59 change the two people like my page
  • 00:22:01 paragraph also which I don't like so
  • 00:22:04 let's go back to our code let's think
  • 00:22:06 about that so what I would like to do is
  • 00:22:08 I would like to be able to specify a
  • 00:22:11 background color for our div class right
  • 00:22:14 here which we did and then I would like
  • 00:22:16 to say yeah but inside this class I
  • 00:22:20 would like to have a different
  • 00:22:21 background color for these two
  • 00:22:23 paragraphs how can we do this well if we
  • 00:22:27 go back to our style sheet right here
  • 00:22:28 and now maybe add a little bit of
  • 00:22:32 padding first because otherwise you
  • 00:22:34 won't see what happens so let's maybe
  • 00:22:35 add a padding of just three pixels
  • 00:22:37 something like that but now we want to
  • 00:22:39 refer to the elements inside a specific
  • 00:22:43 class how is this possible
  • 00:22:45 well we simply
  • 00:22:46 type again d-class so oops trip text now
  • 00:22:51 space and now we say P because this
  • 00:22:55 means that we will now apply the style
  • 00:22:58 that we now define only to the P
  • 00:23:00 elements that are inside this trip text
  • 00:23:04 class what does this mean
  • 00:23:05 let's do it like that let's again define
  • 00:23:08 a background color because I think it's
  • 00:23:09 the best property to kind of show you
  • 00:23:12 how this works
  • 00:23:13 and let's now say this should maybe be
  • 00:23:16 white like that and semicolon and save
  • 00:23:19 that if we now go back to our page
  • 00:23:22 appear and reload that well you can see
  • 00:23:27 what happened now now if we inspect that
  • 00:23:30 we can see that we have that paragraph
  • 00:23:33 right here and again we have a margin so
  • 00:23:36 let me quickly get rid of that margin
  • 00:23:38 like that so I added a zero so no margin
  • 00:23:41 for the paragraphs let's now reload that
  • 00:23:43 and now you can see what I wanted to
  • 00:23:46 show you because now we have that
  • 00:23:48 paragraph right here with the white
  • 00:23:50 background color the same thing for here
  • 00:23:52 right here and right here
  • 00:23:55 this part is now the div so if we go
  • 00:23:59 back to our code and maybe increase that
  • 00:24:01 padding to I don't know 10 pixels and go
  • 00:24:03 back and read out the page then you can
  • 00:24:06 see better even we now we're able to
  • 00:24:09 specify a styling for specific elements
  • 00:24:12 inside a class and define a general
  • 00:24:16 styling for the class these elements are
  • 00:24:18 in now we will also dive deeper into
  • 00:24:21 that throughout the series but this
  • 00:24:23 example should just show you how well
  • 00:24:25 powerful such classes actually are
  • 00:24:27 because you can really be precise about
  • 00:24:30 this styling you want to apply and about
  • 00:24:33 the elements you want to apply this
  • 00:24:35 styling to now vector code because now
  • 00:24:39 we have defined the trip text and the
  • 00:24:41 elements inside the trip text but if you
  • 00:24:44 go back to index.html now we see that we
  • 00:24:47 have another div right here for the
  • 00:24:49 images so let's maybe also apply a class
  • 00:24:51 right here this could be trip images for
  • 00:24:56 example again you're totally free to
  • 00:24:59 name these
  • 00:25:00 classes based on your preference if you
  • 00:25:03 save that and go back to our code and
  • 00:25:05 reload it we can of course see that
  • 00:25:07 nothing changed but now we know right
  • 00:25:10 here that our two images now are part of
  • 00:25:14 the trip images class we will use that
  • 00:25:18 later when we talk about studying of
  • 00:25:19 these images but for now it's actually
  • 00:25:22 fine to just define that class like this
  • 00:25:25 so the main part is fine now so this
  • 00:25:28 area right here important just keep in
  • 00:25:31 mind that classes concept because as you
  • 00:25:33 can see it is really powerful and we
  • 00:25:36 will use it throughout this series a lot
  • 00:25:38 actually and if I now look down to the
  • 00:25:40 footer so right here into this element
  • 00:25:45 well then I'm okay with the content
  • 00:25:48 there is one thing that I would like to
  • 00:25:50 change though because if you go right
  • 00:25:52 here we can see that we have the image
  • 00:25:53 of Max and Max text and here my image
  • 00:25:56 and the text of myself and I wrote that
  • 00:26:00 as a span in the HTML part because I'm
  • 00:26:03 going to show you the span of course
  • 00:26:04 this inline element we have right here
  • 00:26:06 but actually I would like to change that
  • 00:26:09 to a paragraph now like this and like
  • 00:26:12 that and like that
  • 00:26:14 save that because as you can see right
  • 00:26:16 here we now have the text displayed
  • 00:26:19 below the image which is not the way it
  • 00:26:21 should be so it should be to the right
  • 00:26:22 of the image but the thing is that we
  • 00:26:25 just saw that we use CSS to style our
  • 00:26:28 page therefore the styling shouldn't be
  • 00:26:30 done like that with the span but we
  • 00:26:32 should really use the CSS then to work
  • 00:26:34 on the positioning of the text we will
  • 00:26:36 do that throughout this videos of course
  • 00:26:37 so let's go back to our code and
  • 00:26:40 actually I'm happy with these statues we
  • 00:26:43 have right now so we have to continue
  • 00:26:44 working on our side but it's okay but I
  • 00:26:47 would like to take the chance at the end
  • 00:26:48 of this video to change two things in
  • 00:26:51 our code now the first thing is related
  • 00:26:54 to the introduction of classes we just
  • 00:26:56 had because if we go back to our Styles
  • 00:26:59 us s files right here then we see this
  • 00:27:02 h1 selector right here and I said that
  • 00:27:04 we will select the h1 element right
  • 00:27:06 there because we only have two single h1
  • 00:27:08 element in the document and therefore
  • 00:27:10 it's fine to apply a style to this h1
  • 00:27:13 element
  • 00:27:13 now the problem is that in modern html5
  • 00:27:17 times where we are right now you can
  • 00:27:19 have multiple h1 elements on your
  • 00:27:21 website therefore applying a general
  • 00:27:23 style to this h1 element is totally fine
  • 00:27:26 in our case so for this example project
  • 00:27:28 but on your website which could be more
  • 00:27:30 complicated and even bigger well you
  • 00:27:32 might have multiple h1 elements and
  • 00:27:34 therefore defining that general h1 style
  • 00:27:37 is maybe not always the best idea but as
  • 00:27:40 we just introduced the classes we have
  • 00:27:42 an easy way to change that how could we
  • 00:27:44 change that well we could simply go back
  • 00:27:46 to the index.html file now go to our h1
  • 00:27:50 element appear and now apply a class
  • 00:27:52 maybe a class of let's say page
  • 00:27:56 – title something like that and save
  • 00:28:00 this also note the way I wrote this
  • 00:28:02 class now so this page – title that's
  • 00:28:05 the second thing I would like to change
  • 00:28:07 right now in our code but more about
  • 00:28:08 that in a few seconds for now that we
  • 00:28:10 have to change the class right here or
  • 00:28:12 apply the class we also have to change
  • 00:28:14 the selector so let's go back to
  • 00:28:17 style.css and now change just from h1 to
  • 00:28:21 page – title like that if we save that
  • 00:28:26 go back to our page and reload it then
  • 00:28:29 we can see that nothing changed but now
  • 00:28:32 we made sure that we really identify or
  • 00:28:35 select specifically this h1 element
  • 00:28:38 right here in the header as I said
  • 00:28:40 doesn't make a difference in our case
  • 00:28:42 but generally it's a better way to write
  • 00:28:44 it like this
  • 00:28:45 so we edit that class and why did I add
  • 00:28:47 that class name like this so Paige –
  • 00:28:50 title and why should we also change it
  • 00:28:52 down here in that trip text class and in
  • 00:28:55 the trip images class right here well
  • 00:28:57 the reason is that in HTML and CSS we
  • 00:29:01 have a special convention when it comes
  • 00:29:03 to writing text the so called kabab case
  • 00:29:05 and this came up case simply says that
  • 00:29:08 we should connect words so like we have
  • 00:29:11 it right here in our class with a – this
  • 00:29:13 one right here simply to improve the
  • 00:29:16 readability of the code and the second
  • 00:29:19 convention hTML is that we should write
  • 00:29:21 every text with small letters the reason
  • 00:29:24 for that is simply that for HTML and CSS
  • 00:29:26 writing
  • 00:29:28 Paige kite like that or Paige tight like
  • 00:29:30 that it's basically the same so HTML and
  • 00:29:33 CSS cannot differentiate between capital
  • 00:29:36 or small letters therefore we use the
  • 00:29:38 convention of writing small ITER's only
  • 00:29:41 and connecting the different words with
  • 00:29:43 a dash to improve readability now we
  • 00:29:46 change that class right here and right
  • 00:29:48 there so we also have to change it in
  • 00:29:50 our Styles file right here so let's add
  • 00:29:53 a dash right here trip – text and trip –
  • 00:29:57 text P like that so if we save that and
  • 00:30:00 also safety index.html file of course
  • 00:30:02 and go back to a browser
  • 00:30:04 nothing should have changed let's see
  • 00:30:06 yes this still looks fine right now and
  • 00:30:09 with that we are actually done with that
  • 00:30:13 video so now that we understood D box
  • 00:30:15 model and the classes we can actually
  • 00:30:18 move on to another really important core
  • 00:30:22 concept of CSS well actually these are
  • 00:30:25 two important concepts because in the
  • 00:30:27 next video we will talk about the
  • 00:30:29 positioning property and about the
  • 00:30:32 display property really important as I
  • 00:30:34 said really interesting also so I hope
  • 00:30:36 to see you also in this video and as
  • 00:30:39 always I can only say thanks a lot for
  • 00:30:41 watching hope to see you in the next
  • 00:30:42 video and bye