- 00:00:01 welcome to the last video of the CSS
- 00:00:03 part in our beginners guide in this
- 00:00:06 short video we'll have a look at the
- 00:00:08 website we created once again and see
- 00:00:11 what we have to adjust for example this
- 00:00:14 contact page right here I think this
- 00:00:16 looks kind of wrong right now and we'll
- 00:00:19 have a look at pseudo classes
- 00:00:24 so let's directly start right here with
- 00:00:27 that contact page we see that home works
- 00:00:29 fine but contact well we didn't apply
- 00:00:32 our styles so far to this part of our
- 00:00:34 website so let's go back to the code and
- 00:00:37 let's simply have a look at the contact
- 00:00:41 or the index.html file in the contact
- 00:00:43 folder because this is the old file that
- 00:00:46 we created in the beginning of the
- 00:00:47 series and in the meanwhile well we
- 00:00:50 changed a lot
- 00:00:51 for example we added this viewport meta
- 00:00:54 tag right here so let's also edit right
- 00:00:56 there to this file let's also see what
- 00:01:00 else we have our fonts that we of course
- 00:01:02 have to add right here so let's also
- 00:01:05 copy that to our 2nd index.html file
- 00:01:10 right here and now we can actually
- 00:01:13 simply copy in the content right here so
- 00:01:17 I'm starting in the header until the nav
- 00:01:20 because the plan is actually to just
- 00:01:23 safety home in contacts or this
- 00:01:25 navigation part on this contact page
- 00:01:27 will work on the contact page later when
- 00:01:30 we work with JavaScript throughout the
- 00:01:32 series but for now if CSS will just keep
- 00:01:34 it like that so I selected that and I
- 00:01:37 will now simply paste it right here into
- 00:01:41 the body so let's get rid of that
- 00:01:43 initial content paste it and now
- 00:01:45 important we need to change it right
- 00:01:47 here because the link right here should
- 00:01:51 now be for home because we want to be
- 00:01:54 navigated to home right here this should
- 00:01:58 only be a list item where it says
- 00:02:01 contact because if we click on to that
- 00:02:03 nothing should happen because we are
- 00:02:05 already on the contact page then and
- 00:02:07 important we need to change the hyper
- 00:02:11 reference right here to dot dot
- 00:02:14 index.html like this because you want to
- 00:02:16 navigate from the contact folder into
- 00:02:19 our main index.html file with that let's
- 00:02:23 save that and I think it should be fine
- 00:02:26 so let's go back and reload the page
- 00:02:27 yeah and with that as you can see it
- 00:02:31 looks different right here because I
- 00:02:32 zoomed in a little bit let's do it the
- 00:02:34 same way right here yeah I think now you
- 00:02:36 can see
- 00:02:37 the home empty contact page have the
- 00:02:39 same general styling as I said more
- 00:02:43 content to come on this contact page in
- 00:02:45 the next videos when we talk about
- 00:02:47 JavaScript and with that I'm now
- 00:02:50 actually quite happy with the look of
- 00:02:52 our website if we go to home we can see
- 00:02:55 that the text looks fine I fought in the
- 00:02:57 last video that we might have to change
- 00:02:59 the font size of specific elements but
- 00:03:01 actually it looks totally fine it also
- 00:03:04 switches to the mobile view because of
- 00:03:06 the media queries we added in the last
- 00:03:08 video and if we have a look at a mobile
- 00:03:11 phone it's maybe increased at a little
- 00:03:13 bit like that so the iPhone X it looks
- 00:03:15 fine in the portrait mode and if we
- 00:03:18 rotate our device it also looks good in
- 00:03:20 the landscape mode if we use a smaller
- 00:03:23 device on iPhone 7 for example we can
- 00:03:25 see that in both modes the well mobile
- 00:03:28 view is displayed so this looks quite
- 00:03:32 good actually and because of that there
- 00:03:34 is only one less thing that I would like
- 00:03:37 to show you or that I would like to add
- 00:03:38 and these are pseudo classes pseudo
- 00:03:41 classes simply allow us to show a
- 00:03:44 specific state of an element this means
- 00:03:47 we can add such a pseudo class to a
- 00:03:50 selector and if the studio class added
- 00:03:53 we can define what happens to an element
- 00:03:55 for example if we hover the mouse over
- 00:03:58 an image or if we click on to contact or
- 00:04:00 home and that's exactly what I would
- 00:04:02 like to do I would like to change the
- 00:04:05 way our website is displayed in a way
- 00:04:08 that if we hover over this or that image
- 00:04:11 or over Mac's or my head that the mouse
- 00:04:14 cursor becomes a pointer and if we click
- 00:04:17 on to contact right here or home right
- 00:04:19 there I would like to change the color
- 00:04:22 of contact or home once we click onto it
- 00:04:25 so these are two things that we can do
- 00:04:28 with pseudo classes more information
- 00:04:31 about pseudo classes as always can be
- 00:04:33 found in the MDM and also as always you
- 00:04:37 can find a link to the corresponding
- 00:04:38 site on the MDM in the video description
- 00:04:40 so let's start with the pseudo class
- 00:04:42 that turns the mouse cursor into a
- 00:04:45 pointer once we hover over an image so
- 00:04:48 let's go back to our code to the CSS
- 00:04:50 file
- 00:04:51 and let's add it maybe up here as kind
- 00:04:53 of a general rule so you write the
- 00:04:55 selector in our case the images now a
- 00:04:58 colon and now you're right
- 00:05:00 hover that's one of the pseudo selectors
- 00:05:04 available and now you're right to crawly
- 00:05:06 braces as always and now we simply say
- 00:05:08 that if we hover over an image then we
- 00:05:12 want the cursor to be a pointer or to
- 00:05:17 turn into a pointer this can of course
- 00:05:19 be difficult on mobile devices so this
- 00:05:21 is rather a pseudo selector you probably
- 00:05:24 use if you want to have it on a desktop
- 00:05:27 or on a normal computer screen for
- 00:05:29 mobile devices probably not the best
- 00:05:30 option nevertheless I would like to show
- 00:05:33 you how it works so let's save this and
- 00:05:35 let's reload the page and if we not
- 00:05:38 hover over the image you can see that
- 00:05:41 the mouse turns into a pointer right
- 00:05:44 here right there and if we go over next
- 00:05:48 image and over my image so this was the
- 00:05:52 first pseudo class that I wanted to show
- 00:05:54 you and the second one is the class that
- 00:05:57 allows us to change the color once we
- 00:05:59 click on tan element specifically I
- 00:06:01 would like to be able to change the
- 00:06:02 color once we click these and these are
- 00:06:05 links so let's go back and let's also
- 00:06:08 add a pseudo class for links so for the
- 00:06:12 anchor tag right here and this time it's
- 00:06:14 not hover but its active because we
- 00:06:17 click on to it so it's active so let's
- 00:06:20 do that and let's not change the color
- 00:06:22 to our normal you know that already
- 00:06:26 fa9 to 3f so our Academy and orange
- 00:06:30 basically and if we now save that and go
- 00:06:32 back to the page and reload it you can
- 00:06:35 see that nothing changed but if we now
- 00:06:37 click on to contact can you see it or on
- 00:06:41 to home it becomes orange for the amount
- 00:06:44 of time where it's active so basically
- 00:06:46 whenever I click it so if I hold the
- 00:06:48 left mouse button you can see it stays
- 00:06:50 orange if I release the left mouse
- 00:06:51 button then it gets back to its initial
- 00:06:54 color the black right here well and with
- 00:06:58 that we did it actually we finish the
- 00:07:01 CSS part of our beginners guide
- 00:07:04 think this was a lot of work and I'm
- 00:07:06 totally aware of the fact that this is
- 00:07:08 not the most complicated website
- 00:07:10 probably but if we think back about what
- 00:07:12 we applied so far we used a lot of
- 00:07:15 important concepts of CSS in this rather
- 00:07:18 simple website the thing that's missing
- 00:07:20 right here of course is logic and if we
- 00:07:23 need logic on our website then it's time
- 00:07:26 for JavaScript so in the next video of
- 00:07:29 this series we will finally have a look
- 00:07:31 at JavaScript of course I hope to also
- 00:07:34 see you in this video I hope that you
- 00:07:36 enjoyed this year's s part so far and as
- 00:07:39 always I can only say thanks a lot for
- 00:07:41 watching hope to see you in the next
- 00:07:43 videos and bye
