From the course: CSS Shorts

Get your links in a row - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Get your links in a row

“

- [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.

Contents