CSS Tutorial For Beginners: Style Your Wordpress Templates | Eddie Irvin | Skillshare

CSS Tutorial For Beginners: Style Your Wordpress Templates

Eddie Irvin, Web Development + Coding

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
47 Lessons (3h 23m)
    • 1. CSS Tutorial For Beginners - Get Started Today

      1:58
    • 2. What Are CSS Selectors + Why Do We Care?

      6:12
    • 3. What You Need To Be Set Up For This Course

      2:36
    • 4. What's The Point Of Using CSS?

      1:51
    • 5. How Does The Code Work To Let Us Use CSS?

      1:25
    • 6. Behind The Scenes Of A Form!

      6:50
    • 7. More About CSS Selectors: Be Broad Or Be Specific

      6:29
    • 8. How Do We Save Our Changes?

      9:42
    • 9. Why Use A Child Theme?

      3:28
    • 10. How To Set Up A Child Theme In Wordpress

      3:09
    • 11. Quick Overview On Chrome DevTools: Our New Best Friend

      5:19
    • 12. Selecting Our Code In Different Ways: There Isn't Just ONE Answer!

      11:43
    • 13. Divs: Let's Play With Margin + Padding

      3:33
    • 14. Divs: Floats, Backgrounds + Widths

      6:44
    • 15. Using Multiple Selectors For The Same Div SAVES US TIME!

      4:11
    • 16. Making Elements DISAPPEAR: Use The Display Property

      4:39
    • 17. Divs: It's Time To FLOAT

      2:11
    • 18. Using Placeholder Text In Your Form

      7:23
    • 19. Watch Your Code: Placeholder MISTAKE!

      1:10
    • 20. Using Borders: Do This To FIX Your Code

      2:22
    • 21. What Does Text-Transform Do?

      3:07
    • 22. Pay Attention To Small Details: Line-Height Is Important

      3:16
    • 23. Styling Your Placeholder Text

      1:53
    • 24. Quick Run-through: HTML Elements You Use Every Day.

      5:48
    • 25. Working With Images: Width, Height + Retina-Friendly

      10:27
    • 26. Working With Links: Padding, Margin + Fixing A Common Issue

      8:26
    • 27. Styling Links To Change When You HOVER Over Them

      5:35
    • 28. Make A Link "Pop" When You Click It

      5:36
    • 29. Quick Overview: Responsive Design

      6:22
    • 30. Percentages, Pixels + The Border-Box "Hack"

      5:26
    • 31. Force An Element To STAY PUT

      3:39
    • 32. Centering: Text-Align VS. Margin

      4:05
    • 33. Should We Write Styling Into The HTML Or CSS File?

      2:35
    • 34. CSS Specificity: Which Code Wins?

      3:08
    • 35. How To Fix Collapsed Divs

      4:00
    • 36. Clear Your Floating Divs!

      4:42
    • 37. Form Setup: What You Need To Do For This Section

      2:09
    • 38. Next Step: Give The Inputs Some Room

      4:36
    • 39. Width + Border-Box Saves Us Time And Having To Do Math!

      1:54
    • 40. Form Input Backgrounds

      2:34
    • 41. Form Borders

      2:58
    • 42. Next Step: Text-Transform + Text-Align

      1:34
    • 43. Make Your Fonts Match (And Use Google Fonts!)

      2:38
    • 44. The Perfect Submit Button

      6:20
    • 45. Make The Submit Button Change On Click!

      4:02
    • 46. Get Inspiration From Other Websites: Model Their Code

      2:02
    • 47. Learn One Thing At A Time + Ask Me Anything!

      0:44

About This Class

f4f28905

The COMPLETE guide to bringing new life and a professional look to your website!

Description

Are you someone who has been working with Wordpress and want to take your sites to the next level by changing their look and their style?

Or maybe you’re frustrated because you want to make changes but you can’t figure out how to do it.

Maybe you’ve tried to make your website look better, and you’ve done the best you can but you keep getting stuck.

If you don’t learn this, I’m sorry to say that that frustration doesn’t go away! And as frustrating as it is now, imagine what you’ll feel like a month or a year from now when you STILL DON’T KNOW how to make your website look better quickly and easily.

I KNOW how that frustration feels, I’ve been there, and I know how annoying it can be to know what kind of changes you want to make, but then not know HOW to make them. But I’ve learned the RIGHT way to style websites, and it’s called CSS, and that’s what I want to teach you today.

Take a look at this example of how a simple boring form can be easily and quickly transformed into something mobile friendly and responsive! I’ll walk you through exactly how to do this and other things like it in this course.

Also, imagine what it will feel like to be able to look behind the scenes of any Wordpress website you visit and see how THEY styled it, and then be able to model that styling for your own website!

Imagine using code that makes your website look so much better the INSTANT you add it.

And what will you feel like when you can take a boring theme and injecting it with life and your own personality, quickly and easily using CSS.

This course is the complete guide to beginner css and it is the exact tool you NEED in order to style your Wordpress website.

This course will be super helpful to you now AND in the future whenever you have a question about CSS. It’s easy to ask any questions at any time and I’ll be right there with you, answering them.

Take this course NOW and I’ll see YOU on the other side!

Who is the target audience?

  • This course is for people who want to make changes to the LOOK and STYLE of their Wordpress website
  • This course is for BEGINNERS to CSS and styling websites
  • This course is for people who want to quickly and easily make their site more user-friendly and fun
  • This course is NOT for someone who doesn't care about how their website looks
  • This course is NOT for someone who hates learning about ways to quickly and easily make their site more user-friendly and fun
  • This course is NOT for someone who hates learning and figuring new things out

Requirements

  • You should be familiar with Wordpress
  • You should have very basic knowledge of HTML
  • All required software is free (and download links are included)
  • You should make sure you like my teaching style (please preview a video)!

Transcripts

