Variables & Styling Setup

[00:00:00]
>> So, now we're gonna style this particular text and you have the website to refer to take a look at colors and all the rest of that. Where I'm going to actually start is at the end point here and I'm gonna walk you through this part of this because I wanna be sure that everybody gets they're starting CSS set up the same way that I do.

[00:00:20]
So I'm going to go a jump briefly to the end point of part three, so this is chapter two part three the ending code pen. And this is where we're going to make it pretty and I'm gonna walk you through this part of this because I want you to be sure to start your CSS the same way that I do.

[00:00:37]
And I'm actually gonna start at the ending code pen here because we're gonna copy over a big chunk of text that I've already written for you. I'm so nice that way, so here In the CSS for the ending state of part three, and then we'll walk through how to actually style this.

[00:00:53]
We are going to go just up here at the very top of this document. Now this may be new to some of you. This is the concept of CSS variables, also called CSS custom properties. This is not a course on variables and custom properties, but they are incredibly useful for spelling out things we're gonna use over and over again, in this case, colors and font stacks.

[00:01:16]
And I think I even have a font size in here. So variables work just like you would expect. You remember about variables from algebra, x equals three. So x plus four equals seven. What is the value of x? It must be three, right this is the same concept here inside of CSS.

[00:01:34]
So what we do to set this up we have these available globally to us so in other words we can use these anywhere in our CSS document. To set it up we use this colon route and that is called a pseudo class, it indicates this is the top of our document.

[00:01:52]
Now, you might be thinking well why not just HTML? Two reasons, one there is a before and an after associated with HTML. And by using route we're gonna encompass all of the things everywhere, right, the entire document object model. Second thing is has to do with specificity. So, a pseudo class is more heavily weighted in the cascade, than a simple HTML element like HTML.

[00:02:19]
[LAUGH] So this is going to weigh thing a little more heavily, give us a little bit more specificity, and potentially overrides some other things that we might do in our documents. So, this tends to be what people do in order to set this up. And so, here I have my entire color scheme, you start each of these variables with double dash and you give it a name and that name can be anything you want.

[00:02:42]
And I could have called this George Salmon, Mary. But I call these by the names of the colors. Some people would say that that is a completely wrong way of doing things because now I'm associating a hex code with a name for a color and what happens if we change things over time?

[00:02:58]
That's fair. That's why you often see things like primary color, secondary color and so forth inside of stylesheets. But I'd also argue that it's pretty rare that companies change their branding. And that if your graphic design team has named these colors, which, our graphic design team totally named these colors, then you can just use those words that will refer back to some style guide that you might have access to and map those colors back there.

[00:03:30]
The second part of this has to do with the border box model here. And you can read about that at CSS tricks. They'll explain the border box model and how that works. It's also explained in the front end masters boot camp. We wanna work with the border box model and so to make that happen, we need to have a declaration here, that will set us at the border box and then set us up to inherit from there.

[00:03:55]
So basically what I'd like for you to do is to copy lines, one to 22. We're just gonna copy that. And we're going to paste it into the code pen that we're about to start working on. You can get rid of this body font family of Arial that was just there to keep the text from looking too awful.

[00:04:14]
And we are set and ready to go there, okay? So that gives you that baseline so we can refer to those colors later on. Now, if you're using your own custom color scheme, feel free to swap in your own colors here and set that up according to whatever color scheme it is that you are using for your particular site.

[00:04:32]
So let's go ahead then and start setting up the rest of this particular document. First of all, we would like to set up the styling for this web page. And I always like to do this using the body element. And the body element of course encompasses pretty much everything that's visible on the web page.

[00:04:53]
By default, your browser will put either padding or margin on it. So anytime you've seen that situation let's just say we have a background color of blue just for the moment. Here on this page actually let me change that the section color with a background color of blue there that's better.

[00:05:13]
See how we get that weird white wrapper around that whole thing there and the color doesn't stretch all the way up to the edges of your browser window. The reason why is that the body element has either padding or margin on it and it depends on what browser you're looking at.

[00:05:32]
So what we do here to get around that particular problem is if we say our padding is 0, and our margin is 0 Later if we say our section has now a background color of blue, now you see that stretches all the way across the page, okay? We have an issue with the top and the bottom that's a different issue that actually doesn't relate to the body element.

[00:06:05]
But that we just solve that particular problem now we can have color that goes all the way to the edges of the screen. So then the next thing I like to do is set up all of my default fonts that I'm going to use, we can always override those later.

[00:06:20]
And I'm going to set up some colors and some font sizes as well. And I'm gonna make use of all of these variables that I just set. So I set all of this stuff up. It's stored out there. We know if when I type in a color of black, what to display, but I haven't actually called any of these variables yet in my CSS.

