Screen Space and CSS Efficiency

Before we move on with some additional CSS, there's a little minimap over here, which kind of is like a shrunk-down version of your code. While it's an interesting idea, I find it takes up extra screen space that isn’t necessary. So, especially if you're on a smaller laptop and you just find that that's a waste of screen space, you can go into View, Appearance, and turn off that minimap, and that will get you some more screen space so that you have more ability to read your code.

It doesn't waste screen space there. All right, so now we want to take a look at our page that we're doing here and continue developing this. We've got our colored heading, we've got our colored subheadings, we've styled the fonts and the sizes of various things, and so far the ways that we've been styling things are kind of saying every heading one, every heading two, every paragraph, assuming that they exist in the webpage.

If you make a rule for something that doesn't exist, it just won't have any impact on the page. Eventually, if you added something, then of course you would see it. So it doesn't technically hurt to have CSS that's unused, but it's kind of a waste of code should you not have something.

If you wouldn't have any heading twos, for example, you wouldn't need to have the heading two rule there. But whether there are one thing, there's only one of them on the page, whether there's a thousand of them on the page, this says style all of that thing, all the heading ones, all the heading twos, all the paragraphs. What if you don't want to style them all? For example, this is a paragraph and this is a paragraph.

What if I want to style the author paragraphs, the byline, as something different from a regular paragraph? So scrolling down here to my paragraphs here, I'm going to close up my sidebar over there, just so I have more screen space here. Notice here this report was written by. So this is a paragraph, just like this is a paragraph.

All right. And if it helps, I'm going to put these on different lines just so we can see the separation to see, oh yes, that is indeed a paragraph. And this is indeed another paragraph.

And the same thing down below here as well. This is a paragraph. That's a regular paragraph.

And this is that byline or author paragraph. So I can't just make a change to my paragraph rule here to style one of those paragraphs, because this styles all of the paragraphs. So I need some way to differentiate between different tags that are the same tag.

So I need a way to name these. And so that introduces us to the concept of ways to name things. Now there are a couple of different ways that you can name things.

The first thing we're going to learn is what's called a class. And we can literally add a class to this. Think about a class, like you've got labels for people, for example, middle class, lower class, upper class.

And there are lots of people in those class groups, right? So a class is just a label for something. And so how can I label this? Well, the term class is part of HTML that we can label it or name it in this way with a class. And what we put in here though, like for example, author, I'm just making this up.

Like I could call it Bob for all I care, but Bob would be weird because people would be like, why are you making a style for Bob? Who's Bob? What's Bob? That's just a weird name. So choose names, even though you're making these up, choose names that are descriptive of what the stuff is. Like this is the author, right? It was who it was written by, or you could say byline.

Don't describe how it looks like, don't describe in the name, like uppercase, big and bold, because that name is always going to be here. Even if you decide to change the look of it later. So what if right now you want to make authors big and bold, and then later you want to make them small italic, you don't want to have to update the name.

So you want names that are evergreen, meaning kind of they live forever. So try to choose a name that is meaningful. Another term for meaningful is semantic.

So semantics are the meaningful nature of things. So semantic names are meaningful names. And the easiest way to think of that is describe what the content is, not how it looks.

So author describes what it is. An author can look any way, or a byline can look any way, but you know what it is. So it's easier to find the author or the byline, and that name will never need changing.

It will always be the author, or it will always be the byline. Those are names you'll never need to change. The style will say how it looks.

The name should describe what it is. So I'm now going to go up here, and I do not have a tag called author though. I have a class called author.

So these are referring to tags. Go find a tag h2, a tag that's paragraph. To be clear, things that are in less than greater than signs, those are tags, or elements as we call them.

These are tags. So I have a paragraph tag, and this is a paragraph tag, but that paragraph tag offers a class of author. So I need to differentiate between a tag, tag rules, which are these, and a class, and for that you put a period.

.author. We're not using author, which would be an author tag. We don't have an author tag. We're creating an author class.

So period. Just think about back in school, you had first period, second period, third period. You went to different classes based on the period.

Yeah, so period means class. All right, now I want to maybe make that small. So I'm going to make it font size 10 pixels, but that size would be really hard to read.

So I'm going to make it bold, make it a little easier to read, font weight bold, and save that. Now notice right now, this is the only one that just got small and bold because that's the only thing I gave that name to. So that only that one paragraph right now offers a class of author, but I want to add that same class to the other ones to style them the same way.

