- 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