Transcript
This lessson will focus on the type styles for the "About" and "Tour Packages" sections.
In looking at our final design, we see a few colors being used for the headlines, the main body copy, and a special color to highlight this lead text even more.
The first thing we want to address is the main color for the body copy. Let's start a new section in our stylesheet for the /* Main Content */. And for the main element itself, we will define the color as a light gray.
/* Main Content */
main {
color: #767676;
}And on save, we see that this color has been applied to all but the link elements.
To gain the color distinction on the headlines and the lead text, we will create two color classes for type.
The first class we will create is text-dark which will use our navy blue brand color. And the second class will be text-medium which will be a light blue to compliment the brand navy.
.text-dark {
color: #150f64;
}
.text-medium {
color: #7893dc;
}Then in our index file, for all of the headlines we will apply the class text-dark. This includes the headlines within our future cards for the tour packages. And on save, you can see that that color has been applied.
We will then apply our text-medium class just on this strong element that wraps the lead text.
The other update we want to begin to address is the spacing around these sections. And for that, we need to create a new alignment utility.
Whereas in the last lesson we created margin-v-0 to remove top and bottom margin, in this lesson we will create margin-v-lg to add a margin top and bottom of 40 pixels.
.margin-v-lg {
margin-top: 40px;
margin-bottom: 40px;
}We will now apply the margin class to both of the sections contained within main.
As a reminder, let's inspect and see what's happened. If we inspect the sections, we will see that the margin between the sections is only 40 pixels due to the behavior of margins for block elements called "margin collapse". You can review this behavior in the Foundation's lessons linked in the transcript.
Review this Foundation's lesson which covers "margin collapse".
The last adjustment we will make for this lesson is to create the class that limits the width of the "About" text. Notice that this width is similar to that used for the intro text. When we created our base header styles, we initially created a scoped class to limit that width. Now that we would like to apply it in more than one location, we can turn this into a utility class that is aplied both for the "About" text as well as for this header intro.
Let's cut this value and move it to our utilities section. Instead of the rule being scoped to the header, we will change this to create a class called .max-line-length.
/* Previously `header .lead` */
.max-line-length {
max-width: 40ch;
}On save, this has removed the max-width from our header, but we will reapply it by adding this class in the header. This class is applied to the lead element, and in the "About" section we will apply it to the overall paragraph.
And on save, we see that's not quite what we want. We need to adjust this value to be a bit wider. Instead of 40ch, let's bump it up to 60ch.
Sometimes creating reusable utilities means a compromise to reduce the need for one-off styles and promote consistency throughout the website.
In summary, we created two text utility classes to apply our brand blue and a complimentary blue for our text, as well as created a margin class for top and bottom margin and moved our scoped header class to a utility class called .max-line-length which we also applied to the "About" intro text.