In this WordPress Video Tutorial for beginners, learn step by step how to edit the CSS of your wordpress website. We’ll be showing you an example where we give images a hoover effect.

Custom Code: 

CSS:

HTML:

< Go Back to Video Tutorials List

Transcript: 

So in this tutorial, what we’re going to look at is actually how to edit or how to add news CSS code into our WordPress website. And so I’m not going to actually be teaching you on how to program in the CSS language which is, think of the CSS language like a styling language. It just makes different styles for whatever we want. What we’re going to be looking at is how to style an image in this tutorial but we are going to be using different codes that we found online. I’m not actually going to teach you how to program in CSS but what I do want to teach you just, if you’re able to find tutorial where they are tell you, free to use the codes in your actual website, how do you actually integrate that in to a WordPress because most tutorials don’t actually show you, how to integrate them into word press specifically.

So, where do you find the actual codes snippets, where you can find them anywhere really, anywhere online? We just need a quick Google search of cool CSS edits, something to that extent and we are able to find some pretty interesting ones. The next thing that we are going to talk about is plug-ins and actually physically adding the theme and the pros and cons of each of those and then we’ll just look at the sample CSS project.

What type of plug-ins can you use? The plug-ins that you can use are actually the “Jetpack CSS Editor” that you have an actual Jetpack extensions. I don’t particularly love that plug-in and there’s also the “Simple Customer CSS” plug-in and in addition, I actually don’t really like any of these plug-ins and the reason why is this, simply because they tend to slow down your website quite a bit, right? And, so what I usually do is I just edit the CSS code directly into the theme. That’s what I am going to show you in a second. The only caveat to that is that, if you edit it that actual style in CSS file, is that if you edit it and then update your theme then you’re going to lose that ultimately, right? So, you have to kind of take some good notes and kind a right down what did you change before you actually update, right? So, that’s the only downside to actually editing the theme, but in my opinion, it is faster as in load time, your website is going to load a little bit faster with these different CSS plug-ins that actually does make it a lot slower.

So the sample project that we are actually going to look at is, how to edit some of the images, how to add these different effects to images and the one that we are going to look at is this little box of the boarder and also when you hover over the image, how do you tilt it. You probably see these a lot on front pages of website and if ever you ever curious on how do you actually do that well we’re going to learn exactly how you’re going to do that and all of these was we didn’t encode anything, all we did was we found website style, how this different CSS website tutorials and now we’re going to show you how to utilize them on word press specifically.

So one of the websites that we found was this designshack.net and they have specific article. We just Google search CSS code examples. And this is a tutorial that looks really fun, so what we did was we just found one that we like and we like this tilting one and it gives us a bunch of codes. It gave us a couple of codes snippets. If you want follow, then I will show you right from the beginning is they wanted us to add these CSS code here and also the one right down here. So we’re just going to copy and paste that over. I’m going to show you where we are going to put that so if you have a child theme, you’re going to put it in the child theme. If you don’t have a child theme, then you just have to put it in the child theme itself and it’s going to be in the style.css.

So you will just going to scroll down and we will see that we have those little code’s snippets pasted in at the bottom. All we need is copy and paste them, you will just copy and paste them over and we’re just going to update the file, right? I am not going to explain too much into detail what each of these code snippets mean because that’s not really what the goal of this tutorial is.

What I want to show you are how you can utilize it in word press, the next thing is those are actually CSS codes, this is the actual HTML codes, is what we’re actually going to embed on to our specific post, right? So everything should really come as it’s a good tutorial at least it would give you the HTML code that you have to use and also the CSS codes. Also, just remember if it doesn’t give you the actual HTML, everything is by these classes. So this tilt class and also because we have the import CSS code from the top of this post, it have a pic class, so that’s where they are getting it, that’s all it is. It’s all embedded with this working with div tag.

Because remember, we’ve seen these before, these are just the basic image. All it’s saying that now this div tag is saying that there’s a different class, different style that we have previously made in our CSS editor, right? So we are just going to copy and paste that over and little we just copied and pasted it in, and we have these two classes, the tilt and the pic, and the pic we are just putting it in the boarder and the tilt was actually doing the tilting action and we just put whatever image do you want, the source of the image right here, same as usual and we will just update it. And so once we update it, we will see that we have this little tilting action right there and so I think that once you get out this specific tutorial, is that there are a lot of things that you can utilize to a CSS code but that does not necessarily mean that you have to learn it from scratch. All you really have to be able to do is learn how to utilize just the basic foundations on how you get snippets, codes snippets and how you utilize that on WordPress website.