[00:06:39]
So here's the way we do that. We're gonna say our font family has a variable this is the way you do this, of the name science. So all you have to type do is type in var, v-a-r is in variable, two parentheses and then inside of it, the name of the variable.

[00:07:00]
So these are the names of the variables. In this case, we want Oxygen, sansaraf, and so that will load in that particular font. Now we have an issue, don't we? This is actually Ariel that's displaying here. Why is that? Because here we've said Oxygen, sansaraf. Oxygen isn't loaded in this document yet.

[00:07:24]
And so right now it's pulling in the defaults on saraf for my web browser. That happens to be Ariel. We need to go and get Oxygen and Oxygen Mono. So, let's do that now. If you open up another tab, we'll go to fonts.google.com and if we search for Oxygen, you can click on that later oxygen and Oxygen Mono.

[00:07:48]
Those are the two that we need actually, if you click on Oxygen, the one that we're going to use is just the regular. So we'll select this style and then we can click the back button, then we'll go to Oxygen Mono and we only have one choice there, so we'll select that style.

[00:08:10]
If you want the bold for Oxygen for some headings or whatever, feel free you can add additional ones remember that every font that you add, adds to your overall page weight. In the world of HTML and CSS web pages, it's the probably the biggest source of page weight comes from either images, or it may come from some of these particular fonts.

[00:08:33]
But remember, we don't have 400 megabytes of JavaScript to worry about, which is really nice. So we have a little bit more flexibility in our font choices. So this will give us here some code for incorporating these fonts into our web page. You're gonna need to make this work in code pen, you're gonna need to modify this just a little bit and what I want you to do is look for, we blow the screen up just a little bit so you can see this.

[00:09:03]
Over here where they give you the code, you wanna take this little bit here where it says link h ref and just copy the URL part of that. Okay, so I'm gonna copy that. And then here in code pen, we'll go to our settings. We'll go to CSS, and down here where it says external style sheets and pens.

[00:09:24]
We will paste in our particular URL that we just copied from there and then say Save and Close. And then it should refresh and you should see the Oxygen font displaying there on the page.
>> What's the difference between a pseudo class and a universal selector?
>> Yeah, the universal selector is gonna have the same issue as the HTML element.

[00:09:47]
So, in fact, it's even worse. So, the universal selector which is just basically a star if you remember DOS from the old days we used to do, whatever, star dot doc find all the files on your computer that had the doc ending on it. And of course we use them in command line stuff.

[00:10:06]
Now, that star indicates all of the elements inside of your document. And but again, it's not really necessarily thinking about the full DOM as a whole, potentially may or may or maybe not. Depending on what browser you're using. But also the universal selector has no specificity to it.

[00:10:24]
In other words, if you are comparing two styles, they're exactly the same, the HTML element versus the universal selector. The universal selector loses. It's the only one of the, well one of the only ones other than that not pseudo class that loses when it comes to the HTML elements or any other HTML element.

[00:10:46]
And it has no specificity to it at all and so it's very easily overwritten. So again that's part of the reason why we use root, yeah.
>> What is the double colon mean?
>> The double colon is a pseudo element as opposed to a pseudo class. And again, some of that has to do with specificity.

[00:11:07]
And some of it has to do with functionality. So the functionality piece of that, the pseudo class is often having to do with some functionality. So if we just think about links, for example, colon link, colon visited, colon hover though all of those are various states of a particular link as opposed to a pseudo class which often has to do with text.

[00:11:31]
So before the text or after the text, other pseudo elements are first letter. So the very first letter of a paragraph, we're gonna style that slightly differently than all of the rest of the entire paragraph. That's another pseudo element, in terms of specificity, pseudo elements have less specificity, they're online with an HTML element as opposed to a pseudo class, which has specificity at the level of a class.

[00:12:00]
So classes and pseudo classes are weighted the same, which is higher than an HTML element and a pseudo element weighted the same. Yeah, it's a weird looking thing here with the HTML, the black box sizing of border box. So just briefly on that by default, it's something called a content box.

[00:12:21]
Again, you can refer to the front end masters bootcamp notes on this. So what the content box versus the border boxes, the box sizing property is not inherited. And so that is why we have both HTML here saying the box sizes is border box. And then we have this whole long weirdo series of the universal selector, everything before it and everything after it, we're inheriting that particular box sizing.

[00:12:46]
And again, this has to do with potentially, there might be a reason you wanna override this later, but this is typically the way people are executing this moment. There are other people that write this slightly differently, but this is what you'll see pretty commonly across the web.