CSS Tutorial for Beginners – Getting Started

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

You may also like