Tour Text Styles

[00:00:00]
>> All right, so we've got our buttons styled. Now we need to style our tour text. So our tour text looks like this. So it's got this curly Q kinda thing going on here for the date. That's the Pacifico font. It's got the serif font here for The IVY.

[00:00:19]
And it's got a sans serif font here for Oakheart, California. And we can do this without actually changing our HTML. How cool is that? So, how are we going to go about doing this? Anybody have any ideas? Maybe the first thing we should do is this. Let us notice, we're in the main element here.

[00:00:46]
We have a paragraph, we have a span class of date, and we have a span class of club. So maybe we should style date and club first, cuz those are easy ones, right? Okay, so what should I do here for date?
>> font-family: var(--cursive).
>> family: var(--cursive). And for the club, is there anything we need to do for the club?

[00:01:15]
No, we're good. Okay, so there are ways that we can style the Oakheart, California part of this here, the actual city, that should be in the san serif font. And because people ask for wild and wonderful selectors, I'm gonna show you my favorite way of doing this first, okay?

[00:01:36]
So if we look at, pull up just that much HTML here, here is one thing we could do. We could say our paragraph, has(.club). Anybody seen this has selector before? This is the selector that goes and looks at parents. So here we're saying if the paragraph has a club class in it, then the font family should be sans serif, sorry, var(--sans-serif;).

[00:02:17]
Did that work? I might have to move this up. I think I actually have to move this up. I have to move this up here first. That worked. No, that didn't work either. Maybe it's because I put the serif on the body. Maybe that's why it's not working right now.

[00:02:39]
But this is one possible way of doing this. We could make this selector a little bit more specific. But basically, we're saying if the paragraph has a class of club in it, we can change the font to be sans-serif. Another way to do this would be, we could say main p, cool.

[00:02:55]
I made a mistake somewhere there, here it is. [LAUGH] Nobody found it. I put a semicolon inside of my parenthesis. There we go. All right, so let's try that again, p: has(.club). Okay, great. So if the paragraph has a class of club inside of it, make it san-serif.

[00:03:20]
So we're making the paragraph san-serif. And then what we would do is we would change club to add font-family: var(--sarif). So now, we have our three font families going on here. Make sense?
>> p:has is not working for me, it's not changing anything.
>> What browser are you using?

[00:03:47]
>> Firefox?
>> That's the reason why [LAUGH]. Yeah, hopefully has will be supported by Firefox soon, but unfortunately it's not supported by Firefox yet. I know, it's so sad. Yeah, so not really something you would wanna do in production, but we are excited about has coming to the browser.

[00:04:06]
So we're still waiting on Firefox, okay. Any other questions on this? We've got our font styled. And the last part of this is getting this set up so that we have our tour date on one side and we have our button on the other. You have an idea of how to do that?

[00:04:26]
>> I had a question before that.
>> Sure.
>> So you said you wouldn't wanna do has for production. So would you wanna do the main p?
>> You could do the main p, yeah. So if we did main, which is less cool, but it works, [LAUGH] main p.

[00:04:40]
I think absolutely nothing will change. Except, our buttons change. So you'll add a serif to the buttons.
>> Cool.
>> Yeah, so p:has(.club) here would leave the buttons alone.