See how to incorporate combinators into the course project.
- [Instructor] Let's look at our page layout so far. In the work experience section, I want to style this paragraph, containing the employer info, to make it look different from the paragraph containing the date. I also want to remove the padding from both of the paragraphs, to space them closer together. If we scroll down to the education section, these same styles can also be applied to those paragraphs too. Let's go back to the text editor and look at the HTML. In the job section, the content is contained in an h3 followed by two paragraphs. If we scroll down to the education section, we'll see that it has the same markup, an h3 followed by two paragraphs. We could add a class to each of these paragraph tags to style them, but we could also use the sibling combinators we just learned about. Since we'll be adding this style for two sections, let's add it to the global area in the CSS file. To select the paragraph immediately after the h3 heading, we'll use the adjacent sibling combinator. The selector will be h3 plus p, which will match to only the first paragraph that comes right after h3. Just a reminder, the space is not required before or after the plus symbol, but I like to add it for readability. I want to italicize the text, so I'll add font style italic to this declaration block. Let's save the file, and check our changes. Now we can see that the italicized font has been applied to only the first paragraph. I also want to remove the padding from both of the paragraphs. So this time, we can use the general sibling combinator so we can select all the paragraphs following the h3. Let's go back to our CSS file and add that in. This time it's going to be h3, the tilde symbol, then p, and then we'll set the margin to zero to remove all of the space. Now let's save the file and check our changes. Refresh, and no more spaces. I also want to remove the space at the bottom of this h3 just to have them all be a little bit closer together. Let me just scroll up and see how it looks in the work experience section. Okay, so let's go ahead and remove this space at the bottom of the h3. Back in the CSS file, we'll create a new selector for just the h3. I'm going to add it before my sibling combinators just because it's a type selector and it's a little more general. So, margin-bottom, zero. Let's check again, save the file, refresh the browser. Great, all the space has been removed, everything's a little bit closer together. One little problem, it looks like it's now being applied to our projects section, so that means we'll have to make this style a little bit more specific, but still reusable. Let's look at the HTML again. We have to find a way to contain these styles to a specific element that both the sections can share. So the h3 and the paragraphs are contained within these section tags, but if we add a class here, we'll have to add it to each section containing these items. We can go up a layer and add a second class to the content wrap div, since this div wraps all of these items in both sections. So let's add a new class here, let's call it item details. Remember to add a space when using multiple classes in the same element. I'm going to call it item dash details. Now back in the CSS, we're going to add this new class name just before the h3. Item dash details, space. Now we'll match to the first paragraph following an h3 that is nested within an item details container. Let's add that to the second selector as well. Save both files, and check our page. Refresh, let's see, something did not go as planned. Let me double check. Item details, item details. Okay, so I've only added it to my education section. Let me add this class to my work experience content wrap, as well. Okay, let's try that again. Save the file, back in the browser, refresh. There we go. So now it's not included in the projects section. We didn't want that here, but we do see the style in the work experience section and the education section. At the beginning of this lesson, I mentioned that we could've used classes to achieve this effect, that would have been a valid option as well. Sometimes there isn't an exact right or wrong way to do something in CSS. It'll take practice, don't be afraid to go back and rewrite something if you found a better way to do it.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts