Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When I build WordPress themes, I try to work in a systematic fashion. First, apply CSS to the existing elements to get the existing theme to match my designs as closely as possible, and then add new elements and change those existing elements one at a time and style them as they appear. Now that the custom web fonts are enqueued, we can start working on the overall appearance of our site by applying CSS to what is already there. We'll start by applying a set of global styles that control the overall appearance of the content on the site, including font families, colors, sizes, and other basic elements.
All this work is done inside style.css. Now if you scroll past the intro, you'll see a section known as reset. Underscore ships with a CSS reset which overrides any preconceived style notions browsers might have because different browsers think that different elements, like headers and main body content, should look different. We want them all to look the same across different browsers. Applying this reset means the theme has to style every single HTML element from scratch.
Some of this work has already been done by the creators of Underscores, so what we're going to do is add our own style and class to the existing styles. You should never touch the CSS reset, so start off by scrolling down until you get to the typography section. Here, we'll begin by setting the default font family and font size for all content, and here you see something kind of neat. The Underscores theme uses rem for font sizing. Now, a rem is relative m size, and if you've ever worked with m sizes, which are really important if you're going to make response designs, you know that getting the math right with m sizes can be really complex.
Well, a rem size is a smart relative solution. A rem size is relative to the outermost defined font size, which means the body. And in the reset, the body is already been set to 100%. That means if you want to match, let's say, 16 pixels in font size, you say 1.6 rem. If you want to match 18, you say 1.8, and so on. So, by using rem sizes, it's much easier to get the relative font size right. However, not every browser supports rem, so we also have to have a fallback, which is why we have the pixel size as well.
In my design, my general font size 18 pixels, I'm going to change it here to 18 and 1.8 rem. I'm also going to change the font-family to just serif, and then its PT Serif that I want to use. So now I have both the custom font and the fallback. I'm also going to use HSLA colors in my theme, so I'll say color again, and hsl, then 0, hue, 0% saturation and 25% lightness, which makes for a slight gray.
And again, I have to still have the hex color as a fallback, and that's all I'm going to do right now. Now I'm going to save style.css, go back to my browser. This is what the site looked like before. I'll reload it, and now we get a new font. So this is PT Serif and you see that the font is also slightly bigger than it was before. Now that I've styled every single piece of text on the entire site in the same font, I need to apply extra styling to my headings because you'll remember that all my headings and some other content uses the Lato font instead.
So I'll go back and scroll down and find the global styles for the headings. This will apply to every single heading, so the sizes will come later, and here I'm going to change the headings so that it clears just to the right. I'll set the font weights to 900, which is the heaviest font, font family to Lato, and fallback to sans-serif. I'll set the color to black, and an HSL color. And now, I can save this rule set, reload my page again, and you'll see now, all my headings have the Lato font size.
Now, because we're starting from scratch, we need to restyle a lot of the content. And watching me do this all by hand would take a long time and be quite frustrating, so in the code snippets file, you'll find all the styles that you need to apply. And all the styles that are listed in the code snippets for this movie are styles that you'll be replacing inside this list. So if you scroll down, you'll see, for example, that we have under forms, there's a section for form buttons that you'll replace and then further down, we also have a section for links that you'll replace.
So, before we continue, go check out the code snippets file. Grab the cold snippets for this movie and slot them in where appropriate by matching the rule sets that are in the snippets file to the rule sets inside style.css. And then when you're done, we'll continue with the next step.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Your file was successfully uploaded.