 So, I'm giving my talk today on using Firebug specifically to edit CSS on your website. So just so I can get a gauge on where you guys are at in the room, how many of you guys are familiar with CSS, have edited some CSS, and are looking to take that to the next level, and how many are completely new, okay, great. And how many people already have Firebug on their computer, and I've already used it a little bit, okay, great. So I'm actually going to be starting from pretty beginner stuff here. It's not going to get too far into CSS, so if you're looking to, you know, if you already know CSS super well, and you'd say you're a CSS coder, this is probably not the room for you. This is going to be mostly beginner, getting your feet wet with CSS, and I'm going to take it slow for the beginners so that they know, you know, if they've never done CSS before, hopefully my goal is that they can walk out of here feeling comfortable and being able to make those CSS edits and kind of start that exploration into a whole another program in the language. So this is mostly going to be focusing on CSS, and I'm going to be using the tool Firebug for Firefox. So we'll start with my first slide. First of all, what is Firebug? Firebug is an add-on to the Firefox web client, web browser, and what it does is it basically allows you to see the back of websites. You know, everybody has been on the internet and seen the front of websites and knows what they're supposed to look like, but there's so much code, HTML, JavaScript, PHP, CSS that goes into creating a website, and you can see this little area from here to here looks different than the rest of what you're looking at Google. And this is actually showing us HTML that goes to building this page on Google and the CSS that's associated with that HTML. So what Firebug is going to do for us is it's going to add something to our Firebug, what Firebug is going to do for us, it's going to add a little window to Firefox where we can inspect further into the websites that we can see beyond just what the whole rest of the world sees, the front end. We're going to start to see some code, and while code may seem overwhelming and stuff, CSS is the easiest programming language there is. It's very undistructive. You can make mistakes in CSS and your website will still function. It may look a little bit funny, but it will still come up and people can still click around, whereas stuff like PHP, you put one comma in the wrong place and all of a sudden you're getting the white screen of death. When you reload the page, nothing's coming up at all. That's not going to happen with CSS, so take a deep breath and we're going to dive right into it. So next slide here. While I am focusing mainly on Firebug, the same kind of general rules will imply for other inspectors and different website browsers. So if you're using Chrome and you're really stuck on Chrome and you're like, I'm never going to use Firefox. So as much as he says Firefox is the better browser, I'm going to use stick to Chrome. That's okay. Really, everyone has their own choice. I think the only reason why I'm stuck on Firebug is that's just what I learned on and that's what I'm used to. So there's nothing wrong with Chrome. I would say Chrome and Firefox are probably the better ones. But even Safari has a inspector and Chrome and Safari actually have the inspectors built into them as well. So if you have Chrome, it has Chrome DevTools and you can notice if you have a computer open right now, you can try in Chrome or Safari. You can right click and you'll see no matter where you right click, you can inspect an element, which will bring up the little window that we saw earlier like in Firebug. So while I am going to be giving the tutorial for Firebug, they'll look very similar to other inspectors on different web browsers. So the first thing is, what is CSS? I kind of went over that a little bit, but CSS stands for Cascading Style Sheets. It's a very simple programming language. As a name implies, it controls the style of your website, making universal styling rules that are applied throughout your website. So while you could go in there and for every single little piece of text, you could put in all of your styling for each piece. What people realized at one point is that there should be some universal styling rules to a website, so it looks consistent throughout the website. So you're not going to one page and seeing a red header, on the next page you're seeing a green header. You're seeing all kinds of different fonts, tight faces. That kind of got nauseating if anyone of you used the internet in the mid-90s, late-90s, you'd see all kinds of crazy colors and it just looked cheap and not like someone didn't decide this is the styling that's going to be throughout the website. This is our brand. So what CSS allows us to do is basically set rules that say every time this element, every time this header comes up, I want it to be this tight face and I want it to be green. And that's my colors and my branding and I want it to be consistent throughout my website. So then every time when you put in that heading, you're not going to have to say, this is a heading, I need it to be green, I need it to be this. It's just going to say, okay, I know H1s need to be this particular style. So it's going to keep a very consistent styling throughout your website. CSS can control all kinds of things with styling. Fonts, font sizes, colors, spacing, borders, even animations. I'm sure some of you have seen like you click on something and something, a button wiggles or something's kind of hovering and moving a little bit or there's a shadow on a box or something like that. Most of the time, that's going to be controlled with CSS. You can do that a little bit with images and stuff. You can create shadows and borders and stuff, but it's much better to use CSS most of the time. If not just to have consistent styling throughout the website, but your browser will render it a little bit better if you're using CSS instead of images. Again, CSS is one of the easiest programming languages to learn. And CSS was a way to separate a document's content from its style. So I was saying you could go in beforehand and say, every time you put this heading in there, you can put the styling into the content for that H1. Instead, CSS gives us a way to have the content and keep on writing and have our heading and then our paragraph text. And then another heading and some more paragraph text without all of the little markup saying, this paragraph needs to be this font, this heading needs to be this color. It gives us a separate document to put all that styling in once that will refer to the content throughout our website. So I know that's a lot of words and people like to really see, I know what you're saying, I kind of get it, but let's actually see some of that happen. So before I get into how to install Firebug, I just want to hit you guys with a couple of options or a couple of examples of what Firebug can do. So that you can kind of get it in your mind before we move too far forward. So I'm gonna open up a web browser here. And I'm going to go to a website that I have a very simple, out of the box WordPress website here. And I've just created a page for an example here. And if we look up in my utility bar up here, we see that there is a little bug right here. This might be hard to see from back there. And then there's a little arrow that says inspect element. So if I click this once, we'll see the window that I was talking about earlier pop up here. And can y'all read this at all or is this, to me, it seems very unreadable. Okay, well unfortunately, I can't do much about the presentation of the thing, but I'll read it out from my computer. If anyone has any questions, and we'll try and do our best here. Let me try one thing that might make it a little bit easier to read for you guys. I'm just gonna change the display. Okay, that makes it a little easier. It makes it really small on my screen. So it's gonna be a little harder for me, but I'll make do. Okay, so we have our website up here. We have our Firebug Windows here. On this side, we see the HTML that's associated with the website. On this side, we see the CSS. And now you can swap that around a little bit and Firebug's a little customizable. This is default, so this is what you'll see right when you download the program. So again, I just clicked on, now it's kind of hidden it up here, but I can click on Firebug or Inspect to bring open this window. And then I can hover over the website. And you see that this little blue box highlights the different areas of the website. So these are the different content areas on the website that are classified within HTML. I don't know if any of you guys have seen the HTML. Sometimes you'll see like H1, which stands for Heading One. And you'll see Open H1, Bracket, Close. And then we'll see the Closing H1 here. So anything that lives within that H1 area is a Heading One. And we can select that area here. So I'm highlighting over, this is H1 Heading. And we see over on the left, it highlights where that HTML is. And we don't see that Open H1 up here. We just see the fact that it's displaying it as an H1. And we see that when I clicked it, the HTML came up over here. And then the CSS for that is actually gonna come up over on the right-hand side. Any CSS that has to do with H1 will be loaded over here on the right-hand side. So when you first install WordPress, it already comes when you install your WordPress theme. It's already gonna have a lot of CSS done for you, which is the good part. You don't have to sit there and write thousands of lines of codes to decide the styling. That's pretty much one of the reasons why there are themes is you can really quickly just say, okay, I generally like this styling, let's load that up. Now what I'm sure a lot of you have noticed is once you upload that theme, you're like, this is great, but these aren't my brand colors. This is pretty close to what I'm looking for. But I just can't get that heading to be anything but black. Like I really need it to be green because my logos are green and everything has that green, green is my brand. So you can end up taking your child theme and customizing it with CSS to have the exact styling you need. If there's not user options already for that within your theme. Yes. But one thing that confuses me is across. Once you highlight something on the left side, across from it is the relational CSS. But you could scroll on the right side and lose. How do I know how far it relates? So that's a tricky part. Really there is gonna be a lot of guess and check when you're first getting into CSS. If you don't know much about CSS, there is gonna be some time where you try something out and you're like, this is gonna change this heading to green and it doesn't the first time. The good thing is, is you can try it a couple of times and this isn't gonna break your website. So you can kind of play around with it until you get it right. Now I'll get to- It's generally a processing. Well, all of these CSS rules that I have over here do you have something to do with H1. But as you see this huge block has entry content H2. It has a lot of things that it's selecting to end up changing the rule. And I'll get into all of that here in just a second. I don't want to start explaining stuff without telling you guys the background to the explanations, yes? The code, yeah, the code will tell you what you're changing for the most part. And I'll show you a quick way to create a new rule specifically pertaining to that exact HTML element you selected here in just one moment. So we have all of the edits over here. And now that I've selected an CSS element or a HTML area, I can even go in here and I can right click and I can say new property, or sorry. Add rule and it will tell me what rule it will automatically create for me a rule that's gonna select that H1 area. Now it will do, it will, for right here it's saying entry content H1. Cuz this heading, this is the H1 heading, it's an entry content, it's an H1. I could, if I just know I wanna just affect all H1s, I could then write H1 in there. And that would be what's selecting there. So just an example, not so you can understand this, but so you can see what happens here. We can see H1 and I can say color and I can type in blue. And you see all the H1s on the page are blue. Now let me back up a second. Firebug is a way of previewing CSS changes and HTML changes and everything, but for our purposes, it's a way of previewing CSS changes. So while I went in here and I said H1 color blue, if you went to this website right now, you wouldn't see that. This is just locally on my machine. It's a way of previewing what adding this rule would do to my website. So it's a way of kind of figuring out what I wanna do before I wanna actually do it. So I could even go to Google.com and I could say, hey, I wanna just see what the CSS is here. And you might think that I can't change Google cuz I don't have any kind of access to Google but you could say display none. And all of a sudden you can change Google's page. But if you went to Google right now, you wouldn't see that cuz I haven't committed those changes to the website. I don't have access to Google. I can't commit those changes. But it's a way of me being able to play with CSS and if I were to own Google, I could see what kind of CSS changes I need to make before I actually make them. I don't have to do any guessing. I don't have to go into code and just guess what the CSS rule would be and what kind of effect it would be. I can actually see that take place before I actually paste it into my CSS. But we'll get there in a second. I just wanted to show you a quick example of what can be done with CSS. So back to the presentation here or the slides. How to install Firebug on your computer. So if you don't have Firebug on your computer already, it's actually very easy. So I won't spend too much time showing you the exact thing. Generally the rule you can do is just Google download Firebug. And if you Google download Firebug, you'll see this link. Well, first you need Firefox. So you can download Firefox through a link like this. Or you can just Google download Firefox. And the second step is to go to Google and type in download Firebug. You'll get to this link. You can click on it and it's very user-friendly. You just click on it. You click on it, it downloads. It says, do you want to install this to Firefox? You say, yes, I want to install this add-on. And sometimes it makes you restart your Firefox before it shows up. Sometimes it doesn't. So just install it. You'll be on your way. And you can tell that you have Firebug next time you upload Firefox by seeing that bug in the top right-hand corner that I showed you earlier. There are some add-ons to Firebug. So Firebug, off the bat, comes pretty lean. You can add on so many different things to Firebug. And we'll get into this with questions at the end if you guys have any questions on how you can extend it. But two things I do recommend are Rainbow and Color Picker. If you want to add those on, you do it the same way. You just Google download Rainbow for Firefox, download Color Picker for Firefox, and you add them on the same way. And they basically extend Firebug to be able to have very easy color selection ability. So instead of just having to type in blue, you can actually get the exact hex code you want by selecting color and dragging it and seeing. And I'll show you that here in just a minute as well. So what is CSS continued here? So here's my little example of changing something on Google. I typed in background blue. If you see this little blue box right here, that doesn't come with Firebug right off the bat. That is Color Picker. So that's a way that you can be able to extend the color abilities of Firefox within there. So here is a reference to, this is here, some HTML. So if we see up at the top, we have that little text. We have text right here. And this is basically the HTML that would go into making this text. And if you see here, you can add div IDs. So basically, the way that CSS references HTML are there's these different sections, like H2s, which we see here, or div IDs. And most of these are already going to be done for you. So you don't have to go in there and you don't have to do these custom. They're already going to be in the background. But I just want to show you how Firebug knows how the sections are separated. So we see that div ID, section 11, would be this text area. So then I could go in and I could select that text area. And Firebug would see, oh, this is section 11. So anything he does to section 11 is going to affect this div. Same is true for this H2 area, which is the product I'm selling. So while this is the HTML, and this is what you'd see in the background, you only see on the front end product I'm selling. So these things in the bracket are just a way an HTML of saying, here's a different section in here. We always have an open bracket, either ID or div ID or CSS class, and then it will tell you what the ID is. So example time. So we did a little bit of editing of how we changed colors. But we can do so many different things. We can edit images. We can add padding. So let's just, as an example, let's say that we want to select this area right here. And it says this is a text with a div ID. And if we see over here, I have gone and I've written my own HTML element that says div ID equals unique div ID. And then it says this is the text within a div ID. So while this is all the HTML, all we're seeing is the text within the brackets. So this is text with a div ID. So I can click on this one area, which will highlight it. And then I can say new or add rule. And we'll see that it adds a new rule for me. And in this case, for div ID, I want to add a pound sign. And I can say unique. And I just typed in the U right here. And then Firebug was smart enough to say, hey, I know that there is a div ID in there that's called unique div ID. I'm going to go ahead and fill that out. So I know that's already a div ID in there. And I can add the area. And then it adds the brackets on its own. And we'll get into all the different parts of it real quickly here in a second. But then I could say text size or font size, sorry. And let's do 40 pixels. And all of a sudden, our text is 40 pixels. So then any place where it was marked as unique div ID, it would show up like that. Usually the difference between, well, I'll get to that in a second. OK, so back to slides here. So here's the parts of CSS, which is what I wanted to show you here. So for instance, we were looking at some of these rules. We have the selector up here, which is what's saying, what is being edited within the CSS. So for right here, we have body, which is usually referring to body text. That would be if I wanted to just change the regular paragraphs in my theme, maybe someone was complaining that the text is too small on my website, which is a very common problem. People go in there and put like 13 pixel font on the website, which might look good on some devices and stuff. Some devices, it might be very hard to read. And really, you want to go with more like 15 pixels or something like that. So I could say body, and I could then say font size, and I could select 15 pixels. But in this case, I'm using the example of Google. So I've changed Google's website to say the body of Google's website. I want to have background, which is the property. So I'm doing what I want to change, or everything that I want to change, what I want to change about it, and how I want to change it. So that's selector, property, and value. So I'm saying I want to change the body, which is the general body of the website. And I want to change the background of that part. So I'm changing everything that's in the back. And I want to make it, this is a hex code that basically means black. I could type in black and it would have the same exact firebug would have the same exact reading of black as it does, pound zero zero zero zero zero. So then that makes the body background black. So those are your main parts of CSS. There's so many different combinations that you can do in terms of selector's properties and values. Some of them are simple. Some of them can be very complicated. So here is firebug. It's used to preview changes, which is what I got into a little bit earlier. So it's a way of finding those changes before you want to make them. It's not going to change it for everyone's site. But you do want to make sure that you have the right rule before you put it onto your website and the whole world sees it. So firebug is a good way of previewing CSS without actually changing it for the whole world to see. So once you find the rule, so let's say that we wanted to make Google's background black. And we knew that that rule worked. We saw that change reflect on our website. And it looks good to us. What we'd want to do at that point is copy that CSS rule and put it into our own CSS. And we'd want to put it into our own CSS at the bottom because that's cascading style sheets has a function in it that any rule that you put on the bottom is going to overwrite all the rules above it that have the same exact property and selector. So if it somewhere else in the website had said that the background of Google should be white as it is, if I put the CSS rule underneath that says no, it should be black, and it would overwrite that rule because it's below it. And if that doesn't work, there's also a workaround where we can add an important. I just wanted to put that on there because I end up using it a lot, though it's not technically something that you should use all the time. It is a way of saying, I just want this rule to definitely work, and I don't want it to be overwritten by anything else. So that's when we can add an important. And I'll show you an example of that here in a second. So where do I put my CSS to make it live? So every WordPress theme has a CSS file. A theme will not work without a CSS file, so your theme definitely has a CSS file, and that is an option of where to put it. You can go into your themes, appearance, editor, and the first thing that comes up is going to be your CSS file. And I'll show you an example of that here in a second. It's not recommended you put it in for reasons. You should either create a child theme that has all of your own customizations so you can update your regular theme and not lose all of your customizations, or you should install a plug-in that has a custom CSS area, or some themes actually come with their own specific custom CSS area right off the bat. So I'll show you from start to finish if I wanted to make a rule, if I wanted to preview a rule in Firebug, and then I wanted to commit it onto the website into my CSS section. I'll show you that here. So back to our example of the Firebug demo. See these blue changes? I'm going to refresh. And we'll see that those changes go away. Those weren't changes that I committed. They were just changes within Firebug. OK, there we go. So this appears, because that wasn't committed into the website. So let's do a slightly different CSS rule just so we can see something different. So I have this big bug in here, and I'm thinking, OK, maybe that bug is a little bit too big. I can click on the inspector. I can highlight the bug. And I can say, right-click, add rule. And it's going to automatically create what it thinks I might want to be adding in here. In this case, it's going to say a line center, sizeful, and WP image 5. These are three different ways of selecting this image. For beginners, you might just want to stick with what it says in here and see what kind of change it has. But be careful, because sometimes I might be changing the bug on this screen and not realize that the same CSS rule is on every page of my website. And I could be making one change that affects my entire website. So that isn't something to be careful about. So when you're doing CSS, you just got to really make sure when you commit the change to double check certain pages of your website to make sure, did this change have the effect that I wanted it to? For my case, all I want is WP image 5. I know that that's going to be referencing this image specifically and nothing else on my website. So I'm just going to delete the rest. But again, it wouldn't be the end of the world if you just stuck with that and just used that selector. But I'm just going to use WP image 5. And I'm going to put in here with 200 pixels. Sure enough, it changed it. Now I could go in there and resize that image, but let's say that I had 3,000 of these images within my website. And I wanted to make sure all of them were 200 pixels. I could very easily do that in CSS with one rule, whereas if I was going to change the image, I would have to go back in and change each of those image sizes in HTML to commit those changes. Now, that's a bad example, because really you should change the image size. You really shouldn't go in there and CSS and force all the sizes, because then your computer has to upload a big image and then shrink it, and it's going to be a lot more taxing on everyone's system. But it is possible. And just as an example, we'll use that. So now I see that this is a frustrating thing to fire bugs. Sometimes when you make the changes, it disappears. But I know it's still in there somewhere. I just have to scroll down. And here it is, WP image 5. And I can just highlight this area. Either hit Edit, Copy, or I'm just going to do Command C, and it's un-highlighted here. So I'm going to do Command C to copy it. I'm going to go back to my back end of my website, the admin area of my website. And I'm going to go to Appearance, Editor. So no matter what theme you have, you're going to have this area on your website, Appearance, Editor. And the first thing that you're going to see when you get there is always the style CSS. Every theme has it again. And you'll see within this theme, they've already done a ton of work with CSS. It's just you can scroll for days, and it just keeps on going. They've already done all that work for you to make it look pretty good. But obviously, it didn't have that one CSS change that I wanted. So I'm going to go to the very bottom, because again, cascading style sheets. I want to put my changes on the bottom, so they take presidents over the rules above them. Are you working on a child theme? I am not. I'm not. So this is how you can do it the cowboy coding way. It's not recommended. I'm going to show you that this is possible, and then I'm going to show you the correct way to do it as well. So you can add it in here and update file. And then I can refresh. And before my change went away, you see that my change stuck in there, because I added it to the CSS file. Now, I'm not going to want to save that change, even though this is a test site and it doesn't really matter. That's not the right place to put it. The better way to do it is put it in a custom CSS file, whether it's in your child theme, or one easy way to do it is to download a plugin that will add a custom CSS file to your website. So let's see here where it was. So the plugin is called Simple Custom CSS. So I'm going to go to plugins and add new. And we'll see here if I just type in Simple Custom CSS. Should be one of the first things that pops up is Simple Custom CSS. And this is a slight tangent, but when you're looking for plugins, always look at the plugins and how many people are using them. Generally, stay away from plugins that have bad ratings, especially when you're typing in something like Simple CSS. There's going to be a million plugins that do a very similar thing. But you see here, you probably don't want to download the one that's rated zero stars. You'd probably much prefer to go with the one that 106 people have rated five stars and 200,000 people are using it. So we're going to download Simple Custom CSS. It'll ask you, are you sure you really want to install it? Yes. This is a WP Engine thing. That won't come up on your computer. And so now that it's installed, it's asking us if we want to activate the plugin. And we'll go ahead and activate the plugin. And we'll see once the internet works, we'll see that it has added the plugin to our website. And it is activated because it says deactivate. Now we can get here to our Custom CSS by just saying add CSS. And we'll see we have our own very clean Custom CSS area without all that additional information in there to confuse us. This will, in all cases, this will be something that is in CSS's eyes beneath your parent theme CSS. So these changes should take precedence over the other ones in most cases. Question in the back. A child theme, you have the ability to extend your theme in much more ways than just CSS. So there's not really necessarily a disadvantage to doing it this way. There's just really an advantage to doing a child theme if you're going to be customizing functionality as well as CSS. If you're going to be adding PHP to your website that you want to be customized, that's something you have to do in a child theme for the most part. So really, if you're just looking to add CSS, custom CSS, there's no reason why you need to do a child theme just for that. It's like the way that if you're a very diligent tutor and you're going to do everything completely perfectly, you might do a child theme just because it's the best way to do it. This is for a beginner, this is probably the easiest way to do it. You're going to have so much less trouble adding a plugin like this than you are creating a whole child theme to your, adding a child theme to your website. Right, exactly. With this, since it's in a plugin, you can update your theme all day and this is going to stay completely separate as a plugin. So you're not going to, you're going to have two separate places, your theme is going to be in one place, this plugin is going to be a different place, and they shouldn't ever, if you update your theme, it should never overwrite this. Question? Just that one area. Well, that's a matter of finding the exact code that pertains to that one section. And it's not necessarily true that every single item on your website is going to have its unique CSS, ID, Div ID. Some of them are going to not have a way to just affect one area. Now you can go in there if you know HTML, and it's a HTML editable section of your website. You can go in there and you can add Div ID equals unique Div ID for this section and then close it off. And you can do that though right off the bat, not every section has its customizable unique Div ID for that one little area. So it's a little bit, at the beginning, if you're a beginner, the answer is it's a little bit of a guess and check. There's not going to be, there's not one way I can tell you for, you know, exactly how to find that one rule or that one Div ID that you need to change. Yes, yes, exactly. That's another reason why having a simple custom CSS editor is good, is your CSS is going to be separate from your themes. So then you can easily go back in here and see, oh, this CSS rule I added and it had adverse effects to my website, I'm just going to delete that and try again. And that's, it's unfortunately, it's going to be at the beginning a little bit of a guess and check. But that is also a plus because, I mean, that's how I learned how to do CSS. I didn't take any classes, I had no idea what I was doing several years ago with CSS and it's just, you know, I got firebugged and I started trying things out and I've made plenty of mistakes but it's never blown up my website, it's never given me the white screen of death. So it's a very easy way to jump into some coding without having huge worries about terrible effects to your website. And usually if it's like a weird effect to the website, it's going to be something like the text is a little bit, you know, it's not going to be a functionality problem, it's just going to be a slightly weird styling issue. But I do recommend that when you make changes, you really go through your website and make sure those changes are positive and that they're what you expected, the results that you expected. Yes, in the back? Sorry, I can't quite, I didn't quite hear you. Yes? Yes. So yeah, this file, yeah, different sites can have a whole bunch of different CSS files. Generally correct coding would be that you have one CSS file but a lot of times there's different reasons why there's like different layers of CSS file. This custom CSS file will take control and overwrite any other files above it. They're still going to be up there and they're still going to be working but if you have the same property and selector in your custom CSS as in your parent themes CSS, the one in your custom CSS is going to overwrite the other one, the same rule in your other CSS files. Does that help answer your question? OK, great. Yes, right here? Right. That's a very good point, especially if you're dealing with adding CSS to your actual theme, which again is not recommended, though it's possible. You always want to make sure you grab a copy, copy and paste it into a text document and save it. And just make sure, as you said, worst comes to worst, you can always copy and paste back over all the changes you made and revert your site back to how it was before you ever started getting into it. Yes? Yes? Oh, if your child theme has a CSS area that you feel comfortable editing, there's not too much extra CSS in there, even in a child theme. The child theme usually adds some extended styling from the parent theme. In a lot of cases, like if you're using the Genesis framework, so Genesis is your parent theme, and then you install a child theme like Outreach Pro or one of their child themes underneath it, you're still going to be in that child theme having so much CSS that's already written in that CSS file in your child theme. So in that case, you may want to still install a simple custom CSS so that you have an additional area that's just the changes you made. You're not going to get confused and accidentally delete some CSS that was in your child theme that you really wanted. It's a lot harder to make mistakes if you use a standalone plugin that's going to have its standalone custom CSS file. So you would have a child theme of a child theme. I mean, just referring to Genesis on that. Right, right. Yes, yeah, exactly. It's much easier, it's much better to just stick with this kind of plugin. Let me get through a couple more slides, and then I'll have some questions at the end. So I guess we're working with just a couple more minutes. Let me get through a couple more slides. We'll take some questions, and then after the talk, I'm going to be in the happiness bar so I can sit down with each one of you that needs help and answer your specific questions as well. Let me just make sure I get through all my slides if you don't mind. So it's also a good idea to do comments in your CSS. So if I was going to add one of those CSS rules in here, my WP image five, as we see here up above it, this is actually a comment. So this is going to have no effect on the actual CSS. This is just a way of me taking note and saying, oh, I want to, comment goes here to describe what I was thinking when I added this rule. So you don't forget that you put something in there for a reason. It kind of gives you an idea. You could even put a date in here so you know exactly when you made that change. Or if multiple people are working in the file, you can say rules added by Michael. And then it can be a very easy way. If someone else is going into the file, they know, oh, I need to talk to Michael about these CSS rules. He made a couple of mistakes, or maybe I just want to pick his brain about a couple of them. I don't know. It's a great idea to make as many comments as you want in there. And the way you do that is you put forward slash, asterisk, comment whatever you want in there, and then asterisk, forward slash. And that's going to be a way of saying anything in between those two forward slashes is going to be my comment. And especially when you get into having hundreds of CSS rules, it's a good idea to break them out and comment to them and section them so you can quickly get to one rule if you need to edit it. What else can I do with CSS? So we did some pretty simple things. One thing that I wanted to make sure I touched on was that if anybody's heard of responsive design, almost all of that is done with CSS. It can be done with JavaScript and other stuff. But for the most part, it's done with CSS. And you can write rules like in here we can say at media, max width, 600 pixels. So what that's going to say is this CSS only goes into play, that your browser is only going to render it if we're working with a browser that's 600 pixels or less. So if you're working on a phone, let's say that in this example I have sidebar display none. So on a phone it makes sense a lot of times where you don't want to see a sidebar of a blog. You just want to see the blog here and the sidebar is just not going to fit on the page there because we only have a certain amount of real estate for the width there. So I might say, yeah, the sidebar is great, but as soon as the screen gets to be 600 pixels, I want to get rid of the sidebar. So this is a way of telling CSS, hey, this rule is great, but I only want it to work if the browser's under 600 pixels. So then if you went into a web browser, and let's for instance go back here, and let's say that we wanted to make this smaller. So the CSS is going to make sure that nothing's hanging over the page. It's going to make things a certain width to respond appropriately. So responsive CSS is very helpful. And it's a great way. Even when themes are technically responsive, you'll still add some content, and it won't quite work like you want it to. So that's the reason why you might want to take a look at responsive CSS. And I'm giving you the basic overview. I know that a lot of this is going to end up being something that you have to Google. And that's OK, and that's how I learned. If you want to know how do I write a CSS rule for iPhones or for under 600 pixels or for max width, blah, blah, blah, type into Google, responsive CSS. How to write responsive CSS? Google that. There will be so much information that you can't even decide which article to read, because there's going to be so many good articles out there. You can also do cool things like animations. And I just wanted to show you guys a couple of quick examples to show you how cool CSS can be, because it can be pretty boring just changing colors and stuff. But you can also do crazy amounts of things. And let's see if it will load, because it's a big page here. But you can do cool crazy things like this. Like this is mostly all done in CSS. I believe this one has some JavaScript in there too. But there are some examples that have no CSS. I believe this one doesn't. So there's nothing in JavaScript. So this is all done in CSS, this little submarine going around in the bubbles and the animation. That's all CSS. Now that's really advanced CSS. And it's probably something that you won't have to ever really do on your website. But it just shows you that while CSS can do simple things, you can also get really advanced with it. That's about the end of my slides. Let's see if I have anything else. Yeah, just my slide about Google can help. Pretty much anything that you have a question about with CSS is Googleable. And so many people have Googled it in the past that there's going to be articles for it. There's going to be more explanations than you need. W3Schools is a great resource. This link in particular for CSS is just amazing, because it starts off with one page. And you can just go keep on diving deeper and deeper into CSS with this. It's going to get complicated at some point. But for the most part, it starts pretty simple. And it has a good work down of starting simple and getting more complex as you go. And here's that page that I went to here. And it just has really simple CSS examples. And it has little quizzes, and you can try it yourself. So this is basically a little online school for CSS. While I never went through the whole thing, it's definitely been a resource that I've used even to this day to find what was that one CSS rule that I really like for doing the transition fade-in element, to have an element fade into a page instead of just be there. So that's a great resource, should you need some extra information. And that's it. So questions, we'll get back to that. Yes, right here? Oh, yes. So I never showed y'all that part. So rainbow is this little thing right here. And what this does is it lets me hover over anything on the website so I can say, oh, I know this website has this color that I like. What is that hex color? So I can click on rainbow, and I can hover over anything, and it will show me that exact color there. And I use this all the time if a client gives me their website, and they already have a certain color scheme going on, but they have no idea what the hex color is. I don't have to do any guessing. I can quickly go in there and rainbow, hover over the element, and it tells me pound four C, A, F, five zero. I can click it once, it copies it to my clipboard, and then I can just paste it wherever I want. So that's an easy way of matching things on your website. You can very quickly grab that. And just as a quick example, on the opposite side of that, color picker is the thing within Firebug that allows you to use that same thing in here. So if I say color blue, it gives me this. But then I can also open this up and I can say, oh, no, maybe I want it to be green over here. And I can start moving it around. And we'll see tutorial is changing colors as I'm moving this bar around. So it's a quick way of me being able to play with the colors without knowing hex codes, and without having to get those ugly, like if you just type in blue, it's going to give you straight out of the box ugly blue. And most of the time, you're not going to want to use those colors, because those are kind of the late 90s web font styles, because you would back in the day just choose, oh, I want this to be blue. And there'll be that one primary blue that's a little bit ugly. And you might want to soften it up a little bit to a nice, pleasant blue. So that is Fire Picker. And again, there's so many more add-ons to Firefox. I mean, to Firebug. There is the one other one that I like is Changes. I can see, after I make those changes, as I showed you that one time, it kind of shuffled around. And all of a sudden, I couldn't find that change that I made. If I install Changes, then I can see exactly what changes I've made to the web page in Firebug. So I can make a whole bunch of changes to the web page, get it how I like it. And then in Changes, it will have this big list of changes that I've made to the website to get it to where I want. And then I can copy and paste one fell swoop, all of the changes I've made, put it into my CSS, save it. And then again, whenever you make CSS changes, whenever you paste those CSS changes and update, always go back to the front end and double check and triple check. Those changes had the correct effect to the website. And one thing I will say is sometimes you'll make a CSS change. It will work in Firebug. You'll put it in your custom CSS. And for some reason, it just doesn't do the same thing it did. Don't be worried. That happens all the time. It's frustrating, I know. Sometimes you just got to find a different angle at it, and you're just not using quite the right rule. And Firebug displays it one way, but it doesn't work. It is going to be a little bit of a guess and check at the beginning. You wanted to mention the important rule. Yes. OK, the important rule. So let's say that I put this in here and I realized this was being overwritten by something else, and I just can't get it to show up. If I can show an example in the front end, it will be a little easier. So if I added color blue, and I see that it doesn't make the effect that I want it to. If I put important over there, it's going to make sure it overwrites everything else. So what had happened there when I put color blue is some other rule was overwriting the rule that I was putting in here. And it just was not coming up. So what I can say is, while something else might be taking precedence over this, this is important. I want this to take precedence. So this will say, OK, important. Any other rule that has to do with this, let's overwrite that, and let's put it up there. Sometimes when important doesn't work and why you might want to not use important all the time is if you put important on every rule and you put an important on another rule, it's going to be like, well, which one's more important? And unfortunately, there's not a more important rule. So you want to be careful and only use important only if it's actually super important. Yes? Uh-huh. It has to be quite controlled. Sure. Well, we can Google it, color safe firebug. Let's just see what comes up when we do that. Probably your best bet is to find, I think that there's websites that will tell you that you can put in a hex code and it will give you the closest color safe, or print safe, or I forget the exact terminology. It will give you that right hex code that's similar to the one that you wanted, but is actually the safe version. That's going to be, I don't have the exact website off the top of my head, but I'm sure if you Google it, you can find, let's see, color safe hex code, something like that. So you could see something like this and then you could search for the one that you were putting in there and find something similar. But I know that there's more advanced tools than just this big list of colors. Sure. And that can be a problem. As a designer, I know that's an issue and I'll be like, no, this logo is looking great. And then they're like, well, on my PC from 20 years ago, that dark blue is looking brown. And I'm like, I'm sorry, that's the monitor. I can make it as close to as I can, but each monitor is going to be different and that's just an unfortunate thing about designing. Really monitors are getting better and better, so eventually it won't be as much of a problem, but unfortunately for now it definitely is, especially when you're dealing with print and you're dealing with websites and those colors are going to look different too, so it can be tricky to find the right colors. Yes. Yeah, yeah, there's so many differences. That's true. And your phone. And your phone. Right, and different browsers will also use CSS differently, so there's actually, confusingly, there's sometimes different rules depending on the browser and that's usually more of an advanced thing for colors and font sizes. That's gonna generally be browser, non-specific, but for things, there's like Firefox specific codes that only will work on Firefox, like transitions and stuff that won't work on Safari and especially Internet Explorer seems to be one that no, like Internet Explorer only is like, oh, I'll use half of these CSS rules. I don't really know what you're talking about for the rest of them, definitely check on all browsers if you can. Yeah. I'm telling you already, that is the worldwide establishment of voting on color. Sure. And Pantone says the color is, if it is, you can get calibration for your cameras, for your monitors, for everything. Sure, yes, Pantone. And it's got to be centered in print or all this. Yeah, good point, good point. If you want to print on that, you can specify it on the real and the written. Sure. I have one more question. Did you ever, have you ever found a good tutorial fire bug? I actually did one three years ago or something like that. I actually, yeah, I know, Vimeo, sure. So as I was saying in 2012, I did this one and it's very quick, it's only five minutes. You know, I spent what, 30 minutes, 40 minutes now talking about Firebug. But this might be a good reference for you. Honestly, there's probably better ones out there. It's not the most extensive one, but I did do one on Vimeo. And if you Google new tricks, how to use Firebug, it will come up, it's a Vimeo video. And I just kind of go through basically what I did today, showing you how to install Firebug and then showing you how to set it up and, you know, basic, basically it will be a refresher of what we did today. But, you know, again, Google's your friend. You can probably Google one and find one that's much better than the one that I did quickly three years ago. Yes. For fonts. I have a plugin called WhatFont and that is great. So I use, actually no, the one I use is FontFinder. I have used WhatTheFont. FontFinder, and so I can go over and I can say, oh, what is this font? And it will tell me everything it can about the font. It will say FontFamily is Ariel, San Serif, FontFinder. It's FontFinder. And that's just a quick way, like, you know, it's a good way if I'm like going through websites and I'm trying to find my own font. I can find a font I like. I can click on FontFinder. I can select any font and it will come up. Firefox add-on. So if you just Google FontFinder, Firefox add-on, there should be pretty clear instructions on how to get that going. I have time for maybe one more question. Anyone else? Okay, well thank you. I appreciate it.