Styling the Intro Section

[00:00:00]
>> So for the rest of this then, Let's say that these are our intro styles, so these are going to be styles specific to this intro section of text for the rest of this. And I'm gonna start with generically on my intro itself, maybe we'll put some padding on the bottom of 10 rem.

[00:00:25]
You won't actually see anything happen here but it will show up when we start to assemble this into a full web page. This will give us some nice space in between the end of this introduction and before we go into the next section of the page. We're gonna also add some other styles.

[00:00:42]
So again, for the paragraphs here inside of our intro, we may want the font size to actually be just a touch smaller. We set it to 1.3 rem on the body of the document, but here we want it to be slightly smaller, so I'm gonna say it's 1 rem.

[00:01:00]
That will make all of that text just a tiny little bit smaller, and our line height is 1.5. Okay, now, some of you may look that and go, 1.5 what? So this is one of the big mistakes that a lot of people make with line height, and that is that they add some sort of unit of measure along with this.

[00:01:22]
When you add a unit of measure to line height, you've now set line height to be an absolute unit of measure. So if I said for example 1.5 rem, you won't see any necessarily any visual distinction here with my particular website, but if I blew the text up a little bit more, that line height would be unchanging.

[00:01:43]
When you take the unit of measure off of line height, it's now a proportion. So what I've said here is 1.5 times whatever my font size happens to be. So if I blow my text up in the browser, again, an accessibility to type of thing because I need to have a larger font size to be able to read this page, then the line height will blow up proportionately.

[00:02:05]
If you don't do that, you'll end up with a text that overlaps on top of itself, when you blow up your fonts inside of the web browser, maybe you've seen that in action before, okay? So when working with line height, remember it's a proportion and leave off the units of measure.

[00:02:22]
Okay, so let's focus on the name portion of this now up here on the top. And once again, if we take a look at what we're trying to build here, hi, my name is, is clearly not that Oxygen Sans Serif font that we've been working with, so let's change that.

[00:02:39]
And to do that, I need to select this particular paragraph here. And I could do that with something like first child, or I could just add a class to this. So I am gonna add a class to this called name and I'm gonna put that on the paragraph itself.

[00:02:55]
So here in my HTML on line 3, my paragraph is now p with a class of name. And then down here in my CSS, I can say intro .name, and change my font family, so font-family: var (--mono). So there's that, hi, my name is, but of course, Jen Kramer is not quite right.

[00:03:27]
All right, now I need to target just the name portion of this, that span tag that I have here. So let's write a class for that as well. So this will be name space span, I don't need to create another class for this, span is a perfectly good HTML tag.

[00:03:47]
Normally, it has a class associated with it, but because I put the class on the paragraph, and I only have one span element inside of this, I could write a style just like this. If you feel more comfortable adding a class to the span tag, you could do that too.

[00:04:01]
All right, so here we'll say font-family, we'll have to reset it again, var(--sans), okay? And then we need a font size for rem, right? Make it nice and big. And then we want the color, Aqua. Now here comes the fun part, how do we get it on its own line?

[00:04:34]
Do we have any suggestions? How would I get this font its own line? What is span by default? Is it block or is it in line?
>> In line.
>> In line, right? So if something is in line, it is in line, it is part of that whole paragraph.

[00:04:53]
If we wanted it on its own line, it should be what? Probably a block, yeah. So to this, we can simply say, display : block. There, now it's on its own line. And finally, the last thing that I wanna do is this, intro h2 font-size: 4rem. There we go, I teach the web, nice and big, but of course, you could always mess around with that if you wanted to say something like, font-weight: normal.

[00:05:33]
Since this is coming from a Google Font, it tends to display the weight that we had for the Google Font, which I think we use the 400 weight or 300 weight Oxygen font. So it looks the way it looks. I think that went down just a tiny little bit in terms of boldness but you can mess around with the font weight to make it look the way you want.

[00:05:52]
So there we go, we have constructed our first part of this webpage. What we did was we took just that little bit of text, we dropped it into a code pen. And then we worried about styling that all by itself in its own little universe, and we wound up with this particular look to the web page.

[00:06:13]
Not too awful, right? A nice way to look at this and break the problem down into smaller pieces.