Style Guide: Image & Links

[00:00:00]
>> Okay, good, so let's move on here. The next thing I wanna do is address the picture that's down here at the bottom. The picture is kind of ridiculously big. So what did you guys do to deal with this picture, yeah.
>> I just did width 97 vw, cuz that's what the screenshot looks like.

[00:00:21]
>> Okay, so you just said img like this?
>> Yes.
>> Okay, and you said width of 97vw, okay. So that is definitely one way to deal with this. Anybody wanna discuss that, positives and negatives of going this way?
>> I think the positive would be it's the height of whatever screen you're viewing it on.

[00:00:45]
>> Right, so as I change the size of the screen, it's obviously gonna scale, right? Anything else? Are all of my images gonna take up the full width of the screen? Probably not, so this is probably not the best choice in this specific case. But we're trying to be general here across all of the images on the site.

[00:01:10]
So probably the better way to go for this is going to be just say a max-width of 100%. Don't be any bigger than the picture is, okay? So what will happen then is, and I can't make my screen big enough for this picture, the picture is gonna continue to grow until we hit the maximum width of the picture, and then it's gonna stop growing.

[00:01:34]
And that's actually a really good thing, because otherwise if it kept growing, it would get ridiculously fuzzy, right, okay.
>> I get the same response when they add a width is 100%.
>> [LAUGH]
>> You can set the width to 100%. Setting the width to 100%, a question is always, relative to what?

[00:01:55]
The width is 100% relative to what? Is it the size of the screen? Is it its container? So it depends, but again, that's another situation where the image can stretch beyond the actual width of the image itself. Because images have an inherent width to them, right? So max-width will ensure that it doesn't stretch beyond that inherent width of the image.

[00:02:21]
>> So max-width is based on the image's properties and not the element's properties?
>> Correct, on the image's properties.
>> Blown my mind here.
>> Okay, so that's why we use this.
>> But width is-
>> But width is, could be relative to its container, whatever that container is.

[00:02:38]
Whether it's the body, whether it's some div, whether it's an article, whether it's whatever it happens to be.
>> Okay, so, well.
>> Yeah, relative to what? There are a lot of questions that people don't understand in CSS. And if you understand these handful of questions, it all clicks into place.

[00:02:56]
Relative to what [LAUGH] is one of them, [LAUGH] and what is it inheriting is the other, okay? And those are pretty much, whenever you run into any problems in CSS, relative to what and what is it inheriting will solve all your problems, if you can think about those two questions.

[00:03:12]
Okay, so what other thing could we give to this, sort of globally? How about a border radius? Border-radius, var, whoops, border-radius: (var --radius), here we go. It's a very subtle radius, it's just 5 pixels, but we just trim off the little points on the ends. Okay, now if we look at our HTML, we know that our image is inside of the figure element, right?

[00:03:50]
Okay, and notice that our image is not pushed to the side of the page. So what's going on there?
>> Figure itself has a margin.
>> How did you find out that the figure itself has a margin?
>> With the clues that you gave me?
>> [LAUGH]
>> When in doubt, put a border on it.

[00:04:11]
Okay, border, usually I use red, but it doesn't really work with this color scheme, so 1 px solid black. Okay, look, so the border is around the picture and the words, and those are all smashed to the edge. But then we have a space between the border and the edge of the web page.

[00:04:32]
So is that space between the border and the edge of the web page, is that padding, or is it margin?
>> Margin.
>> Margin.
>> Margin, right? Margin is outside of the border, inside the border is padding. So what we can do then is say margin is 0, this comes from the web browser.

[00:04:53]
And that'll push it over, and then we can turn off our border. Okay, we have a link to style, how did you guys style the link?
>> Didn't get there [LAUGH].
>> Didn't get there?
>> Didn't get there.
>> How would you style a link? Anybody wanna take a guess, how do we generically style links?

[00:05:15]
>> Well, we want to apply that color.
>> Go on, Anna.
>> Generically styled links are, sorry.
>> All the links.
>> You said generically style links and I was thinking about this specifically, so.
>> All the links in the document.
>> To target the links, you could use the a element.

[00:05:30]
>> a, yep, just plain old a. Just like that, because the HTML is plain old a, right? There it is. So I have a color of var, I did it again, color: var(--green). Okay, so that makes it green. And then I wanna change the hover state. So how would I do that?

[00:05:58]
>> a:hover.
>> a:hover, and I can turn that off. How would I do that?
>> text-decoration:none?
>> Good, text-decoration: none. So now when you roll your mouse over at the blue underline should go away. So you're gonna do some sort of generic link styling here in your style guide.

[00:06:24]
These are for links that are probably going to show up inside of a paragraph. When you get to your nav bar, when you get to buttons, you get to all kinds of other things, you're gonna completely style those links completely differently and override those, yes.
>> Why does the body color not override the color of the link?

