 Welcome. Are we all in the mood for a bit of CSS? Hopefully. Right? I'm Katherine Prezner. I'm from Montreal. I'm happiness engineer at automatic where I specialize in helping users with their WordPress sites. And one of my areas of specialty is CSS. So I love sharing knowledge about CSS and I'm really excited to share a couple of secrets with you. CSS is a language and it stands for cascading style sheets and it's used to change the look and feel of a website. And in WordPress, CSS can be used to modify colors, layout, without having to dive in and edit your theme files, which is something that as a beginner you probably don't want to start diving into. So it's a very, very handy language. You don't have to write down all the stuff because the slides are online and you'll be able to copy paste code directly from there. So don't worry about writing anything down. The first thing I want to share you may be familiar with or you might not. WordPress as a version 4.7 comes with a CSS editor. So you don't need to install a plugin to add little bits of CSS. And where you can find it is right up in the customizer. So you can go straight to the customizer from your dashboard. You can go to appearance, customize. And there's a panel called additional CSS where you can type in little pieces of CSS. And what's amazing about using this is that any CSS you add here will be saved and will not be overwritten when you do something like update your theme. If you make changes to your theme files directly and then you update the theme, you're going to wipe out any changes you've made. So using the CSS editor is a much better way to do this and it's baked right in. The CSS editor in core has some cool features. It has syntax highlighting which allows you to write your code more cleanly and more correctly because it indicates the different parts. So you know, things are in green and different colors. And it also has auto-completion. So like a code editor, if you start typing, it will give you all the available values you can enter for a property. So that's really handy. It will also warn you if you've made a mistake. So I don't know if anyone can spot the mistake here. Anyone know what the problem is here? Color. We've spelled it the Canadian way. But CSS unfortunately uses American spelling. So it will warn you. And if you hover over the little warning icon, it will tell you a non-property color. CSS is not very international, unfortunately. And so along with warnings, it also has errors. So the errors are in red and the errors are much more serious because you actually, to save a code, your code with an error in it, it will force you to acknowledge that you might break your site. Update anyway, even though it might break your site, so you actually have to check a box. So double check your code carefully before you override an error because chances are you're wrong and not the code editor. So here I've typed PZ for font size instead of PX for pixels, exactly. So be aware of the warnings. Now, if you're looking at this, you might say, well, why would I bother to learn a little bit of CSS to do all this? You know, the editor comes with some things like I can change the color in the editor. Well, yes, you can. So let's say I wanted to change the color of my text from black to something more maple-y. This is my test site, all about maple syrup. So you could definitely open up this post in your post editor, highlight the text, choose the color picker tool, go in, start, you know, using the palette picker, find a color, say, yeah, okay, I like the shade, all right, okay, now it's my nice maple color. You could do that. And you'd of course have to do this on every single page, right? And what if you decide two weeks from now, you know what, that's a little bit hard to read, I would like to make this color darker. You'd then have to go into every single post and page and go through this process and change the color. That is not very efficient or smart. CSS is beautiful because it allows you to accomplish the same thing much more efficiently. You can target the element, which is your page and post element. And with three lines of code, you can make it the color you want. And this is great also, because if you change your mind later and want to change the color, it's super easy to come back and do that. So this is a much, much better way of doing this. And it affects all your posts and pages. And this is what the code looks like. So we are targeting the element entry content, which in most WordPress themes is where your posts and pages live, the body of your posts and pages, we have our color and then we have our hexadecimal code for the color in purple. Now, how do you know what element to target? I showed you there that we have the entry content element, but how did I know to target that element? Well, I highly recommend that you get to know a browser inspector. Most modern web browsers, almost all of them, pretty much all of them, come with a browser inspector. And browser inspectors let you explore the code of your website, any website. So you would do something like right click and you'd say inspect. And it would allow you to explore all the code on your site by selecting different parts of it. And it's super cool. And you can do things like even type right into the code and make changes. So here I typed right into the inspector. I changed this to a horrible purple. I often use the test purple color code called Bob B0B to make it obvious where the elements are. And this is not changing your live site. A browser inspector is cool in part because it allows you to change things just on your computer as you're experimenting. So this allows you to figure out which elements you need to target in your code. A common thing CSS is used for and is helpful for is to hide different elements on your site. Often you might have a theme that is great and you love it. There's just one little thing you really would like to remove, whether it's like the search bar at the top or a little piece in the footer. And so using little bits of CSS to hide those things is super handy and convenient. So here's an example. Let's say I want to hide the tagline. I'm going to target that. So the element is site description. And I'm going to use a display none. Now you see what happens? The rest of the page pops up and takes up the space that the tagline was using before. And so that's what display none does. It hides the element and removes the space that that element was taking up. So this is good to know. And this is what it looks like. So here's the tagline, site description, and display none. Now I want to compare this to another good method for hiding elements that's slightly different. And here we're going to use another property and value called visibility hidden. And so look at the difference here. It also hides the tagline, but the rest of the page didn't move up. So this is very handy when you want to hide an element but preserve its space. So that's the difference between display none and visibility hidden. One removes the space that the element was taking up and one doesn't. So you might want to use one in one context and another in another context. So this is site description, visibility hidden. So very good to keep those two in mind and to remember the difference between them. Before and after. So these are called pseudo elements. See the double colon, double colon before, double colon after. These are very, very handy for adding little pieces of content around your site. You know, this is something you can do if you dive in and edit your theme files for sure, or create something called a child theme. But if you just want to add one little tiny thing, it is very handy sometimes to use this method. So I'm going to show you an example. So let's say we wanted to add a little maple leaf graphic before all our post titles. We can use the before pseudo element to do that. So we're targeting all our post and page titles and saying, insert this little maple leaf icon. And so with a couple of lines of code, we've accomplished that. And it's a very efficient way of doing this. And I'll show you what this looks like. So we have the entry title, which is our post and page titles, double colon before. And it uses a property called content. And content could be an image or it could be text. And so we say URL, and then we put the path to the image in our media library. It's important to get this path right, or it's not going to work. So you go into your media library and you grab the path from there. And bingo, you've got your image showing up where you want it. Another thing people often want to do is add a copyright line or something to the footer of your site. And here we're going to use after to add some content. And the other cool thing about the customizer is that it gives you a real time preview of what you're doing. If you do something like add a widget or add a menu or edit something in the customizer, you will see it in real time. So that's really cool. And display block puts the new line that you're adding on its own line. So this is what it looks like. Here instead of adding an image, we're adding text. And we're saying display block to place it on a new line. If we didn't say display block, it would be on the same line as the rest of the content in site info. WordPress classes are one of my favorite things. And if you're not familiar with them, prepare to be excited if these sorts of things excite you. WordPress adds very handy classes on different elements automatically that you can then use to target things with CSS. So one example is .home. So .home is a class on the body tag. And it will always be there on the home page of your site. So if you want to target something on your home page, just think .home. Blog is another class. Blog will always be there on the blog page or post page of your site, whether or not that happens to be your home page or another page. And you also have unique IDs for things like pages. Each page has a unique ID. Each menu item has a unique ID. If you want to make a menu item highlighted with like a red background, let's say you're running a sale and you want to highlight that somehow, you can do that because it'll have a unique ID. So WordPress classes are extremely handy and something that using your browser inspector can help you find. So for example, let's say we just wanted to display these little maple leaves on the home page. We can take the same code we had before but add .home in front of it. And that way the images will only appear on the home page and nowhere else. So by adding that selector in front of the code we had before, it does something called making the CSS more specific. So we're just targeting one part of our site instead of everywhere. And so this is what it looks like. So to make it more specific, we add .home and then a space. The space is important because it indicates a hierarchy. So .home is first and then the rest of the code we had before basically saying before each entry title display the little maple leaf and that'll work. We can also make code more efficient with CSS. So often beginners just start adding one piece of code at a time and just add and add and add and add and that's fine and your stuff will work but there's a way to do something called refactoring where you realize after you've done a bit of code that you can make the code cleaner. And I'll give you an example of how to do that by targeting multiple elements at once. So let's say we wanted to make our site title and our post title the same size. We can define that pixel size for both elements separately but we can also combine it into one by putting a comma in between the two selectors and it'll accomplish the same thing in fewer lines of code and this is what it looks like. So this is the original where we had a bunch of lines of code defining the same size for each element and here is the more compact version where we separate the two selectors with a comma. Changing fonts is something people often want to do and in this era of Google fonts it can seem very easy and it is very easy. Let's say you find a word and you say I want to change that contact line at the top and make it rebato condensed. Well, you might be able to tell here this isn't actually working and does anyone know why it's not working? Just doing it like this? Yeah, we didn't bring in the actual font. My browser at home where I don't have rebato condensed installed doesn't know how to display this font because it's nowhere to be found. It's not on my computer and it's not on the website. So to bring it into the website we use a Google font plugin and this will bring the font itself into the website so you don't have to have all your visitors, you don't have to post a message saying to view this site in rebato condensed downloaded here. That would be ridiculous. So this does something called in queuing the font on your site and then once the font is in queue you can add it to your CSS and it will display correctly. So it's a two part process in queuing the font using a plugin or another method but a plugin is easiest for beginners and then your CSS. Media queries are an amazing, amazing thing in CSS and you might have heard the term responsive web design and that means a website that adapts automatically to different screen sizes so it'll look good on small screens, medium size screens, huge screens. And to do that we use media queries and here's an example of something I might want to do and if you see the little icons at the bottom left you might not have noticed these but this gives you a preview of what the site's going to look like on different screen sizes. So here if I want to make the picture of the maple syrup bottles disappear on smaller screens I'm adding a bit of code that says on screens below a certain pixel size hide that area and it should work. And this is what the code looks like so your media query is the outer set of instructions with its own set of curly brackets so that says basically on screens up to a maximum width of 767 pixels hide the hero area on the home page and there's another type of media query that's the reverse which is the minimum size so on screens up from a minimum size of whatever do a certain thing. So media queries are extremely powerful and handy and once you wrap your head around it you'll have a lot of fun playing with them. And finally CSS is amazing but it can't do everything so it's good to know when you're encountering a situation where CSS is not going to cut it so things like auto advancing slides in a JavaScript slideshow CSS is not going to be able to handle that or a lot of people would like to add a link using CSS and unfortunately that's not possible. So when you run into those scenarios it's usually one of two things you're going to want to do you're going to want to create a child theme which is a whole other presentation but it's a way to modify the look and feel of your site without editing the original theme files you're creating a new little child theme or a plugin often there's a plugin that will accomplish what you want or you can write a little piece of custom code and put it in your own plugin. So if you want to go beyond this was just a taste I have some resources in the slides that are linked where you can explore more CSS and hopefully you'll have fun doing it. So are there any questions and I will also be at the happiness bar from I think about two to four today so if anyone has something they would like me to look at we can look at it together I love troubleshooting CSS with folks or if you have any questions so any questions about CSS any burning questions issues. All right well have fun with the rest of the work out.