Text on Background Image Exercise

[00:00:00]
>> The next thing to do here, if you scroll on Chapter 2 and you scroll past the comment, we are at Chapter 2, you try it. That means you try it, okay? So what I want you to do is I want you to code the contact me portion of this webpage all on your own.

[00:00:20]
You can do this. So we're gonna go through that same exact strategy. Look at the text in the HTML block, change the text to reflect your own life. Then you're gonna mark up all that text with HTML, adding a section in a container around the text, make an at layer for your contact styles, okay, and then you're gonna add the styling to the page.

[00:00:44]
And I've given you here the Aurora background image URL is right there. So you can have this background image, sound good? So if you take a look at the beginning code pen here right, all this stuff styles that we already wrote are in there. Change the contact me in whatever way you wanna change it.

[00:01:06]
And then you're gonna have to mark it up with HTML and then you're ready to style it. Let's take a quick look at how I solve this problem. So if we scroll on down here to our ENDING CODEPEN. This is the way that I wound up putting this together.

[00:01:23]
So first of all, always start up in the HTML and make any changes to this text that you wanna make. So if that didn't sound like you talking, you wanted to change these words in whatever way, you're welcome to do that. Remember that we had to wrap it.

[00:01:39]
A section around the whole thing. So I gave that a class of section contact because it's a section and it's the contact section. I wrap my container around that that will consistently keep this section to 1200 pixels or less, and it will be centered on the page when it's big enough.

[00:01:57]
Right now I've got it kind of small. So you won't see that. Contact me were the most important words in this particular section. So those got the h2 and the other two items, get a paragraph. And then the last part of this that you may not be familiar with is making that button, when you click it, go email somebody.

[00:02:17]
So this is kind of an old school way of doing it. But it works just fine. You say a href, just like you would for a link, and then you put the word mailto all one word colon with your email address. And I gave that a class of button because I want this to be styled differently.

[00:02:36]
So when I roll my mouse over it, okay, it's styled differently than the other links that I have on the webpage. So that's my HTML markup. Flatten this all up here. I added a layer with the name of contact because that is the name of where we're working here.

[00:02:58]
I set up my client class for section of contact. I set all of the text inside of this to center. Remember, centering text is a little bit different than centering a box. If we wanna center a box in space, we can use that margin 0 auto to center that box in space, but with text, we use text align center in order to center the text on the page.

[00:03:19]
I gave it some padding. I used six rems. If you used a different number, it's not a big deal. But basically you wanted a lot of breathing room on the top and the bottom of the words. And then for the background, this time it looks like I wrote all of my properties in one single declaration.

[00:03:37]
Remember just the word background as a property, is shorthand for a bunch of CSS property. So, in this case, a background color, a background image, and a background position. All of those things I lumped together. So if you have a background image with a URL, you have a background color maybe, that would be optional.

[00:04:00]
Add a background position of something on the page. Maybe you use percents for that. I use center and center so that centered it left and right centered it up and down, all that would be just fine for answers. And then I set my color here for the text to white.

[00:04:18]
Then I did a little bit of magic here at the very end, P last child, that is kind of a wacky looking thing there, right? So, P, obviously is a paragraph, right, section contact, that's the section that we're talking about. What would last child mean? It sounds very sad [LAUGH].

[00:04:43]
It's the last child, lost little child paragraph. What do we mean by that? Okay, so if we take a look at our various children that we have here, remember our HTML nests as we go in, and we're looking at the last child of all of these. This would be the last paragraph child here.

[00:05:06]
And for that, then we're going to apply this style, margin-top 3rem;. That gives us a little bit of space between the paragraph and the button. So that's what that is doing. You could have done that by creating a class for that particular paragraph as well, that would be just fine.

[00:05:23]
So then we have the button styling. And you could put the button in the contact part of your CSS here, but if you ever wanted to change that button later, that particular button style is probably something that we're gonna use a lot of places on the website. So I happen to probably put mine here in the base part of our layers.

[00:05:42]
If you put it in the contact, it's absolutely fine. This is just a matter of finding our code. So we scroll on down here. All right, so our button has a whole bunch of styles associated with it. First of all, I've given a display of something called Inline block.

[00:06:00]
My goodness, what do we mean by inline block? We have inline. We've talked about inline. What is that again? In line means it is as wide as?
>> It's content.
>> It's content, right? We have block which means It's as wide as the container, right? Then we have this weird thing called inline block.

[00:06:28]
We put those two things together and what inline block says is it's gonna be as wide as the content, but it also gives us the ability to add some padding and margin on the top and the bottom, which inline elements do not permit us to do. So that's why that weird inline block thing is there.

[00:06:46]
If we were to take that out, I don't, I'm not sure that this would be totally a tragedy. Yeah, it didn't really change a whole lot there. But generally speaking inline block is something that you're gonna see added to a lot of buttons for that particular reason. You see Twitch a little bit there that has to do with some of the spacing.

[00:07:06]
I gave it a background color of green. I gave it a color of black. Those are the standard colors here for our button. I gave it a little bit of padding around the edges I happen to use 0.8 rem. If you use one rem or some other number, that's fine.

[00:07:22]
I rounded the corners at five pixels of radius. I turned off the underlying text decoration of none. I gave it a font family of the headline family, the Josephin Sans, so it should be uppercase. In fact, this table Text transform of uppercase I probably really don't actually need.

[00:07:40]
I could get rid of that. I gave it a font weight of 600. I reduced its line height to only 1, and I skipped right over our font size. I'm gonna come back to that. So you notice here for the font size, I gave it a variable of small.

[00:07:55]
That means I had to set up a new variable and I'll walk you through that just a moment. And then on hover, all we're doing is changing the background color. So when I roll my mouse over it, the background color is gonna change to tan, everything else will stay the same, okay?

[00:08:10]
So if you don't have all that many properties and your button still looks pretty good. It's a green button with black letters, it kinda breeze has a little bit of breathing room around it, you did just fine. That is absolutely great. You don't have to have everything like I have perfectly because I haven't given you a perfect spec.

[00:08:28]
I just sort of said make it look kind of like this. So the font size with a very variable of small, where does that come from? Well, back up here in the root where I have all of my variable declarations. You'll see here that I added a new font size course.

[00:08:49]
This is the size of small. And so what I did here was I calculated the base font size and instead of multiplying it by scale which obviously makes it bigger I divided by the scale which will make it smaller. And I just set that up as a new variable and assign that size to the button.

[00:09:08]
>> Could you explain again how text align works.
>> Text align, so this is the question of aligning text inside of a box. So this is not gonna align other boxes inside of boxes. So if you're doing flex box, if you're doing grid, aligning those boxes and space is going to be different.

[00:09:28]
But we are just talking about the actual text itself. And let me go back to my style here. So this text align center is going to align this actual text here in the center of the screen. If I changed it to right, this is gonna put my text over on the right side of the screen.

[00:09:50]
If I said left, it's gonna put it over on the left side of the screen, make sense? And because I'm putting it on the section itself, and because this happens to be an inherited property, the text align is, it will affect everything inside of this particular box, just the text.