So I'm going to go to the other paragraphs, and I'm going to give them a class of author. I'm going to copy that. I'm going to go to this other one down here, paste it there.

So classes can be added to any tag anywhere. Any tag can have a class. If you want to style that thing, give it a class, come up with an appropriate name that describes what it is, and then you can create a style for it.

Now when I hit refresh, now this and this and this all are looking like my style for the author class. So this finds any tag with a class of author and applies that. Now notice that this builds on top of the previous styling, meaning that a regular paragraph is Verdana.

And so it didn't get rid of Verdana. It's still Verdana. Now there is a conflict in terms of size because both of them say a size.

If this one says 14 and this one says 10, well it can only be one or the other. It can't be both. Since there's not a conflict in font family, I only say it to be Verdana.

I don't change the font here. It inherits the font from this. So the cascade part of CSS is it's not this style or this.

It's not one or the other. It's a combination of both. And it's only when there's a conflict because both things are talking about the same thing.

You can't have two different font sizes. It's one or the other. But in font family, since I didn't re-say a different font family, there's no conflict.

So it just keeps that. So you keep everything from paragraph like the line height, like the font family, and it's only when there's a conflict then one of these rules has to win over the other rule. And so which one wins? The way that that's done is or calculated is something called specificity.

And vs. Code has a specificity calculator right here. And so when I hover over this, this has a specificity of one and this has a specificity of 10. Ignore the commas.

So 010, that's 10. And this one is 1. So the higher the specificity, the higher rule will win. The way that it's scored is, and then the general concept of it is specificity.

So how specific is this rule? So the opposite of specific is general, right? So you can be very general or you can be very specific. Think about how general a paragraph rule is. It says every paragraph should look a certain way.

Every paragraph. That's a lot. It's very general.

Now author, author is saying out of all those paragraphs, you're applying this to just some. You went out of your way to create a name, apply it to some, but not all paragraphs with, you know, now technically this doesn't specify paragraph. It's just we happen to use it on a paragraph.

We just said anything with a class of author. You went out of your way to create a class to name it and you've only applied it to some things. So that's more specific.

And because it's more specific, it gets a higher score. So the, the way that they have these three numbers is they are tags for a single digit. So a tag gets you a score of one.

A class gets you a score of 10. And later we'll talk about IDs, which gets you a score of 100. IDs are really specific.

IDs are like a class name, but you can only use it once. And because you can only use it once, it's really specific, but more on that later another time. So right now the P is a paragraph tag.

So a tag gets a score of one and it's a class. So a class gets a score of 10. So 10 beats one.

So this one wins. So the higher the specificity, it's going to outweigh or kind of beat out the other more generic, less specific rules. Really cool that vs. Code will calculate that specificity.

So that's how it decides that this size overrides the paragraphs font size. Now let's say I want to make these all caps because it's still a little small and hard to read. I want to kind of form like a nice little bar.

So I want it to be all caps, but maybe I don't know the CSS for all caps. So I know it's CSS because I've got to style this. So I could Google CSS all caps.

And the reason I'm pointing this out is because I can't teach you every single piece of HTML, every single piece of CSS. But once you understand the syntax of how to write things, you can always look up things and see how to do those. So I typed in the language CSS and all caps.

And even though that technically wasn't the code that is being written behind the scenes, they came here to text transform. Right here, notice I'm on the Mozilla website. Mozilla.org, they are the creators of Firefox.

So they make Firefox. They're the open source foundation behind Firefox. And so here we are on the MDN, the Mozilla Developer Network.

They have a great set of documentation for HTML and CSS. So a lot of times you will end up there. And so here they're showing different things.

And if I make this bigger here, so if I try different things, I can see it. Actually, I can see this capitalizes the first letter of each word. This uppercase is the whole thing.

This lowercase is the whole thing. And so look, it's CSS. So this is the property colon, the value.

And so I could just copy this here, right there. Just copy that. And go back here and paste it in.

Text transform uppercase. Save it. Come back.

Refresh. And there we go. It is all caps.

So the idea is, the reason I emphasize syntax is because you can always learn additional properties. You can learn additional values. But if you know the syntax of the language, it makes it easier to add to your knowledge later on.

So pay attention to things like the period for classes, the curly braces for opening and closing the CSS rules. These are called CSS rules. And these are the various properties that we're specifying.

