Lessons

Lesson Info

CSS Crash Course

So we left off talking about customizing themes. And one of the big things when you talk about customizing themes is changing. The CSS and a lot of people are intimidated by CSS. CSS is on the surface something that doesn't make sense to a lot of people. But hopefully, by the end of this little segment here, you're gonna have a better understanding exactly what it is and how it works. Okay, so CSS stands for cascading style sheets, and basically it means this is a style sheet, and it cascades down across all of your different pages in posts and blah, blah, blah. Well, if you can think about CSS, is nothing more than a set of rules. That boss is your theme around. That's what it is. Okay, it's just it's an angry boss screaming commands. And so what you have to do is figure out what the bosses screaming, and then you can alter the message. And so when you're looking at a theme, check this out over in the left hand side. Here we get style that CSS and I've blown this up so you guys can se...

e it a little bit better. There are several different things in CSS that you need to be aware of. All right, there are tags. There are, um, I ds And there are classes. Tags are things that are inside of CSS that are inherited by the browser. Things that exist without us having to specify what they are. Every browser knows what a body is. Every browser knows what ul and ol and all that stuff means. Okay, you don't have to know what all that stuff means yourself right out of the box. Matter of fact, when I started looking at CSS, I didn't know, all right? I looked at it and I was like, Huh? What do you What you talking about? Um, So what do you have to do is kind of figure out that most of these that don't have a pound sign or a period in front of them are global things, things that exist all over. So, like the body, that's the body of your whole site. Okay, The body of every page, a table that means that every single table on your site is gonna look that way. An image. It's gonna look that way. Okay. When you start to get down here, You're going to notice that things start to get a little different. For instance, here we have. Oh, let's find one. These are all still just standard tags and stuff right here. Okay, here's a pound sign. It's for a rapper. Not like we could not like Rapper, but like a rapper, right? Like candy wrapper. All right, so a rapper is generally something that holds stuff together. It's nothing that's necessarily a browser. Doesn't know what rapper is. It's just a common term that people use to put stuff into. Okay, In this case, I put a pound sign. I didn't put a pound sign. The author put a pound sign in front of it, indicating that's a div. So you have to know the difference between a div and a class are Excuse me negative and I D and a class. So this is an I. D. All right, so in this case, the divide E is rapper and you give the pound sign too big blocks of content that are able to stand on their own. Okay, so in this case, the rapper, that's the thing that holds this whole thing together. It's a big block that holds it together, whereas right above it dot a line right, that's a class. It's not necessarily something that's going to stand on its own. It's nothing that contains anything. It's nothing that does anything like that. It is a class that I apply to something. So whereas a rapper houses something, the class of a line right could be applied to liken image. And that way that image would in him in this sense, float to the right a line right soon. I mean, so you have to think of in terms of the periods mean that it's going to be applied to several different things in many different ways. The pound signs mean that it's going to be applied to big blocks. They neither hold stuff or define a space in your WordPress site or any site that you're dealing with, for that matter. OK, so a lot of people have, you know there's there is right or wrong when it comes to CSS. A lot of people would say put everything in Div tags. A lot of people say put everything classes I use a mixture above. I try to keep it so that you know, big blocks of content have the pound sign and things that repeat or are used multiple times. Have a class. Why? I don't mean to work either way. It really does. It works either way. It's just, you know what is considered to be the normal Necessarily, right? Yes. Uh, are there Is there ever more than one style sheet in a WordPress site? Absolutely. Okay, on. And that's usually comes with the theme, right? And so, like, for this particular theme, you can see right over here that, um, this theme right here has a style that CSS it has an I e eight style sheet specific for Internet Explorer eight. It has Internet Explorer seven and CSS three styles as well. And so all of these are specific to either an individual browser or for specific purpose. And so the CSS three, for instance, why would you add a specific style sheet for CSS three? Well, for one thing, one of the big selling points of a theme is whether or not it is valid code and the W three c, Who is the validation organization? They you know, they vet all code to say yes. it is valid or no, it is not valid. Well, the style dot CSS is the only required thing inside of WordPress theme, right? As long as everything validates inside of style that CSS, the theme is considered to have valid code. As far as I'm concerned, if you stick every CSS three property into a separate style sheet, it doesn't have to validate is matter of fact. A lot of CSS three elements don't validate as as they are right now, stuff like rounded corners and stuff because there's no standard. Every browser has its own way of displaying it. So that's why you have separate style sheets. And then Internet Explorer is like the angry kid on the playground doesn't play. Well, Nice. Doesn't play nice with anybody. I mean, it is Internet Explorer is the angry kid on the playground, Period. Um, I'm full of quotes today, by the way. This is fantastic. So all right, let's see how we can change some stuff inside of CSS. Okay, you have to know the anatomy of a CSS declaration before you can change anything. So I'm a look for a decent one here. All right, Let's look at this right here. All right, let's look at this. So the first part of the CSS that you're dealing with is going to be the property of whatever it is you're changing, right? In this case, it's the heading one. All right, So the number one heading the biggest heading on the block After that, you always have. And I just call these mustache is okay. You always have a moustache after your declaration. All right. What is it? Mustache November? Whatever people are doing. Yeah. Yeah. So yeah, yeah, they're braces. Absolutely. But I call him mustache is because it's fun. So So you've got the You got the little mustache, dude. After that, then a lot of people hit Enter, all right? Just to create some space and to let you know that this is where the actual declaration starts. The declaration is according to what property you're changing. So this is the, you know, I declare I'm working on this, and the property I'm changing is this and then after the colon is the value that you're changing. So in this case, and a lot of these descriptors are very, very self explanatory. So in this case, the number one heading has a fought signs of 20 pixels. If you don't know how big 20 Pixels is, go into photo shop and or whatever program, you have created type player and set it to 20 points, 20 points in 20 pixels. Exactly the same thing. Okay, make sure it's on the 72 dots branch document, though it's on 300 really tiny. All right, you can also just change this and see what it does. For instance, here, on heading to I'm pretty sure that heading to is used quite a bit in this document. Let's go see. So here we dio let's see, I'll inspect the element to see what it is. So this is an H two heading to its Got a class on it of post title. So that's two elements I have to change H two and post title. So I'm going over here. Here's H to the font. Size is 18. Let's get really nuts and let's change it to 50. Okay, so I just changed to 50 pixels. Now I'm gonna come back in here, and it blew it up. Now it doesn't look good simply because of the fact that it's got that class of post title on it. So now I need to go find Post title in here to see exactly what it's doing. So I'll just find DOT post dash title if I could spell and there it is, and there's age to dot post title. Okay, so it's telling me here that it's got a background element of this color. If you like that color that's behind it, you can leave that. You don't have to, but if you like it, you can. It's also got padding. There are two things you need. No padding and margin. They look like the same thing because they both create space. But where they create space is very different. Padding create space internally with something. So, for instance, this has some padding on the top of it, and on the left and on the right. See that extra space? It's on top of it. But the color of the background remains inside of that pad, right, because the pad, if it was a margin, then it would cut off and there would be white space outside of it. Margin deals with space outside of an element padding inside margin outside. So in this case, this has a margin of six pixels on the top. It has a margin of 10 pixels on the right, a margin of seven pixels on the bottom and a margin of 10 pixels on the left. And that's the order that padding goes in. When you're looking at this, it goes the top. Right bottom, left top right. Bottom left, always. Okay, margin works exact. Same way top zero. Um, right. Zero bottom 10 and ah, left. Zero. If you want to change, that happened. Excuse me. If you want to change that, go ahead. And you can change that. I say I want the bottom. I want there to be a lot of space at the bottom. Give me 50 pickles on the bottom. I'm making this very ugly on purpose. I promise. So if I do that, check out how much spaces between that and that little button. Did you see the change may change it back. So it was. Let's do five pixels. Watch this little button right here. Five pixels, 50 pixels. Okay, so it's just a matter of going through and, you know, finding out what this stuff does in this case, I think that looks good. It about 15 pixels. I also think that of course, my phone is a little too large. So let's go ahead and go back up here actually know what if I do this right here wants this. I can actually come in and type fought size. And let's change that down to 18 pixel to see what it does cause a lot of people are gonna want to do that. They're going to say, Why don't you just do that? So let's save that must do you see what it does? Overrides it. So it overrode the original H to tag with that because of the fact that I applied a class to it. So basically, when you're looking at this up here, we find that again. There we go. So the original age two classes, 50 pixels. But in this particular document, it said, Well, this is an H two, but it has a class of post title. While I said post title is 18 pixels. So this will overwrite that because it's a classic goes on top of it, right? I can change this than anything I want 24. 24 point. Looks pretty good. Yeah, it looks pretty good. And so you can change that to whatever you want. Now, if you want some good resource is for CSS. One of the best books I've ever read was CSS That missing manual. That's what I learned CSS with. See some head shaking over there? Yeah, absolutely. CSS the missing manuals. A great book for that. Um, it is just an integrated explaining. You know what CSS is, how it works and all that good stuff. Basically, Like I said, all you have to think of it, CSS is a bunch of rules. And if you go in and you, you know, allow yourself to make the rules, you can run the whole site. I mean, that's how that's how it looks. All right, let's take a look at some of the common things that you might want to change. Um, inside of your of your fame here, for instance. Okay, so let's find Let's just go look at the theme itself. All right, let's say this friend, since this area here, this is a little close for me, right? It's a little it kind of runs together Maybe so, Not really. But let's see. So I inspected and I look at the That's the paragraph style. OK, well, I don't necessarily have anything, um, defining, and I'm looking over here on the right hand side to see that right? And so let's see here to do that. It's not working. Okay, So anyway, over on the right hand side, I'm noticing there's nothing in here. Besides the body, which is defined as 18 pixels off line height line, height on the Web is the same thing as spacing in a word document. So, like single space, double space, blah, blah, blah. So in this case, it's how many pixels air in between each line. In my document. In this case, it's saying there's 18 pixels. Well, I don't necessarily like that. Let's add some space in there, Right? So, uh, right here at the very top, I find the body tag, which is usually towards the top of somewhere, because when the first things people declare and so let's change that to 24 pixels and this is a lot of what I do. A lot of what I do is come in here. I do it And then I look at it. And if you think, yeah, that looks pretty good. You want to see the before and after. Let's undo. So here's what it looks like changed. There's what looks like now it's a little bit better spaced out, maybe. Right. So let's just redo that. 24 pixels. There we go. A little bit more space. All right. That might be one thing that you wanted to change yesterday. We talked a lot about space in between stuff like this, right? So I would right click here and inspect it. And then I'm always scroll like this. We can see it, and then I'm seeing there that this is Ah, full image. It's what that says right there. Let me scroll down and you're seeing actually see that there's a full image right there. Let's go find that. And this is what Is that what it takes? You, You know, find it. You don't necessarily know where that is. If you're working in a code editing application, you can turn on show line numbers, and then you could go in your document and you could see where this is in here and see where it says full image right here. It tells you its on line 16 of CSS three or full image just attacked by itself is online for 36 so I could navigate to line for 36 which happens to be right here. There it is. Boom. And so let's say that I want to reduce the space beneath it. Remember, I said space outside of an element is margin. So theoretically, margin is what is causing that gigantic gap in between these two areas. So I'm going to reduce that I'm going to do set to 15 pixels, not 315. Justin, um, let's go ahead and save that. And then when I come back out here, I'll refresh. And now that's a lot tighter right there. Right? So it just takes a little bit of time. And I know this is not something that you're gonna pick up on like today, necessarily. Okay, I get that. But you can, you know, navigate your way around and from the WordPress back end. You can do all of this from the WordPress back, and you don't have to kowtow. You don't have to have Dreamweaver or any of that stuff. You go right here to appearance, you're going to the editor and you could go in here and you can do a find in your browser full image That pops up right there. And there's the change I just made to 15 pixels and so I can get all this. You blow the substance a little better. That's fine. Full. There we go. Alright. Every go full image right there. And so I can change that. Let's change it to 25 pixels, maybe, and then we'll update the file. All right, shrink that back down. Now it's got a little bit more space beneath it. So again, it's just going to take some time for you to understand where the stuff is in your file and the inspect element. Or if you use firebug instead of Firefox or something like that, those are going to be a lifesaver when it comes to working with these types of themes. And so you just right click, inspect it or, you know, look at it, firebug, whatever it might be. And you just find these little areas that have, you know, like this one, for instance, categories. This has a 40 pixel bottom margin. And remember yesterday I had a question earlier, I I saw a question on Twitter. I think it was, you know, how did Justin changes stuff on the fly without saving it? That's right over here in this window over here. So, um, right over here, I mean, try to move this over right over here. We have our categories, see what's his categories right there. It's telling me there's a 40 pixel bottom margin. If I edit that, I come in here and I could just say, What's this gonna look like with a 15 pixel margin? Right. It's gonna look like that. What's gonna look like with a 10 pixel margins? You see it moving in real time right there. Okay. 20 pixels. What's it gonna look like? And when I finally decide, Okay, it looks good on 15 pixels, right? Yeah, that looks pretty good. Okay, so then I can go over into my code and I confined categories. There it is. And it just so happens it was right there. I swear I didn't plan that, um, 15 pixels right there. Save it. And then when I refresh the page, it should look exactly the same because now it's applied and see Right there. There it is, 15 pixels. And so I use that as a testing ground a lot of times because there's no penalty. Right? You know, we were talking about earlier about working on a site live right? And how you don't want to make changes live on your site. We don't have to. You can go in an experiment with the inspect element tag. And that way you can make all your changes without anybody seeing it. And then you could go apply them all at once. Save your document one time, and it applies to everything on your site. And you're all good. Okay? Yes. Changes. And I can't remember all the changes you made. If I'm doing something and I'm involved in changing it, seeing what changes, how do I know what I've done? Well, I would I would make a plan first on what you're going to change. Like I would go through like the what I do before I start out anything I go through and I map out okay. I don't like this. I don't like this. I don't like this. And then I put it on, put a checklist down and I say, OK, I need to find out. Like, Okay, let's say, for instance, I want to change the background on that cash right there. Okay, So I would write that down. I would say caption needs to be black. Technique text needs to be white, okay? And so I would then write that down, and I would then inspect the element to find out what it is. Okay, so this is probably, um, item caption. That's where that is right there. Okay, so the item caption and I can see here Unfortunately, this is being controlled by an image, apparently. Yes, it is. It's being controlled by an image. And so, you know, when you run into issues like that, one is being controlled by an image that's a little difficult Teoh to deal with. I would prefer people do this in CSS, but, uh, well, is there anything that automatically saves what you do so that you can at least go back and see how you broke it? Oh, you're talking about when you're doing it on the fly we're talking about. Like, if I'm doing this like this, and I'm making changes. How do you keep track of what you're changing in here? Right? Okay. I do it one at a time. I don't do multiple changes in here. I do one at a time in the night. Go apply it to my CSS and save it. If you're changing your theme and you apply all the changes at once, is there something that notes what it was and what it would change to? Not unless you have the original file. My suggestion would be make a backup of the original file, and then if you're using a code, anything application like Dreamweaver, for instance, there is a compare mode in there, so you can look at it in there. That's what I would do. All right. The other thing that you need to know is how to use this guy. Okay, so we're gonna talk a little bit about the WordPress, Codex. All right, So keep this in mind. Let's answer some CSS questions, which I'm sure we have. I have one. Um, when you're working in Kota here today, are you working on a copy? That's out there on the server. You're working on a local copy. I'm working on the live site and co two can do that. Can can Dreamweaver do that? Yes. Absolutely. Yeah. You just have to make sure you're working on your remote files versus your local files inside of Dreamweaver. Okay? Yeah. You can work directly on your life files inside. So and remember when you say that it would be saving it right back to the server immediately. Okay. Thanks. So, a question from Pedro applying CSS rules will obviously apply to the feed it to the theme in general, is there a way to target single pages? Yeah, Well, you have to do is develop your own CSS. Whatever that is. You know, whatever you're wanting to control and then do what's called a page template and apply it to a specific page and the WordPress Codex is a great place to learn about that. And we'll talk about that kind of stuff here in just a minute. Marisol, It asked When you make a change in the code, do you have to do it for all the browsers? No, Not unless you're changing a CSS three property. So let's take a look at this code real quick. Okay, All of this code that's in this particular document is accepted and used across all browsers. CSS three, which is, you know, something relatively new that a lot of people don't know about. CSS three is a lot of new things that CSS is able to do, but it's not necessarily universally accepted. The only time you'll have to go in and do code for specific browsers is if you see something like this. So when you see these little dashes and then maws or Web kit or what's the other one? Oh, for opera or something like that, then you have to worry about changing it. So here, for instance, there's a box shadow on this item captured me. It's like a drop shadow, right? And so if I wanted to change it for Web kit browsers, that's Google Chrome Safari, etcetera. I would have to change this property if I want to change it for Firefox. I have to change this property if I want to change it for everything else, I change for this property. So there is There are times when you have to do that, but most of the time it's just one time and that's it. A question from Lisa. I noticed Justin is making pages or changes directly in style dot CSS. What about using custom dot CSS? So changes don't break when updating a theme. Absolutely. You can do that if you want to create your own custom dot CSS page. That's actually ah, very good practice. So thank you for pointing that out. Create yourself accustomed that CSS page. Okay. And that way you can go in and kind of do your own rules. You're over your own overrides if you will. If you're a style person from the in design days, you do your own overrides in there. In that way, you have that stored somewhere on your server. Doesn't matter where it necessarily. And then in the header document header dot PHP. What you want to do is linked to that style sheet. So, like here, for instance, you know this one is linked to the style sheet, Earl. This one links to style CSS three dot CSS so you could link toe one that's slash custom Nazi SS. And that would take care of that