1
00:00:00,079 --> 00:00:04,923
I'm sure you've noticed by now that this
image's position doesn't quite match

2
00:00:04,923 --> 00:00:05,700
the mark up.

3
00:00:05,700 --> 00:00:10,258
You might have even tried to center
it on your own using margin-auto, but

4
00:00:10,258 --> 00:00:11,516
it hasn't worked.

5
00:00:11,516 --> 00:00:15,404
In this video,
we'll unravel the secrets of layout and

6
00:00:15,404 --> 00:00:18,723
positioning in CSS with
the display property.

7
00:00:18,723 --> 00:00:23,943
The display property specifies how
an element is displayed on the web page.

8
00:00:23,943 --> 00:00:27,781
Let's dive into some of the key
display property values.

9
00:00:27,781 --> 00:00:31,616
Block, block elements always
start on a new line and

10
00:00:31,616 --> 00:00:35,377
take up the full width
available in its container.

11
00:00:35,377 --> 00:00:40,492
We've met a few elements that have
a default display value of block,

12
00:00:40,492 --> 00:00:42,705
body, div, and paragraph.

13
00:00:42,705 --> 00:00:48,050
In fact, most of what we've learned so
far has a default display of block.

14
00:00:48,050 --> 00:00:52,586
Inline, inline level element
take up only as much width as

15
00:00:52,586 --> 00:00:55,278
the elements content and border.

16
00:00:55,278 --> 00:01:00,935
In fact, top and bottom margins and
paddings do not affect inline elements.

17
00:01:00,935 --> 00:01:06,497
We've already come across some examples
that have a default display of inline,

18
00:01:06,497 --> 00:01:08,393
anchor tags, and images.

19
00:01:08,393 --> 00:01:11,913
Both only take up the width of the link or
image.

20
00:01:11,913 --> 00:01:16,582
This is why anchor tags appear
on the same line as other texts.

21
00:01:16,582 --> 00:01:21,951
This is also why using margin: 0
auto wouldn't work on the image.

22
00:01:21,951 --> 00:01:26,170
But this is where our next display
property value comes in handy.

23
00:01:26,170 --> 00:01:30,829
Inline-block, as the name suggests,
combines the best of both worlds.

24
00:01:30,829 --> 00:01:34,860
It allows you to create elements
that don't start on a new line but

25
00:01:34,860 --> 00:01:38,761
can still be styled with margins,
padding, and dimensions.

26
00:01:38,761 --> 00:01:43,553
This is particularly handy when you want
to create custom styled elements that

27
00:01:43,553 --> 00:01:46,030
fit seamlessly into your content flow.

28
00:01:46,030 --> 00:01:50,560
So if we want to center our recipe
image using margin: 0 auto,

29
00:01:50,560 --> 00:01:55,699
we'll first need to set the image's
display property value to block.

30
00:01:55,699 --> 00:01:59,810
Find the #intro img CSS rule block and

31
00:01:59,810 --> 00:02:04,050
add our new display declaration to it,

32
00:02:04,050 --> 00:02:07,919
followed by the margin auto trick.

33
00:02:07,919 --> 00:02:10,466
Save the file and refresh the page.

34
00:02:12,222 --> 00:02:15,931
We can see that our image
is now center aligned.

35
00:02:15,931 --> 00:02:18,961
Next, let's tackle the anchor tags.

36
00:02:18,961 --> 00:02:24,161
As we learned earlier, anchor tags have
a default display value of inline,

37
00:02:24,161 --> 00:02:27,672
so they only take up as much
width as their content.

38
00:02:27,672 --> 00:02:30,654
This works super well for this link here,

39
00:02:30,654 --> 00:02:36,631
because the sentence flows seamlessly from
the paragraph tag into the anchor tag.

40
00:02:36,631 --> 00:02:40,685
We'll have to apply some styling for
this back to top button.

41
00:02:40,685 --> 00:02:44,969
We want it to be aligned to the far
right of this main container, but

42
00:02:44,969 --> 00:02:48,195
right now,
it only takes up the width of the text.

43
00:02:48,195 --> 00:02:52,969
To make this happen, we can change its
display property value to block and

44
00:02:52,969 --> 00:02:55,136
then align the text to the right.

