- CSS and HTML 4:37
- CSS Selectors 6:26
- CSS Properties 5:20
- CSS Selectors and Properties Quiz 6 questions
- CSS Colors 4:19
- CSS Box Model 12:47
- Text and Fonts 7:32
- Colors, Box Model, Text, and Font Quiz 6 questions
- CSS Positioning 6:06
- CSS Images 3:31
- The Magic of CSS 2:31
- CSS Fundamentals Quiz 6 questions
Preview
Video Player
00:00
00:00
CSS Positioning
6:06Uncover the fundamentals of display properties in CSS, learning how they affect element placement and sizing. Understand the key concepts of block-level, inline, and inline-block elements.
I'm sure you've noticed by now that this
image's position doesn't quite match
0:00
the mark up.
0:04
You might have even tried to center
it on your own using margin-auto, but
0:05
it hasn't worked.
0:10
In this video,
we'll unravel the secrets of layout and
0:11
positioning in CSS with
the display property.
0:15
The display property specifies how
an element is displayed on the web page.
0:18
Let's dive into some of the key
display property values.
0:23
Block, block elements always
start on a new line and
0:27
take up the full width
available in its container.
0:31
We've met a few elements that have
a default display value of block,
0:35
body, div, and paragraph.
0:40
In fact, most of what we've learned so
far has a default display of block.
0:42
Inline, inline level element
take up only as much width as
0:48
the elements content and border.
0:52
In fact, top and bottom margins and
paddings do not affect inline elements.
0:55
We've already come across some examples
that have a default display of inline,
1:00
anchor tags, and images.
1:06
Both only take up the width of the link or
image.
1:08
This is why anchor tags appear
on the same line as other texts.
1:11
This is also why using margin: 0
auto wouldn't work on the image.
1:16
But this is where our next display
property value comes in handy.
1:21
Inline-block, as the name suggests,
combines the best of both worlds.
1:26
It allows you to create elements
that don't start on a new line but
1:30
can still be styled with margins,
padding, and dimensions.
1:34
This is particularly handy when you want
to create custom styled elements that
1:38
fit seamlessly into your content flow.
1:43
So if we want to center our recipe
image using margin: 0 auto,
1:46
we'll first need to set the image's
display property value to block.
1:50
Find the #intro img CSS rule block and
1:55
add our new display declaration to it,
1:59
followed by the margin auto trick.
2:04
Save the file and refresh the page.
2:07
We can see that our image
is now center aligned.
2:12
Next, let's tackle the anchor tags.
2:15
As we learned earlier, anchor tags have
a default display value of inline,
2:18
so they only take up as much
width as their content.
2:24
This works super well for this link here,
2:27
because the sentence flows seamlessly from
the paragraph tag into the anchor tag.
2:30
We'll have to apply some styling for
this back to top button.
2:36
We want it to be aligned to the far
right of this main container, but
2:40
right now,
it only takes up the width of the text.
2:44
To make this happen, we can change its
display property value to block and
2:48
then align the text to the right.
2:52
But how should we select
just this anchor using CSS?
2:55
We can certainly try to
select an anchor tag in main,
3:00
but there are two anchor tags in main.
3:04
This is a great time to add
an ID to this anchor element so
3:06
that we can select it using CSS.
3:11
Hop on over to carbonara.html,
scroll to the bottom of the page and
3:13
add an ID attribute to
the back to top anchor.
3:19
Let's call it back-to-top.
3:23
Don't forget to save the file.
3:27
Now, back in styles.css, at the bottom
of the file we can use the ID selector,
3:29
#back-to-top, to create a CSS rule block
and add our new declaration lines.
3:36
A display of block, and we'll move the
text to the right with text-align right.
3:42
Save the file and refresh the page.
3:50
We can see that the text is now
aligned to the right of the container.
3:54
Finally, we'll tackle this Nack
to list anchor tag at the top.
3:58
If we head over to the mark up,
4:03
we can see that this link should
have a brown background and
4:05
rounded corners with some padding between
the text and the edges of the background.
4:09
But we also know that margin and padding
properties don't apply to inline elements.
4:15
So perhaps we should make
this a block level element.
4:21
Let's give it a try and
add some of our styles.
4:25
Let's add some spacing and
select the anchor tag
4:28
that's nested within the nav
tag using nav space a.
4:32
We'll set its display to block,
give it some padding of 20 pixels.
4:37
Now, we can change the background color
to the dark brown we saw in the mark up.
4:44
In colors.text I'll copy the hex color and
paste it for
4:49
the value of background color.
4:54
To give it the rounded corners,
we'll set the border radius to 5 pixels.
4:57
Now, all that's left
is to adjust the font.
5:03
We'll give it a font color of white and
set the font weight to 800.
5:06
Save and refresh the page.
5:13
It looks like we may
have a bit of a problem,
5:17
because a block element takes up
the entire width of the container.
5:20
We can remedy this by using display
inline block rather than display block.
5:24
Let's change this.
5:30
Back in styles.css, I'll add inline-
5:31
to the front of block, save and refresh.
5:36
We can see that the anchor tag has
the padding properties we specified and
5:41
only takes up enough width for
the content and padding assigned.
5:46
Great work, with this knowledge,
you have the tools to create sophisticated
5:50
layouts and control how elements
are positioned in your web design.
5:55
As you can see, we're quite close
to replicating the mark up,
6:00
just one thing left.
6:03