The order of these properties does not matter. You can put them in any order you want. They can be on the same line.

It's actually why you put the name of the property and then the value. And then you put a semicolon because you're saying that's one. Then it moves on to the next where you've got again your property colon value semicolon ends it and says okay let's go on to the next.

So you could put these all on one long line. But as humans this is hard to read. So it's just easier if you put them on different lines.

And this houses all of the settings for that particular rule. And so once you understand that syntax of tags normally start and end, there's attributes that are separated by space equals some value in quotes for HTML. And that's pretty similar to CSS properties and values.

Just a little different syntax. That's the syntax of HTML and CSS. So you can always learn additional properties, additional values when you're doing this if you understand the syntax.

All right. So what if you want to add a class but you don't have a tag? Because classes must be added to a tag. I've got a heading tag.

I've got paragraph tags. And so classes can be added to any tag. But there's got to be a tag.

It's got to be a base tag. So let's say up here latest news about the onion. Let's say I want to make that a little bit lighter.

I want this to be standing out a little bit more. And so there's no tag right around that. You know, there's one around the whole heading, but I don't want to style the whole heading.

I want to style this part of the heading. So I want to wrap that in a tag. The tag itself really does nothing.

It just says, let's work with this area. And so that is what we call a span tag. A span tag, think about how bridges span across a river.

Span means to kind of bridge across. And so we're spanning across this range of content saying, let's group this together. Let's take this span of content and do something to it.

By just adding the span tag, you will see nothing change in the browser. When I hit refresh, nothing visibly changes. Because the span tag itself does nothing.

It just says, let's work with all of this stuff. It's a placeholder to say, well, now that we've said what area we want to work with, now we could add a class to that. And I can say, let's style this span of content.

I just have to give it a name. Let's say I want to maybe make it a little bit less noticeable. So I want to make, if I make it transparent, that would make it a little bit see-through.

It would lighten it up a little bit because it's on a white background. We're going to call this muted. We're going to mute it a little bit, make it more subtle.

Now, classes are whatever you want to call it. So you could call it whatever you want. I think muted in this case is better than lighter or darker because if I change the background color, if I make the background color black, then technically muting, when I make it a little transparent, it's going to show through to whatever's behind.

If I have a white background, it's going to get lighter. If I have a black background, it would actually get darker. So I'm trying to choose something that would always work regardless of what my background color would be.

I could also call it transparent or slightly transparent. So I could also do that as well. Again, these class names, they're up to you to create something that you think, hopefully, you create a name that you never have to change.

You could just change the CSS to style it differently. Now, this is a class. So it's dot muted.

And I'm going to change the opacity. Now, opacity goes from zero being completely hidden, gone. It's disappeared.

Still occupies the space. It's just completely transparent. It's like I made glass text.

Now nobody can read it because it's glass and you see through it. And then you got one, which is the default. One is completely visible.

Anywhere between zero and one, some fraction of a number. So for example, 0.5 would be 50% transparent. And you're going to be able to see through to whatever the background is, whatever that may be.

In this case, it's white. So it gets lighter. But if it was black, it would get darker because you're seeing through to whatever the background is behind the scenes.

If you don't want to say zero, you don't have to. You could say 0.5. If you do 0.2, that would be like 20%. You barely see it because it's mostly transparent.

If you did 0.9, it'd be barely any change at all because it's only 10% transparent. In fact, I can't really tell much of a difference there. If I got down to 0.7, then I'm starting to see it a little bit more.

I'll go with 0.5 just because that's very clear. And also you can go to 0.55. So you can do subtlety. That's 55% transparent.

And so that makes that a little bit transparent there. We're using that span tag as a way to just group a section of content to span across and say, I want to do this opacity to this range of content. If there would have been a tag there, I would have just used it.

So for example, if you already have a strong tag already there, you could just put it onto the strong tag. Or if you're not sure if you'd want to maybe be able to globally change these locations. Maybe later you think, maybe I don't want them to be bold.

I could have used a span tag instead of strong, and I could have put a class on that. And then I could do font-weight bold in the CSS, but then I could change it. If you want flexibility, something like a span with a class, that lets you do whatever you want.

You can have as few settings or as many settings as you want. It gives you a lot of flexibility there. All right.

So go ahead and do exercise 2B in the workbook.