CSS – Box Model and Classes | Beginner’s Course

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

You may also like