- By
Ever wondered what makes things look as they do on the web? Or how to change the design of a page? This is where CSS (Cascading Style Sheets) come in! Below, we’ll explain what CSS is, what it does and what it’s used for!
Let’s take a look…
What is CSS? What Does it Do? And What is it Used For?
– (note: video credits to Topher DeRosia – creator of HeroPress)
Video Transcript:
Hi! This is Topher with Winning WP. In this video, we’re going to answer the question, What is CSS, what does it do, and what is it used for? Well, first of all, CSS stands for cascading style sheets. And the cascading style sheet controls how the content of a website looks and sometimes acts. Let me show you. On the left here, we have a little website that I put together. And on the right is the code for that website. Here at the bottom, we have the HTML. You can see where it says my website and welcome to my website. And then there’s a link. And then up here at the top, we have some other stuff that says style, type, text, css. And this is the cascading style sheet for this page. Right here at the top, we have body, and it says that the font family for the body of my website is going to be Helvetica first, and if we don’t have that, then Arial, and if we don’t have that, then any Sans-Serif font. It also says that my H tag, which you can see down below is my website, has a color of hashtag f, which happens to be red. I also have a link right here and that’s the A tag, the anchor. You can see it right here and it says text decoration none because normally anchor tags have underlines, but on hover, I want text decoration underlined, and so now, there we are. Now, this text is all a little small, so let’s make it a little bit bigger. So, under body, I’m going to say font size, we’ll say pixels, and then reload. And there it is. Everything’s a little bit bigger because everything is based off that body font size. Now the C in CSS stands for cascading, which means that we’re able to be fairly specific about which parts of our website we’re talking about. Let me give you an example. Right here in the middle, I have a section with a paragraph in it and then below it, I have a footer with a paragraph in it. Now, I can control all of the paragraphs with just a P tag. And I can italicize them all. There, now all of the paragraphs are italicized. But, what if I only want the one inside the section to be italicized. Well, my section has an ID of top, which is like a handle, a name. So, I can say hashtag top paragraph are italicized. Now, the one inside the footer is not. So, to reiterate, the C in CSS stands for cascading, which means that I can be very specific about which thing on my website I want to control with CSS. Now, I want to show you one more trick within the realm of WordPress. Here’s a WordPress website and I’m logged in and in the admin bar, there’s a customize link, and if you click that, the customizer opens up. Now, not all customizers are the same in WordPress, but they do all have an additional CSS tab. And you can type in CSS there and have it affect your website. For example, I can type in header and then do background red. And now, all of my headers have a red background. Now, if I click publish, then it saves it to my website. Instead, I can also click this X and it will just go away. So, this is a great place to experiment and to see what your website is going to look at with different pieces of CSS applied. CSS ranges from extremely simple all the way to very complicated, and it can be a lot of fun to delve into and make little changes to your website to make it unique. With the customizer being so easy right there, I really recommend that you experiment a little bit. See if you like it, change up your website. You can’t really hurt anything. If you’d like to learn more about WordPress, check out winningwp.com.
Anything to add?