[00:06:40]
>> So the body has a background color to it, right? And we set the color to be brown. By default, in your browser stylesheet, it's a white background with black text, okay? And so we overrode that. Inside of that browser's stylesheet, the link is actually coded to be blue and underlined, and purple when visited, and no hover state.

[00:07:08]
All of that is inside of the browser stylesheet. Because you can think of that as being closer, that styling is closer to that element. That overrides what comes from the body, which is inherited. So the browser styles apply until we write our own styles, and then we override what the browser is doing

[00:07:31]
>> For links specifically, because they've been styled already?
>> Exactly, links have been styled already inside of the web browser, yeah. And if you guys want more on that, intermediate HTML and CSS course here at Frontend Masters. I spend a lot, a lot, a lot of time explaining about the cascade, and then inheritance, and how all of that works.

[00:07:49]
So that would be something for you to watch.
>> Is that the same principle as if we were just, say, put a margin or padding on the body? And then that's the same reason why that's not inherited to paragraph?
>> Yes, so in that specific case, if we say 0 padding and margin on the body, why isn't that inherited, anybody know?

[00:08:10]
If we said that we have 0 on the body, why do our paragraphs still have padding and margin?
>> Based on what we just said, it's specificity.
>> It could be a specificity thing, but in this particular case, generally speaking, properties that are associated with the box model, padding, margin, borders, layouts, all kinds of things like that, do not inherit, right?

[00:08:32]
Cuz if it did inherit, if I put a border: 10px solid red on the body, I should wind up with borders on all of my elements, but I don't. And that's because borders don't inherit. Likewise for padding and margin and so forth, those things don't inherit, make sense?

[00:08:55]
Not everything inherits, that has to do with text, generally it inherits. If it has to do with the box model, generally it doesn't.
>> I know this isn't globally applicable, and it probably breaks very quickly once you get into more intermediate details of CSS. But coming from an educational psychology background, [LAUGH] I found myself thinking about parent and child.

[00:09:16]
>> Yes.
>> Like the child will only inherit very specific and almost sort of subconscious aspects-
>> Yes.
>> From the parent, and once they get to the level of having their own specific style, they will generally rebel against the default parent styles.
>> There you go.
>> In most ways, but not always.

[00:09:34]
There will always be some subconscious inheritances that need to be-
>> Love it.
>> Specifically overwritten. [LAUGH]
>> I love it, we do talk about parents and children a lot here in HTML, so yeah, you are actually spot on.
>> Yay.
>> Yeah.
>> I'm glad my goofy psychology metaphor works [LAUGH].

[00:09:48]
>> Your psychology metaphor works beautifully, I love it. Okay, we're almost done with this. All right, so the last thing to worry about here. Not quite the last thing, we have the header and we have the color boxes. Okay, so let's take care of the header. Scroll up here to the header.

[00:10:07]
So I saw a lot of you doing this. You're just kind of doing h1, and you did a background, Color of var(--coffee). So what this does, of course, is it puts that brown background color on all instances of h1. Not quite what we want, right? Okay, so we can change that.

[00:10:36]
What we really want is we want a big brown box at the top of the page, which isn't necessarily all of our h1s. So if we look at our HTML, we have a header element here that we can use. So let's say header instead, and we'll give it a background color of var, (--coffee), okay, and we can give it a border.

[00:11:06]
This is the big trick here. Well, before I reveal that, let's set up our header, h1, color is var(--vanilla). So there's that. Okay, so why does that work?
>> That is selecting all h1s that are children of header elements.
>> Correct, all h1s that are children, or not necessarily children, just descended from the header element, right?

[00:11:42]
Happens to be a child, but it doesn't have to be, we could have it several levels in, okay? So that's how we set it, that becomes vanilla, even though the other h1s are still coffee, all right? And we can also set, Okay, back here on my header. I'm sort of working on both of these at the same time.

[00:12:05]
Let me put in my padding top of 1rem. And I'm thinking I missed my header. Nope, I've got the header. The margin on the bottom. 1rem, 0, I want padding, I want space on the top and the bottom. So let's say padding of 1rem, 0. And I'm gonna reset my margin bottom-left 0 to make that a little bit even, okay?

[00:12:52]
And then the big magic is my border-bottom. 20px double var(--tan). So Dinesh said this was his big challenge, look how easy that is. [LAUGH] So, we often work with solid borders, sometimes we work with dotted borders. Very occasionally you'll see dashed borders, but double is also a value.

[00:13:28]
It's one of my favorites because people almost never heard of it. And it will put in two lines, just like this. And I think it's a very nice way to make your heading look there on the top.
>> I had to change the HTML to do that.
>> You did?

[00:13:46]
Okay, so, just the border-bottom of 20 pixels double, that'll set up that, okay.