Hello, my name is Chrissy Ray, and in these lessons, I will show you how to work with HTML and CSS and WordPress. Let's start off with editing your blocks with HTML. So to do this, we're going to go into a page, and I'm going to add a new page to do this, and this is going to be my menu, and I'm going to put my menu in a table. So I'm going to type slash table, I'm going to add my table, and we're going to give it three columns and five rows. So I'm going to just create a table there, and for my first row, it's going to be item, going to go to the second column, which is going to be description, and the third one is going to be price. So we're going to say the first item is going to be brownies, put a brief description here, and the price is $3. And then we've got cupcakes, description goes here, and the price for that is $4. And then we're going to type in cake, description goes here, and this one is $5, and we're going to put candy for our last one, description, and the price for that one is going to be $1. Now there is a lot that you can do with editing this as a block. So you can see right now I've got the table block selected. I can say I wanted to have a style of stripes. I can do these settings here, so I can have fixed width table cells. I can add a header. So if I wanted to put the item, description, and price up here, and then maybe delete that particular row, delete that row, and I can add a caption, I can do lots of stuff with this. But I can't necessarily do every single thing that I want. So for example, if I wanted to have a column span or a row span or anything like that, I can't easily do that using the built-in blocks. And I just want to warn you with what I'm about to show you, if you change the block, if you edit the HTML of the block, in a way that the block editor can't handle it, you'll need to edit it as HTML moving forward. You won't be able to edit it as a block. It'll try to revert it back to a block if it can, but sometimes moving forward it won't work. So this does require you to be really comfortable using HTML because you might need to edit it as HTML moving forward. So let's say that I wanted to have a different background color for the header row, because you can see if I set the background color here, it's for the entire table. I can't just select that top row, that header row, I can't just set a background of that. So I can't just select just that row and give it a background color. So what I'm gonna do, I've got the table selected. So I've got the table selected here, and I'm gonna click on the options button, those three dots, and I'm gonna choose edit as HTML. And that's gonna show me the HTML for this particular table. And so you can see here, I've got my TH, which stands for table header. And I wanna give that a style. So I'm gonna give that particular table header cell a style. So I'm gonna say style equals, and we're gonna say background, color, and we're gonna do FFF00. And I'm gonna try switching back, well, see, it tells me I have to attempt block recovery. So it doesn't even let me change it. So let me attempt block recovery. I'll go back into the HTML and show you what this looks like if I don't do that. So I'm gonna say style, background, and if you are familiar with CSS, you know what this is. All right, so we're just gonna leave that there. I'm going to preview this, and you can see that makes that one cell yellow. Now, if we go back in here, you can see it's gonna keep telling me that it wants to attempt block recovery. And that's because it doesn't recognize that HTML that I added to that one table heading. So if you wanted it to revert to the block, and I wanted to continue to edit it as a block, I could do that. Just be aware that it's gonna keep asking me to do that. So if I don't want it to, I can click here and convert to HTML. So if you are going to use HTML and you wanna just keep it as HTML, then instead of adding the block, if you're comfortable with doing HTML, you could just write the HTML from the start. So you've got a few ways that you can do this. So number one, what I just did was I added the table as a block, and then I edit it as HTML, and now it's in an HTML block. But another way that I could do this is I could just add an HTML block from the beginning. So to do that, you would add a block, and you would just search for HTML, and you can see now you can write whatever HTML you want. It's never going to try to revert that to a visual block, unless you tell it to. So if I type in span, style equals color, I wanna make this red, expand. All right, so if I preview this, we can see there's my red text, and there's my yellow background, these are just HTML. I can click on preview here to see what it looks like, but it's just HTML, and it's not gonna try to convert it. So if I did try to convert it, let's see if I tried to convert to blocks. In this case, it will work because I can make text red. It's not gonna squawk at me too much, but I can edit it as HTML, and leave it as HTML if I wanted to. So there's a few reasons that this might be useful. Number one, if the block that you're editing can't do exactly what you need it to do, and you know the HTML to make it do, what you need it to do, then add the block, modify it as much as you can in the block editor, and then make it HTML, and then continue to edit it as HTML. Another reason that this might be useful is if you're trying to embed something on the page. So in a lot of cases, there are other websites that will give you code to embed for forms, schedulers, and things like that. What you would do is just add a new HTML block. So we just click on that plus, and then add the custom HTML, and then you can paste the embed code in that HTML block, and then it will appear the way that the embed is supposed to appear based on where it's coming from. So I've seen this a lot. If you're using a service like Calendly, or Acuity Scheduling, or something like that, to add a calendar to your website, then you would use that embed code to do that. Now, another thing I wanna mention, if you're trying to embed things like videos from YouTube, or Vimeo, or anything like that, you may want to try to embed the code this way, but it's actually easier to just type in the URL of the video. So if you've got a video that you wanna add on your website, don't use the HTML to do it. So I'm gonna remove that. You would actually just type in the URL, just add it as a paragraph. And if you try to add a YouTube video, you would type in the URL, so it would be youtube.com slash, and then whatever the video URL is, it will automatically embed that for you. So you don't need to actually type in the HTML code for that you can, but you don't need to. So that's another way that you can do it. So thanks for watching, and in the next lesson, I will show you how to add CSS to the customizer.
