Link, Responsive Image & Default Spacing

[00:00:00]
>> For the last part of this, there's some other base changes that we need to make to our document now that we've got our colors set up, we got our fonts set up, we got our font sizes set up. The last few things that we wanna change here are things like what is our link colors and our link states, and we have some other issues that are going on down here as well.

[00:00:20]
If you notice, our image is kinda big, [LAUGH] maybe a little bit too big. We also have it not quite on the edge of the webpage here. So there's some other little tweaks that we need to make now. And so let me just walk you through those. These are other various base changes to our website.

[00:00:39]
And so what I'm going to do is I am going to set up styling for our links. So if we take a look at the HTML for our links, it looks like this, it's the ahref, right? So what would be my CSS selector to change the look of the links on my website just as I'm looking at them right here?

[00:01:01]
What would be my selector?
>> The a tag.
>> The a, right? Just regular old a, okay? Cuz that's what I want, there's a right there in my HTML, here's a in my CSS. And I'm going to set this to be color: var(--green). Once we do that, then my link changes colors, and isn't this nice?

[00:01:32]
We don't have to type in the same hex codes over and over again, we already set them all up. And we can remember green, but we can't remember, I don't even remember what the hex code was for that green. So this is a much better way of doing things, right?

[00:01:46]
Okay, now the other thing we might wanna do is, when we roll our mouse over this link, maybe we want some kind of change to happen. Maybe we want the underline to go away. So what would be my selector in that case for when I hover over my link?

[00:02:00]
What would that look like?
>> a:hover.
>> a:hover, yay, a:hover, that would be it. And then we could say text-decoration: none, okay? Wow, look at that, it works, okay? So a and a:hover, those are great things to set up here in your base styling for your document. Let's deal with this image here.

[00:02:35]
Now, by default, images, of course, as you know, have sizes associated with them. You download them off your camera, they're gigantic. Maybe you've run them through Photoshop and they are smaller, but they have some kind of inherent size to them. If that size happens to be bigger than the web browser window, you wind up with side scrolling, rarely something that you actually wanna have happen.

[00:02:58]
So one of the things that the styles that you should probably add to every style sheet that you ever write is just to take all of your image elements, which are img. Of course, that is right here in your HTML, img, src, yeah? And we're going to say the image max-width is 100%.

[00:03:22]
So don't go any wider than 100% of what? And that's something you should always ask when you're dealing with percents, 100% of what? In this case, it is the container. What is a container? A container in this case is the image's parent, which would in this case be the figure element.

[00:03:43]
How wide is the figure element? It is that wide, [LAUGH] okay? We can't see the figure right now, but we can see the image. That's how wide the figure is at this moment in time. Makes sense? Everybody okay so far? All right, now, this figure, I can already hear your graphic designer friends complaining because we have all this nice alignment over here.

[00:04:10]
All the Ts are lined up the paragraph, the list is indented the way it should be, and then we have this image that's way too indented. You wouldn't necessarily know where this is coming from, but web browsers tend to put a little bit of space around that figure.

[00:04:24]
It could be margin, it could be padding, we don't always know which one, so we're gonna zero out both of those. So I'm gonna say figure, padding: 0, margin: 0. And that will stretch your image across the screen and now it's nicely in line with everything else that's there on the screen as well.

[00:04:48]
>> Someone asking if they get lost or wanna reset to the current codepen or whatever, is there a good way to do that?
>> Yes, so if anywhere you get lost along the way, I showed you the beginning codepen here on the website. If you scroll all the way down to the bottom, there is an ending codepen down here as well, and you can take a look at the ending code, okay?

[00:05:14]
All right, so the very last thing that I wanna do is this, how many people are wondering why there is a little space. Do you see this little space here between our box and our Ts and our image, this tiny, little space over here on the left? And you see there's actually a tiny little space over here on the right as well, anybody wondering what that is?

[00:05:38]
>> Yes, now that you mentioned it.
>> EJ says, where is that coming from? An excellent question. Well, this happens to be coming from the body element itself. The body element has either margin or padding on it as well, which is often nice to keep the text from running into the edges of the web browser, until your background is some color other than white.

[00:06:00]
And then you wind up with this weird white border around everything. So to fix this problem, what we're going to do is we are going to go to our body element. So mine is around line 20, where I declared my font family, and what I'm going to do here is I'm going to add some additional styles to this.

[00:06:18]
Notably, margin is 0, padding is 0, and that should push you all the way to the edges of the webpage. We'll add that space in later as part of our design, but for right now, we're gonna take out the default. Yes, Mark.
>> Would it be a bad idea to reset everything with the star attribute?

[00:06:42]
>> Yes, all right, so the question is, could I do this? If I start at the top of the document and I say star, and I say padding: 0, margin: 0, and I could go on and on and on. Let's just remove all of this stuff. So what this particular selector does, the star by itself, guess what?

[00:07:08]
Select everything in the document. So we'll select all of the things, and let's get rid of all of the browser default settings. In this case, I'm saying, take out all the margin and padding for everything on the page. But guess what that happens then? We actually kinda like the padding and margin that were there for our text.

[00:07:25]
That was kinda nice to have. Now my list doesn't look like a list at all, okay? So now we actually have to go back and recode what padding and margin we actually do want. So this is an approach that some people take, is to turn everything off and then they recode back in what they want.

[00:07:43]
I tend to just turn off what I don't want, where I don't want it, and leave the rest of it alone and let the browser do its magic. So either way will work, I think my way has less work behind it. Let me go back to my body style here, and I'm just gonna add a couple of more things that are here.

[00:08:03]
We could say our font-size is the var(--base-size). We set this up already for our headings, but let's also set this up for our body, so all of the elements on our webpage will have our default size by default. You won't actually see much of a change, because it was already said to be one rem.

[00:08:24]
But as you know now, it will help it scale if we ever do change those values for the base size or for our scale, so we need to put that in place. And I also like to set a line height of 1.5, no units on this, why is that?

[00:08:45]
Why isn't it 1.5 rem, why isn't it 1.5%, why isn't it 1.5 anything? Why is it just 1.5, anyone have an idea?
>> It's scalar.
>> Yes, it is a ratio, so it's the 1.5 times the size of the font, okay? So when you put no units on it, then math is done, and as you can see here, that will give our headings the appropriate spacing, scales really nicely.

[00:09:14]
And it'll do the same for of paragraphs and all the rest of that kinda thing.
>> Are you able to use percentages if you want? Like, can you say 120%?
>> Sure, we could say something like that, I'm not sure what it'll do, okay. Well, so here's the problem with that.

[00:09:31]
Even though it's a percent, you can think of that as an absolute value. So it's 120% regardless of the size of the font, so when your font is big like this for the heading 1, it looks like it has very, very little space. Whereas for the heading 6 where the font is small, it looks like we have a huge amount of space, right?

[00:09:51]
But by using 1.5 with no units, then it's proportional.