- [Instructor] Hi this is Chris Converse,
and in this episode we'll style and label
rows of links on a webpage
without resorting to tables or floating elements.
Now this is something that we do pretty often,
especially for content with multiple references
or blogs and stories with tags and category assignments,
and it keeps our HTML really clean.
If you'd like to follow along with me,
download the exercise files, and let's begin
by opening index.html in a text editor.
Inside the HTML file if we scroll down here,
I have the main story in an article element,
and after the content of the story,
I have a navigation element here.
And inside the navigation element, I've broken my links
into two groups.
The first group here inside of the first div
and then the second group.
So the HTML here is really clean.
I don't have a lot of classes, and I am simply using
HTML elements to structure the content.
If you'd like to preview the design we're working with,
you can open the index.html file up in a browser.
Now to begin styling those links, we're going to go back
to the exercise files, and let's open up style.css
in our text editor.
Then once inside the CSS file, let's scroll down.
I have a media query down here which we'll be making use of
in a little bit, so after article nav,
let's come in here, and let's target the div elements
that we have inside of the nav element.
We'll start with article nav div.
Let's add in some brackets, and what we're going to do here
is simply space out these two divs,
so we'll use the margin property here,
so margin: top property we're going to set to zero.
Zero on the right, 15 pixels on the bottom
and zero pixels on the left.
Preview this in a browser, we can now see we have a space
between those two div elements.
Back to our CSS, let's hit a few returns.
Now we're going to create a pseudo-element,
so we can add a label into each one of the divs,
so I'll type article nav div.
Then, we'll use two colons.
Then, we'll type in the word before,
and then put in our brackets.
So with pseudo-element gives us a way
that we can basically add a phantom HTML element
into the div elements.
It's almost as if we had added the code to the HTML,
but it's being added through CSS.
Inside of our pseudo-element,
let's first define the content.
So content: space, two tick marks for a string
then a semicolon.
Inside we'll just simply put the word test for now.
Then, on the next line let's set the font size,
so I'll set font size to .9 ems.
Then, on the next line we'll set font style,
and we'll set this to italic.
To see what we have so far save your CSS, go back
to the browser and hit reload, and now you see
that we have the word test before each
of the individual divs.
Now that that's working, let's go back to our CSS,
and let's add the proper labels into each of the divs.
Create a new selector article nav div,
and then we'll pick out the first div element in this nav,
so we'll use the nth-child feature,
so :nth, which is N-T-H, -child.
Then, beginning and ending parenthesis,
and then inside of the parenthesis we'll put a number one,
and then outside of the parenthesis, we'll put in two colons
to target the pseudo-class in that first div.
Type in the word before then a space, put in our brackets.
I'll split this open, and now we're going to redefine
the content for the pseudo-element in the first div.
We'll type content: space, two tick marks for a string,
semicolon, and then we'll set that first label to history.
Then if we look in the browser, we'll see
that the first pseudo-class which had a content of test is
now being reset to history.
Back in our CSS, let's come in here and copy
this entire rule.
Let's hit a few returns, let's paste it.
Then, we'll come in here and change nth-child(1)
to nth-child(2), and let's change the content
from history to practices.
Once that's done you can save your work.
Now in the browser we can see history and practices,
and since we're overriding the content
in both of these divs, let's come back
to the original pseudo-class, and let's come in here
and just remove content all together.
So we'll let the first pseudo-class define the properties,
and we'll set the content in the nth-child selectors.
Now with our labels in place, let's make some room
in the layout for these labels.
Let's go back to our article nav div where we set the margin
to zero zero, 15 and zero, and let's change
that left property to 100 pixels, save our work.
Back in the browser, we'll now have 100 pixels of margin
on the left-hand side of each of those divs,
and this will give us room to position those labels.
Then back in our CSS, we'll also want
to set a position relative here because we are going
to be positioning the pseudo-elements,
and we want to make sure that they position
in relation to their parent div.
Now let's work on sizing and positioning those labels.
I'll scroll down here a bit.
Let's go back into our article nav div
targeting the pseudo-element.
After font style italic, let's add another property here.
First, we're going to set the display type.
We're going to set this to inline-block
that way we can give some dimensions to our labels.
On the next line,
let's come in here and set a position property.
We're going to set this to absolute.
Next line we're going to set a top property.
We'll set this to about two pixels.
Then on the next line, let's set a left property,
and we're going to set the left property
to negative 100 pixels.
That way this element here will be positioned to the left
to make up for the 100 pixels we put on the left margin
for the parent div.
Then, one final property down here after the left property.
Let's come in here and set a width,
and we'll set a width to 100 pixels.
Now we don't have to set a width here.
However if your labels are going to have multiple words
and need to wrap, setting a width property here
will make sure that the labels don't overlap with the links.
So with these CSS rules in place,
let's go back to the browser.
Let's hit reload, and now if I resize the browser,
notice that the links will wrap underneath each other.
The labels will stay fixed over to the left,
and we get this nice column effect
by simply using positioning and margin properties.
Now if I bring the browser down to under 500 pixels wide,
this layout starts to get a little bit crowded,
so let's go back to our CSS.
I did add a media query in here.
What we're going to do is redefine some of these properties,
so that on small screens we can have the label
above the links, so to do that
we're going to start with article nav div,
put in our brackets, and we're going to come
in here and redefine the margin left property.
We're going to set this to zero, and then on the next line,
we're going to target the pseudo-elements in both divs.
So we'll type article nav div::,
type in the word before.
Let's come in here and add our brackets.
Inside of the brackets, the first thing we'll do
is reset the position property, so we're going to set position
to static, and then on the next line,
we're going to set the display type to block.
So position: static will remove the positioning properties
from the labels and make the browser ignore
the top and left properties, and then display: block
will put each of these items on its own line.
Then with these in place save your work, go back
to the browser, hit reload and then when the browser's
under 500 pixels wide, we'll see this alternate layout.
With these CSS properties, we were able
to create a nice visual layout for our links, with labels,
without adding any code to our HTML page.
If you'd like to see more techniques using pseudo-elements
in CSS, check out either creating a pull quote with CSS
or graphics and CSS pseudo-elements.
Both are available here in the library.
And so with that I'll conclude this episode,
and as always thanks for watching.