1. CSS Tutorial For Beginners - Get Started Today: are you someone who has been working with WordPress and want to take your sights to the next level by changing their look and their style. Or maybe you're frustrated because you want to make changes, but you can't figure out how to do it. Maybe you've tried to make your website look better, and you've done the best you can, but you keep getting stuck. Well, if you don't learn this stuff, I'm sorry to say that that frustration doesn't go away. And as frustrating as it is now, imagine what you'll feel like a month or a year from now, when you still don't know how to quickly and easily make your website look better. I know how that frustration feels because I've been there, and I know how annoying it can be to know what kind of changes you want to make but then not know how to make them. But I've learned the right way to style websites, and it's called CSS, and that's what I want to teach you today. Take a look at this example of how a simple, boring form can be easily and quickly transformed into something mobile, friendly and responsive. I'll walk you through exactly how to do this and other things like it in this course. Also imagine what it will be able to feel like toe. Look behind the scenes of any WORDPRESS website you visit and see how they styled it and then be able to model that styling for your own website. Imagine using code that makes your website look so much better the instant you add it. And what will it feel like when you take a boring theme and injected with life in your own personality quickly and easily using CSS? This course is the complete guide to beginner CSS, and it's the exact tool you need in order to style your WordPress website. When you join this course today, you get lifetime access. And not only that, this course will be super helpful to you now and in the future. Whenever you have a question about CSS, it's easy to ask any questions at any time, and I'll be right there with you answering them. Click take this course now and I'll see you on the other side 2. What Are CSS Selectors + Why Do We Care?: Hello and welcome to this video. This is all about CSS selectors. Now, to make it super simple, I just want you to think about a selector as a nickname for a certain part of our code. Now, if you can't, uh, you can't put nicknames on certain parts of your code. If you try to change the color, change the font size of change all these things later, you're gonna have a really bad time because you're not targeting the right thing. You're not selecting the right thing. Okay, so there's two types of selectors. There's I DS and classes, but they're both nicknames. Okay, So what The basis of this whole entire video, I want you to just think OK, All he's talking about is putting nicknames to dirt to different parts of the code. Okay, so that's a simple as it is. Sometimes the jargon gets a little bit confusing, but it's just we're just putting nicknames on certain parts of the code. So on I d is a selector or a nickname that you should only use about once versus a class is a nickname that you can use multiple times. I like using classes because you can use them over and over again with an I. D. You're kind of stuck with Onley using it once, and I don't like that at all. Okay, so I use classes. Now take a look at this right here. P space class equals and then in quotes bananas, you can You can give nicknames. You can give whatever nicknames you want. Two parts your code. You can name them ridiculous things You can name them things that help you kind of organize your thought. Sometimes I make up really weird nicknames just because I think it's fun and makes it a little bit more exciting. But so this certain part of the code take a look at this. You can see when I roll over it. It highlights at p. Class equals bananas That pee right here. That's just a text element. OK, just text a text area. Basically. So it's saying okay with the P, it's saying a text area with nickname or class of bananas. OK, so come up here and you can see it's p dot bananas. Now there's two things going on here. First of all, we're in chrome and we are we're in Dev Tools. You get here by right clicking any part of your code and clicking Inspect on and that will open up this code to the side. If it's on the bottom of your screen like this, you can just click these three little dots right here and then bring it over to the side. I like it over to the side because that that makes the most sense to me. So this section is the HTML and this section is the CSS. Okay, so when we go from this section two this section, we're actually looking at two different types of files. Now, you can mess up any area of this code, and it won't actually write to the code. So it's really handed. You just mess around with him, play with and as soon as you refresh the page, you're good to go. So take a look at this again. So p class equals bananas. That's the HTML. This is how we write it. Class equals and then in quotes, bananas. But then over here, look at this p dot bananas. Now look at the dot The dot is that should clue you in. Okay, that's a nickname right there That's called a CSS selector or s CSS class or what? I like to call it a nickname with the dot It's a nickname. Okay, so this P s a look at this is to different sections. It's a it's looking for P areas or text areas with nickname of dot bananas. OK, so here's the HTM outside class equals bananas. And then over here, it's the CSS side, which is dot banana. So you don't use dots over in this area. You actually say class equals and then quotes you type what it is. But over here on the CSS side, the way that we way that we target, that is by by using dots for classes. Okay, so now, because I've got that area with that specific nickname, I can change the font size. I can change color. I can change the line height. I can change the width. I can do all sorts of different things to just that area because I gave it a nickname in the HTML. And then I Then I wrote the code for that nickname in the CSS. Okay, so right here I want to see p dot bananas that was all kind of together. There's no spaces there. That's because it's looking four p elements with the nickname Bananas. If I put a space here, what that saying? Is it saying, look for P elements? And then inside those p elements, look for something else with a nickname of dot bananas. Okay, The reason why this code works this way when you put it together could get rid of that space is because it's looking for P elements with nickname bananas. It's not looking for P elements with something else inside of it with the nickname Bananas . Okay, so that's a huge distinction. Just one little space can mess you up. If you type this code and you do all its P and then space dot bananas, it's not looking for the right thing. You've selected the wrong thing. You've targeted the wrong thing. OK, so pay very close attention that when they're smushed together, it's looking for elements off that it's looking for eso like Pete right here. It's looking for P elements with the nickname bananas like that. But if you put a space there, it's looking for elements with in a P element that are nicknamed bananas. OK, so you can always have things inside of other things with HTML, there's so many boxes inside of other boxes. And then there's fonts, insider. There's text areas inside of that and then inside of text areas there spans, and there's sections within that. So there's always sections within sections within sections. So that's why it's handy sometimes to be able to put a space. But I just want you to really, really get that that if we put a space there than it's looking for something inside that element with that nickname. But if you put it, if you combine them, put them together than it's looking for that specific element that P element that text element with the nickname or class of bananas I'll see in the next video. 3. What You Need To Be Set Up For This Course: All right. So I'm gonna show you how to set up. Everything will need for you to get going in this course. Now you need to have a wordpress install. If you need help getting wordpress install. This is not the course for you. I'm sorry. There's plenty of resource is, and I can try to link some stuff up, but you need to start with a fresh WordPress install or just your your site. Whatever it is, it doesn't need to be fresh. But you just need to make sure that you have where press already installed and ready to go . So go to plug ins, make sure you have contact forms. Seven. OK, because we're gonna be working on that. This is a great plug in. If you need any kind of contact form on your website. This is awesome. But we're gonna We're gonna be styling that form eso Just make sure that you're all set up with that, and then we go to pages are actually knows. I'm sorry. We create a contact for him first and we're going to just default. Call it just anything you want. That's fine. And then click. Save now what we need here. The information we need is this guy this piece of code right there. So I'm gonna copy that with the brackets. That's called a short code. We need that. Okay, So copy that guy right there After you create your your contact form and you click Save That should pop up if you can't find it. For some reason, if you click contact forms, you should see the one or this is the one. This default when we just did on there's the information right there. So go to pages and click, add new and then right in the text of you could text right here. And then we're gonna drop in that code that I'm gonna call this beginner form. It's not important really what you call this stuff, but here we go. Publish, and we've Now we've got this whole thing set up. Now we actually have a contact form live on our website. Now, I don't like this Perma link to see this question mark with page 87 that that kind of sucks . We're gonna change permanence real quick to post name, click save changes and then we'll go back to pages all pages and beginner form. Now, when we click on beginner form, you can see it's it's beginner form right there. Okay, so here we go. We want to go to that beginner form, and here's our form Looks nice and pretty. It's got all this junk on the side. So I really want you. Teoh, make sure you get to this point before you go on. If you can't get here, then it's gonna be hard to follow along in the next videos if you need to kind of re watch this or kind of posit and do each step. I know I went a little bit fast, but we'll see in the next video once you're all set to go. 4. What's The Point Of Using CSS?: Hello. Okay, so why are we doing this? What's the point of this whole thing? And how does it work? So over on the left side. Here, take a look at this. This is the This is the actual website. This is what's displayed to people visiting. And then if you look at this area, this is the HTML is all the HTML code for your website, and then over here is the CSS. Okay, so CSS is a separate file from an HTML file. HTML is kind of the layout of how things happen. But the CSS is all the styling. What? How things look and and so we We use selectors to be able to change different parts of the code. There's more on that in a different video. But basically, I want you to get the concept of what's going on here that in order to get here to this beautiful section of the goat, we have to first have this HTML going on, which with WordPress, a lot of it's already written for you. All we added was the form and then everything else is taken care of. But then with the CSS, that's a separate file that's loaded separately. And, um, it allows us to be able to change certain parts of the HTML. Okay, so open, open chrome. If you're not in Cromarty, open chrome. Make sure you can get to this area cause this is gonna be really, really helpful to us. Um, if you're just seeing the regular web page like this, you can either press f 12 or, uh, let me press f 12 again to get out of there were right click and then click. Inspect. Okay. And then that's gonna pull this guy up. If for some reason this guy is low down like this or if he's like a separate separate area , just click these three dots right here and then put the dock over on the right side. That'll be super helpful to you. It's just cleaner. It's clearer. You can also move these in and out. And there's also a bottom area here. For some reason, that's way up like that. Just pull that all the way down. We don't need that for now. We just want to see that html right here and then the CSS see in the next video 5. How Does The Code Work To Let Us Use CSS?: So one thing that's really, really nice about WordPress is that everything is kind of all set up for you. If you try to create your own site without WordPress and you put you upload your HTML files and upload your CSS files, you have to call that CSS file from with in the HTML file. So it's just like the the HTML Files. The main thing that's loaded when you go to a Web page and it's gotta have it's gotta basically ring up the CSS file and bring it in. Otherwise you won't have any of that styling. But with WordPress, all that stuff is is hooked up for you. Okay, so I found in the code, I found exactly what the CSS file is. Okay? And what where it is actually where it's being called from. So it's in the header you see in between those head head tags, it's in the header, and then it's down here, usually for WordPress. It'll be in your double WP content in themes and then in your theme name and then the style that CSS file. Sometimes you'll be calling one CSS file with in another CSS file. You don't need to do that. That's another level of of stuff you don't need to worry about right now. But I just want you to really understand the reason why when we make changes on the CSS that we see it on the website is because WordPress has already done the work for us to connect the CSS file into the HTML file us. When we make those changes, they show up. All right, see in the next bed. 6. Behind The Scenes Of A Form!: all right. Now that we know about selectors, we're gonna play with them a little bit and we're gonna use Chrome Dev tools to be able to really figure out, you know, where we're supposed to be pointing and how we're supposed to give certain nicknames to certain sections of the code. So you can see where this beginner form have you, right? Click your name and then click Inspect. Then it pulls up right in the code. It takes us right to where we need to be. You can see that there's this p element which is a text element on, and then it has your name required right there. If I right click this and click edit text, I can have that say whatever I want it to say Boom. Look at that now. That didn't change the actual code of the webs that if I reload the page that's gone and that's the beauty of death tools is that I can mess around with anything. I can change a website however I want, and if I refresh it, I haven't messed it up. But if you want to effect change, you have to make sure that any changes you make here. You were able Teoh. Copy those back into your code in the back end of WordPress. Okay, so when we do CSS changes, we're gonna have toe will make the change so we can see what's happening with them. Will copy that into the CSS file in the WordPress back end. If that doesn't make sense to you right now, don't worry about it right now. I just want you to focus on selectors and playing with selectors. So let's take a look at this input right here. We're gonna right click this input and click. Inspect, and you can see Look at that for a second. It's got that green around it. It's got a blue area. It's got a little hair of an orange. I don't know how how big you were looking at this video, but it's got a hair of an orange border around it. Um, look, yeah, looks like an orange border. It's actually not. It's not orange grown was just telling us Oh, hey, there's a border here. So look at look at the border. It's coloring different parts of the code forest so we could really get a good idea of what's going on in that area, as opposed to just highlighting it. It's highlighting it, giving me different highlights for different things, to tell me different things about the coat. So if we come over here and we can see that this top guy right here is showing us, you know, it's got a background, it's gotta back on image. It's got a border, a border radius color patting all this stuff. Let's let's uncheck some of these things. You can see what's going on. So let me unchecked background. Look what that dead. All of a sudden, those backgrounds for all the inputs are gone. Now How come it change the background on all the inputs? Because the selector up here input was a very general selector. It didn't say inputs with the nickname of bananas. It chose inputs, all the inputs. So that's what's really handy about CSS is that if you make one change, I just uncheck one box. It changes all these different things at once without having to go through and change each different single one. Okay, so that's really, really handy. Let's go through these things just so you can kind of see what's going on. So, background image. That's actually that's a backup to this background here. If the background doesn't work, then it's gonna have ah, background image. Actually, there's a little bit of ingredient there, I guess. No, no, it's all the same. Color 2 55 to 55 to 55. Okay, um and then border. Look at this mess. With the border. Sometimes the default borders of of browsers just look like 1993. So you're probably that that's why this is here. Because the default looks like that, which is horrible border radius. That is, uh that is the You know how how circular the border is. Let me change that to 20 to see if we can see it. Yeah, look at that. See? See, I was circular. That is That's how you affect that change. The color of the this is the text color of the text. So Hello. How do you do? Where is it? Bye bye. Bye bye vibe about with Bob. A bone. Oh, now, look what happened. I started typing here, and all of a sudden the code that I was working on is gone. Where did it go. It went down here. Actually, there's a whole set of code that popped up because I focused on it because I clicked on it and started typing. The code actually changed. Okay, so you can see here input and then typed text coal and focus. There's a whole set of code for when I click on it. It actually changes Teoh to show a different type of CSS. So this is really handy because it makes your code kind of come alive. You know, as people click on things and as they hover over things, you can have your code automatically change. And so that's kind of what brings life to it. You can see the border actually will change as I click on it. That's handy because it kind of shows me where I am. If I uncheck that, then it doesn't really highlight that area of the code. So it's really, really fun to be able to use CSS, um, to be able to kind of make the site come alive Now, in this case, it's using that focus that focus term to be able to say, any time you focus on it than run this code instead and then that that code overwrites the regular code. Okay, so down here, it's just the regular input code. But as soon as I focus on it, then this other stuff is pulled into view. Okay, So if I don't focus on anymore, let me see. How do we do it? Uh, my Bob about about Bob, about where we can put right there. Okay, So, uh, so now I clicked off. I clicked into Ah, you know, just a white area that I didn't click on the actual input. I clicked on a different area, and then I went into the code and found that specific section again so I can view it without seeing the focused code. I just want to see the regular code when I don't put my focus on that area of the Web page . So back to here's what color. That's actually the color of the the stuff you type in. Okay, so when you do color, that's not background color. That's actually color of the text there. And then patting. Look at that. How fun is that? And keep in mind, that's changing all of those at once. Do you see that it's changing that name, field, the email field and the subject field at once. That's the power of CSS is you make one change and then it changes everything at once and then with look at that with 100% so you can see there's all these different things that play into, you know, making making your website can come alive and look like it's living and breathing and reacting to you. If you don't do any of this, then it's gonna look either like 1993 or its people are gonna be confused as to where am I or what's going on. But if you just make a few changes, your website will have a totally different feel and it'll look way more professional. 7. More About CSS Selectors: Be Broad Or Be Specific: Now let's say that you want to affect change on a certain part of your code in your in chrome, and you have Deb tools open. Keep in mind that's F 12 or your futures right. Click the screen and click. Inspect. Then that will pop up this window on the right here. Um, but what you do, what you want to do is you want to, right click and then click Inspect on the specific part of the code You want to change now . Usually chrome is pretty good with this on, uh, helping you kind of form your code. If you come over here, see this plus right here, that's gonna create a new style rule. Now, that's really, really handy. Because if you just you know, you right, click a certain part of the code and you click new style rule. It's pretty much gonna pop up with something that will be able to affect change for that specific area. But the problem is, sometimes chrome gets a little bit too specific or a little bit too broad. Now, what I mean by that is it didn't pull up a nickname for that specific one little area actually pulled up just the P element. Which means if I changed the code for this p element, it's gonna change all the P elements across the entire website. That means anything that's text is gonna be changed over newfound size 40 PX. Look, what happened. All of these change. And then if I go on, if I go through block posts or anything else, all that stuff would be 40 pixels high. Um, that's not good. Sometimes chrome is good if you if you, uh if you click on this new style rule, it'll take you kind of right to the selector. You need it'll find the nickname and it'll put the nickname on there. But sometimes it's so broad, and it doesn't help so we can weaken select different ways here. Now, first of all, let me get rid of this. First of all, we can we can put a nickname into the HTML. So let's say we want to change this area. We right click and we click at as html. And then within this P tag, here we do. Space class equals bananas. And now, as you click off you to click off to kind of make it happen. You can't press enter, I think, because that will just make a next line. But so now this area has a class of bananas. Now, if we click, so keep in mind is selected right now. If we click new style rule, Chrome sees that and notices that and then gives me that dot Bananas gives me the class of bananas. So now if we make a change for that, it's on Lee going to change that one little area. OK, so I want you to use this button the whole time. You're gonna use this button aton, but make sure when you click it your first while you're selecting the right area. But make sure when you click it that chrome, your double checking what chrome's doing. You're making sure it's not too broad selecting the P areas for the entirety of your site and also that it's not too specific. Now let me give you an idea here. If I right, click this and click Inspect and that's why I'm I'm right clicking the first input for the name underneath the name and clicking. Inspect. And then I clicked this right here. Look at this whole thing import dot wc Have seven form control dot to be observant. Tech start W boson validates his record. That's almost two specific. Now, if you make changes to that, what you'll see is that it on Lee changed two out of those three box. Now this that this area down here, that's a text box. That's definitely be different anyway. But these three fields that were the same size look at that. Look at about the same size I'm thinking, Oh, minute. I'm going to right Click that one little area, and it'll change all three, but because it's too specific it actually knocked this guy out. Now, I don't know the reason why exactly, but I'm gonna start taking some of these nicknames off, and I'm actually to start from the back. So I'm gonna take, uh, where so I'm selecting this. I'm gonna take that guy off. So remember, keep in mind the dot comes with whatever is after it as the nickname. Okay, so this dot WP f seven validates is required that all goes together, So I'm gonna start with that dot and take the whole thing out. Delete. Now look what happened. Boom. boom, boom. All three of those air change now. So something happened where, uh, chrome. It gave me a selector to be able to change the one I wanted to change. But it was so specific that it actually didn't change all the things I wanted to say. I didn't want to just change this one. I wanted to effect change on all three of them, or even all four. But really, that's a different. That text box is a different thing. Um, so you want to use chrome to be able to add these new style rules because it helps you. It speeds you up, but don't let it be too broad. Like the piece selector we did before That would select all the text, all the P elements across your entire site. We had to give that a nickname of bananas. Right. Uh, but then here it was to, um it was too focused so that we actually missed out on changing some code. Now, let me take out this with this guy and see what happens. I'm gonna take out this. Let this second nickname or this this second to last nickname. Now let's see what happens now the code still stays. It still stays. So it's really, really handy here that maybe all I needed at the get go was just input. So that's the element, right? With nickname of WP Debbie PCF seven Form Control That's all I needed to be able to affect change on these three. But when I clicked on this right clicked on this and clicked, inspect highlighted it highlighted that area and then click this new style rule. Chrome gave me such a very specific nickname for that area that I was, uh, I was kind of shooting myself in the foot because I was getting so specific that it wasn't it wasn't brought enough to be able to affect exactly the things I wanted to effect. So the rule here is pay attention to how chrome chooses certain things, and then either you have to add a nickname to make it more specific, or you maybe need to take some nicknames out. To be able Teoh, make sure that you can really affect the change that you want Teoh effect in that area. So I hope that helps. I'll see the next video 8. How Do We Save Our Changes?: All right, So now what we're gonna do is we're actually gonna save the changes that we make in depth tools. Now, the problem is with DEPT. Tools is that everything's temporary, its good and its bad. The fact that you know, as you make changes here if you if you reset, if you refresh the page, they're gone. Eso It's nice in some ways, but in other ways, like we have to make sure we save our changes. So this is what we're gonna do. We're gonna make sure that as people type in as they type, my name is Bobby Jones. I want that text to be read instead of the current and the current color it is. So there's two things going on. First of all, have to select that area, right? But it's also not just selecting that area, but selecting when I focus on it. Now you can see when I when I click on these different ones, you can see that they change. Can you tell the background changes and then there's a blue line around it. That's because when I focus on it, it brings me a different set of CSS. Okay, so for this input. When I right click and click inspect it shows me have an important in all this gobbledygook . Um, but I don't want to just change it. When? When It's when I have not selected it like this. You see how it's got the gray background? I want to change it to make it red when I click on it as they fill it out, I wanted to be read. Okay, Um, so right clicking and then clicking Inspect on clicking this. It only gets me so far because it's not giving me that Colin focus area of the of the code here. So I'm sorry. This is confusing. Just watch what I'm doing and you'll get it as I do it. Okay, so this right here we found in the last video. That was good enough. Toe focus on that one area. Um, but what we're gonna do a direction, use this pin tool right here. Toggle elements state, and we're going to focus now. What that does is it forces the code to show me the focused kind of that code. If I focus on that part of the code, what out? What else does it show me so, so unchecked checking and un checking. This is super handy because look, it's almost a Ziff. I am just by un checking over here. It's almost as if I'm clicking on that area and then clicking off of it like this. You see that? Okay, but I'm actually doing it in the code now, so it's showing me the exact so you can see all this. Colin, Focus, Colin, Focus. Colon, Focus. Cullen, focus. That's what it's showing. This is what I needed access to because I wanted to change the color of the fund when I was focused on it. OK, eso here we come over here, and this is color right here. Number. Make that read. You could also just type red if you want. That's fine. Um, And look, there we go. We're all set. That's great. So now what we're gonna do is we're gonna take that code, and I'm gonna select from the bottom to top. Look at that. I got that bracket right there. Don't do media all but just start from the bottom bracket and then go up to there and they were gonna copy it. And then as we go into my blogged dashboard. We get access to appearance editor. You see this, then the first thing that it opens up is style that CSS. Now you're going to see this in any wordpress install. It's gonna be styled at dot CSS. Okay, Now, this 2016 theme came with this specific style. She you can see all the templates on the right. Here you go. Down here, you can see the style sheet. That's that's what we're gonna change. That's where we put the code for what we do in depth tools. So I'm gonna go and I'm gonna scroll down now. This looks crazy. There's so much information here. Oh, my goodness. What we're looking for is we're looking for the break between the responsive stuff and the regular stuff. No, I'll explain that a little bit more as we go here. Okay, so you see this media screen and men with equals blah, blah, blah, blah, blah. Are you just gonna search for media screen? Because that's gonna help us? Where is the first media screen? Come on, come on, come on, come on, come out. There you are. Oh, I guess that was the start. of the area. Okay, so we're gonna go little to see media queries right there. I want to start before this because media queries are all about responsive design and it changes the code based on the size of the page were going to try to make sure we put our code above that because all CSS code rights over other CSS code. So it needs to be kind of strategic based on where you put it. If you're worried about this, then don't worry about it. Just go to the end of the code and put it Put the code there. But if you can search for media queries and right before it, I'm just gonna put a huge space because I can make it easier for me next time. And I'm just gonna paste in the code right there and you can see no says color red. It's got all this junk with it and then click update file. Now, uh, the fun part here is that we've changed the code. Now the same stuff that was in Deva tools should be on our page. Okay, so if we go back two pages, all pages and then we do view when I type Henry Bob. Look at that. It's red now because of that code. Now, we didn't need all of that. We go back to dashboard and then appearance and editor. And then when we scroll down to that blank space that I make the blank space big enough for me to find it easily did. I didn't make enough time to make it big enough. Usually put a huge space here. Just what I'm scrolling through. I can find the exact area I want to go to, but there it is. That could actually work. Now if I took some of this stuff out, I mean, input type, password. None of this stuff is a password, So I could probably take that out when you're first starting. Don't worry about how much to hack out. In fact, some of this code has actually duplicated because the background color in the border color in the outline. We didn't even change that. So we're just capping pasting the same code over. It's like when it when it loads, it will load this whole chunk over top of the previous whole chunk. And even though all were changing his color red. I still brought these other things along with us, but it's not too big of a deal if you want. If you want to be a perfect coder, you're gonna try to just be as precise and narrow and have as less codas possible. When you're beginning, Just just get it to work, right? Just get it to work. So So it worked. So we're good. That's what we did exactly. We wanted to do play around with that with other stuff can get. I'll give you a few more things to play around with. Um, let me go here again. So I want to right click and then click, Inspect, and then keep in mind again. We're using this pin tool to click Focus to make sure that we're changing the code four when it's focused on. Okay, James, Um, and this is what I want you to play with. I want you to play with font size, so that's font dash size, and then you do whatever number and then p x. Okay, so that's the size of 20 p x 20 pixels. There's 40 there's 60 there's 10. There's too two and 20 and 200. So play with find size and then I also want you to play with where we going. I want you to play with colors. Well, you can drag this guy all around with deft tools. You can also see you see this little selector guy. This is actually like a color picker, so you can choose any part of the website. T match it To look at that, it's like it's like a, uh it's like a little magnifying glass. Good, that blue collar, and that's kind of funny. The blue has all these different tones in it, but you can choose any. You can choose any color and it'll match that color. You just click and it'll do it. Let's see if I can choose that blue. There we go. So it matches that blue now, so it's really, really handy this color picker tool Play with this. Just click right on the color area right there and just play with and then play with font size and then try to copy that code room. Remember, from the the brackets right there, choose the brackets all the way up to the very, very top here. Don't choose media all. You don't need that. But then all that stuff when you copy and paste that into, uh, let me see. So copy and the dashboard and then appearance editor and opens the style sheet right away. You have access to all these this other stuff too. But we're just working on the style sheet. Go down to where it says where media queries start that I put a big enough space. I did. That space was super helpful that I would find that again. And I'm gonna pace this down here. Now, look, what happens if you have some code you put before and then you're basically targeting the exact same stuff, but just changing some stuff. You don't need this old code. Okay, So you just need you just need one section of, you know that whatever code your change, you don't need to keep you don't wanna have like, like, you know, just like multiple of the same exact thing. It's only gonna take the very last stuff because of CSS always rights over itself, it writes The very latest thing is what wins. Basically, in this situation, unless you have the unless you have this guy the exclamation point important thing going on . But so make sure you only keep one of of that section if you're gonna do this multiple times and try different things than make sure that you only have one different section of that type of code. Okay, so I hope that helped you and I'll see in the next video. 9. Why Use A Child Theme?: all right. So the number you've done that I want you, Ah, back up just a second and realize there's multiple, different ways to be able to save things to your website. I use a different way, actually, with FTP client and software called No Plus no note pad Plus. Plus, there's also text Wrangler as well. And there's a bunch of different FTP software is that there's one called cyber duck that I've used before. Uh, but basically, the best way to start without downloading anything is just keep 11 tab open with your style sheet and then keep the other tab open with your HTML. So that's then as you as you work on this, you're changing different things. You're using Dev tools and whatever. Then you could just switch back to the other tab and then, you know, then, you know, make your changes, click update file and then refresh your page so that we don't have to keep going back and forth within the same exact tab. Also with in your, uh, ftp software, you're gonna be going. So when you log in, you're gonna see this is gonna be your install file your your your whole WordPress install . You'll see WP Admin content includes all this stuff If you go to WP count on when you have themes and then you pick the name of your theme than inside of that is your style, your style that CSS file. And then, as you click of you, edit. If you've got it set up right with no plan, no pad plus plus then that style that CSS file opens up here. And then it's actually a lot nicer because you can see all these different. Um, all this different code is then, like it's more colorful. You can kind of see it a lot more easily. It's not within the actual browser, so it's just it's just easier to work with that. This is that same exact area. Now that's a little bit easier to see then, if we are, if we're here. I mean, the black and white is fine, but when we're here, it just It just gives us a little bit more information. So it's nicer. Teoh use um, and then as you save this, you go. You go back to file Zillah, and then you click yes to, uh, toe uploaded back to your website now in the next video. So this is what I just explained to you is is kind of the simplest, basic way of doing it. But you don't actually want to change the main theme files. What you want to do is have a child theme for your WordPress install. So that basically means the core of your theme for your WordPress. Install will stay the same, and then you create a child theme on top of it. And any files you put up here on the child being will automatically overwrite that main theme file. But the point is, as you update that main theme file, you're not destroying your content. So let's say you create a different style sheet, a style that CSS file if you if you create. If you mess with it in the main theme folder and then you update that main theme, it throws all your workout and gives you a fresh style that CSS file That's not good. That's no good, because you spend all this time changing the style that CSS file, right? So what you're doing incidents that you leave that just as it is and you create a child theme on top of it. And then that way that doesn't get wiped out when you update your main theme file. Okay, so I'm gonna show you how to do that in the next video. That's pretty easy, but I'll just kind of walk you through that, so I'll see you there. 10. How To Set Up A Child Theme In Wordpress: in this video, we're gonna go through how to make the child team. It's not that difficult, but follow these steps exactly. Okay, so we're in our Themes folder that's within WP content and then in our Themes folder on I'm in an FTP software called File Zilla. Now you can see my 2016 folder right here. That's my theme folder. But I need to make another folder that's a derivative of that that's close to that. But different right click and then click create directory and enter it some of 2016 dash child. And then so now you can see I've got all these folders Now I've got If I go back to my themes, you can see I've got that extra folder uh, I'm gonna go back into my main theme. If you have a different theme, that's fine. But just make sure the full do you make whatever this is, then just called the same thing, Dash child. That'll keep it nice and tidy, but then go back to the main theme folder and open it and find that style that CSS file. Okay, that's gonna be super helpful to you. Click and drag that I am actually dragging that onto my computer now, So I'm saving it to my computer. And then I'm opening up that child theme folder that I made, and I'm dragging and dropping that style that CSS file within that. Okay, so I'm copying it from the old theme folder. I am not cutting it from it. So you leave it where ever leave it where it is, But copy it, and then get it somehow to that new child theme folder. Then I right click in new view at it, and I'm gonna discard that local filing at it. A new on. You could see all this stuff. All this this commented stuff in the top, the theme name blah, blah, blah. But I'm actually gonna take out all of this except for the theme name. Okay, so you can see between this, uh, slash and the star and then the slat on the star in the slash Take out everything except the theme name, and we're gonna call it 2016 child. Or if you're even if you have a different theme, call it whatever it is. And then just put child at the end of it. And the missus. Super important template Colon. And then I'm typing 2016 here. Now, this right here should be the folder name that you see in FTP 2016. That's this right here. Okay, so So whatever the child named. Whatever the child thing you create, you have to reference that an initial main theme. Okay, so if you have if you have ah, theme called banana, then that's what needs to be here under template. Okay, so this 2016 I'm getting that right from the folder. Name of the main theme. Okay. Now, once I save that and it uploads back to the server when I go to, uh, my manage themes areas, I click themes, you can see we've got a new theme here. 2016 child. Okay, whatever you type as the theme name is gonna show up right there. But then I can click, Activate, and it should be the same exact thing. Except for now. When we make changes, they should. They should not mess with our original theme. And then if we update our main theme, then it won't get destroyed. So that's how you create a child theme. And I'll see in the next bed 11. Quick Overview On Chrome DevTools: Our New Best Friend: I referenced this a lot through the course, but I just kind of want to focus for one video just on Chrome Dev tools. Now, this is the chrome browser from Google. And as you press a F 12 or if you right click and click inspect, then you get to see all this. All this code in all this gobbledygook. Now, years may look different than mine. You may have this bottom tab pulled up or you may have you know, certain things bigger than others or whatever else you may have. These three dots, the dock down there or the doc up to the side. But the main thing here is it gives us such on an easy way to affect change on the website without actually changing anything. And as we go through the page, you can see as we're kind of scroll through when I just, like, undo some of these arrows, you can see as I roll over things, it's showing me all these different sections. You could see it highlights over in this area As I roll over all these different parts of the code. It's just showing all these different sections and it's super cool to just, like, just, you know, undo all of these arrows and just look through the entirety of the site and to be able to see how things are split up, you know, look at that right there. That's got green on the side. You could see that green on the side. That's Ah, that's padding. You could tell it. You can actually see that over here panning right there if I check or uncheck that, it messes up the padding. So it's cool, because I can. I can look through the entire site and just kind of get an idea or just of how things are laid out, why certain things are bigger than others or what the reason is you can see on this one. Actually, that orange that's a margin instead of a patting will be going through that a little bit later on. But you can just you condone, you can see thing. You can see how the website is created in all these different blocks just by kind of looking through the code. You don't necessarily need to be looking at all the different letters and words of the code , but just get an idea. As you roll through this code, you're saying, Oh my gosh, like that's what that section of the code is. Four you can see all these are different blocks here. It's fun. So it's really fun. So this is the HTML section right here. This is all the code, uh, of the HTML file. And then over here is broken up by chunks from this CSS files. You can see style that CSS now that CSS down, let's CSS, etcetera, etcetera, etcetera. And that's broken up by the different lines of code. So this right here let me just I'm talking fast, and I'm also saying a lot of things that you don't necessarily need to understand yet. But I just kind of want to get it out there so you congest kind of get that those wheels spinning in your mind. But this media screen and minimum with is 56.875 m's. That's a certain measurement tool right on. Then die dot site content. That's a nickname That's a CSS classes CSS selector. Ah, it's a nickname, really, of site content is going to have this information, so this first part is just the targeting. Okay, This first part is targeting right here. Is targeting it, saying, what should I change? Okay, so this is saying when the screen is with the minimum with of 56.875 EMS target everything with nickname or class of site content into that to death to that target. What I want you to do now is make padding of of this right here. Okay? So it's really and you can see what that is. When we break it down, it's patting top zero and then panning right is 4.5 petting bottom zero impending left is 4.5. So, um, look through this stuff and play with this stuff you can really kind of get the gist of, like, Okay, this is the main site. This is the HTML code and misses the CSS code and go through and just uncheck stuff and just see how the site breaks. Because it's really, really funny to be able to see how you know websites, not magic. It's just all these different things kind of put together, but as you start uncheck ing stuff, you go. Oh, man. What is that? Or box sizing or Web kid box sizing word wrap. How does that work or fun Family in color and font size. And you start just uncheck ing these things. You start seeing how the site is made up, and then as you roll over these things, you can kind of see how, how the how things are kind of laid out with, you know, patting and with margin and all that stuff. It just opens your eyes to what's really going on. And then, as you want to affect, change you can. You'll be faster kind of knowing where to go, knowing where to look and what to dio on and keep in mind when you refresh the page. I just did. Control are, Then it just completely, uh, take whatever changes you made get, get knocked out and then you can try again. So if you ever mess it up so much where you're like, I don't even know what's going on, just refresh the page and then you'll be back to the actual real file. Keep in mind this doesn't change the website. It just changes temporarily what you see. And then, if you decide to copy that into the actual code of the website, then that's what. Well, that's what will stick. But if you make changes with chrome dab tools, that doesn't change anything long term. It's just temporary, and as soon as you refresh the page, it gets wiped out. Okay, so play, play, play, play and mess around and uncheck all these boxes and start deleting code and roll over different parts of this code and undo these arrows. You can see there's boxes inside boxes inside of boxes, and it'll give you a better idea of what's going on. All right, thanks seemed expedient. 12. Selecting Our Code In Different Ways: There Isn't Just ONE Answer!: Alright, it's time to play. We're gonna start playing with dibs D I v o k. So dibs are, uh, their boxes. It's all the other just boxes. Okay, so what we're gonna do is we're gonna go into pages, add new, and we're gonna call this playing with lives. Call it whatever you want. Text right here. We're gonna do less than symbol div, and then close it up and then we're gonna put actually, let's do the next line. Keep it clean. Copy exactly what I'm doing. You can see we have a diff tag, and then we have at the very opposite side of it a div tag with a little slash on the inside of the div tag. We have a P tag and that also is regular. And then it's got slash. Okay, so regular that regular p that's kind of what starts it off. And then the slash p is what ends it. So this is basically the beginning of something and here's the end of it. And then within that div, is that a text element? That p is a text element. OK, so no, I am a text. Okay? I'm actually go up here again. I'm gonna give this a class because we give class equals and I'm gonna call it, um, did play again. You can call it whatever you want. You can copy me if you want to. Just make it easier to kind of just copy exactly what I'm doing. But you can call You can make a nickname for a div. Er, any any thing you give a nickname too. You can call it whatever Thank you. Want just makes you don't repeat it for something you've done before. Okay, So don't call it, like, just something so boring. Like if you call it Div. Class equals Div. That's gonna get really, really, really confusing really fast, cause it's such a broad thing that you might end up making a mistake and reusing it Active play. I'm not going to use that again. Right. So def Classic was did play, and then hello. I'm a text element, and then it makes you copy this exactly. OK, once it's Donna, click publish. And then I'm often running and I'm gonna hold down control and open this in another page. And here we go. So you can see there's all this other stuff as well that Wordpress just kind of throws in there. Um, it puts the headline right there. And then it's got this as well. But the fun part of this is as we as we right, click and then click Inspect, looking at it in Chrome Dev tools. We can see that this div class. See that right there? Def class tive play. And then hello. I'm a text element. This is what our entry content stuff is. OK, this is everything we put in the WordPress back. And this is where you type the block and you put the image in and all that stuff. You can see the code right here for what we just type. Now, if I want to affect that text element, I could just click right here and click this plus button, and it gives me It says Okay. You want to change all the P elements? You want to change all the text elements, right? No, I actually only want to change the text elements within the div nicknamed did Play with Class of active play. So what I'm gonna do, actually is I'm gonna I'm gonna do dot Active play and then I would do a space And I'm looking for P elements with in a class of deplane within things that are nicknamed Div play . I'm gonna target the p the P elements within that. Now, if I would have done this p dot did play that would be looking for p elements with with nicknamed of play But that's not how we wrote our code We wrote our code with a div actually around almost like parentheses around the P element. We didn't nickname the P element. We nicknamed the box around the P element. So this actually doesn't work p dot deplane That's not correct. This is correct dot did play p or if we want I guess we could do this div dot Did play p and I'm gonna say font size is 40. Look at that. Now, Once we've got it working, we can I can prove to you that it'll still were. So if I take devout of there, let me do that. It still works is still good, right? But if i dio p dot did play no good, it didn't select the right thing. The code is fine. Font size equals fun sized Colin. 40 p x. That's fine, but the selector was wrong. OK, so make sure you're paying very close attention to that selector. If we just do Pia's well, let's try just p. It works, but the problem is it's gonna work across your entire site. And you may not want on your entire site for all of the fonts to be 40 pixels. So that's why we're trying to use dibs to really highlight certain areas. Now, we could also do this. Let's say this P class, Let's edit that I right clicked and then added as HTML P class equals P play. I'm really getting creative with these names here. Okay, so we actually put a class. We put a nickname on that specific element we didn't put. We didn't put it on the def class around it. We put we put the class or the nickname right on the P element. OK, so P class equals P play. And then as I click off that you can see it sticks. Now, if I come up here, if I do p dot p play, that is the proper selector. You could see the code didn't change right If I if I mess up the nickname if I just say Oh , it's a it's a P element with nickname Just play doesn't work because that's that Nick is the wrong nickname. We used the wrong nicknames that the nickname isn't play. You could see every time there's a dot that we pay attention to what's after it for what the nickname is. Right. So, uh, the nickname isn't just play. The nickname is P play. Okay, so you can see what's going on here is is, you know, just there's all these different things you have to figure out first in the in the HTML, you have to make sure that you are, uh, that you're doing this all correctly, you know, whatever div space class equals with within quote. So because sometimes that gets confusing, Is it? Is it, uh is an equal sign or is it a Colin or whatever? Because this over here, this Ah, this CSS has different syntax or different way of kind of typing data. Then then over here in the HTML. Okay, so after you, as you copy this mess with this stuff, stop start trying toe. Maybe change the div. Class here. Competitive play one and, uh, change this class. Maybe we could even make this an i d p e i d equals Hello. So now there's so many different ways to select. Now keep in mind looking. It's gone. The coding we did before has gone. Now it's still in the CSS temporary file, but we can't access it because we're not using the right selector. So how the heck can we select that textile? There's a bunch of ways. First Way is by just saying P elements. All P elements are gonna be fun size 30 pixels. That's a good one. That's to selected. But that's to select all the P elements on the entire site. Now let's try a different way of selecting Let's do P with the hash tag. That's for ID's. OK, so this is the I. D nickname, and you can see we have an idea nickname of Hello, so P hashtag low and keep in mind. It's all together because we're looking for P elements with the I D or with Nick, name of Hello, it's all smushed together. If we would have done this, then that would be looking inside of a P element for something else with the nickname of Hello with the With the nickname I D of helo. Okay, so that's wrong. We gotta do it without the space and it works Now we can also do div class Div play one and then just look for P elements inside Dave's with the nickname Div Play one. Let me show you what I mean. If we do give Doc give play one that what did I just do? Their cited dibs with nickname with the nickname. And this is a class because it's got a period with the nickname Div. Play one. Okay, so dibs with Dave. Play one and then we're gonna focus on P elements inside dibs that have the nickname Div play one. And look, our code still works as I click off of that. Ok, if I would've messed this up, Where we going here? How can I mess this up? What I'm trying to do, uh, the reason why it didn't break is because they play one. Just you don't need to put Div in front of that. You don't need to put that did there. That's why I was still working when I put a space there because it's saying, Look inside some Div. Look for something with the class to play one inside of that and then look for P elements inside of that. Okay, so we don't need this David the front end. If I would have done a ah hashtag here instead, that would break it because it's not looking for I ds did play one. It's looking for classes with did play one. So that's also a way to select it and then also weaken Do Ah, very in here. We could do P classes, you know. I'm sorry. It's an i d now p i ds when Hello did play one and then space So look at this code. So this is this is saying this is saying to target target everything with the nickname did play one. And inside that look for p elements text elements Just just text areas with the I d or with nick name. Hello. Okay, it's an I d. Because it's got the hashtag. Okay, so there's all these different ways to select just that same exact theory. It's a simple is just having p your good there, but that means that it's going to affect all the P areas across the entirety of your site, which is a little bit too broad. Okay, because of the fact there's so many different P areas in blog's and at whatever else. You typically won't want to change that unless you want to do a site wide change. Okay, so that's why we're getting a little more particular and doing something like P with the idea of hello or if we want to change. If we want to change this to a class, that's just there's a P Class equals hello, then, as I create a new style rule here, I just do Pook. It actually did the work for me. That was really nice, soapy dot Hello, And then I just do fun signs equals 40. So play with this stuff to just just as simple as with a div around a p element and put different classes and I ds on different things and just try to make sure that you're really good at okay, If you change the class to something, how do you select the P element inside of it? Or if the P element has a certain nickname to it. How do you select that? So just start. Start playing with that, and you're gonna make some mistakes, right? But the whole point here is to try and play, and, uh, and you start figuring things out in getting a little bit faster. Okay? You gotta repeat over and over again. So play here, take a second stop, stop the video and just play. And, uh, you'll get better and better at it, See in the next bed. 13. Divs: Let's Play With Margin + Padding: great. So now we're gonna mess with Gives a little bit more diverse. They're very important there. There the main building block of Web pages. Dibs are boxes basically. Okay, so see dibs inside. A div is inside of other dibs inside of other detectives, but they're just There's the main building blocks. You can see our cold, right? So far, it's Div class equals and then quotes a div play, OK, And then inside of that, we have a P element opening and then closing. Look at that. Every single element has his opening and closing. No, forget that. And then we have the you know, whatever the text is for that. And then we have the closing tag for the Dev. We've gotta Dave open with the nickname. A minute if close. Okay. So make sure you've got that exactly how that is. And then, um, I feel very quick update, and then we're actually going to the file. So here we go. Hello. I'm a text element. That's what we created. Okay, So if I right click that and inspect, you can see in chrome definable here that it's div class equals did play. That's what we wrote. And then hello, my text element. And then we close it. If so, now we're gonna do is we're gonna mess with that div. Okay, We're gonna put stuff on that, Dave, and we're gonna We're just gonna mess with the styling of that, def. So I click that and then I come over here to this plus new style rule Active play. Look at that background. Colin Blue. That was easy. Now we can see the Dev. Okay, that blue is kind of hurting my eyes. Okay, so, um so we make that we can make the background whatever color we want, and now we can see that div for what it is now what if I want to add some padding? You can see that it just got bigger. I just added patting and blew it up, right? And then we come here and we when we roll over it, we can see Ah, that green around it. That's padding. Now, if you come down here on the CSS side of individuals, you roll all the way down. You can see, uh, first is the main area than the padding. And then there's the border. And in the margin. Okay, so that's how we That's kind of how you stack things around. A diff padding is on the inside of a div. But margin is on the outside. Let me show you what I mean. If we add margin of 20 pixels, you can see that the area that's Gray didn't actually get bigger. It actually kind of got smaller. Look at that. You see that? It's got so the orange around it, that's margin. It actually doesn't have a bottom. And this is why it's because of margin bottom right here. Okay, here we go. So this Dave now has 20 pixels of padding and 20 pixels of margin, but the background on Lee affects the padding. You can see that margin is on the outside of that gray area. OK, so when you're doing padding, it's gonna it's gonna blow the div up from the inside, and margin is gonna kind of blow up the outside of it. Okay, So if you're trying t have the background, be bigger. Don't use margin use patting his patterns on the inside of the dead of inside of the box. But margin is on the outside of the box. Got it. So play with this stuff. Keep in mind that we didn't need to do div dot dave play. It's just just dot div. Players completely find, but just mess with the background mess with padding and margin and just play with it and you'll find that. Did you get a lot better? Just understanding, kind of. You know how the margin works and how the padding works. Start there and just just play, play around and get faster this stuff and I'll see in the next video. 14. Divs: Floats, Backgrounds + Widths: All right, So now we're going to start using floats with dibs. And what that means is that we're gonna make the box kind of move around and kind of reorganize itself first. Is it taking up the entire width? It's gonna be smaller, and it's go allow other Dave's to kind of fit around it. Okay, so follow me and you'll see what I'm saying. So we've got def class equals div. Play action and change that to be div play left. Okay, so the nickname now for that, Dave, is is div play left the minute, actually, copy this whole thing and I'm just gonna paste it down here. And I'm gonna change this to Dave play, right? And then I'm gonna say hello. I'm half the width on the right side. You can just This text can be as easy as left side and right side. Dude, what the heck you want? But just make sure that that the classes of the dibs air different. Okay, So did play left and did play, right? Okay, some update. And then here we go. Now, look at that. That's not on the left side. That's not on the right side there above each other. Right? So what we're gonna do is we're gonna right click and obviously did play left right here, and I'm gonna click this Plus here for a new style rule and so dot did play left. That's great. And then what I'm gonna do is I'm gonna do with Colin 50%. Now what happened? Let's roll over and take a look. Ah, OK, so now so let me uncheck that you can see so that first of all, it takes up the whole the whole space. Right? But now I do 50% and now it's got that margin on the right. Now how come? And so that's on the left side. Technically right, it's on the left side. But why is the right side one on the right side? Let's do Let's do did play right now Cook and didn't play right. Click on Plus and then we go dot did play, right? That was nice. And then here we go with with is 50. Hold on a second. That guy and that guy, they're both 50%. Why aren't they? Why aren't they kind of shifting up? And then, um, and making making it so that ones on the left side of ones on the right side, the reason why is because they're not floating. Okay, If you make them float, then it all gets fun. Float is left and down here. But play right there we go. Yeah, make sure you're editing the right one. Because sometimes this stuff gets a switch around deeply, right? With is 50 float left. Now look at that. Did play right is right there and did play left is right there. Now you're not going to be doing float left and float right? Usually you want to stack everything to one side and then that kind of all rearranged themselves. Feel free to do float right if you want. But that's not what word. That's not what we're trying to do right now. So look at this. So did play left, is there, Dave? Playwright is right there. That's exactly what we wanted. OK, but in order to do that, we had to have separate separate dibs. And then we had to make sure that, um, that the width was 50% and it wasn't any bigger than that. And then floating left, we make away with 51%. Then we're in trouble because it kicks it down to the next line. That's when you're floating. If anything is a little bit bigger, doesn't fit. It just kind of kicks it down to the next lines. You really need to make sure that it's within that 100%. Okay, um, let me changes back to 50%. Great. So now you can also see there's there's barely, like, any space in between. These that's that's no fun. So let me let me put a background on these. You can kind of see, So did play left. I'm gonna give that a background of green, make a look a little better. Better Bob popped up on Did play, right. Where is it? Do play right there. Background is blue. And that blue burns my eyeballs, so I'm going to change it. Okay. So we can see that we have now. These did another touching. That's no good. I don't like that. I don't want them to be touching. So what am I gonna do? I'm actually gonna have a margin to each of these. Okay, so it's gonna be margin, and then I'm gonna do? Uh, let's say, uh, 2%. What the heck just happened? What happened? It moved to the next line because that was too big. It's with 50% plus margin. 2% which is what? It's actually 54%. Because there's 2% on the left side and 2% on the right side. I'm not even thinking about up and down. I'm just thinking about left and right. Okay, so it's got 2% on the left that you could see the orange right there. Look at the orange. That orange is the margin. Who's got 2% on the left side and 2% of the right side, plus the 50% with. So that means that I'm more than 50% right? So what I'm gonna do, I'm changes with here to be 46%. And now I'm good because 46% plus 2% plus 2% equals 50%. And I'm gonna do that same thing two div play left, uh, margin, 2% and then with is going to be come on 46%. So now they're separated and you can see what happened is we had way had um, originally have 50% right. But once we added that margin to try to separate them, we were in trouble because it was more than 50%. So we knocked it down to 46%. So 46% plus 2% plus 2%. The left and right side of that div equaled a total of 50%. Okay, you can see on the inside there's no room. Hello? I'm have to Within the right. There's no it's basically touching the site. I don't like that now. We learned that margin was on the outside of the div. Padding is on the inside of a def. So let's add some padding here. It's gonna dio we do 1% there and then for did play, right? Where else you gonna do? 1%. You can see what does. It gives us a little bit of space where things aren't just hugging the side where things aren't just like touching right to the side. You can do it, you know, mix to your heart. Heart's content. Do what you want here, But it's really, really handy then to be able to look, to use Deb tools and look at what you've done. You see that green outline? That's the padding. You see the orange outline? That's the margin. Okay, so it was really, really helpful to be able to just look through your code and to be able to do that. Now, in the next video, we're gonna go through making our code a little bit more simple by using CSS. But play around with this stuff again and just make it your own, and I'll see in the next video. 15. Using Multiple Selectors For The Same Div SAVES US TIME!: right. So we've had some fun playing with dibs and changing the backgrounds, the padding, the margin, etcetera. Now we're gonna play a little bit more with the code just to give you guys a little to kind of unlock something for U s. So let's go back, Teoh Edit page. And what we're gonna do is we're gonna actually give it another nickname. But what we're gonna do is we're gonna give, uh, yes, we're gonna give another nickname to to both dibs, but they're gonna be the same exact nickname. Okay, So same Nick Name saying nickname. I hope that's not confusing or two. Metaphor. You Okay? So the nickname for both of them is going to be same nickname. Save that. And then, uh and you see, there's just a space in between. That's all you need on the HTML side. Okay, so now we come to the the code right click. And now when we click So we click, Deplete left and then the same nickname. If we click that it's giving me this stuff, it's giving me It's It's saying to focus on It's the same to select Did Play Left and also same nickname I don't want that. I actually only want to focus on same nickname, but here's the fun part. When I put code in here, it's going to affect both dibs because both dibs have that same nickname. Okay, um, so I'm gonna do wit is 50 or other. Actually knew 46% because I want some margin. 46% margin is 2%. So that's gets us a 50% because member margin is both the left and the right. Actually, it's all all sides, but think left and right side are both gonna be 2%. So that's two plus two is four plus 46. So that's how we get to 50. And then we're gonna do background or no, not going to background, actually, cause I want those colors be different and they're going to float is left. Now you can see that what happened there is I was able to with just rating 11 section of code because both of them have the same nickname. I was able Teoh to just really quickly be ableto affect multiple things at once. Now what I want to do Ah, background. That's not gonna work for this because I want them to have different backgrounds, and you can see here they have the same background, right? So I don't want to do that. I don't want to do things that are that. I want to be different under this class of same nickname. But it's really, really nice one when there's multiple elements, especially, let's say, maybe you had 50 of these. You don't wanna have to type this same stuff for each individual one. Okay, so now I'm just gonna add a background to Did play left. Keep in mind, I'm selecting it that I'm clicking a new style rule on a chrome. Thinks I want that that focus of a thing. And I don't want that focused everything. I just want to play left. This is gonna be back. I hate that blue colors with vengeance. Okay, Um good. And then did play rights. Get that same nickname out of there and that I just pressed Tab. Just if you want to go a little bit quicker, you can go tab and go through things. Background. It is green. Something like that. I don't know. Okay. So you can see that. What's going on here is there's code that you want to put into effect both things. And then there's code that you want, where you just want affect one thing. So that's why it's super handy of two different dibs. Share the same nickname and I'm sorry that I use that now because this is getting super Met with Nickname is same nickname. But it's really, really, really helpful in handy because now let's say, Oh, I see both of these need padding because I'm using the class of same nickname. I just do padding, UH, 2%. And then it changes both of them and super super freakin handy. OK, eso mess with this stuff, and if you want, you can add even more nicknames for them. More classes. Make sure on the HTML site is within class equals quote, and then whatever they are, just separate them by spaces. Okay, um, and then I'll see in the next video 16. Making Elements DISAPPEAR: Use The Display Property: for this next stuff. We're gonna start saving our code to our CSS file because I don't want to keep typing this stuff over and over again. So real quick, I'm just gonna go through this again, right? Click, and then we're going to do same nickname stops, and I'm just gonna do that. It's easier to do with 46% margin is 2%. I don't need background. I need padding is 2%. And then oh, I 19 my floats floats back good. And then did play left only just using arrows and I just deleting things. Okay, press tab. And then he would go Background blue. I hate that blue. And then that's fine. And then this here did play rights. Bad Crown, Kareen. And that's good. Okay, so I I just I just put code into my, uh, chrome deaf tools, but it's not saved. How do I save it? So this is what I'm gonna do. I'm gonna just take section by section. So here we go. Same nickname up from the brackets there. And then actually, because there's two in a row you say that that dividing line, but actually wrote both of these lines of code, so I'm just gonna actually select. I could do top down, actually. So from that dot all the way down there and I'm gonna copy that and then I'm gonna go into have another tab open, I'm gonna do appearance editor and then all the way down to where my where's my weight's bays? Where's my Come on, Kim. In there we go right there. I just pasted it in there. I'm gonna make even more away space because it drives me nuts when I can't find where I need to paste it in. Keep in mind, I'm pacing in above the media queries, if you can. That's really, really smart to do so I've got display did play left and same nickname I need did play right back to here we go do play, right? And then I want to just like this area of code. Make sure you get the brackets, okay? And then, uh, play right background. So Okay, so I didn't play left for the background. Did play right with the background. And then same nickname with all the spacing that will happen to both of them. And I click update file Now, when I update this page, when I refresh this page, it saves it. So I don't have to ever have to type it ever again. Okay, now we're getting into display Block display in line and then display none. Okay, so display block. Think of it just like a chunk display in line. Think of it like text. Like flowing like tax. Not like individual chunks, but like lines of text on display, none is actually making it disappear. So this is really fun. Let's go up here. So same nickname under same nickname, which is actually on both dibs. Keep in mind what I put here is gonna happen to both dibs. I do display none, and they're gone just like that. How cool is that? No, If I put that same code on did play left, what's gonna happen? Just that one. And look what happened to Div. Play right? Did play right? Actually moved over. Do you see that? Because they're both float left. Okay, so because I took, I got rid of one. It doesn't just make it disappear, but leave a space for that. Actually takes the entire space out when you do display none. So this is super super handy to let you know that usually, um, text elements are in line elements and gives are usually block elements. So just to kind of you don't need to. You don't need to make them block elements by doing display block. But let's say there's display non. If I do just play black, it's back. Why? Because the last code the You know, if there's code that comes lower in this certain section, it's going over right. The other code. Okay, now keep in mind. It's ordering these based on different things. It's kind of splitting apart this style that CSS file, and it's displaying the thes certain chunks just separately. But within that same thing, if you have display none, then display black. It's gonna knock out that one and only listen to that one. Okay, um, but so play with that to just doing display non and display block, and I feel like you're gonna have a lot of fun with that. It's really it comes in. A lot of it comes in handy later. Eso make sure that you understand the display property there. I'll see in the next bed 17. Divs: It's Time To FLOAT: All right, We're gonna talk a little bit more about floats now, because we've got this code all set. We've saved it toe our CSS. Every time I refresh the page, it's still there. Which is really, really nice. So if I come over here and uncheck float, you can see that they're not next to each other anymore. You can see that. They're just gonna be one after the next after the next. What happens if you float? Right? You see what happened? You say at least switched left side right side. Whatever comes first is gonna get precedents. Okay, so it's it's basically ah is reorganizing itself because this one since it came first is gonna get the first right sides spot, and then the next one is going to get the next right side spot because they're both float, right? Okay. If I do float none, that's the same thing, is just not having a floated all that's kind of default. Okay, So typically you're going to float left because kind of things they're just, like, left the line usually, But since its fifth since they're 50% 46 plus plus 2% plus 2% Since they're both 50% blocks , they're gonna look like they're just perfectly centered. And everything is nice even though we're just shifted up into the left. If I changes with to 20% you can see we're all shifted up into the left. But if I If I changed the float too, right, you can see what happens here where everything now is shifted up to the right side. And because this left side see this left side div was higher up in the code that gets precedence for what gets shoved to the right first. And then everything kind of piles on to the right. Okay, so it's kind of like a magnet. Think of it like a magnet and you're just kind of pulling everything towards it in the higher up code gets pulled their first, and then everything else kind of fills in. All right. Also play with floats flight play with turning them on, turning them off. Remember, if you have if you have like this where you have floats and then you have the same code. But then there's something else beneath that remember, that's gonna overwrite it. CSS will override itself, so don't get stuck with that. A few of multiple lines of code pay attention to what you're doing. You can see it actually crosses it out. And if I uncheck this, then it Then it allows this other this other code to come through. Okay, So play with that and I'll see in the next video. 18. Using Placeholder Text In Your Form: So now we're back to the beginner form if you Ah, if you're confused on how we got there, We did this in an earlier video, but it's contact form seven. So we need that short code. If you haven't done this yet, go to the contact. Goto, you need contact. Form seven, plug in. Go to conduct forms, create a new one and then you'll eventually end up with with with your new one here. And then we need that short code, whatever that is. You got a copy that to a new page. Where is it? Begin to form right here. And then you can see that we just drop that right in the text version or the text section. Not the visual, the text. I don't think it really matters, but put in the text and then makes you click update and then we're into the form. So here's our form. Now we're gonna style it. We're gonna play with them. We're gonna style it. So we've already got the style from before to show red text when you type. But we're gonna play around with all these different things now, so let's just let's just mess around and I'll show you kind of I'll just do some stuff and you can just kind of pay attention to play along. So right, click, inspect, and I see immediately the input. Now look at the padding on that. You see the padding right away? I see the green around it. Um, I can change that. I'm actually gonna change the font size to be 20 pixels because I wanted to be nice and big Bob Jones Gmail low. And then my message I just want Type that in there so I can play with it. So I'm always so many times. I'm just right clicking and clicking, Inspect and getting over here to the to the data. OK, so I'm going Teoh, we'll get rid of that color. I hate that color. That's really annoying to me. And then when you hover on something, it's It's a blue line. I want Teoh change that. So I'm gonna come appear this toggle element state click focus. And now you can see what it looks like when it's focused on. I'm actually do ah border. And then I'm gonna do I'm gonna save that. But I'm gonna dio five pixels and I'm gonna do There we go. Actually Supposed to be this way. Baba. Papa. Papa! Papa. I'm salad. Five pixels and then the color with the hashtag in front of it. That's called the hex color. You could also just take blue or whatever of hearing Chrome. Look at that. Like that. That's nice. Okay. And then outline. I don't know what that is. Okay? And and I'm also gonna dio text transform to upper case and my funds Family is gonna be sands. You can see you like, Look at all that. That change we just made right away. That's huge. It's crazy how much you can change now. Um, and you can see these aren't sticking, but this one is because we click that check box. So what I do now is I. First of all, I don't like this, so please don't pay attention to this being done. But I just want you to get the gist of how how we work here. So we've got this this area that we've worked on, I'm gonna copy that code, and then I'm going back to my style that CSS and then I find it. I find where this was before Member. We put this in in an earlier video with the color red for the input focus input, email focusing. But Earl, focus etcetera. Um and I'm gonna just gonna pace my code in there instead and then click update file. Then when I come back to my form, I don't need Teoh. I don't need to start from square one anymore. I've kind of already done that work. OK, so, um, the next thing that we're going to go into a place holder so input right here if we if we right click and then we do at it is html within this right at the very end, they're going to placeholder equals name. See that it is not fun. Now, that's their instead of there. So So basically, I need to put this in the actual HTML. Now, the HTML is in a different spot than the CSS. Okay, the CSS we we've worked on and you go back and forth with the style sheet, this this kind of thing. But to be able to do a placeholder like that for a contact form, we're actually gonna go back Teoh to the actual contact form that we created. And then where is the default? Right here. And then it's gonna be here when we create a new things. So let's say you want to do you create form. Mencius says uses Texas a place holder of the field. You see, how does placeholder down their default value is text. Do you see it has a placeholder text. We're gonna copy that placeholder space quotes, tech. Well, we're gonna change it to name, but it's gonna be within these brackets, and it's just gonna be with a space before space after and then whatever we want in quotes . OK, so for name, let's see so texture that you see these funny brackets. That's what we're looking for. Your name, space placeholder. And then in quotes, we're gonna do your name down here. We're gonna do placeholder or e mail right here. It's gonna be subject. Oh, I need to put placeholder. Otherwise I'll be in trouble, and then right here. You a message. Okay, Now what I'm gonna do, actually, I'm I'm gonna take care of this. I was going to get this out of here. I'm gonna get all the stuff that usually goes above the form, and I'm just gonna delete that br. That's just that's next line. Okay, so we're just getting rid of that next line thing. I don't need that anymore. Um, so your nay all the way from your name all the way to the end of that br tag, and I delete it. And then you were email all the way to the BR tag subject through the BR tag. Your message through the BR tag. Let me save it. And now when we go back to that, uh, that form, it's on a page. I put it on the page. Go view Now, we don't have any of that Any of that stuff? I had a time, but it's actually here instead. And it's fun when you type then. No, I don't like it. How it changes funds. Like, as you click on it. I don't that I don't like that at all. Um, but it's really, really fun, because that way, you don't need extra fields above or below. These guys, you just can actually put that placeholder text right in the form itself. Okay, So, Jones, um, at Gmail and hello years a message. Okay, so that's really, really, really fun to play with. Views that placeholder thing with the Contact form. Seven. Plug in and you'll find that your form comes to life a little bit different than, uh, then just having the same old boring stuff at the top play around with that I'll see in the next bit. 19. Watch Your Code: Placeholder MISTAKE!: don't. The last video, we changed the form a little bit to have placeholder text within within here. So when you start typing Bob Jones, that did text disappears. But then I came down here and I said, Hi, my name. Now, why didn't that leave that? Leave me a message that's still there. What's the problem? Why is it not placeholder text wise, it actually inside the text box. It's not this fake thing that goes way that tells me what I'm supposed to do there. But it's actually there as as actual text. The reason why is because I messed up when I was creating the conduct form itself. And I didn't put placeholder right before I put the quotes. OK, so that's huge. If you want to text to disappear, you have to in contact form seven. Keep in mind, you have to do placeholder and then leave me a message. Okay, So when you click, save now when I go back to the same page that has the contact beginner form Here we go view . Now when I click on it, now it disappears. Okay, So makes you don't get tripped up by that. I just want to make sure that you, uh that if you made the same mistake I did that you were just like, Oh, that's how I fix it. It's pretty easy to fix. Um, so there you go. See in the next video. 20. Using Borders: Do This To FIX Your Code: And now one thing when you're making a form that kind of ticks me off is that when you when you have different borders, you can see that the text kind of shifts. Can you see that it kind of gets a little bit bigger? It just looks weird to me. So I want you to make sure that when you're doing your styling, that you keep the border is the same in the patting the same so that as you click from one field to the next field, it doesn't get crazy looking. OK, so let's Ah, I just clicked on this input and then I'm a click on this little pin here and make sure that it's focused. And now it pulls up this thing, this kind of hidden code that shows me what's going on. It's got a border of salad, five pixels with that color. I'm gonna take that and I'm gonna copy that into the regular one. Down here, you can see there's no there's no cold and focus. You can see focus, and then you can see this one doesn't have that. There we go border Now the problem here is I wanted to change when you click on it. I wanted to look awesome when you click on it, but I I wanted Teoh not change sizes. So instead of this, see this border one PX salad, Whatever. What's the difference? Your salad. Five p. X. Okay, so it's five pixels, the one that I added. But Thea, the original one was just one. So I'm actually gonna let me just get Brit of that line, actually, just press a space and then if I click off and it just deletes the whole code the border. So I'm actually changes the five pixels. And then when I click through, it doesn't push anything up and down because I've kept the board of the same. Yes, it looked like it looks like it's Let me turn off this focus things. You can see what I'm seeing. It still looks good when you click on it. I can tell where I am because that highlights. It gets rid of the great background, but it doesn't push anything up and down. You don't want your form to be your form fields to be bigger or smaller when you click on them, because it's gonna it's just gonna feel kind of loose versus this. Is Mauritz better the I don't like how the the text changes to upper case, so I gotta fix that too. But I just wanted to bring that to your attention that if you don't keep your borders the same, then it's gonna it's gonna feel kind of loose and make sure your patterns are the same and your borders are the same. If you're using that cold in focus that that force element state. If you're using that focus thing going on, you really need to make sure doing you're doing the same thing. All right, see in the next bed. 21. What Does Text-Transform Do?: All right. So I refresh the page after. Ah, I just did the last video, and I realized up I didn't save what I changed the border being five pixels. I'm gonna go back here, change back and just double check my work that things aren't moving around. And, uh, then I'm gonna take that entire code. Now, keep in mind, I don't need to take the entire code because the only thing I really changed was border. But when you're starting out, just what the hack? Just take the entire thing. Don't worry about breaking it up. And then, uh, I'm just gonna paste it in right there. Click Update file. And then when I come back to my form and I refresh it, it saves my work. How nice. Okay, next thing that I want to get rid of is this. Ah, placeholder text is not upper case. But when I click on it, it is that really, really bothers me. I hate that sloppiness. So what we're gonna do is we're gonna come over here two. Now, this is already open. If you need to find it right. Click, click, Inspect. And then you got the input And then here we go. It's not the focused version. Keep in mind. If you had this pin on focus, then it would. It would show me the folk. I don't want to see the focused version. I want to see the unfocused version, and I want to make sure that that is taxed transform. If you click in the wrong place, it doesn't really open up a new one. Let me right there. Text, dash, transform Colon Upper case And one thing that's nice about chrome deaf tools is that it kind of fills in for you. It's really helpful. If you're trying to figure out What the heck was that? What am I supposed to put their or what are my options? Um, I mean, even just like that, I just do text transform Colon and it gives me this whole list. That's really, really, really handy. So utilize that. Okay, so now that I've done text transform upper case, you can see when it's not focused. It's uppercase, just like the focused version. So when I click through, it's really it looks nice, and I can still see them moving a little bit. That worries me, but but the text doesn't seem to change, which is really, really, really nice. I really like it that it's not doing that. It's changing the blue, which is making me realise what's going on that will you know which one I'm on. But I like it that I mean, this is just sloppy of the text changes like that. It just seems weird. So I'm gonna take that now, take this entire code. And since I was just working on this type of area to select the input tax than put type email and put type all this stuff I'm gonna right over that code, OK? Make sure you if you're selecting the same stuff and the code changes, just take the entire Don't start. Don't start putting it underneath like that. Okay. Make sure that you don't get too sloppy with that, because otherwise we're gonna have a really hard time in your code. When you have issues. Come up, click update file. Then we're back to begin reform. And here we are. All right. So make sure you makes you play with it and just pay attention to how your form is. Ah, what? Things are sloppy. What things are looking weird and then try to figure out where who to select and how to select it, and then go over to the CSS side and start messing with it, see in the next video. 22. Pay Attention To Small Details: Line-Height Is Important: all right. I found out what was driving me nuts. This is not a big deal, but I just want you to notice how much how much detail in paying attention to here so that you can do the same type of thing If you care about it. Look at how these move a little bit. When I click him, you see how watch the text there, Sam moves up and down just a tiny little bit that tries me nuts. It's not a big deal. I mean, maybe maybe you actually like it that it moves a little bit. It kind of makes it come alive a little bit more, but I don't like that at all. The issue is actually lying. Height. You can see input line height normal. That's what's messing with me. If I turned that off, you can see that these air rock solid. Um, so let me let me believe that because I don't want I don't really want to right over that, cause that's input. There's that's such a site wide thing. I don't really want to write code on top of that, cause I'm not really. I'm really wondering what else that will mess with. So what I'm gonna do instead is just add to my in all these input type text input, type URL, email, all this stuff. And I'm just going to eminent because I'm just gonna give it a line height of 20 pixels. And now it's rock salad because I've given it that line. I OK, so some of the stuff that where it just seems a little wonky. They're small. They're small, weird things that happened. There's there's a solution for it. There's somewhere in your cold. There's something going on. So that's why it's so handy to check and uncheck some of these boxes here without having toe write code. And guess you can use these chrome deaf tools to really get in there and just be like, What the heck is messing with that? Or how you're trying to figure out what you're trying to break apart the code and say, Well, why is it broken? It's so easy to turn on it off these check boxes to be able to look at the code and see it for what it really is. So now I'm gonna take this entire line of code with the new line Height, Colon 20 PX and go to the CSS file member. I had this from before. I've been working on that section of the these inputs, right? And then I paste it in and there we go. Um, keep in mind, too, that within CSS this this syntax is very important. It's whatever the thing you want to change. And then Colin and then the data for that specific thing you want to change, then a semicolon. Okay, if you don't have a semi colon, then it doesn't know to go onto the next thing you want to change, so you'll have a hard time there. So make sure that you are you use that Syntex properly. This is CSS in tax. If you are in, if you're in HTML than even those using those selectors like this class here, that the dot doesn't translate OK is the dot isn't in html, it's just class equals like there class equals with quotes. Okay, so just try to get that. Make sure you get the syntax right when you first start coding, it's really confusing. There's all these different things would eventually pick up. Okay, this is what it's supposed to be over here, and this is what it's supposed to be over here. Just keep trying on. And as things break and as things mess up, just kind of try to go through that thought in your mind again of like, OK, which CSS and HTML. What is it supposed to look like? Okay, so here we go hit update file, and then your double checking that everything came through, right? I do control our and these air Still rock solid. Good. Awesome. We're finally getting somewhere seeing the next video. 23. Styling Your Placeholder Text: this video might be a little bit too deep for what you're trying to do right now, but at least wanted to bring it to your attention. And I'll do it quickly in the move on. See, take a look at your name. You see that? The text right there. See the fun? Watch me type your name on top of that Can you see it's different. It's different fun. I don't like that at all. It doesn't match. But when I right click when I click Inspect. I am brought to this, uh, this input and I can't find where the styling is for the placeholder text. It's just talking about all this styling this for the input. This is all for, uh, text that I'm typing in right now. So there's a little trick with Dev tools. Go to these three dots and then go to settings. And then, if you click show we user agent shadow deal em. Then when I come back, you can see that this input has little drop down arrow. If I click that, then I'm able to access the placeholder styling and you can see the fun family Monserrat, Helvetica, all that stuff. That's what's going on with the actual placeholder text. So what I would do then is I would copy that, and I would bring that to my actual my input text. So when I take your name up still not working cause it's not on the focus. One Let me see. Focus right here. Your name. There we go. Do you see that? Now that matches. Ah, so much better. So I just wanted to tell let you know that the answer is there, but you might have to dig a little bit more, but, um, but keep looking and keep trying to make it more and more perfect if you can, don't get bogged down by it. But I just want to let you know that that kind of stuff is what you should keep an eye out for. Um and I hope that helped you see in the next bed 24. Quick Run-through: HTML Elements You Use Every Day.: all right for this next video, we're going Teoh go through a bunch of different elements HTML elements that you should know they're just basic elements co Two pages and then add new. And then we're actually to start in the visual editor here. Okay, so we're gonna let me see. Let me make this little bit bigger, Actually, let me curl Closed Dev Tools. Um, also as if you click this toolbar toggle. You'll get access to these different stylings here. These different headings. I want you to do that. So first, we're gonna start with H one and just say each one and then we press return. It changes to paragraph a little. This is a paragraph and then press return again. Now thats bulleted list right here. Remember gonna say this is a list. This is the second thing list. This is the third thing. And then, um, I want you to go to text click this text right here, and you can see what happens is that same stuff that we just put in is now It's now co. You can actually see the code now this area with this area that's actually a P element just the text. It doesn't have P tags around, and that's fine with WordPress. You don't need P tags. It just kind of assumes P tags if you don't have anything else. But I just wanted to see here. So ch one and then that closes the H one tag. That's just that's a heading, right? And then we have P elements here. That's a text element. And then see this ul and then Ally. This is a new ordered list. And then, uh, here's that. Here's like each individual bullet with the ally and then the ally. So I just want you to kind of notice that stuff. If we save this, let's publish this. If we save this and take a look at it, you can see there's the heading. There's the P element, and then here's Here's a List, so I just want you to get that idea of. What's going on here is that we can add and edit different things in the visual editor using these different these different headings, etcetera and then using these different things. But it's not. It's not magic. I mean you you do these things here, and it's basically writing the code for you. But if you want to take a look at the code, you click over to text and then you can actually add different classes for stuff. Let's therapy class. Let's just say paragraph fun on clothes that tag and then come over here and make sure do the slash p. Okay, you gotta always end whatever. Whatever you start with, you gotta end with the same thing with the slash. So we'll click update and then I'll come here. And when I right click and inspect it saved that info for me. P Class equals paragraph fund. Now, sometimes, ah wordpress actually strips out code, and in that case, you want to install a plug in that that will make sure that wordpress doesn't do that. But right now it's working just fine. I just wanted to bring that to your attention. And then as we let me make this bigger because it's easy to work with, and then as I click this this new style rule here we go p dot paragraph funds. This is a P element with the class or with nickname of paragraph fund. And then I can say that color it is going to be blue Jews you were working with All these different aspects of WordPress were first editing on the actual, uh, on the visual divisional editor. And then we can go over to text, and then you can see that we can add classes right there, which is really, really, really handy. And then as we save it and we go into actually seeing the the page, then we can use chrome Deva tools to really mess for that. Okay, p class equals paragraph fun. I click this plus, and then now I can choose the color for that element. And then what I do is I save it by selecting that code a copy. That entire thing with the brackets. Okay, so it's got the selector up top p element with the nickname class paragraph fun. And then you can see these brackets. That's the code in between those brackets. So I'm gonna copy that, and then I'm gonna go back. Teoh. Well, I should have another tab open, but I'm gonna go back to where is it? Appearance and then editor. But I've got my style sheet right there. Let me look for that blank space that I made. There's a nice blank space pasted in update file, and then when I go back to that exact page, it's gonna save that information. And there we go. OK, so that's kind of a walk through through those super basic elements, but used the WordPress editor plus so the visual and the text editor to kind of see what's going on, and you can add your classes in right there. You can add your nicknames right in there, whether it's whether you want to add a class for the P element, or if you want to add a class for the UN word list on the ordered list, pass or, if you want to add for the H one element class equals. This is heading Okay, so you could do this all in the WordPress back end. And then when we go to chrome, look at Chrome Dev tools. Once we actually saved the page, everything. All those classes are saved, okay, and then I Then when I'm done when I'm working with that, it's affecting that specific section, and it's it's just so much easier to point it things because you've created those classes. Those nicknames in the WordPress back. And every time you click new style rule, chrome should be smart enough to give you those those specific selectors. So I hope that help and I'll see you in the next video. 25. Working With Images: Width, Height + Retina-Friendly: next up. We're talking about images and styling images. Now it's easy to add an image and WordPress and click add media. And then you click on Click on one of these guys and click insert into page and you can see it's got that image tag. Okay, so image space source SRC equals and then the entire the entire linked to that image. Now, be careful. When you choose images in the back end, you can choose actually different sizes. So don't just necessarily take the size that WordPress chooses. And in fact, it's better if you choose a bigger size, because then we can even make it load at half the size for retina monitors or iPhones. If you have a small image that looks good on the screen regularly when you load on your iPhone, it won't look as good. So I typically load huge images. Now this is actually a little bit too big. I could optimize this a little bit better by choosing a ah better compression, but so we want bigger images because then we can force them to load 50% width and then that way all the extra data is saved and We don't have to have multiple images. If that went over your head, don't worry about it. Let's move up in certain DuPage. And then I chose I made sure that I was choosing actually a full size version of that image , and I'm gonna click update and now actually called this. I decided to call this playing around, and so I also changed the link for it. If you want to do that, you're welcome to do that. And now we can see that image fills up the entirety of that wit there. Now, I can prove that to you if we do inspect, and if I just roll up and I see where is it? Main there. Look at that. You see that orange on the side? That's the margin for, ah, certain styling for this theme. It's chosen that it's gonna give me that much white space on the side. As we make the page bigger, it's gonna change that white space and make sure you can see that popping. Okay, so, um, what we're gonna do is we're gonna mess with it now. So when you right click, inspect. And then, uh, no, If I click this. Plus right here. See what it chooses. Image aligned. None Size Full WP image. 20. Sometimes I'll just want to put styling actually right on that very specific image. And sometimes I'll want to put a DIV around it so that I can kind of have that site wide. Have that happens? Site wide. If I make that did happen on other pages, let me say that a different way. This image. Right now I can select it multiple different ways. I can either select just just it being an image, just the fact that it's an image. I can select it. But I probably want to do that because that will select all the images on the entire website. I can look for this, this special data WP dash image, Dash 20 that's more specific. That's good, but that's only specific to that image. But if I go to edit page and I would say I put a div around it So there's a div and then come down here and close the Dave tag. I put that box around the image, and I'm actually give it a class of fun image and then s You can see how I did that space class equals quote fun image altogether. That's the nickname I'm giving this specific give box, okay? And it's got that image inside of it. Update and then we're back to the page. Here we go. So now everything looks the same because I don't have any styling for that div yet. But when I right click on this and I click inspect, I need a little bit more rooms. I can see this code better. This is this to me. When I look at this, it's just blah, blah, blah. Kai, don't Don't look at this and be like Oh my gosh, Have to understand all that stuff right now. Don't worry about that. I just see that as a chunk of like Okay, that's an image. I don't need to worry about all the gobbledygook in there. You could see Div image right here. A div class equals fun image that div is surrounding this specific image till now. If I click plus you can see it's as dot fun image. Now that's just selecting the actual div box. But if I wanted to select all the images inside of dibs with nickname fun image. I just go like this space and then I m g. And now I've selected all images inside of a div called fun image. So if I If I create another another post and another page and I do that same thing where I put up an image But then I put a div around it with nickname of fun image, that styling will the styling that I do right now, we'll also select that as well. Okay, uh, so here we go, and I'm gonna say with is 50 pixels that's tiny. There was 100 203 104 105 100 boat. Sorry, I messed up. 200. 304 105 106 107 108. Now, how come when I when I'm pressing 607 108 100? How come it doesn't get bigger and bigger? There's 4 506 107 100 Now that looks the same size wise and getting bigger because this image isn't going to get bigger. It's not gonna fill. It's not gonna, um, go past the boundary because it's got different styling on it. See, this max width is 100%. If I take that off? Do you see what happens? It pushes past that boundary, but WordPress comes stock with these specific stylings to make your life a little bit easier. But you can't just necessarily change. You can't just write code for, you know, I want the with to be, you know, 1500 pixels. That's not gonna work. You have to think through. Why is it why is it being blocked or what's going on with it? Okay, so not only is there with, but there's also Max with And if you don't undo some other code, this is actually a site wide thing. Look at that. I am G is just images. Just all images. All images on the entire site will have this code because that selector is so not specific . It's just choosing all images. Okay, so in this case is actually good because we're saying, OK, Max, with 100% images will never be bigger than the boxes that they are inside. So it's helpful. Eso going back to hear what? I don't really want to mess with it right now. We could even say, Let's see if Max with messes with it. Okay, so here. So if I do Max with right here than that would work for that specific image because it's inside of a fun image tag. Okay, Um, also we can do. Let's try toe cut some of it off. So with is 200 pixels. Height is 500 pixels. Look at that. Yuck. If that happens to some of your images, you want to start using auto. Okay, so that's what you can see. That down here in this tag height is auto. But if you want to choose, you know, a certain with and for some reason it gets messed up and the height is you're trying to put the height along with it. You don't need toe. Think of the exact perfect height. You don't need to tow figure all that math out if you just do auto. Or in this case, wordpress actually comes stock with height, cold and auto. Because you can see all the images on the entire website are gonna have that code. Um, but sorry. Long story short. You don't necessarily always need to have a width and a height for your image, because it's putting this code altogether. Okay, so it's choosing the width from this specific part of the CSS code, and then it's also choosing that the max width is 100% and also the height is auto. Okay, so there's code that's already inside the WordPress site that you need to kind of pay attention to. When you know if your code isn't working right, you need to figure out how the heck is that happening? What what other code is in there that would stop me from getting where I'm going? So usually, typically, what I'll do is for um, for images that I want to show up. Great unreadiness screens is I'll make sure that the biggest they are the biggest they're shown, which means that if the bounds of the of the website are maybe Max 800 pixels, I'll double that for how big the image actually has to be. So let's say that the width for an image is going to be 800 pixels. It's gonna show that wide. Take a look at this when you can see down here, it's hard to point at it at the same time. Look down in this area when I roll over you see 400 pixels by to 67. It's showing that at 400 pixels wide in 267 pixels high, even dough, the image is actually bigger than that. Now let me turn off my code that I did here and let's see what it shows as the biggest possible that it's ever gonna show. Try to pull this all the way over the side here that seems the biggest. And then let me right click and click Inspect. And then you can see There we go 8 40 So it's 800. Can you see that little it? Look right here when I roll over, OK, keep looking right there. 8 40 by 5 59 So 8 40 is the width. So I'm gonna double that. Okay, so 8 40 16 80 So I'm gonna have an image that 1680 pixels wide, and then when I show it in an 840 pixel box, it's gonna cut off a ton of it. But if I'm on a retina screen, it's gonna look awesome versus if I put an image in here that's 840 pixels wide. It'll look great on a regular computer screen. But if there's a retina screen or an iPad, it's gonna look bad. Okay, so you always want. Well, my technique is to ah is to double that. They do have plug ins that allow you Teoh have different versions of image files that drives me nuts. I just want to upload one image and have it work. So I decided to upload a better image and then show it at half the size. Does it make sense? If it doesn't, please leave a comment and I'll talk to you more about it. Um, okay, so that's that's pretty much all we're talking about with images right now. I'll see you in the next video and thanks for sticking with me. Let's keep on going. 26. Working With Links: Padding, Margin + Fixing A Common Issue: next. We're talking all about link styling. Now, first we need to make a link in the back side of word breast. A draft equals whatever your link is google dot com. And then you type whatever you want right here. That's what they do. Text for your link is gonna be, and then you close up the a tag. Now, if that's annoying to you, you can always, um, go to the visual editor and then just type Here's a link. And then if you select it and click this guy right here, you can type whatever you want and then it will make the link for you can see those look the exact same. If I go to the text, you can see it. Did the of the H raft for me. Okay, So one thing also to that I did is I at the very top. I got rid of the code around the image that was giving it a div with a specific class, and I put a class around the entirety of the pain of the injury content. Eso div class equals fun page and then make sure that my div I just added a link. So that's why I messed it up. I'm gonna make sure that the end of that div Because at the very bottom. So at the very top, I have the Dave starting and the very bottom I have the div ending. So basically put a big box around all of the content inside, so I could make sure to select Onley, uh, things within that. Okay, if I if I would put a style on all links site wide, that's a little bit too broad. I don't necessarily want to do that because then that means all links even in the footer and the hotter and everywhere else. I don't necessarily want to want to do that. But if I put a div class around this code right here, then that means that I can select it in different ways. Let me show you what I mean Update and then we go here. So when I come down to this code, if I click inspect uh, when I click this plus here what I can do because I've got this Div class of fun page that I added Keep in mind, I put the class equals fun page at the top. And then I closed the div at the bottom by using that ah slash div closing tag. But now it, instead of just selecting all the A tags on the entirety of the site, which would be bad because then all the links get that styling, which I don't want. What I'm gonna do is I'm gonna say everything within the fun page div box. That is a link. You see the A right there. That's the That's the link selector that then only those things are going to get the code. So when I click off, watch what happens. So now these just get that that code and this this link does not. Okay, so that's why we put the DIV class around that entry content because now I can just select all the links with in that entry content. Okay, so sometimes you want to be super broad and you want to choose styling for the entire site . But sometimes you just want, um, you just want code toe focus on a very, very specific small part. Sometimes you just want to focus on one link, in which case you might put a class for that specific link. But this time we made it a little bit easier, and we put a DIV box around our entire entry content. And then we gave it a nickname of fun. Page. So this selector right here is looking for everything within a div with the class of fun page, and it's looking for everything inside it that is also a link, and it's making the font size 40 pixels. Okay, let's take a look at this. Let's dio Background is blue and I hate that blue color because it's horrible. Back bump, bump about bubble connection with funds. I smaller I'm just gonna actually take that out, okay? And then, uh, padding is 40 pixels. Margin is 40 pixels. Take a look at this. Look what happened this link. I gave it so much padding that it's actually pushing over the thing that's above. It's pushing over the picture above it. You can see that that that blue is kind of hitting it. Let me make a little bit bigger to make that a little bit easier to see. There we go. You can see that the way it's behaving. It's actually pushing up into the content above it. The reason why is because of the display property. It's an in line element. OK, so that basically is gonna keep the text right where it is. And then it's just gonna kind of push up and around it, no matter what. But if we make it an in line blocker, element in line dash block, then it starts behaving a little bit better, and you can see when we look at the link. Now it's got the padding in the margin, and it's actually behaving itself versus Keep your eye on the on the green and the orange right there. If I turn off display in line block, you could see it's still got the green and the orange. But it's all messed up. It's not. It's not perfect now. If I do display block, that's even a different way of displaying it. Where, instead of it being kind of crunched to the actual text itself, it just expands all the way out. OK, so there's different ways. Let me go through them again. So first display in line is the way that it comes originally. Okay, If I turned that on and turn that off, nothing's changing its originally display Colin in line. But if I do in line block and it starts behaving itself a little bit better are actually that that actually might be my end choice. That might be the best one on. And then I can also do display block, and that's ignoring the the size of the actual text. It's not fitting itself to the text like in Line Block does. You can see here it's it's still fitted to that text. It's squishing into kind of come all the way around it easily. Where is Block? Doesn't do that block leaves all this empty space here. Okay? And then also I can do display none. Look at that. Okay. So displayed. If things start acting weird or kind of acting funky mess with your display a little bit if you want. If it's text, you probably want to go for in line block because you don't necessarily want your fun to be a ah block level element. But just mess with that stuff and that that's gonna kind of it's gonna make things behave themselves a little bit better versus having to write all this other code. Okay, Uh, so what have we done here? So we've done background padding. Let me do a border now. I'm not trying to make this really look great. I'm just messing around. So please don't copy my styling here. I just want you to play and just see what happens. And then you can work on your someone styling leader. So look at that. We've messed with. Look at that. When I click on and off in line block what it does, it completely ignores the, um, certain parts of the goat because because it's an in line elements. When you do online block, it finally starts paying attention. If I turn off margin, you can see what's going on. If I turn off the padding, you can see what's going on and then even rolling through this Look at this. There's a space in between that, Uh, that's just a P tag with nothing in it. Just the and nbsp. That's a space. So if I want to get rid of that, I actually to do that in the HTML. But you can see we can just play with these links and just by doing, you know, fun size, background, padding, margin display and border. You can make them look completely different than thin when you start. Okay, Um and then then it gets fun when you dio hovering because when you hover over it and things change, let me turn off. Let me turn all this stuff off. I'm gonna leave it there, but I'm just gonna turn it off the original hover. That's when you that's when you go up here and you click the pin and you could cover it shows a different code. Okay, so this specific link has a box shadow that's going on and off. And then also, um, it's changing color. You can see that color changes. I click on it off there. We'll talk more about hover in the next video, so I'll see you in just a second. 27. Styling Links To Change When You HOVER Over Them: right now, we're gonna talk about the hover state of a link and you can see that this is actually got a hover state already just default. If I roll over it, the line underneath it disappears and then the text goes gray and the way we get there, you right, click, click, inspect. And then we go appear to the toggle element state. And then we're going to cover. And when I do that, all that code just pops up. It shows me the very, very top. What's going on? It's all this entry content a cold and hover a cold and focus, etcetera and that the code is simple. Just box shadow, None. So this specific area is just turning on and off the box shadow on. And then also we can see the color changes. So why don't we mess with it a little bit more? This right here a colon hover. This is site wide. This is all links everywhere on the entire site will have their color change when you roll over. Let's mess with them even more. Let's do France. I typically wouldn't ordinarily say change font size. I just want to have some fun right now. You don't want things to get bigger and smaller when you roll over him, cause then your site feels kind of weird when people are trying to roll over something and everything gets pushed around. We're just playing right now. Border. And then let's do 15. Let's go big Go big or go home. All right, there's a border and we're actually changes to an inlet. Well, now I want to leave it. I'm gonna leave it as the element that it is on. Then what else can we dio? I'm just being ridiculous. You would never want to do is background, do I, my gosh, with vengeance. Okay, right there. And then we'll do, Um what you do, Color white? Why not? And the padding I am playing right now I really, really, really want you to play and then also gonna make a tags I'm gonna make a tags with in that fun page thing. Where were you? Within the fund page, Div. I'm gonna make tags to be in line block because I'm doing stuff with links that you usually don't do. You usually want to keep your links in line, But I'm just really messing with them, OK, so you can see what's going on here. I put all this code for a cold and hover for the hover state, and it's got all this ridiculous stuff going on as I as I uncheck this box here, you can see the original code is the same. But when I roll over it, look at all that stuff that happens. That's crazy. Now remember, you don't want your sought the size of the text to change. You can see that my my my pages actually getting longer. When I do that, that's not good code. Please don't do that. If you want something, you know, super big like this than create the link to be that size first and then, you know, have a toggle to something else. So let's say we wanted to do that. What we're gonna do is ah, eso inspect. And then where is my hover code? There. There's my code that I just put inside font size 30 with a border of 15 pixels and the action just gonna copy this. Watch this. Copy this. And then I'm gonna create a new style rule for fun page links. You see what I did right there. So dot fund page is the nickname. It's a class CSS class. And then it did space A Okay, so that's looking for everything with the nickname of Fun Page. And then it's looking for links inside fund page. And then it's gonna do this to that. Going to do those things because you can see actually just happened down there right now. The problem is, I want this code toe happen on on a roll over. So I'm gonna take out, um, I'm gonna take out the gonna leave the font size. I'm gonna take out the color, I'm gonna take out the background and I'm gonna leave the padding. Let me see. I need toe. I actually do need to keep the border. Otherwise I'm in trouble. So I'm going to solid white, and then the color is gonna be gone to OK, so all I'm changing when I roll over then is gonna be the color and the border is gonna change as well as the background. So let me undo me under this hover right here. Now you can await No hold on a second. Where's border border for hover needs to be. Where is the border forever? There. Oh, okay. I'm gonna make that important. You see that? I did. Exclamation point. Important. Typically, I've said this before. You're not supposed to do that. But I do it all the time because I want to, and I can, because it's America. Okay, so here we go. Here's hover and how? Look what I've done. Okay, so now it's not. It's not making the page any bigger or smaller. Um, but the styling is changing as I roll over, so it makes buttons more fun. It makes everything more fun when you can add styling to it. It makes everything pop out. And just with a few things with border with background padding, found size all this stuff I've made a simple link look fun and different just by using CSS . Okay, So play with this stuff and get creative. Make sure that you use this this color tool and just kind of just kind of pull it around and slide around and just find different things and just play with that hover state and mess with that hover state and really just have a good time turning these on and off and trying to figure out How the heck do I? How do I make it fun and interesting to click a link versus just a boring old blue link? That's part of the point of CSS is you make your page a lot more fun to play with. All right, so I'll see in the next video. 28. Make A Link "Pop" When You Click It: All right, So now we've learned how to style a link and then also have it change on hover. But how do we get it to change on Click? Now that right there is active. The element state is active. If you want to access this screen, just click on that little that toggle element state guy and then click active. And, uh, what we'll see is that the code that we had changed before it was a colon act that was altogether. So the hover is the same as active. Now, I don't want that. So what I'm gonna do is I'm actually come up with my own active code and because I'm getting specific now versus trying to do site wide changes. I'm still using that fun page def selector and then looking for links inside the fund page selector. Okay, so please make sure that you do that. You probably don't want to make site site wide changes just by choosing just a because of you choose just a and that's gonna be links across your entire site. Okay, So and then I forgot something to a Colin and then active, Okay. And then I'm gonna say um, yeah. Background. It was black. And that might be enough. Okay, so look, what? Look what's going on? So we've got, um and then I'm actually forcing multiple element states here. So 1st 1st I This is just the way that a regular links look. And then when you roll over it, it goes to a hover state. Okay. You see, the hover state is changing, And then if it's active and it changes once against active is when you click on it Now, I'm not gonna click on it right now, because if I do, it'll take me to google dot com the link that I set up and then it'll men, it'll destroy all my temporary code. Okay, so I actually I don't actually don't want to click on it right now without saving my code, because then I'm in trouble. So let me do that, actually. So before we go on, I want to choose this right here. Take that and then remember, go to the style sheet. Where is that d space? Where is that empty space? Here we go. Okay. So all my links with hover with focus with active now, this is keep in mind. This is not right, because it's so it's This is a site wide change. So real quick, I'm just gonna do fun page fun page links with hover. And then that comma is saying, look for other things, too. I'm also looking for a fun page, a focus, and then I'm actually gonna take this this active out because I don't like the active It all you can see, I've got actually two selectors that are both getting this code. It's fun page links with on the hover state and then fund page links with the focus ST Okay , And then I'm also I'm gonna go back, and I'm gonna get Where was my active code? There we go. There's active Active remembers when you click on it. So this is looking for, uh, things within the nickname within the class of fun pages looking for links for the active state. Okay. And then it's gonna give the code of background black. And then, uh, what else was what else was there? Oh, and then front page A, of course. Just the regular link. Because because I want If I don't, If I didn't have this and the font size was smaller than it would look. It would look stupid because when you rolled over it, the size would change. If you want to make sure if you change the size of your hovered links that you also change the size of your original your original links. So I'm gonna take that as well. Oh, and I'm gonna I'm gonna steal this, remember, display in line block. Otherwise, my code gets all funky because it's an in line element and it starts pushing up into the, uh into the thing above it. Okay, so I took that. And then here we go. Okay. You can see now if you've if you've unchecked things in your in depth, salty conceive unchecked it. Chrome still copies it over, but it puts comments around it. You see this this slash and then the the star that's commenting it out. So the code actually isn't. It's It's not allowing the code to go through. Okay, so that's why this looks funky here, and then this one down here as well. You could just delete those, but sometimes you'll want to come in things out to be able to come to test it with or without with actually without actually deleting it. We're just gonna leave it because who cares? And then update filed, And then we're gonna refresh the page. And let's see if we messed up. It worked. Now let's click on and see what happens. Uh, golden. So it's It's coming alive. The site is coming alive. Um, and it's really fun. Toe have links that that are styled because then that way, it's not just the same old boring thing that you start with. So play with all that stuff. Play with padding with margin with border on and make sure you copy the syntax to what I mean by sin taxes. Just the exact way that I'm typing things in, like for border. You see how first it's it's so it's the amount of pixels 15 PX, then a space, then solid, then a space. Then the color makes you copy that. Syntex. Okay, because otherwise it's gonna be, you know, you might mess up, and then you might be curious. Why the heck is that messing up? All right, so that's links. I'll see you in the next video. Thanks for sticking with me. And, uh, here we go. 29. Quick Overview: Responsive Design: All right, now we're gonna talk a little bit about responsive design. Now, at the basic level, responsive design is just your website changing its size and changing, you know, pushing certain elements around based on what size people view the site at. Okay, so if they're on a really, really small device, it's gonna look different than if they're on a gigantic screen. It's really helpful, especially when so many people are coming on their on their to our website on their mobile devices that we are able to change the site to basically make the best version. Put our best foot forward for each individual size. Okay, um, so the site is changing as you scroll in and out. The site is changing and arranging. Just watch the image. You can see the images popping two different sizes, and everything's kind of shifting around a little bit. Okay, so basically there's different break points where these different things will happen. So it's it's what responsive design is doing is it's serving up different code based on how wide are our view. Port is based on how wide weaken see, so as we pull it apart, you can see it's giving us different code. Now look up here. See media screen and men with 56.875 That means this code is gonna fire when the minimum with is 56.875 Let's see when that goes away. But, uh boom, see this? Boom boom. Okay, so those are changing. You watch. I'm looking over here. Watch this. Say that. Codes changing. It's responding to the size of the page. Okay, so it xcar ving up different code based on the size of the page. So what I want to do is I want Teoh show you how to do this real quick. What we're gonna do is we're gonna say as soon as it gets passed. Look at this up here to seven or three pixels. 7 10 right there. That's where it changes. And then, actually, let's look in the cold over here. Minimum with is 44.375 So we're gonna make it. We're gonna make that be smaller when it hits this size. Okay, so we're gonna let's say, let's make this half the width when it hits that size. So image and member, I'm within the fund page tags because I put a div tag around my entire entry content. So I'm looking for within the fund page tag. And then I'm gonna look for image elements within that fund page tag, and I'm gonna say with is 50% now, I'm not done yet. What I've done is I've just created code for for whatever sizes. No matter what size it is, it's gonna be with 50. I don't want that. I wanted to only be 50% wide when it's bigger than that. Where was it? Seven ton. Yeah, bigger than this size. Then I want this code to kick in. Okay, I want to kick in when I get to this size. So I'm gonna copy this. Make sure you bring everything with you and then take a look at this. Take a look of entry content and you can see it's snapping. You see that? See how it changes. Now look up here. Where we right here. Media screen and men with 44.375 m's. This code is kicking in at this size. That's that's why I want That's where I want to input my code that I just wrote. OK, so we're going to search for a 44.375 So we're gonna goto our our editor, and then we just searching for 44.375 m's and here we go. Look at this at media screen and parentheses. Men dash with Colin 44.375 m's and then it's got this bracket right here. Everything I put within this bracket area is going to get served when the minimum with is 44.375 M's, which is somewhere in that specific situation, was somewhere around 710 pixels. So I just put this code in right here. It's not. The code isn't floating out in space just in the regular at style that CSS file. It's within this bracket for this media screen on Lee when the minimum with is 44.375 So otherwise the code is just going to ignore it. The website is just going to ignore it until the minimum with becomes 44.375 Okay, so, uh, fun pay. So it's looking for all the every every box that has you know, fun, fun page class. And then it's gonna look for images inside that it's gonna make the with 50% if the minimum width of the entire page is 44.375 So let's update the file and then we go back to the website. I'm gonna reload it, and now we see it's 50% except for when I get here. Boom! It goes back. Okay, so you can see. And if I make it that big, you can see where is our right click and then click Inspect. Look here at media screen in Men With is 44.375 m's. It's looking for all the fun page selectors fund page classes with that that have images inside of them, and it's going to give it its gonna serve it this code right here, because we put it in the right spot in our CSS. Now, sometimes you'll see CSS instead of 44.375 times, you'll see pixels and then sometimes you also see Max wit. Instead of having men with, you'll have Max with okay, so just pay attention to exactly how your how your specific theme does. It's It's a responsive design, whether it's men with their mask, Max with and, um, and change where you put that depending. But basically it's it's saying for the minimum, with of 44.375 it's going to serve this code so I can make it bigger and bigger and bigger , and it just stays just like that. But as soon as I make it small, it kicks in and gets rid of that code that I just put it all right, so that's a little bit about responsive design. There's more. There's obviously more you can dive into. But I just wanted to give you kind of just a rough understanding of how it how it happens and I'll see in the next video. 30. Percentages, Pixels + The Border-Box "Hack": All right, let's talk about percentages versus pixels. Now, Back in the day, everything was all about pixels. But now, in the in the world of responsive design, when you can make your screen, you know, bigger or smaller and the images will stay at 100% of the box size that they're in, you don't want it. You really probably don't want to live in the world of pixels. You probably want to go to the side of percentages instead of instead of trying to do pixels. Let's take a look at this. So let's inspect this guy. I already have my coat actually all set up right here. So fun page images. And I'm gonna say, with his 10% Yes, you can say that the width is 200 pixels or 250. Um, but that's not You're not gonna have as good a time with that, because with percentages, they'll stick versus if you do pixels. It's a difference. Different kind of thing. Usually you'll probably want to do percentage of sometimes you will want to do pixels, but whichever one you choose, make sure that you you stick with the same type of thing for, uh, for the entirety of the coach. What I mean by that is like, if you want to dio margin 5% you can see we're doing 5% plus well, and keep in mind, margin is on the left side, the right side, top and bottom, but just left and right side, 5% plus 5% equals 10%. So then we've got a width of 90 so that entire thing will then equal 100%. If I have a margin in a little bit too big, let's take a look. What happens? Margin. That's 20%. It actually pushes the box of the page too big, and so it ends up, adding it ends up adding this extra data on the side of the screen, which we definitely do not want. So, uh, first rule is that if you're staying with percentages or if you want oh, play with percentages, stay with percentages. Um, unless for some reason you have it, you have it serious reason to just do pixels instead. But then, once you once you stay with that, make sure that you're not that you're not doing too many too big of a percentage when everything adds up together because you had 90% the images will only 90% y. But then you add 5% 5% and already we're 100% okay, if we do, padding is 5%. Now. This works really well that it actually pushed it in. If it was, if the box sizing was weird. Box sizing is, um, very, very handy for when you have padding. When you add percentages to your padding instead of it pushing to the side, pushing out the bounds like we saw before having the box sizing be, um, border box. Then we which is actually what it was initially, which is nice. Sometimes it doesn't come initially, but the padding look at that. So 90% plus 5% plus 5% just with the width of the margin were already 100%. So how can we add another 5% padding? And it doesn't blow itself out of proportion like it was with the margin being 20%. You see how it adds all that stuff because of the box sizing? Okay, doing, uh, doing border box. That's exactly what you want. Sometimes if its content box content dash box. Then the padding actually gets added to it instead of instead of it, making sure that it only fits within that 100%. Okay, so the padding eyes the wild car we're adding here. And if you're box sizing isn't correct, If it's not border box, then you're gonna have a bad time. Okay, We were lucky with this specific instance that that it was already on border box. But if you have an issue where you're trying to just say no, I just want padding to be 5%. You don't have to redo all your math, then then change your box sizing to border box. Okay, if it's on content, boxer, if you can't change it or if you don't want to change and you rather do the math than make sure that you're adding everything up. Now if this has 5% margin and 5% padding, that's on the left side. It's just 5% plus 5% and then on the right side it's 5% plus 5% so it's 10% on each side. So that way, if you if you wanted to do content box than the width would have to be 80% and then that would follow that rule there. But if you mess up that math at all, you see here you have you mess up that math at all. And the margin is Ah, let's say the margins 10%. And that's multiplied by two. Because, Member, it's the left and right side and the patterns 5%. That's an added 30% but the width is 80 so that ends up being 110%. Okay, so easy fixes just to change. The backside is sizing to border box. But the mathematical way is to just do the math and make sure it doesn't go bigger than 100%. Okay, hope that was helpful. And I'll see you in the next video. 31. Force An Element To STAY PUT: I want to introduce you to something called Position. Now there's different ways to put certain things on a page. Typically, the way that code kind of comes in the lower down, you write it. That's kind of a place that it is on the page. You know, the lower you right at the lower. It'll be down on the page, But you can have something called position fixed. Where? Let me Let me just select that image. I'm gonna do fun page class, fund page and then space image. So I'm looking for all the within dibs or within classes of fun page and that I'm looking for images inside of that. So that's that exact image right there. And then I do position, fix the look what happens when I scroll up and down. It stays actually writing the image. So this is this is handy for offer header bars and other stuff like that where you just wanted to stay on the page regardless of whether you scroll up or down, it kind of takes it completely out of the flow of the page and then just sticks it right there. We can also do, uh, come on, uh, 20 pixels, Two pixels so we can move it all around based on using top left, right bottom, all that stuff. But using position fixed is awesome because we can just We can make it stay on top of everything, no matter what. Next up is position. Absolute. And so it's kind of staying in the same area. But everything else is kind of pushed up. You can see that this link Let me let me un let me uncheck this. You can see it actually changes sizes too, which is kind of fun. Oh, yeah, because the full size it completely pulls it out of that flow. So position absolute. Let me get rid of this top left stuff. So position absolute. It's not making it fixed on the page because it can still scroll up and down. But it kind of takes it out of that flow of the, you know, of kind of pushing everything else down beneath it and instead, all that other stuff beneath it is kind of pushed up to the place where that original thing waas Also there's position relative and that's Ah, that's you won't really notice that one quite as much. But you can move things around if I just do top and left for this specific elements not going anywhere. But if I do position relative, then I can I can change where it is based on where it should be. OK, so based on where it should be, I'm gonna move it. 50 pixels from the left, okay. Or where it should be. I'm gonna push it down 20 pixels from the top. Okay, so there's fixed where it stays on the page, wherever you put it. No matter If you scroll up or down, there is absolute where, Ah, it kind of gets taken out of the flow, summer it Actually, it pretends that it's not there. And so all the other thing is kind of pushed up into it, even though it stays in that same position. And then as you scroll up and down, it can still move with page on. Then there's also a position relative where then you can kind of shift things round based on where it should be. OK, so it still takes up the same area that it that it originally does. But then you can shift it around put, you know, pushing to the writer, pushing to the left or whatever. Once you've once, you've kind of set it in position. Also, play with those and have fun with those. Be careful with those two because they once you start pulling things out of the flow of your website, things get counted crazy and they act kind of weird. But sometimes it's really handy. If you want something to just stick on the page and not move, look out like exactly like a header bar. Whatever else s so have fun with those and I'll see you in the next video. 32. Centering: Text-Align VS. Margin: next up, we're gonna talk all about centering elements that you might think that this is simple because you will let just click the center button and center things. It's difficult. And here's why. Well, it's not too difficult, but stick with me. There's in line elements and block elements. Okay, so in line is just think of actual text characters. Just a bunch of a string of text characters versus ah, Block is like a box. Okay, so it's like it's were affecting the actual box itself versus the contents inside the box versus the letters inside the box. Okay, so we're doing two things were either centering. Ah, box that has elements inside it that can't even be centered or not centered. Or we're leaving the box as it is. And we're only centering the elements inside it. Let me show you what I mean. Take a look at Hello. This is a paragraph, right? Click that and inspect. And then we come over here. So this is a P. This is a P element with the class of paragraph fun. If I come up here and I just do text, dash, align, colon center that centers the text inside that element easy enough, right? But if the width of that if the width of that black is only 50 pixels wide, then yes, ive centered the text in that box, but that box isn't centred. Okay, so you see what's going on here? That sometimes when you just click text the line, that's all you need to do when you're all set, but sometimes will be frustrated because you're saying no, I want it to center the whole thing. I didn't want toe. I didn't want it centered. But then off to the side. I want I want it center. Okay? You In that case, you use margin zero auto, So margin, colon zero autumn. What that means is the top in the bottle. So this margin right here, you can see if I click that down. Narrow margin. Top zero margin. Right? Is auto margin bottom zero emergent left his auto. Okay, so this this takes up to the top in the bottom, and then this auto right here takes up the left and the right, so I am essentially centering something auto left an auto. Right. Okay, so not only four p with the class of paragraph fund. Not on Lee. Have I centered the text in the box? I've actually centered The box itself I've done to centering is okay. So it's when you think about centering, you need to think through. Do I want to center the elements inside the box or do I want to center the box now? If I If I turn off, text the line center, watch what happens. You see that the box is still centred, but the text inside the box is not centered. And now let me keep text the line and let me get rid of margins. Your auto, see what happened there. Now the box isn't centred, but the text inside of it is centered. Okay, So you really have to kind of break those things. A part of my centering a box where my centering the things inside a box of your centering things inside a box. Use text dash, align, colon center. If you're centering the box itself, use margin, Colin zero auto. And you need a width to be able to do that. Okay, um now, in this case, we're okay because just using text align center is all we needed to do because that that that P element takes up the entire 100% with But in the case that the witness smaller like this, Um, we actually didn't want to send her the text inside it. We wanted to just have that whole box centered. And then, yeah, we consented the text inside it if we want. But either way it's in the center of the page, and we've done what we wanted to do. So I hope that helps. Think in line or block is an in line element, or is it a block element that I want a center if it's an in line element? Used text dash align, colon center. If the black element use margin colon zero auto see in the next video. 33. Should We Write Styling Into The HTML Or CSS File?: one thing I want to bring to your attention. Is that everything that you that you do in the CSS file, you can actually do? Write in HTML. You don't need to have a separate CSS file to do this coding. But if you don't use a separate CSS file, then you really have to make sure that in every single occasion that you want a certain things styled a certain way that you put it in the HTML. Let me show you what I mean. Right here. This p class has some code with it. It's got color blue. You see that? That's in the CSS. Okay, Now I can take that same code, and I can put it right in the HTML Watch how to do this. Is that a P class is paragraph fun. I'm actually gonna delete that, and I'm gonna do peace Style equals. And then within these quotes, I put that CSS code. OK, so now what happens is that same code comes through, but it's in the HTML. So it doesn't mean that I can use, um classes because I can't use classes anymore because I've made my editing in line. I put it right in the code versus having it use that external CSS file. So it's still the same exact thing. The problem is that if you do that that coding right in the actual HTML, you're gonna have a harder time. Because if you want to do that same code again, you're gonna have to copy that whole chunk of code. So that's why it's so nice to just give it a class instead of trying to style it right instead of using style, giving it a class, giving it a nickname because then we can just change that that code externally in the little change it for for all the classes versus having to go through. And if you change, if you want to change the style of something, you have to copy that that same thing to each different separate element that you want to be different. Okay, so sometimes this gets really, really complicated where you, um where you try to change the style one place and you realize that you forgot to change it somewhere else, and it gets all confusing. So that's why you need to use classes instead. Very rarely. Sometimes I'll do style just because I know I'm making a change once that I never need to do again. It's for that one thing, and I don't wanna have to dig through the CSS code to figure it out. I just want to make sure that that I just changed the style of that thing right now right away and just be done with it. Then I do this kind of thing where it's P space style equals and then in quotes, you put your CSS code. 34. CSS Specificity: Which Code Wins?: I want to make sure you know about CSS specificity. Now, that's a big word, but basically just means which code winds. Sometimes you'll have multiple parts of different code coming together, and then the computer has to choose. Well, which one do I choose? Do I choose this one, or do I choose this one when you want to Style page specificity means that certain types of code is going to win over other certain types of code. So what I've done before is I've showed you, if you do ah, exclamation point. Important. Next. Any code that is the number one winner. It always wins hands down, no matter what. That's it. Um, so that's really, really handy if you're having trouble with your code and you're just saying I just want to make a change right now and I don't have to figure out what the heck's going on. It's a little bit lazy because, you know, you really shouldn't find out a different way of doing it, But, um, but if you ever use that exclamation point important, that means that that code will win. Now, if you have, you see this pee right here this guy has not that much specificity. It's not that specific. It's just kind of a site wide. Just choose all the P elements. So if I type here if I type margin, uh, 40 this one wins because it's more specific. It's got a class, but it's P. But it's also got a class of paragraph fund, so it's more specific than than just this pl minutes. So it wins or knocks out this other code. And and so, if you want, if you want certain. So this Here's the thing. If certain code that you're writing isn't working and you see that it shows up, lower down and it's crossed out in depth tools like this. Yeah, this is lower down. It's also crossed out. You need to make your code mawr specific by adding a class or using an I D. Or if you use this exclamation point important, I'm also going to include a file. You can take a look. Pdf, you can take a look at that really kind of detail exactly. You know what wins over whatever else but the main thing that you need without learning all that stuff. The main thing you need to realize is exclamation point important works every time it will always win. That's it. And then also, if it's more specific, if you give anything a specific class like p dot paragraph funder p with the class of paragraph fund that's gonna win over just the P element it's gonna with the code is gonna overwrite the P elements code because this guy right here just isn't all that specific. It's just kind of this site wide. Every P element gets this code, but you're saying no for this. For paragraph fund. Afford for this p element with the specific class of paragraph fun, do this code so that it's it's going to say that's more specific, so it wins hope that makes sense. I know it's kind of confusing, but I'll include in a pdf just more information about specificities. You can really dive, and if you're interested in that, it's not too big of a deal most of the time. But if you find the your code isn't working and they're confused why specificity might be the issue 35. How To Fix Collapsed Divs: We're gonna play a little bit more with floats now, so go into a new page and copy this code. Div. Space class equals and in parentheses. Aaron quotes Dave Same. And then we don't need anything in the lives just yet. And then around that entire thing, Dude, if class equals did holder and then make sure that you come all the way down here and close that up. So we have a div around a bunch of other deaths. Does that make sense? Is that we have got these four we've got, you know, four of the same exact things. There's four dibs in that box called Dave Holder. Copy that. Exactly. And then, since you're good, publish it or click Update and then go to your page and there's nothing here. Right? But if we inspect and open up some of these guys pull this over a little bit Entry content . Dave Holder out. There we go. Dave Holder. And if same. So there's there. There's nothing there, but there really is. Okay, so I'm gonna click Dave Holder, and then I'm gonna do a new style rule, and I'm gonna say with is 400 pixels and, um, border is five pixels solid in black. And then what we're gonna do for div. Same. These are all the same, right? We're gonna do a border or background. It's green. And then we're gonna say with is 200 pixels and height, 200 pixels. Take a look. What's going on here? Way Got all these dibs inside of another death and we're going to go now. If we do float left, something just happened. What just happened? That border for the DIV that was surrounding those other Dave's collapsed. Let me unclip this float left, you could see what's going on. Just clicking and on clicking that flow left gives me an error. It's a problem. It's a glitch. OK, so if if you want to use floats inside a dibs, you have to do something called overflow hidden. So I go back to Dave Holder And where is that? There's my coat already started to overflow. Hidden. That is the way to get back your structure for a div that collapses. Okay, so if you ever have a did that collapses, I want you to remember that you do overflow hidden and that way, and let me actually make this little bigger, um, that way, no matter what, that that outside border or if it's got a background on it, Background blue. There's that horrible blue that I hate so much she really choose a different color. Um, so that that works. But if you have overflow hidden, then you're gonna have a bad time because you say, Well, hold on a second. I've got this div holder that's holding all these other Dave's. Why isn't it expanding to proper size? It's because it's a glitch. OK, so overflow colon hidden will help you here. Um, And then you can just style to your heart's content. Margin 20 pixels. Look at that. Look at how beautiful that is. And then if the height is crazy than that outside Div expands toe hold all those other ones versus If you don't do that, then turn off, overflow hidden. Then you lose the the things inside it still keep their their their styling. But that outside Div just collapses down. OK, so it's all about overflow hidden. If that happens to you 36. Clear Your Floating Divs!: Now we're gonna be talking about clearing. Now, if you're floating dibs, if you're having dibs float, they're all going to kind of push up into the left if you have float left there up into the right if you afloat. Right. Uh, but sometimes what you'll want is you'll want certain things to go to the next line, no matter what. Even though you kind of keep everything floating to the left. Sometimes you want to say OK, I understand. I'm having everything floating to the left. But this thing I need this to have its own line. I needed to kind of break that float up and give me a new line and not keep floating. Let me show you what I mean. So so start here. This is the same as the last video we're doing, Dave Holder around all these same diff. So Div Class equals Div. Same on then What we're gonna do is we're gonna do a difficult put a space you just consume during class equals clear. And then what I'm gonna do is I'm going to select that entire all the div sames and I'm just going to paste them a few times just so you can kind of see what's going on. So I did. I pasted it once and then pasted it twice. We've got a bunch of div sames altogether, and then I have def clear and then do the same diff cleared of same diff clear. And that's all within the div holder. Okay, keep in mind this div class to have holder up here that, uh, that resolves itself down here. So So def holder is actually it's kind of parentheses around the entire thing. All right, so save that up to eight, and then we open the page. Now, there's a bunch of dibs here, but there's nothing in them. Okay, so I need a right click. Kind of looked through my gold a little bit. Entry content is what I'm looking for. And then here we go, Dave holder, and then see how this Div same give clear, etcetera, Etcetera. Okay, So what I'm gonna do is I'm gonna click plus right here, Div Same And I'm first going to say with 50 pixels, height, 50 pixels and then I'm gonna do, um background green margin 10. Just so I can kind of see them all separately. Look at that right. And then I'm actually gonna I'm gonna have that be the same exact look for also the Dave clear Boxes. Oh, I'm sorry. I need to do a comma and then did clear that will assign that this code to both Dev sames and also Dave Clears. Okay, so putting that common there, it's saying okay. And what else do you want me to select? All right, s Oh, here we go. And now what I'm gonna do is say float left. Now they're all floating. They're all pushing. If I just kind of rolled down the code here, you can see they're all kind of pushing up into the left. But now, if I come up with another new style rule just for div clear and I do clear both. Now what happens is every time there's a div clear, it pushes to the next line. Do you see that? Let me. Actually, I'm gonna make this a little bit easier for us. Div Clear! I'm gonna make the background for Div. Clear, Read and study. Okay. So you could see what's going on here First all these boxes are the same. The same and if clear, are both the same Web, same haIf, same background. Except I changed the background just for differ clear because I wanted to be able to see it clearly. Margin is 10 so we've got some space in between them, and then they're all floating to the left. But because I did give clear. But because it didn't clear Colin, both that means that every single day of clear, I will push to a new line. Even though everything is continuing to float left, we're clearing our floats, which means that we're saying, OK, let's keep doing what we're doing. But let's just start over on a new line, Okay? So it's a simple as just saying clear both. And now every time there's a div clear that comes along, that whole thing shoots to the next line. Okay, even though we've got room enough tohave boxes that will that will go even wider, using DIV clear or using a clear Colin, both that will then make sure that every time there's a div clear nickname, it's gonna say clean. It's gonna give clear both to that code, and it's gonna push everything to the next line. Although we're always keeping things floating to the left as well 37. Form Setup: What You Need To Do For This Section: in this video. We're taking a form from boring to exciting by styling it from the get go from the ground up. Now I pulled it outside of WordPress because I want to make sure that we're not using any of the CSS that's party with. In WordPress, WordPress comes stock with some pretty decent styling, although we can always make it better and change it to kind of fit our brand or whatever else I want to be able to style a form from nothing. So that's why I included these two files. It's test formed out HTML and test form style that CSS. Now make sure that when you upload these on your website, they're both in the same folder and then to access them, you go to whatever it is dot com or whatever your website is. Slash. Whatever the folder is that you put it in slash test form dot html. So open that in your browser, and that's what you'll see here. This this make it pretty form right here. That's what you'll see. Okay, I already set up the HTML to pull in the test forms style that CSS as long as it's in the same folder. And also, I've given it some styling already, right? Coated right into the HTML. Take a look at this. So Div style right there. I've coated it hard. Coded it directly. And if for some reason you don't loathe the other CSS file properly, you'll still see this styling because this is actually hard coded directly into the HTML file and you can see what we're doing here. So, Margin, take a look over here. Margin eyes, 200 pixels, top and bottom. And then auto left and right. Okay, so that's gonna center that box. Now. Also, the width of it is gonna be 100% but the max with is 500 pixels okay on it. Also, text the line center that's gonna make everything inside that. Yeah, the box is centered, but everything inside that box is gonna be centered as well. Okay on. And then I did a little bit of styling. I just made the font size for age one to be 50 pixels. Okay, so that's where we're starting. Um, let's go into the next video and we'll start Start styling the form 38. Next Step: Give The Inputs Some Room: All right, So first things first, What we're gonna do is we're actually take all these the first name last name. So we're gonna put those as placeholders within the inputs themselves. Okay, so that's gonna be an HTML. Make sure you're opening up in f FTP or if you have a different way, that's fine, too. But, I mean, follow zilla and I'm on my server, and I do test form that HTML view at it, discard local filed and download and edit file a new and then that should open me up into, uh, into no pad plus plus. Okay. So you can see here we have the forum first name. Last name is having all this stuff in the input type name all this stuff, we're gonna add something here space placeholder equals. And then we're gonna put whatever the placeholder is first name, and then I'm gonna delete that that text right there, and then br That's just that's next line. Okay, so we're gonna get rid of that next line as well. In fact, let me get rid of all those last name, subject and message. Okay, so now we're gonna have these placeholders to every single one. If you want a copy paste, you could do it even faster than me subject. And then, uh, down here, placeholder. That's a How about this Leave. All right, we're going to say that. And then we uploaded back to our server and then we reload the page. Boom! All that stuff is now placeholders. Now you'll notice that it's centered. Take a look at the CSS file, okay? I already put some styling and for the placeholders the look at these selectors, they're very strange. You can see what's going on here. They all the same code. But these are all for placeholders. The problem is, it's not standardized quite yet, So, um, sometimes you need to duplicate code for different browsers. I've done that work for you. If you want to change the styling of that placeholder text even Mawr, you're welcome to do so. But just make sure you copy. Make sure you copy down and there's four different placeholder places to put code, so make sure you copy the same code into each one. Okay, so take a look here now. Ah, let's just start playing first. We're gonna work on patting OK? so right. Click. And you know what I realized? We're going toe. Want to be able to style all the inputs for that entire form. Okay, so let's take a look at, uh let's take a look at the form code in HTML. The form class is form pretty. Now look at that. Okay, so it's a form, but it's got a class. It's got a nickname for him. Pretty. So we're actually gonna target that specific form. Okay, So if I do this and I do ah, form dot Remember, the dot is for classes form pretty and that I'm do space and I'm going to input. So I want to focus on a select all the inputs within the form with nickname form Pretty. OK, I'm going to padding, and I'm gonna do 20 pixels. Now you can see that I've done. I've, um I've only changed the inputs. This bottom here is this bottom one. Here's a text box. Okay, so I want to select that one as well. So what I'm gonna do is I'm gonna come back up here, and I'm gonna do comma formed out form Pretty. So that's forms with nickname or class of former pretty and I'm gonna say Do space and then text box. And this should give me patting. Oh, and it doesn't vats annoying. Uh uh Oh. Text area. I'm sorry. It's not text box. It's text area. OK, so let me go back up here. Uh, where we Okay, So where is that code? Where did my code go? Oh, I changed it. There we go. Ok, so I'm sorry. Let's back a form dot form pretty and then in port. Okay. And then also formed out form Pretty text area. Excuse me. So now we're good. Now we have some padding going out and the last thing about a text area is that that that just goes forever. Okay, so we've got some padding going on. I'll see you in the next video to go even further 39. Width + Border-Box Saves Us Time And Having To Do Math!: all right. Next time we're gonna make the width 100%. Okay, so right click one of these guys inspect. I know that actually took me to the wrong area. I want these inputs, so click on an input. And then what we're gonna do is we're gonna do with 100%. Now you see this? Do you see how the text area is actually a little bit smaller than the input? That's a problem. What's going on here? And then also the submit button seems to be off to the side. What's going on? Let's take a look at the whole def. Uh, when we look at the whole Dev, the biggest day of that's holding everything else. You can see that those Ah, look. Right here. Look right here. When I roll over that area, you can see that they're going overboard. They're going too far now. Why is that? The reason is because we are we're at a width of 100%. But then we're adding padding. Okay, now that makes it wider than it should be. But to help us out here, we just do box sizing, border box. Everything should fall into line. You can see that that makes it fit. Now, if I do this, if I turn that off, then that means it's gonna be a width of 100%. And that is also gonna add padding versus a width of 100%. And then the padding is gonna be kind of shoved in versus pushing out. Okay, so that's box sizing border box Very handy if you just want to say okay with 100%. But then I want a little bit of patting. You want to do the math, you can mix those pixels and the 100% it's, um and then even if you have, you know, 3% it will still work. But it doesn't really matter. You can actually mix pixels and and percentages here because border box kind of does the math for you and fixes it for you. Um, OK, so pay very close attention that that's ah, it's a small change, but it really makes a big difference to make everything clean and precise. 40. Form Input Backgrounds: from the last video. Make sure that you save your code. Now we're gonna slick that whole thing, go back to the CSS, and then I'm gonna copy over this because of the same selectors with a little bit more code . Now, save it. And then we are back in. When I refresh the page, everything should stay as it was. OK, so now what I'm gonna do is I'm gonna add some margin, and I'm gonna do it to the bottom because I'm really just trying to spread these guys out, okay? I don't need margin on the side. I just want to give them a little bit more space, top to bottom. So I'll do Ah, 10 pixels. About that, maybe 20 and 15 for the wind. Okay. And then I'm gonna take that and I'm gonna save it. Copy, Paste, save it, bring it back in and then I refresh the page, and here we are. It saved my work. Very, very nice. Now what we're gonna do is we're gonna add a background of gray for four fields that I have not filled in yet. So what we're gonna do is we're going Teoh right here. background. It is great. Now can you see that ugly shadow there? I hate that. It's horrible. Ah, it was border. Okay, so it wasn't back. Shadows border. Um, I hate that. Whatever the heck that is, it looks like 19 nineties. Okay, that's border. So I do border? None, because the default styling is just gross. Okay, so I'm gonna have background color D 40 44 with a hashtag in front with a heck would, because it's a hacks color, you could also just type gray if you want. That's completely fine. You can see what I'm doing is just bit by bit. I'm just adding a little bit more to my code. And then every now and then, I select the top to bottom copying. And then I come here and I just paste over that and then save it, upload it, and we're back in now. I want that gray to show up when it's not selected, but when it is selected, I wanted to pop toe white and have a border on it. So we're gonna talk about that in the next video 41. Form Borders: So now what we want to do is we want to make it come to life. When I click on it, I want the background to change. So it looks like I'm really selecting that area just to make it pop a little bit better. So what I'm gonna do is I'm gonna select these same selectors I used before, and I'm gonna copy them. I'm gonna do a new style rule, but I'm going to input Colin Focus and text Area Colin Focus. So it's the same exact selectors. Except now what I'm focusing on is when I actually click on one of them, then it's going to serve this code instead. Case with background. It is white men. Border is five picks on solid blue. I mean, she was a better blue color because I hate that other blue. Okay, so no, they kind of come to life a little bit. Look at that. Now, the problem here is if you can see, we look at where the text subject is, you could see it moves up and down because what I'm adding that border it's making Ah, it's making everything bigger because I'm pushing that border. Uh, to, um, to the outsides, and it's making the whole box bigger. Now, I could try box sizing, but it doesn't work. OK, so what I need to do is I actually need to add a border to my original, just regular inputs. But I need to make that border just the same exact color as the background, so I don't really see it. Okay, so five pixels solid, and then I'm gonna choose this color D 40 44. Now, look at that. I can't see it, but it's actually got a border on there. Okay, so this is kind of a little hacked to be able to add a border, but, um, have a border when you focus on things but not show a border before then. Okay, so now when I test it, everything stays right where it is. But that border pops out, and it just gives it a little bit extra zing or whatever the heck you want to call it, So I'm gonna save that code. So, uh, border, Why did I have border none. Um oh, because he had that was from before because of the border was really stupid looking. Okay, so I took that out. And then here we go. Copy this code that goes right there. And then I go back and I copy this code The focused code when we click on it with the background white in the border, five pixel salad and then save it, Upload it, refresh the page. May on and everything is saved. Everything's all set. OK, so I'll see you in the next video. 42. Next Step: Text-Transform + Text-Align: now we're gonna be working on font size and text transform. Okay, so we're gonna go right here with formed up form, pretty input and formed up form pretty text area. So it's like all of those and we're gonna change font size right here to 30 pixels and then text transform to upper case. And now we've got these guys really, really big, user friendly. You don't need to do. You don't need to copy my styling Exactly. I'm kind of showing you what I would do. Feel free to have your own I in your own creativity and doing things the way you want to do . Sometimes I like things bigger like this because on mobile, on mobile platforms, it looks nicer when things were just a look when Texas just a little bit bigger. Although on a desktop computer it does look big, but it's more user friendly. Just it's more fun to me than just tiny little things to click. It's nice to click big things. Um, here's the problem, though. When I click on here, I start typing my first name Jimbo. This is all left aligned Now the placeholder text is centered, but the text here is left the line. Now Why? Why is that happening? Because if you take a look at the C s s so far, I've already added this code. This text, the line center code for all the placeholders. But we didn't add text the line center for the inputs. So we're gonna add that as well in this all in the same. The same one text dash align, Coleman center. And now it should work. There we go. Very, very nice. So now that's all centered as well. See you in the next video. 43. Make Your Fonts Match (And Use Google Fonts!): make sure that you have saved your work from the last time. If you refresh the page and you don't do that, it gets washed away. Make sure you're selecting the right one to copy. Over. Okay, this is the focus. This is the focused on selectors down here, but these are just the regular inputs. Uh, say that and then bring it back. Refresh the page and everything. Whoa. Here we go. Some. For some reason, it didn't load the CSS when it did that for a second. Okay, so now I'm gonna test it. Bob Jones. A How do you know? Take a look at that. Why is that fund different? That's no good. I don't like that at all. So this is a text area, and for some reason, that text theory has a different fund. So we're just gonna were gonna kind of we're going to start here because this is the inputs and the text area, and we're gonna say fund family found Dash family. Colin Sands, Sand Saref. You can see that fixes it. Which is all we had to do there. You could bring in different friends from Google funds. If you want or you have to first load the fund into your header file, and then you can. Then you can reference it here. You can just type any fun you want. You have to load it into your website, and then you can reference it. But there's also WordPress plug in search for Google fonts. WordPress plug in and it will make it so much easier for you to bring other funds into your website. Okay, but here I'm just going to San Serif. That's easy enough. And in fact, that code right there is the same exact code as these placeholders here looking at the CSS . No looking the placeholders for, uh, for the code that we've already I kind of already said, Find family Sand Saref right there. So it's no, it's no surprise that just adding fun family sans serif here would snap this guy into place . You can tell when we when we take that out. That's the same exact. The placeholder fund is the same, uh, a message. If I take that and I cut it, you can see it's the same exact fun now, so that works really, really well. Uh, and now we're gonna make sure we save it by copy. Pasting. Bring it in here. Makes use like the right one. And this guy's just getting longer and longer and longer. Save it on, then refresh. And we're good. Awesome. In the next video, we're gonna talk about making that submit button look cool. So I'll see in just a second. 44. The Perfect Submit Button: So now we're working on the submit button, and basically what I want for a good submit button is as I roll over it. I wanted to change to kind of pop out at me and show me that I can click it and then, uh and then when I click it, I wanted to change as well. So really registers my click so it doesn't just if nothing changes when I click it, sometimes I'm wondering, did I actually click the button or not? But when it pops when you click it, uh, then it It kind of gives me good feedback, and I like that. So those are the two things that I'm aiming for now. Right now, as we click through these inputs, you can see that they're changing. But look what happens when we click on the submit button. It's like the same thing. It's almost like it's an input, but it's not an input. Okay, so I don't like that I don't like it that it sticks like that. The reason why that happens is because we've got this this code, this form form pretty input. But if it's focused on, then it changes the background and it gives it a border. Okay, but I don't want it to be focused on. I don't want to use that focus code. I want to use hover code. Okay, so what we're gonna do is we're gonna create the same the same thing just for that. For that specific button right there. We're gonna change the code. So let me refresh the page. And yet there we go. OK, so now what I'm gonna do is I'm gonna create a new, uh, new style rule there. Now, this is input type equals button. When you actually create a really form, the import type is actually to be type submit. But right now I change it to Button. Just because I wanted that to be useful for now, to be able to click it and have it not really do anything. OK, so we're gonna do is formed up for him pretty again. I'm selecting. I'm being I'm zoning in. I'm selecting a very specific input, but I'm not just selecting any input button. I'm selecting input buttons that are within the form with the class form pretty that have the type of button. It's not the other inputs. It's this specific submit button here. I could even but a class on that submit button if I wanted to, but right now, this is good enough. So what I'm gonna do is I'm actually gonna style that. Let me see here. Just great. I'm gonna make it a little bit different. Just so it stands out a little bit, Uh, me board five pixels solid. And keep in mind the reason why we're putting a border on it with the same exact color as the background is because if we want to roll over it and give it a border, we want to make sure that that space is already established. OK, so that's good for now. And then I'm gonna copy this into another style rule. So I just copied and pasted, but I'm gonna do Colin hovers. We're now I've selected the same button. But now I'm gonna focus on creating code for when I hover over it. Something will happen now. So what I want with a background of change to, uh let's see what Alice Blue is. It doesn't really look like blew it all about that. Ah, that's kind of cool. I'm actually gonna get rid of that background. So I don't like the background or I don't like the border at all. So I'm gonna make the border of the same. No, actually, to make this a little bit easier, I'm not gonna have a border on either of them. So I'm actually do border none. And then that way, when I roll over there we go. OK, so I made a border just none for that specific button. It's still find the border is still on these other inputs. But for this submit button, it won't have a border in that way. I don't have to make the border of the same color as the background and do all that nonsense. So I just made the border none. And then as I change the background, the entirety of the button changes. But I can also I can also dio text color. That's just color. Okay, so there's background color. But then there's also text color on you. Change the text color by just using color right here. So that looks. Let me see here. I wanted to be the fun part about chrome is you can really kind of see exactly what it's like. So there we go. I like how that looks on DNA. Now what I'm gonna do, I'm gonna make that some time to make the color of the text change when I roll over it. I just wanted to look like it's popping out of me. I wanted to just be faded at first, and then once I roll over it, I wanted to really kind of kind of come to life. If you want that to be sealed, white works. And you know what I'm gonna do? Actually, I'm gonna force that this input be pinned hovered, so I can just look at this styling while I'm working at it without having to go back and forth and keep rolling over. Okay, um so let's see what else? It's hard to see. Graze there. That's better. I don't love it. Let me see if I can use some blue color. Here we go. Kind of fun. You can also, with your specific brand colors, you can you can kind of make everything match. So it's what's really nice about CSS styling is that you can you can kind of customize everything around your brands, own colors, Let's stop here for this video. In the next video, we're gonna work on active, which means when we actually click the button, how it changes. But where this is good for now, play around with different colors, different backgrounds and take out that border. Okay? And make sure that you, uh you save your work as well. All right, so what we're gonna do? I actually clicked. I clicked. Hover right there. And now I get to see all my all the code I just put in form dot form pretty input type button and then informed out form pretty input type button with the hover with the hover extra code. So, minister, like that, go into this CSS and save it uploaded and check to see. I did my work right, And I did All right. I'll see you in the next video. 45. Make The Submit Button Change On Click!: All right. So here we are with the same form you can see we've got all this styling is still the same . And then when I roll over the submit button, it changes, which is good. But look what happens when I click it. Nothing really changes. Its not really telling me that. It's, uh it's that's seeing my click, which is annoying when when when you click a form when you click submit on a form you wanted to kind of react to you The way we do that is with active. Okay, so that's Ah, that's an element state. If we just copy this formed out form pretty space input and then with those weird brackets , type equals quote button. Could a new ah style rule and then we do Colin active and s Oh, yes. So that's that's a state, an element state that we can actually toggle on and off easier to here to see what's going on. So what I'm gonna do is I'm gonna click active and then make sure is that little dot right there. That's forcing that input type button to be active now. OK, so this is what this is what it looks like when it's when it's active. We're gonna dio background white and we're gonna do color white, so it almost disappears. Let's see what that's like. They can see it pops. You see that? Because it's all right now, usually all white. That doesn't make any sense, Right? All white is no good because you can't see anything but the active Is Onley happening for a split second? So it's OK if it's some things in stark contrast to, ah, whatever the hovered styling is okay, because it's a stark contrast. I can really see when I click that button. It really, really makes a lot of sense to me that you could also do, um, active here. You could also do, ah, color that's close to the, um, to the background that's already there, but just a little bit off. So watch what I mean here. So background is that where my going I'm going to active background. And then the color of the fun is like that. Oh, wait, no, I wanted hover. Where's the hover information there? Okay, some copying the infant, the styling from the hover code over to the active code. So it's the exact same. Now they hover and the active. But I'm gonna pull them a little bit. So watch this background. I'm gonna pull it a little bit lighter, a little bit higher up and then also a little bit to the left. And then the color is Well, I'm gonna pull it up to diagonally to the left. So it's the same kind of tone colors, but they're just pulled up their shifted up to the left. Okay, so that means less saturation and mawr brightness closer toe white and less saturation. I did that for both of them. Now let's take a look at what happens when we click on the button so you can see they. It's not quite as stark a contrast as going all white, but it definitely gives us an idea of. It definitely gives us a good look for clicking the submit button that gives us that that feedback that that makes us realize OK, do we definitely click down that you could also go the opposite way if you want. Um, instead of here we can go diagonally down and then this We could also go diagonally down. And no, if we take a look at it now. It gets darker when we click on it. Now, to your heart's content, you can style it any way you want. I typically like going lighter, so I'm gonna I'm gonna pull those back to where? That kind of where they were up here. This guy was a kind of somewhere around there. I like going lighter. That's just my style and just like that. But feel free to do what you want with your submit button and make it match. You are your brand colors as well. Okay, so that's, um that's how to style is submit button and I'll see in the next video. 46. Get Inspiration From Other Websites: Model Their Code: So if there's anything you've learned in this tutorial, you know there's so many different options there, so many different things you could do when you want to style a form. Or when you want to style a div box or the text inside a DIV box or whatever it is, there's so many different things you can do. What I want to encourage you is the next time you see a website where you really, really like their styling. Let's say you see a contact form where you see ah, certain text within, you know, maybe like a magazine where they have some text that kind of pops out and it's in its own, its own area, whatever that is, right. Click it and click Inspect again. We're in chrome. We're looking for Dev Tools And, uh, just try toe try to reverse engineer how they did it. Okay, so go through right. You want right click in part of the screen and then I'll click Inspect And you can then just kind of tear through how they, uh, how they created that form. It's just all these small little pieces of code to go from from the beginning to the end. It's so fun to see this progression from here all the way to where we ended up. It's night and it's night and day. So, uh, so keep curious, state curious. And every time you see something, don't just roll over and say, Oh, they just they have beautiful styling. It's amazing. Go in there and steal their code. Take a look at what's going on, but don't steal their cone. Sir, I'm sorry I said that lightly copy their card. See what they see, what they've done and making your own. Okay. Making your own thing. Put your own spin on it, your own flair and make it come alive in a way that you really enjoy and that makes you feel good when you use it. Should make you feel you should make you feel like you're websites fun and interesting and not just boring. This is really, really boring. This beginner form right here is so boring in so 1993. Okay, pull away from that and start adding your own styling Teoh to make it come alive. 47. Learn One Thing At A Time + Ask Me Anything!: Thank you so much for taking this course. Thank you for joining me. Thank you for being here. I'm so I'm so proud of you for making into the end. If you have any questions, please ask in the comments. Never hesitate to ask. I'd love to help you out. I hope you're I hope the whole world of CSS is, you know, exploding in your mind right now. I hope it's opening up. Just worlds of possibility. If you're overwhelmed, just take one thing at a time. Just learn one new thing every day on day At the end of a few weeks, you'll be surprised with how much you actually learned. You don't need to do everything at once, learnt one thing, learn it well and then move on. Thanks again. So much for joining me. I hope to see when another one of my courses and I'll see you soon.