- 00:00:03 welcome to this video
- 00:00:05 this video is about css cascading style
- 00:00:08 sheets
- 00:00:09 we use css on every web page we built
- 00:00:12 and still a lot of people use things
- 00:00:15 they
- 00:00:16 learned on stack overflow and so on they
- 00:00:18 don't really know
- 00:00:19 why they're doing something in a certain
- 00:00:21 way and that limits your capability of
- 00:00:23 solving problems
- 00:00:25 and implementing styles you haven't
- 00:00:27 implemented before
- 00:00:28 this video is a thorough introduction to
- 00:00:30 css
- 00:00:31 and it's an excerpt from a udemy course
- 00:00:34 i created together with a colleague of
- 00:00:36 mine
- 00:00:37 in that course we dive much deeper into
- 00:00:39 css we also dive into topics like
- 00:00:41 flexbox
- 00:00:42 css grid css variables fun stuff like
- 00:00:46 that
- 00:00:46 but this video here already is a for
- 00:00:48 introduction
- 00:00:49 which probably also includes some things
- 00:00:52 you didn't know before
- 00:00:53 so i hope you like it if you want to
- 00:00:55 join the full course
- 00:00:56 a link to it with a huge discount
- 00:00:58 attached to it can be found
- 00:01:00 in the video description
- 00:01:06 welcome to this module so let's dive
- 00:01:08 right into it and let's get started with
- 00:01:10 the basics of css
- 00:01:12 to be precise in this module you will
- 00:01:15 learn how you can
- 00:01:16 add css to html to really ensure
- 00:01:20 that your page looks good and which
- 00:01:22 different options you have when it comes
- 00:01:24 to that
- 00:01:25 we'll then dive into how you may set up
- 00:01:27 css
- 00:01:28 rules so after you learned how to add
- 00:01:31 css
- 00:01:32 how you actually write css code to well
- 00:01:35 change something on your page
- 00:01:37 we'll then dive deeper into selectors
- 00:01:39 properties and values because these
- 00:01:41 things turn out to be important when it
- 00:01:43 comes to writing css rules
- 00:01:45 and finally besides a couple of other
- 00:01:47 things that are related to the previous
- 00:01:49 topics
- 00:01:50 we'll also have a look at how we can
- 00:01:52 actually resolve conflicting styles
- 00:01:54 so a lot to cover let's get started
- 00:02:03 so to get started attached to this video
- 00:02:05 you find the following files
- 00:02:07 the index.html file and the favicon.png
- 00:02:10 file
- 00:02:11 now the fab icon is only there so that
- 00:02:13 we have it it's not related to css
- 00:02:16 the index.html file is the important one
- 00:02:18 it's the first piece of the course
- 00:02:20 project we're going to build
- 00:02:22 if you open it with your favorite editor
- 00:02:24 or ide
- 00:02:25 i am using visual studio code here then
- 00:02:28 you can see that we get a normal html5
- 00:02:30 skeleton inside of that file
- 00:02:32 we got a doctype we got the html opening
- 00:02:35 and closing
- 00:02:36 tag then we got a head section where we
- 00:02:38 set some
- 00:02:39 meta tags as well as a title and since
- 00:02:42 we're building
- 00:02:43 a fictional web hosting company or the
- 00:02:46 website of this company
- 00:02:47 we named it uhost and you have the
- 00:02:51 body tag now the body tag of course
- 00:02:53 holds the content of our web page
- 00:02:55 and right now this really is just a main
- 00:02:57 tag a section tag
- 00:02:59 and in there this h1 tag so not too
- 00:03:02 exciting but we'll add more and more
- 00:03:04 throughout this course of course
- 00:03:06 this is already some great code with
- 00:03:08 which we can get started though
- 00:03:09 which is the reason why it's there now
- 00:03:12 all these things here are default html
- 00:03:14 selectors
- 00:03:15 and now if we open that web page if we
- 00:03:17 double click on that index.html file and
- 00:03:20 we open it in the browser therefore
- 00:03:21 we should see something like this the
- 00:03:24 exact thing you see here might differ
- 00:03:26 depending on which browser you use
- 00:03:28 i'm using chrome i strongly recommend
- 00:03:30 using chrome
- 00:03:31 because of its developer tools which
- 00:03:33 we'll also use later
- 00:03:35 but this is what you should roughly see
- 00:03:36 just some text which
- 00:03:38 has actually some styling it's a bit
- 00:03:41 bigger than the default text would be
- 00:03:43 it is fat but it doesn't look super
- 00:03:46 great
- 00:03:46 and there certainly is more we can do
- 00:03:48 with it so this is our starting
- 00:03:51 setup and our goal is to turn this
- 00:03:54 into this so as you can see what we have
- 00:03:57 here
- 00:03:58 is some background color of the
- 00:04:00 surrounding element as it looks like
- 00:04:02 and the text is then inside of that
- 00:04:05 background and also looks a bit
- 00:04:07 differently
- 00:04:09 this is achieved via css not via html
- 00:04:12 because
- 00:04:13 html leads to what we see here it's
- 00:04:15 about the content and the structure of
- 00:04:17 our page in the end
- 00:04:18 and we got all of that we got the
- 00:04:20 content there we can read it
- 00:04:21 this page although it doesn't have that
- 00:04:23 many features right now
- 00:04:25 is fully usable this is super important
- 00:04:27 to understand
- 00:04:28 it's fully usable so what we can now do
- 00:04:31 is
- 00:04:32 we can make it more beautiful and for
- 00:04:34 that we can use
- 00:04:35 css now in the next video we'll dive
- 00:04:38 into using css
- 00:04:39 and i will show you three different ways
- 00:04:42 of adding
- 00:04:42 css code to this page
- 00:04:50 so let's add some css to this page and
- 00:04:53 as i mentioned there are three different
- 00:04:55 ways of
- 00:04:56 adding css the first way you can use
- 00:04:59 is inline styling now let's say we want
- 00:05:02 to style this
- 00:05:03 section here we can add an inline style
- 00:05:06 by adding the style attribute to the
- 00:05:09 section tag
- 00:05:10 the style attribute is a normal html
- 00:05:13 attribute which you can actually add to
- 00:05:15 pretty much any
- 00:05:16 html element now you can simply set a
- 00:05:20 css style
- 00:05:21 by now applying a so-called css
- 00:05:24 declaration
- 00:05:25 inside of that style attribute or inside
- 00:05:27 of that string you pass
- 00:05:29 as an argument i could say declaration
- 00:05:32 simply means that you define what you
- 00:05:35 want to style
- 00:05:36 and how you want to style it now the
- 00:05:38 what is called a property
- 00:05:41 and here we could say we want to set the
- 00:05:43 background
- 00:05:44 of this section now how do i know that
- 00:05:46 there is a background property
- 00:05:49 as you will learn throughout the course
- 00:05:51 there first of all
- 00:05:52 is a list of some properties you
- 00:05:55 commonly use
- 00:05:56 so you will really see that you reuse
- 00:05:59 the same
- 00:05:59 set of properties all the time and it
- 00:06:02 will also show you a complete reference
- 00:06:04 of all available properties
- 00:06:06 so that you can really search for that
- 00:06:07 single property you need
- 00:06:09 for your case but back to the background
- 00:06:12 as you might be able to guess the
- 00:06:14 background property styles the
- 00:06:16 background of this
- 00:06:17 section and we could set it to a value
- 00:06:20 now this is the part where we say how it
- 00:06:22 should be styled
- 00:06:24 we assign such a value by adding a colon
- 00:06:26 after the property
- 00:06:28 and then the value to which we want to
- 00:06:30 set the background
- 00:06:32 now which value you use here depends on
- 00:06:34 the property so for backgrounds
- 00:06:36 for example we can assign a color there
- 00:06:39 also are other
- 00:06:40 options like images which i'll also show
- 00:06:42 later but for now let's use a color
- 00:06:45 and you can either assign a color like
- 00:06:47 red just by typing this
- 00:06:49 there is a set of predefined colors so
- 00:06:51 to say
- 00:06:52 but behind each such predefined color
- 00:06:54 there really is just a hex code you can
- 00:06:56 use
- 00:06:57 and if you directly assign a hex code
- 00:06:59 you can actually mix
- 00:07:00 or blend any color you want a hex code
- 00:07:04 is assigned
- 00:07:04 by adding a hashtag and then the hex
- 00:07:07 code value for a given color
- 00:07:08 i will show you how to find out the hex
- 00:07:10 code value later
- 00:07:12 so for now let's simply add one and i
- 00:07:15 prepared
- 00:07:16 one which has the hex code ff1b68
- 00:07:20 this is a nice reddish color now if we
- 00:07:23 save this file
- 00:07:25 and we go back to the page and reload it
- 00:07:28 you should see
- 00:07:28 that this section now has a red
- 00:07:30 background and that
- 00:07:32 already is your first css code this is
- 00:07:35 how you can change the style of an
- 00:07:37 element
- 00:07:37 in this case of the section now this was
- 00:07:40 achieved by creating a so-called inline
- 00:07:42 style
- 00:07:43 inline because we use the style
- 00:07:45 attribute directly on the element where
- 00:07:47 you want to add it
- 00:07:48 and you would write all styles if you
- 00:07:50 have multiple ones you can separate them
- 00:07:52 with semicolons
- 00:07:53 in the same line now this approach is
- 00:07:57 actually not recommended because if you
- 00:08:00 create a bigger page with many styles
- 00:08:02 it quickly becomes very hard to
- 00:08:04 understand and read your code
- 00:08:06 because your style is always applied to
- 00:08:08 the element you want to change
- 00:08:09 if you ever want to change a style you
- 00:08:11 have to find that element in your
- 00:08:13 document flow and this is really hard to
- 00:08:15 debug
- 00:08:16 additionally if you add multiple rules
- 00:08:18 let's say you have like 10 different
- 00:08:21 properties you want to change you get a
- 00:08:22 very long list of properties you assign
- 00:08:24 here
- 00:08:25 and that also is hard to read so there
- 00:08:28 is a better way of writing css
- 00:08:30 and that way actually uses so-called
- 00:08:32 selectors
- 00:08:33 let's dive into that approach and then
- 00:08:35 the two remaining alternatives of
- 00:08:37 including css code
- 00:08:38 in the next video
- 00:08:46 so since we learned that inline styles
- 00:08:48 are bad
- 00:08:49 let's find a better alternative i
- 00:08:51 removed the inline style
- 00:08:53 and the first alternative i want to show
- 00:08:55 you uses the head section
- 00:08:57 there you can add a special style tag so
- 00:09:00 it's a normal html tag with the name
- 00:09:02 style
- 00:09:03 and between the opening and closing
- 00:09:05 selector you can now write so-called
- 00:09:07 css rules now a css rule
- 00:09:11 in the end includes the same property
- 00:09:13 value assignment
- 00:09:14 we used on the section it just adds one
- 00:09:18 extra thing because if you just write
- 00:09:20 background
- 00:09:22 and then your color here like ff1b68
- 00:09:26 of course css would have no chance of
- 00:09:29 knowing what you want to style with that
- 00:09:31 color
- 00:09:31 you don't attach it directly to the
- 00:09:33 element so what you need to add is a
- 00:09:35 so-called
- 00:09:36 selector a selector simply is an
- 00:09:39 additional piece of information
- 00:09:41 that tells css to which element
- 00:09:44 in your dom so inside of your body and
- 00:09:48 the body is also treated as an element
- 00:09:49 by the way
- 00:09:50 to which element you want to assign this
- 00:09:53 declaration
- 00:09:54 so where you want to change the
- 00:09:55 background in our case you add a
- 00:09:57 selector
- 00:09:58 by simply typing the tag name without
- 00:10:01 the lower than and greater than signs
- 00:10:03 so just section our case then you add
- 00:10:06 opening and closing curly braces
- 00:10:08 to now mark the part where you will set
- 00:10:10 up the rules or the declarations
- 00:10:12 for that given selector because you can
- 00:10:15 of course add multiple selectors
- 00:10:17 for different elements on your page so
- 00:10:19 in our case i would grab that background
- 00:10:21 code and put it inside of these curly
- 00:10:23 braces
- 00:10:24 and now i'm telling css and css
- 00:10:27 executes automatically it's run by the
- 00:10:30 browser so to say
- 00:10:32 i tell it that it should look for all
- 00:10:34 section elements on the page
- 00:10:36 we only have one but it would actually
- 00:10:39 use all
- 00:10:40 and apply this style to all
- 00:10:43 found instances so to all sections on
- 00:10:46 the page
- 00:10:47 so if i now save this and i reload the
- 00:10:50 page
- 00:10:51 we don't actually see a difference which
- 00:10:54 makes sense
- 00:10:54 because we still styled this element but
- 00:10:57 now no longer via inline styles
- 00:10:59 but by directly adding a style in our
- 00:11:03 template or in our head section like
- 00:11:04 this
- 00:11:06 now as i mentioned this applies to all
- 00:11:09 sections
- 00:11:10 so if you add a second section and we'll
- 00:11:13 need one
- 00:11:14 in our project later if you add a second
- 00:11:16 section here
- 00:11:18 and let's say in this section we have
- 00:11:20 another h1 tag where we say
- 00:11:22 choose your plan because later this will
- 00:11:24 be the part where users can select their
- 00:11:26 hosting plan
- 00:11:27 if we do this and we save the file and
- 00:11:29 we reload you see
- 00:11:31 both sections actually have that style
- 00:11:34 you also see there is some white space
- 00:11:36 between them and around them
- 00:11:37 i will come back to why that is the case
- 00:11:39 later but now you can already see that
- 00:11:41 selector doing work
- 00:11:43 you write the rule once and you select
- 00:11:45 all sections
- 00:11:46 that's another advantage compared to
- 00:11:48 inline styles where you would have to
- 00:11:50 add
- 00:11:50 this declaration to each section
- 00:11:53 separately
- 00:11:54 and if you ever change the color you
- 00:11:56 would have to change it in
- 00:11:57 all these section styles so that is the
- 00:12:00 better way for many reasons
- 00:12:03 now there is one other way of including
- 00:12:05 styles though
- 00:12:06 and that is using an external style
- 00:12:09 sheet so
- 00:12:10 let's do that now for that i'll add a
- 00:12:12 new file to the project
- 00:12:14 you can create it in your windows
- 00:12:15 explorer or apple mac finder of course
- 00:12:18 or directly in your ide as i do and in
- 00:12:21 that new file we will store
- 00:12:23 the css code hence the file should end
- 00:12:26 with dot css
- 00:12:27 because it contains css code the name is
- 00:12:30 up to you
- 00:12:30 i will name it main because it refers to
- 00:12:32 the main page of our
- 00:12:34 web application of our web page but you
- 00:12:36 can pick any name you want
- 00:12:38 now in that file you write your css
- 00:12:42 rules remember a rule is this part which
- 00:12:45 is composed of a selector
- 00:12:47 a property and a value so you grab
- 00:12:50 that rule and then you put it into that
- 00:12:53 css file
- 00:12:54 without the style text that's important
- 00:12:56 we're not in the html file so we don't
- 00:12:58 need stall tags
- 00:13:00 with that added we can remove the style
- 00:13:02 tags from the index.html file
- 00:13:04 and now we can save both files so we
- 00:13:06 change the index.html file
- 00:13:08 and the new main.css file if we then go
- 00:13:11 back to the running page
- 00:13:12 and we reload it you see the styles are
- 00:13:15 gone
- 00:13:16 and do you have an idea why this is
- 00:13:18 happening
- 00:13:20 it of course happens because in our
- 00:13:22 index.html file
- 00:13:24 we never specify that we want to use or
- 00:13:27 include this main.css file and how would
- 00:13:30 our browser know
- 00:13:31 it doesn't automatically scan our file
- 00:13:34 system and include every file it finds
- 00:13:37 so we have to explicitly tell it to use
- 00:13:39 the main.css file
- 00:13:41 and we do so by adding a link element
- 00:13:45 so normal link element as we use it for
- 00:13:47 the fab icon
- 00:13:48 with rel set to stylesheet to inform it
- 00:13:51 that we're including a stylesheet here
- 00:13:53 and then the hyper-reference added with
- 00:13:55 the href attribute
- 00:13:57 should point to that file if that file
- 00:14:00 would live in a subfolder
- 00:14:02 then you would add subfolder slash file
- 00:14:05 name
- 00:14:05 but since it's in the same folder here
- 00:14:07 we just put the file name so main.css
- 00:14:11 if we now save that index.html file and
- 00:14:13 we reload
- 00:14:14 the styles are back because now we're
- 00:14:16 including the styles
- 00:14:18 through our file here and with that you
- 00:14:22 learned the third way of including
- 00:14:23 css this actually is the recommended way
- 00:14:27 because by using an external style sheet
- 00:14:29 you can have a clear separation of your
- 00:14:31 html and your css code which is
- 00:14:33 especially useful as your css code grows
- 00:14:36 and would bloat your head section at
- 00:14:38 some point and additionally
- 00:14:40 if you use the same style sheet in
- 00:14:42 multiple pages let's say
- 00:14:44 then your browser can cache the style
- 00:14:46 sheet and doesn't need to redownload it
- 00:14:48 for every new page
- 00:14:50 whereas if you include your styles in
- 00:14:52 the head section you increase the file
- 00:14:54 size of your html file
- 00:14:56 and the browser needs to redownload it
- 00:14:58 since it's part of the html page
- 00:14:59 for every new page which can be slower
- 00:15:02 that is why in this course
- 00:15:04 we will use an external stylesheet even
- 00:15:06 if we only have one rule as in this case
- 00:15:16 we added the first styles to our website
- 00:15:18 and
- 00:15:19 this already improved the look a little
- 00:15:21 bit at least it did something on the
- 00:15:23 screen
- 00:15:24 but beautiful still is different i'd say
- 00:15:28 so for one we should style different
- 00:15:30 things
- 00:15:31 like our font we use i don't think this
- 00:15:34 font is very beautiful
- 00:15:35 and maybe the color of the text as well
- 00:15:38 and the positioning of the text in this
- 00:15:42 surrounding area maybe is also something
- 00:15:44 we can change
- 00:15:46 so these are the next things we want to
- 00:15:48 do additionally
- 00:15:50 i also don't want to use the same styles
- 00:15:52 on both sections
- 00:15:53 because both sections will actually have
- 00:15:55 very different purposes
- 00:15:57 and styles in our web page so these are
- 00:16:00 the two things i want to focus on next
- 00:16:02 how we can change different things than
- 00:16:05 just the background
- 00:16:06 so how we can for example change that
- 00:16:07 text inside of that background or in
- 00:16:09 that element having that background
- 00:16:11 and how we can apply different styles to
- 00:16:13 different sections
- 00:16:15 so let's start with the different
- 00:16:19 styles thing because that instantly
- 00:16:21 yields a nice effect
- 00:16:23 let's say we want to change the font
- 00:16:26 family so the way the font looks like as
- 00:16:28 well as the color of this h1
- 00:16:30 tag now for this what we can do is we
- 00:16:33 can add a new
- 00:16:34 selector to our css file and in this
- 00:16:37 case it would be the h1 selector
- 00:16:39 because we want to change the text in
- 00:16:41 this h1 element so i guess it makes
- 00:16:43 sense to use that h1 selector
- 00:16:45 now we again add the curly braces
- 00:16:49 and now we did change the background in
- 00:16:51 the past of the entire section actually
- 00:16:53 now i want to change things about that
- 00:16:56 h1 tag about the text itself and the two
- 00:17:00 things i mentioned were the color
- 00:17:01 and the font family now let's start with
- 00:17:04 the color
- 00:17:05 you change the color of the text with
- 00:17:07 the color property
- 00:17:09 and again if you're wondering how i know
- 00:17:11 that by experience because
- 00:17:13 as i mentioned you work with the same
- 00:17:15 set of properties a lot
- 00:17:16 and it will also show you that reference
- 00:17:18 i was talking about but for now
- 00:17:20 let's just use color here and let's set
- 00:17:22 a color of
- 00:17:23 white for now if we save that and we
- 00:17:26 reload the page
- 00:17:28 we see all so both h1 tags turned white
- 00:17:32 which again makes a lot of sense because
- 00:17:34 with the h1 selector
- 00:17:35 we select all and not just one h1
- 00:17:38 element so this is for now at least one
- 00:17:42 change we
- 00:17:42 did set the color to something different
- 00:17:45 to white in our
- 00:17:46 case but there still is more we can do
- 00:17:49 i was talking about changing the font so
- 00:17:52 for this
- 00:17:53 we need to change the font family so you
- 00:17:56 can go to that h1 tag and add font
- 00:17:58 dash family as an additional property
- 00:18:01 this changes
- 00:18:02 well you guessed it the font family of
- 00:18:04 this text so of this h1 tag
- 00:18:06 and now here you got a couple of choices
- 00:18:09 you can use a default font family like
- 00:18:13 sen serif this is a special keyword
- 00:18:17 which will use the default setup in your
- 00:18:21 browser
- 00:18:22 if you reload the page you see indeed
- 00:18:24 the style did
- 00:18:25 change now where is this coming from
- 00:18:29 now for this we should open our browser
- 00:18:31 preferences
- 00:18:33 in these preferences and that of course
- 00:18:35 depends on your browser but in chrome
- 00:18:37 you get the customized fonts area and
- 00:18:40 each
- 00:18:40 browser should have something like this
- 00:18:42 if you click it you see some custom
- 00:18:44 settings about your fonts
- 00:18:46 and now here's the interesting part you
- 00:18:48 also see a standard font which is used
- 00:18:50 by default that was the font you saw at
- 00:18:52 the beginning
- 00:18:52 times in my case then you got a font
- 00:18:55 with serifs if you're saying i want a
- 00:18:57 serif
- 00:18:58 font or if you want a sensor font it'll
- 00:19:01 use helvetica in my case
- 00:19:02 and that of course may differ on your
- 00:19:04 system fixed width
- 00:19:06 is an additional default which you often
- 00:19:08 use for code snippets
- 00:19:09 you always see a preview of the font
- 00:19:11 below the drop down
- 00:19:12 at least in chrome so these are the
- 00:19:15 default settings
- 00:19:16 and you target them by either not
- 00:19:18 assigning a font family which will use
- 00:19:20 the standard font
- 00:19:21 by setting it to serif to send serif or
- 00:19:24 here this would be mono space
- 00:19:26 actually but more on this in a special
- 00:19:29 section later in the course
- 00:19:30 so for now what we did is we set it to
- 00:19:32 senserif
- 00:19:33 and hence in my case it uses
- 00:19:35 healthvatiga
- 00:19:36 and therefore we get a different look
- 00:19:39 already
- 00:19:40 now you're not limited to using font
- 00:19:42 families included on your system
- 00:19:44 however censeriff serif and monospace
- 00:19:47 are always great values because they
- 00:19:49 will use the browser defaults
- 00:19:51 so you can rely on these keywords
- 00:19:54 picking up font
- 00:19:55 that looks at least to some extent in
- 00:19:57 the way you want because you can ensure
- 00:19:58 it's a sensor for a serif font as you
- 00:20:01 fall back to the browser defaults for
- 00:20:03 that kind of font
- 00:20:04 sometimes you want a specific font
- 00:20:06 though and you can't rely on that font
- 00:20:08 being installed on the machine of the
- 00:20:10 user so to include a
- 00:20:12 font which is not necessarily installed
- 00:20:14 already you can use a tool called
- 00:20:16 google fonts if you search for google
- 00:20:18 fonts you should find this result here
- 00:20:21 fonts.google.com
- 00:20:22 and on this page you can see a lot of
- 00:20:25 fonts which you can easily include
- 00:20:27 on any web page now i already found one
- 00:20:30 which i want to use for this project so
- 00:20:31 let's search for anton
- 00:20:34 and here anton looks like this
- 00:20:37 now you can add it to your project by
- 00:20:39 clicking the plus which will open this
- 00:20:41 part here at the bottom and if you
- 00:20:43 expand this you see two things
- 00:20:46 an import link which you need to add to
- 00:20:48 your html
- 00:20:49 head section and the rule by which you
- 00:20:51 can apply this font
- 00:20:53 so let's grab the import link let's go
- 00:20:55 to our index html file
- 00:20:57 and add it above our main css
- 00:21:00 import here so that we can use that font
- 00:21:03 in the main.css file
- 00:21:05 and thereafter let's use font family so
- 00:21:08 let's copy that rule
- 00:21:10 and in our main.css file let's replace
- 00:21:13 this
- 00:21:13 family declaration here with that
- 00:21:17 so if we now save that and we leave
- 00:21:19 google fonts and we reload the page
- 00:21:22 you see that the font changed once again
- 00:21:24 because now we're using that
- 00:21:25 externally imported font and since we're
- 00:21:28 dynamically importing it with that link
- 00:21:30 you can rely on it being loaded on any
- 00:21:33 machine for any of your users
- 00:21:37 so this is how we change the color and
- 00:21:39 the font family
- 00:21:40 this in my opinion improved the look
- 00:21:43 though it would also be nice to have
- 00:21:44 some spacing inside of that box
- 00:21:47 and on the other hand maybe get rid of
- 00:21:48 that spacing around it
- 00:21:50 and it would be nice if we didn't share
- 00:21:52 the styles between the two sections
- 00:21:54 because as i mentioned
- 00:21:55 they should look different so that's a
- 00:21:58 lot of work
- 00:21:59 let's start with the different styles
- 00:22:01 for the different sections
- 00:22:09 we took our first steps when it comes to
- 00:22:12 styling by assigning
- 00:22:13 properties and values for the properties
- 00:22:16 now
- 00:22:17 the next step is to ensure that we don't
- 00:22:20 apply the same styles
- 00:22:21 all over our page sometimes you want
- 00:22:23 this sometimes you want every h1 tag to
- 00:22:25 look the same for example when it comes
- 00:22:27 to its font size that's a pretty common
- 00:22:29 thing
- 00:22:29 but sometimes like in this case you
- 00:22:30 don't want that semantically we got two
- 00:22:33 h1's
- 00:22:34 tags but they should look different here
- 00:22:36 now
- 00:22:37 right now we always like the same
- 00:22:38 section and the same h1 tag
- 00:22:41 thankfully we have more than just the
- 00:22:43 tag selectors which we're currently
- 00:22:44 using in css
- 00:22:46 so let's see which other selectors we
- 00:22:48 have we did have a look
- 00:22:49 at the so-called element or tag
- 00:22:51 selectors there we set the equal styles
- 00:22:53 for all these elements
- 00:22:55 and it looks like this in html we get a
- 00:22:57 couple of elements
- 00:22:59 and the h1 tag here would have a red
- 00:23:01 text because of this
- 00:23:02 rule we select the h1 tag and we assign
- 00:23:05 a color of red
- 00:23:07 now that is what we saw thus far but
- 00:23:09 there is more for example we also have
- 00:23:11 class selectors classes are something
- 00:23:14 you might have never heard before
- 00:23:15 because they are a concept strongly
- 00:23:18 connected to css
- 00:23:20 with classes we can define a style which
- 00:23:23 we then apply to all elements
- 00:23:25 that have the same class and a class is
- 00:23:28 added to
- 00:23:29 an element in html by adding the class
- 00:23:31 attribute as you can see here
- 00:23:33 in this snippet all the elements
- 00:23:35 actually have the blog post class
- 00:23:38 now the blog post class is not something
- 00:23:40 which is predefined by the browser
- 00:23:42 you define classes instead in css the
- 00:23:45 code would look like this
- 00:23:46 please notice that this selector is a
- 00:23:48 bit different than the tag selector
- 00:23:50 it starts with dot and then your class
- 00:23:53 name
- 00:23:53 and you're free to choose any class name
- 00:23:55 you want
- 00:23:56 here the colors then also set to red
- 00:23:58 that's the declaration in that rule
- 00:24:00 and therefore all html elements that
- 00:24:03 have this class
- 00:24:04 will get the red text color now
- 00:24:08 sometimes you also want to set a certain
- 00:24:09 style for
- 00:24:10 all elements on the entire page and in
- 00:24:13 this case you have the universal
- 00:24:14 selector
- 00:24:15 so here's an example where we have one
- 00:24:18 element without a class and one with a
- 00:24:20 class
- 00:24:21 and let's say the top two rules wouldn't
- 00:24:22 exist so the only rule we could then add
- 00:24:25 to turn everything red
- 00:24:26 would be this one with the star selector
- 00:24:29 you style
- 00:24:30 every element on your page and to be
- 00:24:32 honest you
- 00:24:33 rarely use this one the reason is you
- 00:24:36 rarely want to have the same style on
- 00:24:38 every single element on your page
- 00:24:40 there is one specific use case we'll
- 00:24:42 also have a look at later though
- 00:24:44 where this makes sense now we're not
- 00:24:46 done yet though
- 00:24:48 there are two other kinds of important
- 00:24:49 selectors
- 00:24:51 id selectors for example allow you to
- 00:24:53 select elements by the id they have
- 00:24:55 and then apply a style to that one
- 00:24:57 specific element since an id only exists
- 00:25:00 once on a page we only apply the style
- 00:25:02 to one single element
- 00:25:04 in html it would look something like
- 00:25:05 this here we have an h1 tag with an id
- 00:25:08 main title in this case the id of course
- 00:25:10 can be anything you want
- 00:25:11 and then in css you are targeted by
- 00:25:14 adding a hashtag
- 00:25:15 in front of the id name and then again
- 00:25:18 you define the rules so the declarations
- 00:25:20 for that rule to be precise
- 00:25:22 and this would turn this text read in
- 00:25:24 this snippet here
- 00:25:26 now the last type of selector of main
- 00:25:29 selectors you have
- 00:25:31 are attribute selectors there you select
- 00:25:34 html elements by the attribute they have
- 00:25:36 and this again can select multiple
- 00:25:38 elements unlike the id selector which
- 00:25:40 only selected one here you set
- 00:25:44 the equal style to all elements with the
- 00:25:46 same attributes
- 00:25:47 in html here we would have a button with
- 00:25:49 the disabled attribute
- 00:25:51 standard html button attribute you can
- 00:25:54 set
- 00:25:55 and in css you would select all buttons
- 00:25:58 or
- 00:25:58 all elements with the disabled attribute
- 00:26:01 by enclosing
- 00:26:03 the attribute name in square brackets
- 00:26:05 that's just the syntax
- 00:26:06 css uses and then assigning your
- 00:26:09 declarations
- 00:26:10 so this css code would assign a red text
- 00:26:13 to all elements no matter if there are
- 00:26:15 buttons or not which have a disabled
- 00:26:17 attribute
- 00:26:19 this is a little bit of theory we will
- 00:26:21 see all these selectors throughout the
- 00:26:23 course
- 00:26:24 thus far we only use the element
- 00:26:26 selector but maybe
- 00:26:27 one or multiple of the other selectors
- 00:26:30 can help us with our problem
- 00:26:32 of styling the things we have on our
- 00:26:34 page right now differently
- 00:26:36 so back in our code right now we only
- 00:26:38 use the element selector
- 00:26:39 section h1 these are element selectors
- 00:26:42 now i said i want to have different
- 00:26:43 styles
- 00:26:44 so for example what we could do is we
- 00:26:46 could assign ids
- 00:26:47 to these sections we could add an id
- 00:26:51 here to the first section and maybe name
- 00:26:53 it product
- 00:26:54 dash overview the name of the id is
- 00:26:57 totally up to you
- 00:26:58 now ids are not an attribute which you
- 00:27:01 only add because you want to
- 00:27:02 style the element ids also allow you to
- 00:27:05 add a hashtag at the end of your url
- 00:27:08 and the browser will immediately jump
- 00:27:09 down to that element
- 00:27:11 in the page so it will scroll down there
- 00:27:13 so to say but they can also be used for
- 00:27:15 styling as you will see
- 00:27:17 let's also assign an id to the second
- 00:27:19 section maybe let's call this one
- 00:27:21 plans because i plan on adding my
- 00:27:24 plans here so the plans the user may
- 00:27:26 choose from
- 00:27:27 so now we got two ids and this allows us
- 00:27:30 to
- 00:27:31 adjust our rules instead of selecting a
- 00:27:34 section
- 00:27:35 and setting the background to this color
- 00:27:38 i only want to do this for the first
- 00:27:40 section which has the id of product
- 00:27:42 overview
- 00:27:44 so let's copy that id name and let's
- 00:27:46 replace this
- 00:27:47 section element selector here with the
- 00:27:50 hashtag
- 00:27:51 product overview selector if we now save
- 00:27:54 both files so css and html
- 00:27:58 and we reload the page you see
- 00:28:01 the second one seems to be gone but
- 00:28:02 actually the text is just white still so
- 00:28:04 we don't see it
- 00:28:05 but the first one now is the only one
- 00:28:07 with the reddish background
- 00:28:09 this already shows us a big advantage of
- 00:28:11 using different selectors
- 00:28:13 the id selector only matches elements
- 00:28:15 with that id
- 00:28:16 and semantically an id should only occur
- 00:28:18 once on a page
- 00:28:19 so it only selects this section and
- 00:28:21 therefore only applies the styles there
- 00:28:24 now if we want to have a different style
- 00:28:26 for the second section
- 00:28:27 we could of course target it with that
- 00:28:30 plans id
- 00:28:31 however for the second section for now i
- 00:28:34 actually don't want to change the
- 00:28:36 section as a whole
- 00:28:37 adjust the h1 tag now there are actually
- 00:28:41 multiple ways
- 00:28:42 of getting access to this h1 tag in the
- 00:28:44 second section
- 00:28:46 one way we can do it is by adding a
- 00:28:49 class to the h1 tag
- 00:28:51 so let's add a class by adding the class
- 00:28:53 attribute and let's name it
- 00:28:55 section title again the class name is up
- 00:28:58 to you
- 00:28:58 though i do recommend that you pick
- 00:29:00 class names
- 00:29:02 which first of all use the kepup case so
- 00:29:04 where you have
- 00:29:05 lowercase names where the words are
- 00:29:07 separated with dashes
- 00:29:09 this is important because css is case
- 00:29:12 insensitive
- 00:29:13 so something like section title written
- 00:29:15 like this
- 00:29:16 which is readable to humans is the same
- 00:29:18 like section title
- 00:29:20 like this and therefore it can be harder
- 00:29:22 to
- 00:29:23 ensure you're not overwriting class
- 00:29:25 names hence kebab case is recommended
- 00:29:28 and the second thing which is important
- 00:29:30 about classes is
- 00:29:31 you can reuse them unlike ids you don't
- 00:29:34 just use them once
- 00:29:35 you can add them multiple times and a
- 00:29:38 class is always a good choice
- 00:29:40 if there is a decent chance of you
- 00:29:42 reusing it otherwise an id might maybe
- 00:29:44 be better
- 00:29:45 though you can always use classes if you
- 00:29:47 want
- 00:29:48 here i defined my class the name is up
- 00:29:51 to you
- 00:29:51 and with that we can go to the main.css
- 00:29:54 file
- 00:29:55 and i'll leave that h1 selector for now
- 00:29:58 but i'll also add a third selector now
- 00:30:01 with a dot at the beginning
- 00:30:02 and then the class name this is a
- 00:30:04 so-called class selector
- 00:30:06 and then in the rule set i'll add a
- 00:30:09 declaration
- 00:30:10 where i set the color to another color
- 00:30:14 here i'll use hashtag 2 ddf5c
- 00:30:19 another color i picked in advance it's a
- 00:30:21 nice green which will be our main theme
- 00:30:23 color of this project
- 00:30:25 if we now save both files css and html
- 00:30:28 and we reload the page now we actually
- 00:30:31 see
- 00:30:31 that the second h1 tag has that green
- 00:30:35 color
- 00:30:35 because we did use a different selector
- 00:30:39 now on the slide i showed you there were
- 00:30:41 other selectors too
- 00:30:42 and we will encounter these throughout
- 00:30:43 the course too but for now
- 00:30:46 this is a great first step when it comes
- 00:30:47 to ensuring that our things look
- 00:30:49 differently
- 00:30:50 these selectors we use right now the id
- 00:30:53 selector
- 00:30:53 the tag selector and the class selector
- 00:30:56 are already three very important
- 00:30:58 selectors
- 00:30:58 which you will see a lot in your css
- 00:31:02 code
- 00:31:08 in the last lecture we added different
- 00:31:10 selectors to ensure that our
- 00:31:12 second section and h1 tag doesn't look
- 00:31:15 like
- 00:31:16 our first one now maybe there's one
- 00:31:18 thing you did
- 00:31:19 wonder about we do set the h1 tag to
- 00:31:23 have a
- 00:31:23 white color and then we set the section
- 00:31:26 title class
- 00:31:27 to set a green color now actually both
- 00:31:30 selectors here
- 00:31:32 match our second h1 tag we still have
- 00:31:35 our h1 selector in place here
- 00:31:37 so it still selects the second h1 tag
- 00:31:39 too it doesn't stop
- 00:31:41 selecting it just because we added a
- 00:31:43 class
- 00:31:44 and then a class seems to overwrite this
- 00:31:46 now you could argue this happens
- 00:31:49 because the section title class is
- 00:31:52 defined
- 00:31:52 after the tag selector and as the file
- 00:31:55 probably is parsed from top to bottom
- 00:31:57 which it is this simply overrides the
- 00:32:00 previous rule
- 00:32:01 you would not be entirely wrong by this
- 00:32:04 though actually
- 00:32:05 if you switch the order just for demo
- 00:32:08 purposes here
- 00:32:09 and you reload the page you see that the
- 00:32:12 styling still applies
- 00:32:13 so the class still overwrites the h1
- 00:32:16 tags style
- 00:32:18 on the other hand if you quickly assign
- 00:32:21 the h1 tag again and set the font family
- 00:32:24 back to serif
- 00:32:25 and not to anton and now you save
- 00:32:28 and reload you see the h1 tags get
- 00:32:31 changed so the font did change
- 00:32:34 so the order does seem to matter but
- 00:32:35 only if you use the same
- 00:32:37 selector the class still overrides the
- 00:32:40 color so that's really strange
- 00:32:42 and there's one additional strange thing
- 00:32:44 if the class somehow
- 00:32:46 overwrites the styling for the h1 tag so
- 00:32:48 if it still sets the green color
- 00:32:51 why doesn't it also clear the font
- 00:32:53 family
- 00:32:54 now we set it back to serif manually
- 00:32:56 here with the second rule
- 00:32:57 but even before we did this and it
- 00:32:59 becomes clearer if we set this to
- 00:33:01 censeriff
- 00:33:02 like this now it's changed to sensor if
- 00:33:05 style but not back to anton
- 00:33:07 now you can still see the section title
- 00:33:09 doesn't seem to clear the font family
- 00:33:12 it clearly overrides the color but it
- 00:33:14 doesn't reset the font family
- 00:33:16 so it still keeps that style around
- 00:33:19 so two things are going on here multiple
- 00:33:23 rules seem to affect the same element
- 00:33:26 and
- 00:33:26 additionally the different rules here
- 00:33:29 seem to have different priorities
- 00:33:31 because otherwise how would we explain
- 00:33:33 that this section title class
- 00:33:35 overrides the color even though it comes
- 00:33:38 before
- 00:33:38 we set up the other rules now let's
- 00:33:41 explore what's going on here
- 00:33:42 and for that we'll use the developer
- 00:33:44 tools you can open the developer tools
- 00:33:47 by pressing command option i on mac or
- 00:33:50 f12 on windows
- 00:33:52 or you open it from the menu of your
- 00:33:54 browser here i'm talking about the
- 00:33:56 chrome developer tools by the way
- 00:33:58 now in the developer tools you get a
- 00:33:59 couple of options in case you never
- 00:34:01 worked with that
- 00:34:02 if you click on elements you see your
- 00:34:04 html codes are to say and you can
- 00:34:06 select elements by expanding and
- 00:34:08 clicking there
- 00:34:09 and then at the bottom you see which
- 00:34:11 styles are getting applied to these
- 00:34:12 elements
- 00:34:13 you can also select an element from
- 00:34:15 within your page by right clicking on it
- 00:34:17 and choosing inspect
- 00:34:18 this all the works of the developer
- 00:34:20 tools are closed they will open then
- 00:34:22 if they are opened it will just jump to
- 00:34:24 that element and select it
- 00:34:26 as you can see here and you can also
- 00:34:28 pick that
- 00:34:29 tool here on the top left of the
- 00:34:31 developer tools and now click on element
- 00:34:33 in your
- 00:34:34 dom to also quickly inspect it now if we
- 00:34:37 do that on that
- 00:34:38 h1 tag in our second section
- 00:34:41 and we bring this up a bit here we can
- 00:34:43 actually see which styles are getting
- 00:34:45 applied
- 00:34:46 and the list here has to be read from
- 00:34:48 top to bottom
- 00:34:49 with the topmost style taking the
- 00:34:52 highest priority
- 00:34:53 now there you see a couple of styles are
- 00:34:56 indeed getting applied
- 00:34:57 if you scroll down these are all styles
- 00:34:59 that are applied to that h1 tag
- 00:35:02 you see the topmost is actually an empty
- 00:35:04 style that would be the inline style if
- 00:35:06 you add the style attribute to the h1
- 00:35:08 tag
- 00:35:09 because it turns out that inline styles
- 00:35:11 have the highest priority
- 00:35:13 or this concept is also called
- 00:35:14 specificity to be precise
- 00:35:17 but then you see that the class selector
- 00:35:20 section tile appears
- 00:35:22 so it seems to have a higher specificity
- 00:35:25 than the h1 selectors which are coming
- 00:35:27 below it
- 00:35:28 you see two h1 selectors because we got
- 00:35:30 two in our css code
- 00:35:32 and if you watch closely you see the
- 00:35:34 second one
- 00:35:35 with just the font family censerif has a
- 00:35:37 higher
- 00:35:38 priority or specificity than the first
- 00:35:41 one
- 00:35:41 simply because it comes second in the
- 00:35:43 file and the file is parsed top to
- 00:35:44 bottom
- 00:35:45 but again as already recognized the
- 00:35:47 section title class
- 00:35:48 overwrites them both even though it
- 00:35:50 comes earlier in the file
- 00:35:52 but internally by the css
- 00:35:55 specification it seems to have a higher
- 00:35:57 specificity
- 00:35:58 and it does if you scroll down further
- 00:36:01 there also are some browser defaults for
- 00:36:03 that element and these have the lowest
- 00:36:05 priority they do apply though but you
- 00:36:07 can override them
- 00:36:09 and that is something we will also do
- 00:36:10 later so these are the styles which are
- 00:36:12 getting applied
- 00:36:14 the fact that we have multiple rules
- 00:36:15 affect the same
- 00:36:17 element is the cascading part
- 00:36:20 of the name of the feature we're using
- 00:36:23 here css stands for cascading style
- 00:36:25 sheets
- 00:36:26 and cascading simply means multiple
- 00:36:28 styles
- 00:36:29 can be applied or multiple rules can be
- 00:36:31 applied to the same element
- 00:36:33 now these rules may lead to conflicts
- 00:36:35 though
- 00:36:36 here for example we got our color set up
- 00:36:39 in the h1
- 00:36:40 tag and in the section title class
- 00:36:43 now to resolve such conflicts css knows
- 00:36:46 a concept called
- 00:36:47 specificity and there are clear rules
- 00:36:50 included in the css
- 00:36:51 specification that define how such
- 00:36:54 conflict should be resolved
- 00:36:55 and which type of selector has a higher
- 00:36:58 specificity now here's an overview
- 00:37:02 as i said cascading means multiple rules
- 00:37:04 are applied to the same element
- 00:37:06 specificity resolves conflicts arising
- 00:37:09 from that
- 00:37:09 fact and specificity then simply has
- 00:37:12 the following order the tag selector and
- 00:37:15 also pseudoelement selectors which we
- 00:37:17 haven't had a look at yet but which we
- 00:37:19 will see in the course
- 00:37:20 have the lowest priority the lowest
- 00:37:22 specificity
- 00:37:23 well actually the universal selector
- 00:37:25 that star has the lowest priority
- 00:37:27 but you rarely use that so tag
- 00:37:30 selectors have the lowest one then a
- 00:37:32 higher specificity
- 00:37:34 is assigned to class and pseudo class as
- 00:37:37 well as
- 00:37:37 attribute selectors so these three are
- 00:37:39 all in the same level and if we then
- 00:37:41 have
- 00:37:42 two conflicts here simply the latter one
- 00:37:44 and the same followings
- 00:37:46 just as we had it for the two h1 tags in
- 00:37:48 our css file
- 00:37:49 now pseudo classes are also something
- 00:37:51 we'll see later in the course
- 00:37:53 this is something like controlling hover
- 00:37:55 effects on an element
- 00:37:56 so if you mouse over it a higher
- 00:38:00 specificity is assigned
- 00:38:01 to id selectors so if an element has a
- 00:38:04 tag
- 00:38:05 a class and an id selector and they all
- 00:38:07 set the color of that element
- 00:38:09 the id selector would actually win no
- 00:38:11 matter where it is positioned in the css
- 00:38:13 file
- 00:38:15 the highest priority however is assigned
- 00:38:17 to inline styles
- 00:38:18 we saw that earlier but we shouldn't use
- 00:38:20 them but if you add them
- 00:38:22 they will actually overwrite all other
- 00:38:25 styles
- 00:38:25 they have the highest specificity now
- 00:38:28 there are more rules connected to
- 00:38:30 specificity some advanced things
- 00:38:31 connected to things like
- 00:38:32 inheritance which we hadn't looked at
- 00:38:34 yet but
- 00:38:36 these rules here are important to keep
- 00:38:38 in mind
- 00:38:39 tag selectors have the lowest
- 00:38:41 specificity inline styles have the
- 00:38:43 highest
- 00:38:44 now this doesn't mean that you should
- 00:38:45 always use inline styles it just means
- 00:38:47 you should be aware of this
- 00:38:49 and you should style your page cleverly
- 00:38:51 by actually using
- 00:38:53 all these types of selectors maybe
- 00:38:55 without inline styles though
- 00:38:56 and simply be aware of how they override
- 00:38:59 each other and it's actually not hard to
- 00:39:01 work with these correctly
- 00:39:02 and we will do it throughout the entire
- 00:39:04 project so there is a lot of space for
- 00:39:06 you to practice it
- 00:39:08 so back to code then let's see how this
- 00:39:11 actually
- 00:39:12 has an impact in reality and what else
- 00:39:14 is connected to this concept
- 00:39:22 so we explored specifically in the last
- 00:39:24 lecture you had that
- 00:39:26 slide where i showed it to you and with
- 00:39:29 that it's clear
- 00:39:30 why the second text is actually green
- 00:39:33 and why it is sans-serif
- 00:39:35 now let's get rid of that censerif style
- 00:39:37 here the h1 tag
- 00:39:39 we don't need it i'll comment it out and
- 00:39:41 if i now reload it we got anton back
- 00:39:44 we still have the green color because of
- 00:39:45 that specificity thing
- 00:39:47 now there is something else related to
- 00:39:49 all of that
- 00:39:50 and this is called inheritance now
- 00:39:53 inheritance means that an element
- 00:39:57 also inherits some styles of the parent
- 00:40:01 element
- 00:40:02 we don't use inheritance in our project
- 00:40:04 yet
- 00:40:05 so let's add it to the project
- 00:40:08 and let's add it by setting a global
- 00:40:11 default
- 00:40:11 font so that the text in our project has
- 00:40:14 a global font
- 00:40:16 i actually don't want to use anton for
- 00:40:19 all the h1 tags
- 00:40:21 and therefore to ensure that this and
- 00:40:23 other texts on the page
- 00:40:24 and we will add more text have a
- 00:40:26 different font we should set up a global
- 00:40:29 rule
- 00:40:30 now for one we could of course add the
- 00:40:32 star selector to give
- 00:40:34 any element a certain look there we
- 00:40:36 could set a font family
- 00:40:38 of sen serif like this and if we save
- 00:40:41 this and reload
- 00:40:43 well you would see we still have ant on
- 00:40:45 here because the h1 tag
- 00:40:47 comes second so let's move the star
- 00:40:50 selector after the h1 tag and save
- 00:40:53 and reload and we still have anton
- 00:40:56 because if we inspect it we see
- 00:40:58 the star selector has the lowest
- 00:40:59 priority
- 00:41:01 now this actually is something which
- 00:41:03 would not be the problem here
- 00:41:05 the problem with the star selector is
- 00:41:07 that it's very inefficient
- 00:41:08 the way css has now to parse all our
- 00:41:11 elements on the screen
- 00:41:13 so we will use it but not for a global
- 00:41:16 font
- 00:41:16 family for that you instead typically
- 00:41:20 use something different
- 00:41:21 you style the body keep in mind the body
- 00:41:25 wraps all your other content
- 00:41:27 so if you set a certain style on the
- 00:41:29 body maybe it will also change the style
- 00:41:31 of your upper elements
- 00:41:33 so for the body we can set a font family
- 00:41:38 and actually i don't want to use censerv
- 00:41:39 but another google font so let's quickly
- 00:41:41 head there
- 00:41:43 and i want to use montserrat simply
- 00:41:46 click on the plus again
- 00:41:48 then expand this and here i'll quickly
- 00:41:50 also go to customize
- 00:41:52 and add the bold version of the font by
- 00:41:55 clicking bold
- 00:41:56 and if i now go back to embed here's the
- 00:41:58 adjusted import
- 00:41:59 simply grab that link go back to your
- 00:42:01 project
- 00:42:02 and add it below or in front of the
- 00:42:04 other
- 00:42:05 font import and now we can use that font
- 00:42:09 family here too so let's copy that rule
- 00:42:11 let's close the tab
- 00:42:12 and in main css i'll assign this to my
- 00:42:14 body
- 00:42:16 now if we save this and reload again no
- 00:42:19 change however this is a better way of
- 00:42:22 doing this because it's more efficient
- 00:42:24 and theoretically it would get applied
- 00:42:27 to that h1 style here
- 00:42:30 if you scroll down in the applied styles
- 00:42:34 and you go below the browser default
- 00:42:38 you will actually see that inherited
- 00:42:39 from body section
- 00:42:41 and elements inherit styles from their
- 00:42:44 parents
- 00:42:45 direct or indirect parents and not just
- 00:42:47 from the body
- 00:42:48 the body clearly is no direct parent of
- 00:42:50 h1 but it is apparent
- 00:42:52 in the chain of elements here and
- 00:42:55 therefore
- 00:42:56 some styles not all there are exceptions
- 00:42:58 but
- 00:42:59 we'll dive into this later some styles
- 00:43:01 especially the font related styles
- 00:43:04 are passed down to charles however
- 00:43:07 inheritance has a very low
- 00:43:08 specificity inheritance always comes at
- 00:43:11 the bottom
- 00:43:12 even below the browser defaults put in
- 00:43:15 other words
- 00:43:16 styles that are applied because an
- 00:43:18 element is selected directly
- 00:43:20 be that through an element selector a
- 00:43:22 class selector an id selector
- 00:43:24 the universal selector an attribute
- 00:43:26 selector
- 00:43:27 whenever you directly select an element
- 00:43:30 this has a higher specificity
- 00:43:32 than inheritance where you don't
- 00:43:34 directly select an element
- 00:43:36 however if we were to add
- 00:43:39 a paragraph here in the index.html file
- 00:43:42 maybe in the second section below the h1
- 00:43:44 tag
- 00:43:46 where we say make sure you get
- 00:43:49 the most for your money
- 00:43:53 if we add this and now reload the page
- 00:43:56 and we inspect this paragraph you
- 00:43:59 actually see
- 00:44:00 it does have that style being applied
- 00:44:03 it's not strikethrough it's not
- 00:44:05 overwritten
- 00:44:06 and therefore monsterat is applied here
- 00:44:08 and you can check this by quickly
- 00:44:09 ticking this style off by clicking the
- 00:44:11 checkbox
- 00:44:12 now it changed back to times to the
- 00:44:14 browser default and now it's back to
- 00:44:16 monstera
- 00:44:17 so inheritance is an important concept
- 00:44:19 for passing styles down
- 00:44:21 without explicitly selecting an element
- 00:44:24 and especially for things like font
- 00:44:25 sizes
- 00:44:26 font families this is extremely useful
- 00:44:28 because you
- 00:44:29 typically want to have one at the same
- 00:44:31 style for the majority of your text on
- 00:44:33 your screen
- 00:44:34 and therefore setting this up in the
- 00:44:36 body section is a great way
- 00:44:38 as it will then make sure you can use
- 00:44:40 inheritance
- 00:44:41 again that's not limited to the body
- 00:44:43 section it works with any parent
- 00:44:44 but if you want to have it for the
- 00:44:46 entire page the body section obviously
- 00:44:48 is a great place
- 00:44:50 important though inheritance works but
- 00:44:53 any direct selector has a higher
- 00:44:56 specificity and therefore will overwrite
- 00:44:58 your inheritance
- 00:44:59 if it defines the same property as we do
- 00:45:02 here
- 00:45:02 with the font family anton on the h1 tag
- 00:45:12 so we saw the concept of inheritance in
- 00:45:15 action
- 00:45:16 how can we now ensure that our choose
- 00:45:19 your plan h1 tag
- 00:45:21 actually doesn't get the same style as
- 00:45:25 the h1 tag in the first section in the
- 00:45:28 product overview
- 00:45:30 now we get that same style we get
- 00:45:32 antennae white color
- 00:45:34 which we override with the class but not
- 00:45:36 the font family we get it because of
- 00:45:38 that h1 selector
- 00:45:39 we can verify this if we inspect that h1
- 00:45:42 tag the green one
- 00:45:43 here you can see the h1 selector is
- 00:45:45 passing this font family
- 00:45:47 i don't want that i want to use the
- 00:45:49 default one
- 00:45:51 since i want to use the default there
- 00:45:53 are two ways of solving this
- 00:45:55 the first one is that we also go to
- 00:45:58 section title and set font family
- 00:46:01 to inherit this is a special keyword
- 00:46:04 which simply means
- 00:46:05 please use the inherited style basically
- 00:46:08 you can think of that
- 00:46:10 increasing the specificity of
- 00:46:12 inheritance
- 00:46:13 for that specific property only though
- 00:46:15 this will work since we have section
- 00:46:17 title on the second h1 tag so if we save
- 00:46:20 this we
- 00:46:21 can reload the page and now we actually
- 00:46:23 get a different style here
- 00:46:25 if you inspect this now you see font
- 00:46:27 family inherit is taking effect and
- 00:46:29 that actually is monstera as you can see
- 00:46:31 if you tick it off even though that
- 00:46:33 seems to be not used
- 00:46:35 it actually is because of the inherit
- 00:46:36 keyword but this is not necessarily the
- 00:46:39 best way
- 00:46:40 if we ever have another h1 tag which
- 00:46:43 maybe has a different class but also
- 00:46:45 should use the
- 00:46:46 default font family we have to add font
- 00:46:49 family inherit on that class too
- 00:46:52 would be nicer if we could do the
- 00:46:54 opposite and simply say
- 00:46:56 hey this h1 tag in the first section
- 00:46:59 that should be the only one that gets
- 00:47:01 this font family instead of
- 00:47:03 all h1 tags by default so instead of
- 00:47:07 excluding anything that does not get it
- 00:47:10 we should simply
- 00:47:11 only include this first h1 tag
- 00:47:14 now of course one way of doing that
- 00:47:16 would be to simply assign a class or id
- 00:47:18 to that h1 tag
- 00:47:20 so we could name this first
- 00:47:23 section title but that's a really dumb
- 00:47:25 class name
- 00:47:26 because it's probably not getting reused
- 00:47:29 so
- 00:47:30 a class might not be the best choice and
- 00:47:33 if we ever add our first section we
- 00:47:35 should rename this to second section as
- 00:47:36 it wouldn't make sense otherwise
- 00:47:38 now we could turn it to an id and now
- 00:47:40 the reusing thing wouldn't be a problem
- 00:47:43 an id wouldn't be super bad here but
- 00:47:46 we already have an idea on the section
- 00:47:48 semantically maybe we don't want to add
- 00:47:50 one here
- 00:47:50 and still we have the naming issue so
- 00:47:53 one other thing we can use is a
- 00:47:54 so-called
- 00:47:55 combinator a combinator allows us to
- 00:47:58 combine multiple selectors
- 00:48:00 to be more precise about what we want to
- 00:48:02 select
- 00:48:03 we can add a combinator to that h1
- 00:48:06 selector
- 00:48:07 to narrow down which type of h1 tags we
- 00:48:10 want to select
- 00:48:11 we can say we want to select any h1 tag
- 00:48:15 that is inside of an element
- 00:48:18 with the id product overview so in our
- 00:48:21 app
- 00:48:21 that is inside of that first section
- 00:48:24 we add such a combinator by
- 00:48:28 or we combine the selectors so to say by
- 00:48:31 adding
- 00:48:31 the average selector that matters to us
- 00:48:33 in our case this id
- 00:48:35 selector we added in front of the h1 tag
- 00:48:39 so this can be read as any h1 tag
- 00:48:42 inside of product overview and actually
- 00:48:45 h1 doesn't have to be a direct child
- 00:48:47 there could be elements in between so
- 00:48:49 you could have a wrapping div that would
- 00:48:51 still work
- 00:48:52 i'll quickly add one for demo purposes
- 00:48:55 if you save this now
- 00:48:57 and you reload the page you see
- 00:49:01 you got the same styles as before even
- 00:49:04 if you go back to main css and remove
- 00:49:06 the font family inherit
- 00:49:08 property declaration from section title
- 00:49:11 so even if you remove that and you
- 00:49:12 reload the page
- 00:49:14 you will see the second h1 tag still has
- 00:49:17 a different font
- 00:49:18 because now if you inspect the first one
- 00:49:20 only this one gets the font family anton
- 00:49:23 because now here we have a selector
- 00:49:26 that only targets h1 elements that are
- 00:49:29 nested
- 00:49:29 somewhere inside an element which has
- 00:49:31 the product overview id
- 00:49:33 which of course only is the case for our
- 00:49:35 first section in our app here
- 00:49:38 now again the dev here was only used to
- 00:49:40 demonstrate that it doesn't have to be a
- 00:49:42 direct
- 00:49:43 child we can remove it and it will of
- 00:49:45 course still work
- 00:49:47 and what we're using here is a so-called
- 00:49:50 combinator
- 00:49:51 because we combine multiple selectors
- 00:49:54 as a side note if you use combinators
- 00:49:56 you also create a
- 00:49:58 higher specificity so if you still had a
- 00:50:00 h1 tag
- 00:50:01 after that let's reintroduce the old one
- 00:50:04 with senserif
- 00:50:06 then you should still see that anton
- 00:50:08 gets applied
- 00:50:09 let me show this to you by reloading the
- 00:50:11 page if you inspect the first font here
- 00:50:14 the first h1 tag
- 00:50:15 you see we still have font family anton
- 00:50:18 because our
- 00:50:19 hashtag product overview h1 selector
- 00:50:22 has a higher specificity as you can tell
- 00:50:24 by the order in the developer tools
- 00:50:26 than just the h1 tag even though the h1
- 00:50:29 tag comes second
- 00:50:31 so it comes later in the file but and
- 00:50:33 that is the last important piece about
- 00:50:35 specificity
- 00:50:37 the rule with more information to it so
- 00:50:40 to say
- 00:50:41 and this has more information because we
- 00:50:43 narrowed down which h1 tags we want to
- 00:50:45 stall the rule with more information
- 00:50:48 like this one
- 00:50:49 wins over rules with less information
- 00:50:51 like this one
- 00:50:52 so the more specific rule has a higher
- 00:50:55 specificity
- 00:50:55 makes sense i guess also don't mistake
- 00:50:58 this with inheritance we're not
- 00:51:00 inheriting a style from product overview
- 00:51:02 here
- 00:51:02 we're setting a style only for h1 tags
- 00:51:05 that happen to be inside product
- 00:51:07 overview it's not the same as
- 00:51:08 inheritance
- 00:51:09 because this is not passed down
- 00:51:11 automatically we're explicitly selecting
- 00:51:13 h1 tags here
- 00:51:15 so this is the last piece about
- 00:51:17 specificity and this is
- 00:51:18 what combinators are now there are more
- 00:51:21 combinators
- 00:51:22 let's explore them in the next video
- 00:51:30 in the last lecture we had a first look
- 00:51:33 at combinators
- 00:51:34 add one combinator to be precise now
- 00:51:36 there are more combinators
- 00:51:38 four very important ones to be precise
- 00:51:41 now combinators allow us to be
- 00:51:44 more clear about our rules and select
- 00:51:48 elements by passing more information to
- 00:51:50 the selector
- 00:51:52 now you can combine multiple selectors
- 00:51:54 not just two as a side note
- 00:51:55 and as i mentioned you can combine them
- 00:51:57 with four important types of combinators
- 00:52:00 the first one is the adjacent sibling
- 00:52:02 combinator
- 00:52:03 the second one is the general sibling
- 00:52:05 combinator
- 00:52:06 then we have the child combinator and
- 00:52:08 the descendant combinator
- 00:52:10 now how do they look like here are some
- 00:52:12 css snippets
- 00:52:14 the first one the adjacent sibling is
- 00:52:17 added by adding
- 00:52:18 a plus between the selectors you want to
- 00:52:20 combine
- 00:52:21 and again these could be more than two
- 00:52:23 you could add more to this list so it
- 00:52:25 could be diff plus p
- 00:52:26 plus a to select anchor tags that are
- 00:52:29 well connected to the paragraph and diff
- 00:52:31 but how are they connected
- 00:52:33 that's something we'll explore in just a
- 00:52:34 second general sibling uses the tilde
- 00:52:37 sign here between the
- 00:52:38 selectors we want to combine child uses
- 00:52:41 a greater than sign
- 00:52:42 and descendant uses a white space this
- 00:52:45 is the one we used in the last lecture
- 00:52:47 now what do they do in detail the
- 00:52:49 adjacent sibling selector
- 00:52:51 simply is defined like this again you
- 00:52:53 could as for all selectors combine
- 00:52:55 multiple ones
- 00:52:56 and it simply assigns a style as shown
- 00:53:00 in this example
- 00:53:01 here we set a red color it assigns it to
- 00:53:04 all
- 00:53:04 paragraphs that directly follow a h2
- 00:53:07 tag which is why the first and last
- 00:53:10 paragraph get the red color here
- 00:53:12 and the second one doesn't because the
- 00:53:14 second one follows
- 00:53:15 h3 tag which is in between the h2 tag
- 00:53:18 and the paragraph
- 00:53:18 and therefore it's not a direct sibling
- 00:53:20 of the h2 tag
- 00:53:22 the plus requires a direct sibling ship
- 00:53:24 so to say though
- 00:53:25 and therefore only direct siblings get
- 00:53:27 the red color now if you were to combine
- 00:53:29 more than two selectors
- 00:53:31 so h2 plus p plus a then only
- 00:53:34 anchor tags next to paragraphs that are
- 00:53:37 next to h2 tags
- 00:53:39 would get the red color so elements have
- 00:53:42 to share the same parent here that's
- 00:53:43 also an important thing to keep in mind
- 00:53:45 they have to be on the same level
- 00:53:47 and the second element or third or
- 00:53:48 whatever you're selecting
- 00:53:50 has to come immediately after the first
- 00:53:52 or second whatever you're selecting
- 00:53:54 element the general sibling
- 00:53:58 selector is connected to that but more
- 00:54:00 flexible
- 00:54:01 it looks like this this is the syntax
- 00:54:03 and here's a code snippet
- 00:54:05 here all paragraphs get the red color
- 00:54:08 even though the second one doesn't
- 00:54:09 directly follow ih2 tag
- 00:54:12 for the general sibling it's only
- 00:54:14 important that there is a h2
- 00:54:16 sibling doesn't have to be directly in
- 00:54:19 front of it
- 00:54:20 just a h2 element on the same level
- 00:54:23 as the paragraph in this case this is
- 00:54:25 the general sibling
- 00:54:27 so important thing here you have to have
- 00:54:29 the same parent
- 00:54:30 and the second element comes after the
- 00:54:32 first one but doesn't have to come
- 00:54:34 directly after it
- 00:54:36 the child combinator uses that greater
- 00:54:38 sign and that rule
- 00:54:40 would change the following html code to
- 00:54:43 have a red color
- 00:54:44 on the first and last paragraph but not
- 00:54:47 on the one
- 00:54:48 which is nested inside the article
- 00:54:50 because this
- 00:54:51 child combinator says any paragraph
- 00:54:54 that is a direct child of a div should
- 00:54:57 get that style
- 00:55:00 now again you can use multiple here not
- 00:55:02 just two
- 00:55:03 you could also say anchor tag inside a
- 00:55:06 paragraph
- 00:55:07 inside a div where each element is a
- 00:55:09 direct child of the other
- 00:55:11 should get a certain style and that
- 00:55:13 allows you to
- 00:55:14 be very precise about which charts you
- 00:55:16 want to target
- 00:55:17 this is not the combinator we used in
- 00:55:19 the last lecture because there i showed
- 00:55:21 you
- 00:55:22 that it doesn't matter if you have a
- 00:55:23 direct parent or not
- 00:55:25 so this only applies styles if you are a
- 00:55:28 direct
- 00:55:28 child of an element the last one which
- 00:55:32 is the one we used as the descendant
- 00:55:34 combinator just a white space and here
- 00:55:37 the level on which you are doesn't
- 00:55:40 matter
- 00:55:40 here in this example all paragraphs
- 00:55:43 get the red color no matter if they are
- 00:55:46 a direct child to the div or
- 00:55:48 not simply because here it just matters
- 00:55:51 that there is a div
- 00:55:52 somewhere above them in the dom so to
- 00:55:55 say
- 00:55:55 doesn't have to be a direct parent so
- 00:55:57 the second element is just a descendant
- 00:55:59 of the first element
- 00:56:00 not a direct child now this
- 00:56:03 probably is the combinator you use most
- 00:56:06 often
- 00:56:07 important about combinators definitely
- 00:56:09 use them if they allow you to be more
- 00:56:11 precise
- 00:56:12 but you should be aware that direct
- 00:56:14 selectors without
- 00:56:16 combinators are showing a little bit of
- 00:56:18 a better performance
- 00:56:20 that being said it's not like
- 00:56:21 combinators are super bad
- 00:56:23 and it also matters on what you combine
- 00:56:25 in our code for example
- 00:56:27 this combinator here has a pretty good
- 00:56:29 performance
- 00:56:30 because we're very clear about the
- 00:56:32 element it would be worse if we had to
- 00:56:34 start for example
- 00:56:35 and we're then using an id which has
- 00:56:38 awesome performance because there aren't
- 00:56:40 many ids on the
- 00:56:41 page by the way performance for classes
- 00:56:43 is also pretty great
- 00:56:45 so classes ids these have great
- 00:56:47 performance combinators which use them
- 00:56:49 also tend to do pretty good so
- 00:56:52 combinators can be really helpful
- 00:56:54 this one is probably the combinator you
- 00:56:56 use most often
- 00:56:57 and they allow you to really ensure that
- 00:57:00 you only style the elements
- 00:57:02 in the parts of your app where you want
- 00:57:04 to style them
- 00:57:05 let me comment this out again and let's
- 00:57:10 continue
- 00:57:15 in this course module we set some
- 00:57:17 important foundations about the way
- 00:57:19 css works and we work with selectors
- 00:57:22 properties and values
- 00:57:23 now just to bring this back into memory
- 00:57:26 selectors are things like
- 00:57:28 div class blog post id main title
- 00:57:31 the disabled attribute or the universal
- 00:57:34 selector
- 00:57:34 properties are things like background
- 00:57:36 color we haven't seen that we used
- 00:57:37 background
- 00:57:39 it's connected to that of course though
- 00:57:41 with color margin display here are also
- 00:57:44 a couple of properties we haven't used
- 00:57:45 before
- 00:57:46 we will use them throughout the course
- 00:57:48 values then are things like red
- 00:57:50 percentages colors and hex codes pixels
- 00:57:54 or clearly defined values like block
- 00:57:58 again these are things we will also see
- 00:58:01 throughout this
- 00:58:02 course now if you're wondering how do
- 00:58:04 you know
- 00:58:05 which properties and which values exist
- 00:58:08 let me start with the properties if you
- 00:58:11 google for
- 00:58:12 mdn css reference or you use the link
- 00:58:15 you find in the last lecture of this
- 00:58:16 module
- 00:58:17 you will find this page where you got a
- 00:58:20 basic explanation of the css syntax
- 00:58:22 and where you then got this keyword
- 00:58:23 index here you see
- 00:58:25 not just the properties css knows but
- 00:58:28 all the things like all
- 00:58:29 pseudo classes and elements something we
- 00:58:31 hadn't had a look at yet
- 00:58:33 and this is a great way to finding that
- 00:58:35 specific property
- 00:58:36 you're looking for or finding more
- 00:58:38 information about that property
- 00:58:40 you found in the solution on stack
- 00:58:42 overflow but which you don't fully
- 00:58:44 understand
- 00:58:46 now please here's one thing you should
- 00:58:47 not do don't
- 00:58:49 learn this list by heart it's way too
- 00:58:52 long
- 00:58:53 there are properties you don't use at
- 00:58:55 all and in the end
- 00:58:57 once you made it through that course and
- 00:58:59 once you start working on
- 00:59:00 project with css you will see that you
- 00:59:04 use the same set of maybe 20 properties
- 00:59:07 all the time and it's really hard to
- 00:59:09 memorize these
- 00:59:10 so this is a great reference but not
- 00:59:13 something you should start learning
- 00:59:14 right now
- 00:59:15 just want to point you to it so that you
- 00:59:17 do always know where you can look things
- 00:59:19 up
- 00:59:20 now what about the values though for one
- 00:59:23 in the reference i just showed you if
- 00:59:25 you click on a specific property
- 00:59:27 you also see how you can configure it
- 00:59:29 and which values it will accept
- 00:59:32 because values are tightly coupled to
- 00:59:34 specific properties
- 00:59:35 you can roughly categorize the types of
- 00:59:38 values
- 00:59:39 into four categories though there are a
- 00:59:41 bit
- 00:59:42 more some special cases but here are the
- 00:59:44 four categories i came up with
- 00:59:47 you get properties that simply use
- 00:59:49 predefined options
- 00:59:50 something like display block we didn't
- 00:59:52 learn about this property yet
- 00:59:54 but this simply is a property it doesn't
- 00:59:55 use a hex code it doesn't use a number
- 00:59:58 it just accepts a couple of predefined
- 01:00:00 values
- 01:00:01 overflow auto would be another example
- 01:00:04 then you have colors they work with red
- 01:00:08 a hex code or a shorter version of the
- 01:00:11 hex code
- 01:00:12 and also some special color functions
- 01:00:15 something will also dive in later then
- 01:00:17 we got
- 01:00:18 length sizes and numbers something like
- 01:00:20 pixels
- 01:00:21 or percentages or just integers
- 01:00:26 again all these properties will see them
- 01:00:28 a couple of times throughout the entire
- 01:00:30 course
- 01:00:31 and last but not least we got functions
- 01:00:35 something like a url where we seem to be
- 01:00:38 using something different than just a
- 01:00:39 color as a background
- 01:00:41 or transformation functions where we can
- 01:00:44 scale or rotate elements
- 01:00:45 something we'll cover in the
- 01:00:46 transformation module and of course
- 01:00:48 there are more values
- 01:00:50 again the reference holds them all and
- 01:00:52 you will see way more in this course
- 01:00:54 just wanted to round this up by letting
- 01:00:56 you know where you can find more
- 01:00:58 information
- 01:00:59 and how this generally works
- 01:01:07 so that's it for this module here's what
- 01:01:09 you learned
- 01:01:10 you learned that css works with rules
- 01:01:12 which look like this you have a selector
- 01:01:14 a property and a value for the property
- 01:01:18 you learned that there are different
- 01:01:19 types of selectors element selectors
- 01:01:21 like h1
- 01:01:22 class selectors with custom created
- 01:01:24 classes
- 01:01:26 attribute selectors which we haven't
- 01:01:27 used yet but which we at least touched
- 01:01:29 on
- 01:01:30 id selectors with custom ids and the
- 01:01:33 universal
- 01:01:34 star selector you learned that there are
- 01:01:37 many
- 01:01:37 properties and values that you can find
- 01:01:40 a complete list on the mozilla developer
- 01:01:42 network
- 01:01:42 mdn and there are different types of
- 01:01:45 values
- 01:01:45 and we will explore way more properties
- 01:01:47 and values throughout the course
- 01:01:49 we had a look at selectors and
- 01:01:51 combinators so that you can combine
- 01:01:54 multiple selectors to be more precise
- 01:01:56 about which element you want to select
- 01:01:58 you learned about these four and you
- 01:02:01 learned very important about inheritance
- 01:02:03 and specificity
- 01:02:04 you learned that parent styles are
- 01:02:06 generally inherited though there are
- 01:02:07 exceptions
- 01:02:09 you learned that multiple rules can
- 01:02:10 apply to one at the same element
- 01:02:12 and that specificity is used to resolve
- 01:02:14 conflicts arising from this
- 01:02:16 multiple rules thing you also learned
- 01:02:19 that the inheritance defaults
- 01:02:21 can be changed by using that inherit
- 01:02:24 keyword that inherit value you remember
- 01:02:26 when we set font family to a value of
- 01:02:28 inherit
- 01:02:29 then we overwrite the general behavior
- 01:02:32 that we would not
- 01:02:33 inherit because of specificity and we
- 01:02:35 did inherit so that is something which
- 01:02:37 can be changed
- 01:02:39 this is what we learned thus far now
- 01:02:41 we'll dive way deeper into all of that
- 01:02:43 and we'll continue working on our web
- 01:02:45 page which
- 01:02:46 still doesn't look super amazing i'll
- 01:02:48 have to admit
- 01:02:49 but these were very important
- 01:02:51 foundations
- 01:02:53 on which we can now build up to dive
- 01:02:55 deeper into the internals of css
- 01:02:57 and see how it works and then
- 01:03:00 also to well continue working on our web
- 01:03:03 page
- 01:03:04 so let's continue
- 01:03:11 welcome to another module let's dive
- 01:03:13 deeper into css
- 01:03:15 and if we were to give this module a
- 01:03:17 different title
- 01:03:18 it would probably be working with boxes
- 01:03:22 and after this module you'll also know
- 01:03:24 why
- 01:03:25 specifically we'll dive into the box
- 01:03:28 model
- 01:03:28 a core part of css really easy to
- 01:03:31 understand thankfully
- 01:03:32 but really important to know too so that
- 01:03:34 is what we'll start with
- 01:03:36 we'll then have a look at how we can
- 01:03:38 actually change the height and width
- 01:03:40 of elements we'll have a look at the
- 01:03:42 display property which helps us with
- 01:03:45 layouting our page and positioning
- 01:03:47 elements next to each other for example
- 01:03:50 and we'll also dive into properties
- 01:03:52 worth to remember
- 01:03:54 i mentioned that there is this complete
- 01:03:56 reference of properties and css features
- 01:03:58 which you can always consult if you want
- 01:04:00 to dive deeper
- 01:04:02 but there also is a common set of
- 01:04:04 properties you work with a lot
- 01:04:06 so i want to share some of the
- 01:04:08 properties i personally
- 01:04:09 find to be the most important ones and
- 01:04:12 finally
- 01:04:13 we'll have a look at these pseudo
- 01:04:15 classes and elements i already mentioned
- 01:04:17 in the last course section
- 01:04:19 now we'll learn what they are and what
- 01:04:21 you can do with them
- 01:04:22 so with that let's just get started and
- 01:04:24 let's continue working
- 01:04:26 on our web page
- 01:04:33 so let's continue working on this
- 01:04:34 webpage and i want to continue with this
- 01:04:37 red block right now it doesn't look
- 01:04:39 super impressive
- 01:04:41 would be nice if it were a little bit
- 01:04:44 bigger
- 01:04:44 had more height maybe some spacing
- 01:04:47 inside of it
- 01:04:48 and also that white space around it i
- 01:04:51 want to get rid of that
- 01:04:52 too until we add a navigation bar this
- 01:04:55 red block should be
- 01:04:56 the very first element on our page
- 01:04:58 without surrounding white space
- 01:05:01 now we can achieve this we can add all
- 01:05:04 these things we can control
- 01:05:06 how the block is designed or
- 01:05:09 how much space it takes up by working
- 01:05:13 with the box
- 01:05:14 model now what do i mean with that every
- 01:05:17 element
- 01:05:18 in html is interpreted as a
- 01:05:22 box by css and you can see that box in
- 01:05:25 the chrome developer tools
- 01:05:27 if you inspect that element and again
- 01:05:28 you can really select any element
- 01:05:30 so here i selected the h1 element now
- 01:05:33 let's pick the
- 01:05:34 section element but again any would do
- 01:05:36 it
- 01:05:37 and if you then at the bottom scroll
- 01:05:40 down
- 01:05:40 below your styles and the inherited
- 01:05:43 styles
- 01:05:43 you'll see this box this is how css
- 01:05:48 thinks about an element every element
- 01:05:51 has a content that's the blue area
- 01:05:54 that's really what's inside of it so for
- 01:05:56 the section
- 01:05:57 the content actually is the h1 tag for
- 01:06:00 the h1 tag
- 01:06:01 the content is its text so we got that
- 01:06:04 content
- 01:06:04 the blue area and then we can add a
- 01:06:07 padding
- 01:06:08 now we got none here indicated by that
- 01:06:10 dash
- 01:06:11 but we could add a padding which is some
- 01:06:14 internal space within that section
- 01:06:17 element from the content
- 01:06:19 to the next part the border
- 01:06:22 we can add a border to each element now
- 01:06:25 we don't have a border here so we'll add
- 01:06:27 all these things in just a second of
- 01:06:28 course
- 01:06:29 a border surrounds an element and
- 01:06:32 directly comes
- 01:06:33 after the padding which in turn comes
- 01:06:35 directly after the content
- 01:06:38 now finally we sometimes also want to
- 01:06:39 have some spacing around an element
- 01:06:42 and that would be the margin it's not
- 01:06:45 part of the core element
- 01:06:46 that ends with the border including the
- 01:06:48 border but it comes after that
- 01:06:51 it's the distance you have between that
- 01:06:53 element and its next sibling
- 01:06:56 for example the h1 element has a margin
- 01:06:58 by default it's set by the browser
- 01:07:00 you can see this if you scroll up to the
- 01:07:02 browser defaults there you have that
- 01:07:04 strange
- 01:07:05 margin before and after thing well
- 01:07:07 that's just a default browser margin
- 01:07:09 and there you can see this element
- 01:07:11 happens to have a margin of 19.92 pixels
- 01:07:14 to the top
- 01:07:15 and bottom that's this orange area which
- 01:07:17 is also indicated
- 01:07:18 on the top left corner so here in the
- 01:07:21 loaded page
- 01:07:23 as you can see already the margin goes
- 01:07:25 outside of the surrounding section
- 01:07:27 container
- 01:07:28 because it's not part of the element
- 01:07:30 which in turn is the content of the
- 01:07:32 section
- 01:07:32 now since the margin is not part it's
- 01:07:34 not part of the content and therefore
- 01:07:36 not part of the section
- 01:07:38 this is the box model these layers
- 01:07:41 the content the padding the border the
- 01:07:43 margin
- 01:07:44 every element is interpreted as such a
- 01:07:47 box in css
- 01:07:49 now there are two different types of
- 01:07:51 elements then block level and inline
- 01:07:53 something i'll cover in this module too
- 01:07:56 where some of these things will differ a
- 01:07:58 bit but i'll dive into that
- 01:07:59 for now let's simply keep in mind that
- 01:08:01 every element has these layers
- 01:08:04 now let's work with that
- 01:08:11 we had a look at that box model and
- 01:08:13 theory let's now
- 01:08:15 work with it and let's work with it by
- 01:08:17 going to our
- 01:08:18 product overview selector here
- 01:08:22 the id selector where we have the
- 01:08:23 background and let's add a padding
- 01:08:27 of 20 pixels for example so pixels is a
- 01:08:30 unit you can use in css
- 01:08:32 there are other units like percentages
- 01:08:35 and font related units too
- 01:08:37 but for now let's stick to pixels since
- 01:08:38 they're very easy to understand
- 01:08:40 so if we add this and save that file we
- 01:08:43 can reload the page
- 01:08:45 and now we see that there is some
- 01:08:47 spacing around the text
- 01:08:49 if we now inspect that section again we
- 01:08:52 can already see it
- 01:08:53 on the left if we hover over it that
- 01:08:56 there are different boxes now
- 01:08:58 and if we now scroll down we indeed see
- 01:09:01 there is a padding
- 01:09:02 and this time the padding is even around
- 01:09:06 the margin of the h1 tag which can look
- 01:09:08 strange at first since this wasn't
- 01:09:10 considered previously
- 01:09:12 it's just that if you add a padding then
- 01:09:15 the content of the element is to be
- 01:09:17 considered the content
- 01:09:19 plus any margins it might have because
- 01:09:22 padding
- 01:09:22 and margins shouldn't overlap hence the
- 01:09:25 padding is added after
- 01:09:26 the margin of child elements so here we
- 01:09:29 got our
- 01:09:30 padding added we can hover over it in
- 01:09:32 the box model to see it highlighted in
- 01:09:34 the top
- 01:09:35 left and of course we can also add a
- 01:09:37 border now
- 01:09:38 so let's add a border let's add 5 pixels
- 01:09:42 black and solid now this value might
- 01:09:46 look strange at first
- 01:09:47 this way of writing a value we have more
- 01:09:49 than one value
- 01:09:51 this is called a shorthand i'll also
- 01:09:53 dive into this in a second
- 01:09:54 this is just a shorter way of writing
- 01:09:58 border style solid border
- 01:10:02 color black border with
- 01:10:07 five pixels but you could use this
- 01:10:08 notation too
- 01:10:10 if you add this and reload the page you
- 01:10:13 see a black border around the element
- 01:10:16 and if you again scroll down to your box
- 01:10:18 model you see
- 01:10:19 the five pixels here and if we hover
- 01:10:21 over it the
- 01:10:22 border gets highlighted in the top left
- 01:10:24 so in the loaded page
- 01:10:26 too finally let's add a margin to
- 01:10:29 complete the box model
- 01:10:30 if we add a margin here let's say 20
- 01:10:33 pixels
- 01:10:34 and we save that and then we reload the
- 01:10:36 page one more time
- 01:10:37 again if we scroll down we can see that
- 01:10:40 margin here and if we hover over it
- 01:10:42 we see that orange margin around our box
- 01:10:46 we still see some white space to the
- 01:10:48 left and right
- 01:10:49 and that is something i'll revisit very
- 01:10:51 soon too
- 01:10:52 but with that we see all layers of the
- 01:10:54 box model in
- 01:10:56 action now there are a couple of special
- 01:10:58 things you also gotta know
- 01:11:00 about the box model and default styles
- 01:11:04 of the web page
- 01:11:05 so let's dive into these things step by
- 01:11:07 step over the next lectures
- 01:11:15 we had a look at the box model basics
- 01:11:18 with padding
- 01:11:19 a border and a margin and all these
- 01:11:21 things are of course optional you can
- 01:11:23 have a padding and a margin without a
- 01:11:25 border
- 01:11:25 you can have a border without a padding
- 01:11:27 and margin so that's all
- 01:11:28 totally optional and it leads to that
- 01:11:31 result
- 01:11:32 now i mentioned there would be a couple
- 01:11:33 of special things
- 01:11:35 now let's dive into these special things
- 01:11:37 step by step
- 01:11:39 the first special thing can be seen if
- 01:11:41 you inspect the section
- 01:11:43 there is some white space to the left
- 01:11:45 and to the right so after the orange
- 01:11:47 margin
- 01:11:48 this is coming from the body actually if
- 01:11:51 you hover over the body
- 01:11:52 you can see the body also has a default
- 01:11:55 margin
- 01:11:56 here the 8 pixels that is simply coming
- 01:11:59 from the browser defaults here so what
- 01:12:02 we
- 01:12:03 can do to well prevent this and to make
- 01:12:06 sure that our elements
- 01:12:07 go directly into the edges of our page
- 01:12:10 we can set that margin to zero with that
- 01:12:13 margin zero command
- 01:12:15 if we do that and we reload the page you
- 01:12:18 see now the body has no longer a margin
- 01:12:20 and therefore if we inspect the section
- 01:12:23 you indeed see
- 01:12:24 the orange area around it so its margin
- 01:12:28 directly connects to the edges of the
- 01:12:30 page which means there is no additional
- 01:12:32 space in between
- 01:12:33 so that was the first special thing that
- 01:12:35 the body has a margin
- 01:12:37 another special thing can be seen if we
- 01:12:40 inspect the h1
- 01:12:42 tag in our second section in the plans
- 01:12:44 section
- 01:12:45 you see this has a margin to the top and
- 01:12:47 bottom the default margin every h1
- 01:12:50 element has
- 01:12:51 we can see it here it's orange now the
- 01:12:54 interesting thing is
- 01:12:56 if we also inspect the section above it
- 01:12:58 so the product overview section
- 01:13:01 do you see that orange margin at the
- 01:13:03 bottom of it
- 01:13:05 keep in mind where it was if i go back
- 01:13:07 to the h1 tag
- 01:13:09 it overlaps with that section from the
- 01:13:11 product overview
- 01:13:12 container this behavior is called
- 01:13:15 margin collapsing it simply means the
- 01:13:18 following
- 01:13:19 if you got two elements block element
- 01:13:22 with its box model the margin is the
- 01:13:24 orange part here
- 01:13:25 if you've got two elements next to each
- 01:13:27 other then margins between them
- 01:13:30 are actually collapsed to one margin the
- 01:13:32 bigger margin wins
- 01:13:34 this is not a bug this is on purpose
- 01:13:37 this
- 01:13:37 is there or this is enforced by css
- 01:13:41 to ensure that you don't get two big
- 01:13:44 distances between the elements now you
- 01:13:47 could argue
- 01:13:48 hey leave that up to me i'll take care
- 01:13:50 about that but that's simply not how css
- 01:13:52 works so it is something to be aware of
- 01:13:55 to work around this it's a good practice
- 01:13:58 to use
- 01:13:58 either margin top or margin bottom
- 01:14:01 unless you don't worry about this
- 01:14:03 collapsing occurring which of course
- 01:14:04 also can be the case
- 01:14:06 so in our case we got some collapsing
- 01:14:08 it's not really a problem because we got
- 01:14:10 a fine distance between the elements
- 01:14:12 i just want to highlight it here so that
- 01:14:14 you don't wonder what's going on here
- 01:14:23 now that we had a look at the box model
- 01:14:25 we also implicitly got a first glimpse
- 01:14:28 at shorthand properties
- 01:14:30 to be very precise we already used
- 01:14:32 shorthand properties since we first
- 01:14:34 started using background shorthand
- 01:14:37 properties are simply normal properties
- 01:14:39 that combine the values of multiple
- 01:14:42 other properties
- 01:14:43 in a single property the so-called
- 01:14:45 shorthand property
- 01:14:47 here are some examples we got some
- 01:14:50 separate properties let's say
- 01:14:51 border width style and color this is
- 01:14:53 what we already saw
- 01:14:55 and style is either dashed or solid
- 01:14:57 let's say
- 01:14:58 now of course there are other ways too
- 01:14:59 like dotted you can always find all
- 01:15:01 available options
- 01:15:03 in the reference and the mdn reference
- 01:15:05 for that property
- 01:15:06 but these are the individual properties
- 01:15:09 that allow you to
- 01:15:10 construct a border if you only set two
- 01:15:12 of them
- 01:15:13 and omit one the default for that
- 01:15:15 property will be used
- 01:15:16 which could lead to no border being
- 01:15:18 displayed or the border being solid even
- 01:15:21 though you want it to be dashed well if
- 01:15:22 you don't specify that the default will
- 01:15:24 be used
- 01:15:25 there is a shorthand for this because
- 01:15:28 it's of course a bit more cumbersome
- 01:15:30 to always define a border like this for
- 01:15:32 the width style color that's a lot to
- 01:15:34 type
- 01:15:35 therefore we got shorthands and the
- 01:15:37 shorthand for border would look like
- 01:15:39 this
- 01:15:40 it's just called border and then we
- 01:15:42 simply assign the values
- 01:15:44 for the different sub properties so to
- 01:15:46 say
- 01:15:47 the order here doesn't matter as long as
- 01:15:50 the sub properties don't use the same
- 01:15:52 type of value which
- 01:15:53 isn't the case for a border for other
- 01:15:56 shorthands it will be the case and i
- 01:15:57 will highlight this and
- 01:15:59 tell you how to circumvent this once it
- 01:16:01 is the case
- 01:16:02 so for border we could mix the order of
- 01:16:05 the arguments here
- 01:16:06 of the values in whichever way we want
- 01:16:09 the core is
- 01:16:10 that this will be interpreted in exactly
- 01:16:13 the same way
- 01:16:14 as it is on the left another example
- 01:16:16 would be margin
- 01:16:18 we didn't even use that notation until
- 01:16:20 now we used the one where we just had
- 01:16:23 margin colon and then 20 pixels
- 01:16:26 now actually the margin has a couple of
- 01:16:28 shorthands
- 01:16:29 it's always just margin but you could
- 01:16:31 write it like this
- 01:16:32 and this would read as top right bottom
- 01:16:36 and left so this is a shorter way of
- 01:16:38 setting the margins for the different
- 01:16:40 directions
- 01:16:41 if you want to set top and bottom and
- 01:16:43 left and right to the same
- 01:16:45 you could use this notation the first
- 01:16:47 value is then set for the top and bottom
- 01:16:49 margin the second one for left and right
- 01:16:51 and if you want to use the same margin
- 01:16:53 on all sides
- 01:16:55 as we did it then you would use margin
- 01:16:58 with one value
- 01:17:00 now this will be applied to all sides
- 01:17:02 these are shorthand properties
- 01:17:04 we use a lot of shorthands in css and
- 01:17:07 i will always mention them once we use
- 01:17:10 one or once we can use one
- 01:17:12 again we already did it for background
- 01:17:14 i'll dive deeper into what
- 01:17:16 background covers or which other values
- 01:17:19 are part of background later in the
- 01:17:20 course once we also add background
- 01:17:22 images
- 01:17:23 it's important that you should use
- 01:17:25 shorthands if you
- 01:17:26 have the chance to do so simply because
- 01:17:29 it's cleaner and shorter
- 01:17:31 code but you can always use the longer
- 01:17:34 version
- 01:17:34 and what you can also do is you can
- 01:17:36 define a shorthand version
- 01:17:39 and later let's say in another class
- 01:17:41 with a higher specificity
- 01:17:42 you could override one part of that if
- 01:17:45 you for example want to keep the border
- 01:17:47 color and only change the width
- 01:17:49 you would define the border shorthand
- 01:17:50 first and then in the overwriting rule
- 01:17:53 you'd just define the border width it
- 01:17:55 would still take the old setup from the
- 01:17:57 shorthand
- 01:17:57 and then only overwrite that single part
- 01:17:59 of it so that's also a nice way
- 01:18:02 of working with shorthands but again
- 01:18:04 this will all be something we see
- 01:18:06 in the course
- 01:18:13 let's quickly see shorthands in action
- 01:18:15 then as i said we already use shorthands
- 01:18:18 the backgrounds are shorthand the
- 01:18:20 padding actually is a shorthand it works
- 01:18:22 like the margin
- 01:18:23 margin is one here we use the longer
- 01:18:26 form
- 01:18:26 now we can get rid of that and instead
- 01:18:28 simply use border five pixels solid
- 01:18:31 black
- 01:18:32 or any other order of these values
- 01:18:36 the margin here of course is a shorthand
- 01:18:39 and with that
- 01:18:40 let's inspect that in the developer
- 01:18:42 tools and see how they can help us with
- 01:18:44 that
- 01:18:44 if we again select the first section
- 01:18:47 where we have
- 01:18:48 padding border margin and background so
- 01:18:50 where we already have
- 01:18:51 four shorthands in the developer tools
- 01:18:54 you can always click this tiny arrow
- 01:18:55 here
- 01:18:56 to see which long form properties
- 01:19:00 are combined and here you see all the
- 01:19:02 properties that make up the background
- 01:19:04 again this is something i'll dive into
- 01:19:06 later this is simply a very
- 01:19:08 well complex way since you can also use
- 01:19:10 background images which you can then
- 01:19:12 position with the various
- 01:19:14 sub properties for solid colors they
- 01:19:16 don't matter
- 01:19:17 but there you see we implicitly set
- 01:19:20 background color
- 01:19:21 by assigning a color to background so
- 01:19:23 this would be
- 01:19:24 the long form property name background
- 01:19:27 color
- 01:19:28 for the padding we see that this could
- 01:19:31 be split up
- 01:19:32 into padding top right bottom and left
- 01:19:35 and it works as i said just like the
- 01:19:37 margin
- 01:19:38 and for the border we see actually we
- 01:19:40 got a bit more
- 01:19:41 we don't just have border style color
- 01:19:43 and width we can even set long form
- 01:19:46 properties for the different
- 01:19:47 size so for the top border we could
- 01:19:49 style that differently than the bottom
- 01:19:51 border
- 01:19:52 so this is how the short ends are
- 01:19:54 combined here
- 01:19:56 and this is just something to be aware
- 01:19:57 of you can always use the long form and
- 01:20:00 if you just want to set a margin top for
- 01:20:02 example
- 01:20:02 it's better to just set margin top
- 01:20:05 rather than
- 01:20:06 margin with the four value syntax and
- 01:20:08 then set three of them to zero
- 01:20:10 but you can always use both and behind
- 01:20:12 the scenes this is what will get
- 01:20:16 rendered
- 01:20:21 enough about the shorthands let's go
- 01:20:23 back to code
- 01:20:24 i will remove the margin border and for
- 01:20:27 now also
- 01:20:29 the padding of the product overview so
- 01:20:31 if we save this and reload
- 01:20:33 we're back to where we were well with
- 01:20:35 one difference we no longer have the
- 01:20:37 margin implied by the body
- 01:20:39 that white space to the top is coming
- 01:20:40 from the h1 element
- 01:20:43 now we can also set something different
- 01:20:46 we can set a width
- 01:20:47 and a height so on the product overview
- 01:20:50 we can set the width to 100 for example
- 01:20:54 to tell it to take the full entire width
- 01:20:57 of this page now if we reload we don't
- 01:21:00 really see a change because that was its
- 01:21:02 default behavior anyways
- 01:21:04 because sections like divs or like h1
- 01:21:07 elements
- 01:21:07 are block level elements now this is
- 01:21:10 some html feature not related to css
- 01:21:13 but it's important to keep in mind block
- 01:21:15 level elements
- 01:21:16 unlike inline elements like anchor tags
- 01:21:20 for example
- 01:21:21 block level elements always take the
- 01:21:23 full available width by default
- 01:21:26 so with 100 actually doesn't do anything
- 01:21:29 if we set it to something different than
- 01:21:30 100 though let's say 250
- 01:21:33 then we can see that if we reload this
- 01:21:36 shrinks our box
- 01:21:37 to 50 of the width of the surrounding
- 01:21:41 container
- 01:21:42 here it looks like 50 of the page width
- 01:21:44 and it is the case
- 01:21:46 but that's simply happening because the
- 01:21:48 surrounding container is a main element
- 01:21:50 which also the block level element which
- 01:21:52 therefore has a width of 100
- 01:21:54 so 50 of the surrounding container which
- 01:21:57 has 100 of the page with
- 01:21:59 yields 50 of the page with here too but
- 01:22:02 the main
- 01:22:03 element had a lower width too then the
- 01:22:05 section
- 01:22:06 would only get half of that so width
- 01:22:09 can be used even with percentages or
- 01:22:12 of course with absolute values like 300
- 01:22:15 pixels
- 01:22:16 this is also possible and this shrinks
- 01:22:18 the box
- 01:22:19 if i increase that to let's say 700
- 01:22:22 you'll see
- 01:22:23 it gets bigger like that
- 01:22:26 so this is the width we can set and this
- 01:22:29 will become important throughout the
- 01:22:30 course because we don't want all
- 01:22:32 elements to be 100
- 01:22:34 of the page width we can also set the
- 01:22:37 height of course
- 01:22:38 now for the height it's tricky if you
- 01:22:40 set height 100
- 01:22:42 and you expect it to now get the height
- 01:22:45 of the
- 01:22:45 full page well you're going to be sad
- 01:22:49 as you can see it now only got a little
- 01:22:51 bit bigger
- 01:22:53 the only thing it now does is it
- 01:22:54 includes the height
- 01:22:56 of the margin of the h1 element the
- 01:22:59 reason for that is
- 01:23:00 that 100 refers to the available height
- 01:23:04 given by the parent container
- 01:23:07 now if you hover over the main container
- 01:23:09 you could see well the blue area
- 01:23:11 is much bigger than the tiny bit our red
- 01:23:14 box
- 01:23:14 grow by but that area
- 01:23:17 that height of the main element is
- 01:23:20 calculated dynamically
- 01:23:22 by the content it holds so it's only as
- 01:23:24 big as its content requires it to be
- 01:23:27 now that of course creates kind of an
- 01:23:28 infinite loop if we say
- 01:23:30 a part of the content should be 100 of
- 01:23:32 the size of the main area
- 01:23:34 and the main area says i'm only as big
- 01:23:37 as i need to be
- 01:23:38 then the 100 basically has no effect
- 01:23:41 if you wanted it to have an effect you
- 01:23:43 would need to
- 01:23:44 change the height of the main area too
- 01:23:47 so if i do this here
- 01:23:49 in the developer tools which only will
- 01:23:51 change it temporarily
- 01:23:52 until we refresh the page i could set
- 01:23:55 the height
- 01:23:56 of the main area to let's say 500 pixels
- 01:23:59 and if we do that you can inspect the
- 01:24:02 section here
- 01:24:03 and you will see on the top left you can
- 01:24:06 see it
- 01:24:06 that it now has a height of 500 pixels
- 01:24:10 exactly height we set on the main area
- 01:24:13 so if we give this an explicit height
- 01:24:15 then the child if we use percentages
- 01:24:19 will again refer to that just as it's
- 01:24:21 the case with the width
- 01:24:23 if we set the height of the main area to
- 01:24:25 100 percent
- 01:24:27 we're now referring to its parent which
- 01:24:29 is the body and that again is only as
- 01:24:31 big as it needs to be
- 01:24:32 so we get the same situation as before
- 01:24:35 so only if we set the body
- 01:24:37 to a height 100 too and we do the same
- 01:24:40 for html which is the parent of the body
- 01:24:42 which is only as big as it needs to be
- 01:24:45 so now if we set this to 100 on html2
- 01:24:48 now we finally get a red area
- 01:24:52 that is just as big as our page
- 01:24:55 because now starting at the html element
- 01:24:58 which now refers to the overall window
- 01:25:00 if we set height to 100
- 01:25:02 we pass the relative height of 100
- 01:25:06 down to that section so if you ever
- 01:25:10 want to style the height of an element
- 01:25:12 relative to the height of your page
- 01:25:15 you need to create such a chain where
- 01:25:18 you pass the page height down
- 01:25:21 in the dimensions and units section
- 01:25:23 later in the course
- 01:25:24 we'll also learn about a different more
- 01:25:26 modern unit
- 01:25:27 which allows you to achieve this a bit
- 01:25:30 easier
- 01:25:30 with worse browser support though but
- 01:25:33 for now
- 01:25:34 this is a cool trick to keep in mind how
- 01:25:36 you can set the height to 100
- 01:25:39 now this is not necessarily what i want
- 01:25:41 to do here though
- 01:25:42 i can simply set this to an absolute
- 01:25:45 value
- 01:25:46 for example we could set this to a value
- 01:25:48 of let's say
- 01:25:49 528 pixels
- 01:25:52 we now reload this is the size our
- 01:25:55 red area has i'll also set the width
- 01:25:58 back to 100
- 01:26:00 though i could omit this because that's
- 01:26:02 the default anyways
- 01:26:03 but for now i'll leave it here so that
- 01:26:04 we have that for reference
- 01:26:08 so that is how width and height work in
- 01:26:10 general we can use them with percentages
- 01:26:12 or pixels or other
- 01:26:14 units which we'll cover later but
- 01:26:16 there's actually a bit more
- 01:26:18 to width and height especially if we
- 01:26:20 consider the box model
- 01:26:22 let's dive into that in the next lecture
- 01:26:31 so in the last lecture we worked with
- 01:26:33 height and width
- 01:26:34 well that's all nice we change the
- 01:26:36 height and width of the
- 01:26:37 box unsurprisingly but what exactly did
- 01:26:41 we change
- 01:26:42 when we set the height and the width
- 01:26:44 that we set the
- 01:26:45 height and width of the content of the
- 01:26:48 content plus the padding
- 01:26:51 of the content the padding and the
- 01:26:53 border
- 01:26:54 or of the content the padding the border
- 01:26:57 and
- 01:26:57 the margin well let's take a look
- 01:27:01 let's take a look by inspecting that
- 01:27:03 section where we did set
- 01:27:05 width and height there if we scroll down
- 01:27:08 to our box
- 01:27:08 model what we can see is that
- 01:27:12 in there we set the width and height
- 01:27:15 of our box here i'd say
- 01:27:18 the width is calculated dynamically as
- 01:27:21 we increase and decrease the page width
- 01:27:23 because it's set to 100 percent
- 01:27:25 and the height is the 522 pixels we
- 01:27:28 added in our code
- 01:27:30 but let's now quickly add some padding
- 01:27:32 back to the party
- 01:27:34 let's maybe add a padding of 10 pixels a
- 01:27:37 border of
- 01:27:38 5 pixels solid and black and a margin of
- 01:27:42 10 pixels
- 01:27:43 if we now save this and we reload the
- 01:27:45 page
- 01:27:46 we can already see one strange thing it
- 01:27:49 shifted a little bit to the right
- 01:27:51 the 100 width leads to our red
- 01:27:55 element to go out of the right side of
- 01:27:57 our page
- 01:27:58 and that doesn't change if we decrease
- 01:28:00 and increase the page width
- 01:28:02 because it's already set to 100 percent
- 01:28:04 so
- 01:28:05 something seems to be wrong with the
- 01:28:06 width if we scroll down to our box model
- 01:28:09 again
- 01:28:10 we now see something strange the height
- 01:28:13 really
- 01:28:14 is 528 pixels for the content
- 01:28:18 the width is 100 of our content
- 01:28:22 too but now the padding border
- 01:28:25 and margin add up to that so what we
- 01:28:28 actually now got
- 01:28:30 is a total width and height that's
- 01:28:32 bigger than what we specified
- 01:28:34 and we can see the total values if we
- 01:28:36 simply hover over it
- 01:28:38 we can see that the actual width of our
- 01:28:41 element
- 01:28:42 is 937 and that the actual height
- 01:28:45 is 558 now if we go back to our box
- 01:28:49 model here in the developer tools
- 01:28:51 the height was 558
- 01:28:54 well if we add up that's 528
- 01:28:58 plus 10 plus 10 so 548
- 01:29:02 plus 5 plus 5. so we set
- 01:29:06 the height and width of the content and
- 01:29:08 padding and border is not
- 01:29:10 included into our calculation or
- 01:29:13 is not part of what width and height
- 01:29:15 target
- 01:29:16 it is what the browser in the end adds
- 01:29:19 up to it though
- 01:29:20 which leads to our element being
- 01:29:21 positioned incorrectly
- 01:29:24 this happens because all elements
- 01:29:27 by default happen to have a certain way
- 01:29:30 of calculating width and height
- 01:29:32 which is called content box
- 01:29:36 we can set this behavior by adding the
- 01:29:39 box
- 01:29:40 sizing property to the element where we
- 01:29:42 want to change it
- 01:29:44 and as i said the default here is
- 01:29:45 content box this means
- 01:29:47 if we set a width and height we set
- 01:29:49 width and height of the content
- 01:29:51 not of the entire box including padding
- 01:29:53 and border
- 01:29:55 we can set it to border box though
- 01:29:58 now width and height include padding and
- 01:30:01 border they don't include the margin
- 01:30:03 and we can't make it to include that
- 01:30:05 with that set however if we save the
- 01:30:07 file and reload
- 01:30:10 we still see that the element goes out
- 01:30:12 of the page because the margin is not
- 01:30:14 included in the calculation
- 01:30:15 but if we go down we see that actually
- 01:30:18 it now only has a height
- 01:30:20 of 498 because now if we add
- 01:30:23 10 times 2 for the padding and 5 times 2
- 01:30:26 for the border
- 01:30:27 now we end up with the 528 which is our
- 01:30:30 height
- 01:30:31 which now again targets content plus
- 01:30:33 padding plus border
- 01:30:35 and that often is the setting you want
- 01:30:37 to use it's actually so common
- 01:30:40 that you often overwrite the styling for
- 01:30:43 all your elements to always use box
- 01:30:46 sizing border box
- 01:30:47 because it's more convenient to think of
- 01:30:49 the height and width referring to
- 01:30:52 the entire box without margin than to
- 01:30:54 adjust the content
- 01:30:56 now as i said margin is never included
- 01:30:58 so to avoid that effect where
- 01:31:00 your element is moved to the left you
- 01:31:02 simply have to remove the margin
- 01:31:04 which i guess makes sense if you want
- 01:31:07 your element to sit right on the edge
- 01:31:09 don't add a margin after your element it
- 01:31:11 makes sense that this is not part
- 01:31:13 of the width and height so box sizing
- 01:31:17 border box really really useful
- 01:31:20 and as i said so important and useful
- 01:31:23 that it's often used as a default style
- 01:31:25 for all
- 01:31:26 elements anyways and this is also what i
- 01:31:28 want to do here
- 01:31:30 so we could add it to body
- 01:31:33 and if we do that in save and reload the
- 01:31:36 page
- 01:31:37 and go back to the box model
- 01:31:40 we see we're back in content box world
- 01:31:43 the reason for
- 01:31:44 this is that we're now inheriting the
- 01:31:46 box sizing setup
- 01:31:48 but actually we don't see it here as a
- 01:31:51 browser default style
- 01:31:52 but because it's a block level element
- 01:31:55 here by default this is overwritten
- 01:31:58 automatically
- 01:31:59 so actually our nice inheritance
- 01:32:02 doesn't take effect because the browser
- 01:32:05 sets its own
- 01:32:06 box sizing because section is a block
- 01:32:09 level element
- 01:32:11 therefore what we have to do is we have
- 01:32:14 to use
- 01:32:15 the universal selector and that is one
- 01:32:17 of the rare cases where you really use
- 01:32:18 it
- 01:32:19 if you want to reset all elements to
- 01:32:22 have a certain behavior
- 01:32:24 like using box sizing border box then
- 01:32:27 you use the star the universal selector
- 01:32:30 because this is now not using
- 01:32:31 inheritance
- 01:32:32 it's not using the same mechanism as
- 01:32:34 setting this on body head
- 01:32:36 it's really targeting every element on
- 01:32:38 its own
- 01:32:39 hence overwriting inheritance and also
- 01:32:42 overwriting browser defaults
- 01:32:44 and sets the box sizing to border box
- 01:32:46 and i will leave this for the entire
- 01:32:48 course project
- 01:32:49 because i always want to target content
- 01:32:52 padding
- 01:32:52 and border when setting width and height
- 01:32:56 so with that added if we now reload and
- 01:32:58 go back we see we're back in a world
- 01:33:00 where our content is only width and
- 01:33:03 height without padding and border
- 01:33:05 so that if we set a width or height we
- 01:33:07 actually include padding and border
- 01:33:09 in the calculation
- 01:33:16 so with all that theory out of the way
- 01:33:18 it's time to continue working on our
- 01:33:20 course project and make sure we take the
- 01:33:22 next major step when it comes to that
- 01:33:25 and for that i'll first of all get rid
- 01:33:27 of that ugly border
- 01:33:29 get rid of that margin we don't need and
- 01:33:32 yeah i'll leave the padding for now i
- 01:33:33 guess so if we save this and reload this
- 01:33:36 is what we end up with
- 01:33:37 looks a bit nicer now i want to add a
- 01:33:39 navigation bar too
- 01:33:41 and for that i attached a file where you
- 01:33:44 find some html code which will now add
- 01:33:47 to our index.html file
- 01:33:49 there above the main section will paste
- 01:33:52 in the code you find in that attached
- 01:33:54 file
- 01:33:55 which is a header element with some div
- 01:33:58 inside of it
- 01:33:59 with a nav element which then in turn
- 01:34:02 has an unordered list of list items that
- 01:34:04 should become
- 01:34:04 our application navigation this is some
- 01:34:08 typical markup which you might see in
- 01:34:10 this form or slide variations in your
- 01:34:12 web pages
- 01:34:14 here are some links they all won't work
- 01:34:16 for now but we'll
- 01:34:17 add these pages throughout the course
- 01:34:20 and if we save that
- 01:34:21 and also save the updated main.css file
- 01:34:23 of course and reload it
- 01:34:25 we got this ugly part at the top now our
- 01:34:29 goal for the next lectures
- 01:34:30 will be to turn this into a non-ugly
- 01:34:33 part
- 01:34:34 so we'll add our header and we can start
- 01:34:38 by simply selecting the header element
- 01:34:41 itself
- 01:34:42 now of course what we can do is we can
- 01:34:45 now simply add
- 01:34:46 header like this we can target
- 01:34:49 the header element by the element
- 01:34:52 selector
- 01:34:53 the downside of this is that we might
- 01:34:56 use
- 01:34:57 multiple headers in a web page it's not
- 01:34:59 limited to the navigation
- 01:35:00 the header element actually can also be
- 01:35:03 used within a section for example
- 01:35:05 so therefore using header here is not
- 01:35:08 really the best way
- 01:35:09 would be better to define our own class
- 01:35:12 so i'll add
- 01:35:13 main dash header the class name is
- 01:35:17 totally up to you
- 01:35:18 but it should be descriptive and here i
- 01:35:20 name it main header
- 01:35:21 because i believe this clearly indicates
- 01:35:24 this is the main header of our page
- 01:35:26 not some section header or anything like
- 01:35:28 that
- 01:35:29 now this class of course needs to be
- 01:35:31 attached to the header element then
- 01:35:33 so let's go to the html code and add the
- 01:35:36 main header class
- 01:35:38 so now the main header is defined such
- 01:35:42 that we
- 01:35:42 can start using or can start styling it
- 01:35:45 now which styles
- 01:35:47 can we attach here of course any styles
- 01:35:49 you want but
- 01:35:50 i want to create a header which spans
- 01:35:52 the full
- 01:35:53 width which has a green background color
- 01:35:56 as this will be kind of the main theme
- 01:35:59 color our
- 01:36:00 application will use of course you're
- 01:36:01 always free to choose a different one
- 01:36:04 and i also want to give it some padding
- 01:36:07 so that the text in the header or the
- 01:36:08 content of the header
- 01:36:09 doesn't directly sit on its edges now
- 01:36:12 that is a good practice for you
- 01:36:14 the goal is to add a background color
- 01:36:17 to add some padding and set the width to
- 01:36:20 the full page width
- 01:36:22 these are all things we already
- 01:36:23 practiced so here's your chance to pause
- 01:36:25 the video
- 01:36:26 and then do this on your own and after
- 01:36:29 you unpause we'll do it together
- 01:36:34 were you successful let's do it together
- 01:36:37 to set the width to 100 percent we
- 01:36:39 simply add
- 01:36:39 with 100 and this is kind of
- 01:36:43 optional because it's a block level
- 01:36:46 element it takes the full
- 01:36:47 entire width anyways but it's still
- 01:36:49 something we can set up
- 01:36:51 especially as we later in the course
- 01:36:53 will revisit this
- 01:36:54 and style this differently where this
- 01:36:56 will actually become important
- 01:36:59 now besides that we want to set a
- 01:37:01 background color now i mentioned i want
- 01:37:02 to use a green
- 01:37:03 and maybe you just used green which is
- 01:37:05 fine but i prepared a special hex code
- 01:37:08 a nice screen i personally like and it's
- 01:37:10 2
- 01:37:11 d d f 5
- 01:37:14 c of course you're free to choose any
- 01:37:16 green you want it's the same green we
- 01:37:18 used for the section title though
- 01:37:21 finally some padding now here i'll add a
- 01:37:24 padding to
- 01:37:25 top and bottom and left and right but i
- 01:37:27 want to use different values
- 01:37:29 i want to use the same padding for the
- 01:37:30 top and the bottom and the same padding
- 01:37:32 for the left and the right but not the
- 01:37:34 same padding for top bottom left and
- 01:37:36 right
- 01:37:37 so what we can do is we can use this two
- 01:37:39 value
- 01:37:40 shorthand i showed you in an earlier
- 01:37:42 slide
- 01:37:43 and i'll set the padding to top and
- 01:37:46 bottom to 8 pixels
- 01:37:48 and to left and right to 16 pixels like
- 01:37:51 this
- 01:37:52 if we now save this and we reload the
- 01:37:54 page we got that green header
- 01:37:57 we also see that our text doesn't
- 01:38:00 directly touch the edges anymore
- 01:38:02 from a styling perspective we can still
- 01:38:05 improve this a bit in my opinion though
- 01:38:07 for example this unordered list doesn't
- 01:38:10 look that great
- 01:38:11 and by the way if you don't like that
- 01:38:13 color edge here
- 01:38:15 we'll also replace the red color with
- 01:38:17 the image later on
- 01:38:18 so let's continue with the header though
- 01:38:21 we made a great first
- 01:38:23 step but the list items positioned like
- 01:38:25 this
- 01:38:26 that's not really helpful we don't want
- 01:38:28 to have a list rendered like that
- 01:38:31 we just want to use a list semantically
- 01:38:33 but from a styling perspective
- 01:38:35 all these list items should sit next to
- 01:38:38 each other
- 01:38:39 not on top of each other now to achieve
- 01:38:42 this
- 01:38:43 we'll actually need to dive into a new
- 01:38:45 property
- 01:38:46 the display property let's explore it in
- 01:38:49 the next lecture
- 01:38:52 i hope you liked the video of course it
- 01:38:54 ends rather abruptly
- 01:38:56 that is because it's a course excerpt if
- 01:38:59 you liked it
- 01:39:00 if you want to learn more i'd of course
- 01:39:02 be more than happy to welcome you in the
- 01:39:04 full course to which you can find a link
- 01:39:06 in the video description with a huge
- 01:39:08 discount
- 01:39:08 attached to it of course and if you
- 01:39:11 already are a css pro
- 01:39:13 i'd be more than happy to welcome you in
- 01:39:15 the other videos on this youtube channel
- 01:39:17 and our website acadamine.com
- 01:39:19 see you there hopefully bye