Styling HTML Text

[00:00:00]
>> So we have our font family in place. Let's also put in our background color background hyphen color. And once again we can just draw that from our variables that are up here at the top of the page. And we want a kind of a black background, right?

[00:00:17]
So we all just say var black. So that'll make the black background kinda hard to read our text now. So let's set our color. To white. And by the way, that black and that white aren't pure 000 black or FFF white, those are slightly less than that. And that's all appeared declared in our variables.

[00:00:50]
And then we can also set our font size. Var, font size Because I like the text a little bit bigger. The next thing I wanna do, I want to think a little bit about these headings. One of the things that happens as you start to work with all of this text that's here on the page.

[00:01:14]
Is that sometimes you want to modify the distance between some of these lines. And by default your headings have margin assigned to them. And in fact, the margin assigned to all of the headings is the same. It's 1 m, e m. Which is a relative unit of measure 1m on an h1 is much bigger than 1m on a paragraph.

[00:01:37]
Because it's a sliding scale. It's very relative to what's going on. It's the width of a letter m. So, obviously that's bigger when the h1 is bigger. It's smaller when the paragraph type is smaller. So one of the things that a lot of people like to do is to turn off some of these settings like margin.

[00:01:58]
And then we can adapt them a little bit later. So that is what I'm going to do here. I'm going to say, for my h1, h2 and h3. Let's set these up to have a margin of 0. And we'll see some of that starts to close together. But, hi, my name is Jen Kramer, didn't smash right on top of I teach the web.

[00:02:30]
Why is that? Does anyone have any idea why the margin if I turn off the margin on that h2. Why didn't those two lines of text smash on top of each other immediately? So anyone have any idea? Okay, so I'll tell you, though weird trick. They are block elements that's absolutely true, but that doesn't explain why they didn't line up on top of each other.

[00:02:52]
This is the weird thing about margin and CSS that throws a lot of people. If I have two elements coming together and I have padding no margin let's talk about just padding. I have one REM of padding here I have one REM of padding here they come together.

[00:03:07]
What is the distance between those two elements? Two REM, right? 1 plus 1 is 2. In margin land though it's completely different. If I have 1 REM of margin and 1 REM of margin and they come together in CSS, how far apart are those two elements? One REM one plus one equals one in margin land.

[00:03:30]
I know it's really weird but margins collapse when they encounter each other. And if they are different values. So if I have two rems of margin and one REM of margin coming together the two wins. So we'll wind up with a space of two rems in between. Wat's happening here is my paragraph has one m of margin on it my h two had one m of margin on it now it's been turned into a zero.

[00:03:58]
So I still have a space in between those two lines. That space is coming from my paragraph. Okay, that space is coming from my paragraph. So if you're wondering why that's there. That's the reason why this is margins only in a vertical direction. Horizontally margins add just as you would expect that they would.

[00:04:18]
Padding in a vertical direction, adds exactly as you expect it would. But margin in a vertical direction has this weird exception to the rule, they collapse. Let's also set up our link styling. Let's start with an A. And we can assign a color to that, in this case I'm gonna use a var magenta, Yeah, there's that nice hot color for the link.

[00:04:56]
And right now we just have our link color. But we don't have a hover state. So maybe we wanna hover state. And so to add that, we'll just add an a:hover after that. And I'm gonna change that color to a hot mag, a hot magenta. It's subtle but it changes color just a tiny little bit when you hover over it.

[00:05:23]
And text decoration of none. So about these links I just wanted to mention real quick. Here's the rules on underlines if you want to make an accessible web page, okay? If you have text that's inside of a paragraph the way this particular link is, okay? You want to have an underline displayed by default.

[00:05:51]
Or some other methodology other than color that indicates that this is a link. And the underlined is a great way to do that. Because everyone recognizes that underlined text on the web is a link. You can turn off that underline on hover. But when you have your links in on your web page.

[00:06:11]
And they are set up this way, in other words, no underline by default. You have to actually roll your mouse over it, maybe the underline appears then. Remember that 10% of the population is colorblind. And you are now calling out your links specifically only by color. You wanna be sure that there is a second way of identifying that link.

[00:06:33]
That's one of the core accessibility principles. So I recommend that for links again inside of text you always have an underline. When we go to the navbar the position in space suggests that this is a navigation bar. Plus we'll have markup that indicates that it's such. There it is fine to turn off the underlines on your links.

[00:06:52]
But inside of your text you really wanna leave your links underlined. So that's just sort of some generic styles here that are gonna carry us through the rest of our page. Why do I say they're generic? Because so far, we've only use sort of HTML elements. Okay, in terms of calling out our CSS, we have not actually applied any specific classes.

[00:07:13]
We haven't applied any IDs. We haven't done any exceptions to the rule. So generally speaking, when you build your CSS. Build some big generic things outside of it and then create your exceptions to the rule. You're gonna wind up with and more maintainable page it's gonna be much easier to manage.