Styling Text Solution

[00:00:00]
>> So how'd y'all deal with that particular example? Hopefully, you did okay. Let's go through my answer here on the code pen, and so we are in chapter two. This is part four, and this was my solution to the particular problem, you of course, you may have a slightly different solution that doesn't make, your solution invalid.

[00:00:21]
There's never one solution to these particular problems. So we'll go through here my HTML first because all good things start with good markup. So we start off with a section of the webpage. So we started that pattern with the introduction being a section. So this is also a section of the webpage.

[00:00:40]
I'm gonna use the section element here as well. I'm also gonna use an ID of contact cuz again I'm gonna wind up using that for some in-page navigation, we'll talk more about exactly how that works when we get to the nav bar. Which is the next thing we're gonna cover.

[00:00:56]
Then mark this up is an h2 for contact me because once again we have the h1 have already given that away, we have the h1, on the page elsewhere. So this is equally important as a heading for this particular section. And then I have a paragraph describing the kinds of things that I'm interested in being contacted about.

[00:01:16]
You're welcome to of course update that to whatever you want it to say. And then I have the link at the bottom and I have set that up to, as a mail to link. If you're not familiar with this kind of link here. You simply start your link with mail to, all one word, followed by your email address.

[00:01:36]
And in a perfect world when this button is clicked this is going to open up whatever email is set by default on your computer and it will start a message. So, mine is a Gmail type of environment for example. So when you click that particular link, it will open up a message for me in Gmail so I can write an email right there.

[00:01:58]
A better way to do this probably is an actual form with a, some kind of processing behind it. There are many ways you can write that. You could, of course, write it all out with standard HTML form and come up with some kind of processing script behind it.

[00:02:16]
You could use one of the off the shelf kind of no code type of solutions, so something like a Google form for example. Or type form or, there's a whole bunch of different possibilities out there for that. And maybe embed that in the page as an iframe, that would be another way to go about this.

[00:02:34]
So, these email links tend not to be used all that much because there are some downsides to them, notably if people don't have email configured on that particular computer. Okay, so let's go through what the CSS winds up looking like then. So I added my CSX section down here, just after my introductory information, all of the other stuff that we wrote previously.

[00:03:01]
And so here, in my contact section I set a width for it. I've only 400 pixels, and I centered the text, center align the text, and set my margin to zero auto, and this is a way of aligning elements on the webpage and centering them. So in this particular case, remember when you have margin or padding and you have two numbers, the first number refers to the top and the bottom.

[00:03:31]
The second number refers to the left and the right. And so margin zero auto works hand in hand with a width value. So in this case the width value is 400 pixels. And what this is saying is, don't put any margin on the top of the bottom, obviously.

[00:03:47]
And then whatever extra space there is beyond 400 pixels, Mr. Browser, I'd like you to take that space. I'd like you to divide it in half and stick it evenly on the left and the right of that particular box. So it centers the whole box on the webpage.

[00:04:04]
Again, you could have used a Flexbox to do this, but we haven't gotten to Flexbox yet. This is an old school way of doing it, it's absolutely legit. It continues to work really, really well. And then I added a little bit of padding on the top of the bottom, so they will have a little bit of breathing room as we start to stack these things up on the webpage.

[00:04:24]
And then on my last paragraph you could have done this, once again, you could have done this, with a class, you could have assigned a class to this paragraph with the email me link on it. In my case I simply said, this pseudo class of last child. So what does that mean?

[00:04:41]
That means take a look at all of the paragraphs that are here inside of this document, pick the last one that's here, the last child of the contact section and give it some padding at the top of three rooms. So give us a little bit of breathing room there as well.

[00:04:56]
Now the one thing here that might look a little bit odd to you is that I've made the entire page purple. And that is because up here in my body element, I changed my background color to plump, okay? So we know that we're headed towards this goal of putting everything together in a webpage.

[00:05:15]
So my introductory text now has a body background color of black, and my contact section has a body background color of purple, we'll eventually need to resolve that. But I'm not gonna worry about that for the moment. We've basically got what's going on here. File that away in the back of your head that we're gonna need to think about how we're gonna change the colours for the backgrounds.

[00:05:38]
The intro versus the contact section when we eventually assemble this into our webpage. Any questions on this particular problem?
>> Should we add this to our existing code pen? Or why are we making a new code pen for this?
>> So my goal here is to sort of isolate each part of this web page inside of its own code pen.

[00:05:58]
I'm copying from through the CSS as it goes, so we're creating a unified stylesheet. We don't have to keep redoing a whole bunch of work from that, but I'm looking at each piece of HTML individually. We are going to reassemble all these elements that we're putting together into VS Code to make an actual quote, real webpage.

[00:06:19]
You can just keep this as its own code pen for the moment and you'll refer back to this when we get to that part of the course.