45
00:02:55,136 --> 00:03:00,195
But how should we select
just this anchor using CSS?

46
00:03:00,195 --> 00:03:04,026
We can certainly try to
select an anchor tag in main,

47
00:03:04,026 --> 00:03:06,823
but there are two anchor tags in main.

48
00:03:06,823 --> 00:03:11,147
This is a great time to add
an ID to this anchor element so

49
00:03:11,147 --> 00:03:13,689
that we can select it using CSS.

50
00:03:13,689 --> 00:03:19,447
Hop on over to carbonara.html,
scroll to the bottom of the page and

51
00:03:19,447 --> 00:03:23,296
add an ID attribute to
the back to top anchor.

52
00:03:23,296 --> 00:03:27,454
Let's call it back-to-top.

53
00:03:27,454 --> 00:03:29,541
Don't forget to save the file.

54
00:03:29,541 --> 00:03:36,176
Now, back in styles.css, at the bottom
of the file we can use the ID selector,

55
00:03:36,176 --> 00:03:42,923
#back-to-top, to create a CSS rule block
and add our new declaration lines.

56
00:03:42,923 --> 00:03:50,675
A display of block, and we'll move the
text to the right with text-align right.

57
00:03:50,675 --> 00:03:54,465
Save the file and refresh the page.

58
00:03:54,465 --> 00:03:58,791
We can see that the text is now
aligned to the right of the container.

59
00:03:58,791 --> 00:04:03,872
Finally, we'll tackle this Nack
to list anchor tag at the top.

60
00:04:03,872 --> 00:04:05,801
If we head over to the mark up,

61
00:04:05,801 --> 00:04:09,587
we can see that this link should
have a brown background and

62
00:04:09,587 --> 00:04:15,088
rounded corners with some padding between
the text and the edges of the background.

63
00:04:15,088 --> 00:04:21,595
But we also know that margin and padding
properties don't apply to inline elements.

64
00:04:21,595 --> 00:04:25,207
So perhaps we should make
this a block level element.

65
00:04:25,207 --> 00:04:28,584
Let's give it a try and
add some of our styles.

66
00:04:28,584 --> 00:04:32,867
Let's add some spacing and
select the anchor tag

67
00:04:32,867 --> 00:04:37,475
that's nested within the nav
tag using nav space a.

68
00:04:37,475 --> 00:04:44,939
We'll set its display to block,
give it some padding of 20 pixels.

69
00:04:44,939 --> 00:04:49,970
Now, we can change the background color
to the dark brown we saw in the mark up.

70
00:04:49,970 --> 00:04:54,905
In colors.text I'll copy the hex color and
paste it for

71
00:04:54,905 --> 00:04:57,745
the value of background color.

72
00:04:57,745 --> 00:05:03,396
To give it the rounded corners,
we'll set the border radius to 5 pixels.

73
00:05:03,396 --> 00:05:06,481
Now, all that's left
is to adjust the font.

74
00:05:06,481 --> 00:05:13,409
We'll give it a font color of white and
set the font weight to 800.

75
00:05:13,409 --> 00:05:17,492
Save and refresh the page.

76
00:05:17,492 --> 00:05:20,336
It looks like we may
have a bit of a problem,

77
00:05:20,336 --> 00:05:24,841
because a block element takes up
the entire width of the container.

78
00:05:24,841 --> 00:05:30,471
We can remedy this by using display
inline block rather than display block.

79
00:05:30,471 --> 00:05:31,930
Let's change this.

80
00:05:31,930 --> 00:05:36,768
Back in styles.css, I'll add inline-

81
00:05:36,768 --> 00:05:41,615
to the front of block, save and refresh.

82
00:05:41,615 --> 00:05:46,513
We can see that the anchor tag has
the padding properties we specified and

83
00:05:46,513 --> 00:05:50,941
only takes up enough width for
the content and padding assigned.

84
00:05:50,941 --> 00:05:55,837
Great work, with this knowledge,
you have the tools to create sophisticated

85
00:05:55,837 --> 00:06:00,155
layouts and control how elements
are positioned in your web design.

86
00:06:00,155 --> 00:06:03,601
As you can see, we're quite close
to replicating the mark up,

87
00:06:03,601 --> 00:06:04,780
just one thing left.