What is CSS and How it Works with WordPress | EP 744

What is CSS and How it Works with WordPress

Read the full episode transcript below:

00:28 David Blackmon: Welcome to another episode of WP The Podcast, my name is David Blackmon.

00:35 Tim Strifler: And i’m Tim Strifler

00:38  David Blackmon: And today in episode 744 we’re going to talk about what is CSS and how it works with WordPress. I’m going to start talking just a little bit and then Tim’s going to dive off into the technical things. I’m not normally a tech talker on our podcast but CSS excites me and this is why it excites me because it allows you to manipulate the design aspects of a website It’s a front-end language, it’s the styling of your website and believe it or not, before i started you know, building websites i would not have considered myself a artsy creative person. But what i discovered through building websites is that it brought out an entire creative side and i loved it. I loved working with colors and shapes and all the fun stuff that goes into designing websites. And that’s what CSS is. CSS stands for Cascading Style Sheet and what i’ll do is i’m going to let Tim talk about, whatever the heck he’s going to talk about it now. And then maybe i’ll add something else that i get excited about. 

01:50 Tim Strifler: Yeah sounds good. Yeah, no David’s exactly right CSS is what makes the website look good and if you look at kind of the history of the internet uh it kind of helps you understand how CSS works and and why it exists. And so if you google the first website ever it’ll take you to a url info.cern.ch and it’s apparently the first website and so it’s a piece of history essentially. And it is just it’s just white background basic black text and links. There is nothing else, right? It is purely it looks like craigslist, right? I think craigslist is international, um craigslist is basically a way to sell things online and they intentionally have not made it better looking. It’s as basic as he gets in terms of the internet and styling and stuff. And there’s no CSS. And so that’s basically what websites looked like before CSS existed. And then uh even before CSS style sheets were invented they were the web designers could use inline styling, which is like within an html tag adding some styling and spacing and stuff. And everything was done in line, and so and then you could it was difficult because you had to do everything over and over again. There was no classes, there was no ids. So it’s like you wanted you’re you’re heading to have you know a font of you know 35 pixels. Well every single heading on the page you had to define that over and over again, rather than in it like. Today with the CSS you just say hey the heading the h1 is going to be 35 pixels. Right, and so uh, so yeah inline was was really difficult um but then they came out with CSS style sheets which was, you know a separate document that would define the styling for an entire page or an entire website. So then you could give assign the different parts of the site css classes, and so then anything you have on the page that has that class. Well the CSS style sheet is going to tell it what to do. CSS style sheet’s going to say uh “you know make anything with this class make it a background of brown, you know and make this 20 pixels wide”  or whatever. So then you could use the same styling throughout the page and really lay out a page a lot easier. And so that’s basically how CSS works, and why it’s important because without it you wouldn’t be able to make a website look very good. Now in terms of WordPress because this is WP The Podcast, we want to bring everything back to how it works with WordPress. Right, so with WordPress the styling is defined in the WordPress theme, right? Now themes to have evolved and there’s full-blown page builders and there’s functionality but the basics of the theme controlling the styling of the website. The WordPress website is still true and so your style sheets are going to be within your theme, and then typically a theme is going to have ways to customize the styling. There’s base styling and then you can customize the styling. And so David and i used Divi. The Divi Page Builder, and we built businesses around it, and so we typically when we’re building a website there’s the Divi theme as well the base styling, then we create a child theme which might have some custom CSSs in it. But then the majority of the styling is done in the page builder. Right, so we say hey you know we want uh the main styles to be this, but we’re going to go into the page builder, we’re going to modify on, a you know per module basis, per section basis and stuff. And so you can uh within the section of a page make the background blue, and then the next section you can make it you know a gradient, right? And then the next section you can add a background image with parallax and stuff. And all that’s even though it’s technically CSS it’s. We don’t have to go and write that manually. We’re writing it in the page builder and that’s kind of how WordPress has evolved. Is the output is all going to be CSS. But the way it’s built is determined in the theme, and how the theme is defining that CSS and making changes to it and stuff. Like that so, that’s kind of a uh basic example of how CSS works with WordPress. Uh when you’re adding in plugins, plugins are typically depending on what it does going to be adding. Additional style sheets, so website doesn’t just have one CSS style sheet. It’s going or CSS file typically, it’s going to have many and so Divi just made a major update. They had a huge CSS file now. They make the CSS file dynamic so based off of what features you’re using in the theme what modules you’re using it’s going to build the CSS file dynamically, and rather than having one giant one. So anything you like to add to that David?

06:58 David Blackmon: Well as a matter of fact Tim, yes i’m gonna get very technical here. Um actually no, that was a great description. I won’t, don’t want to dive off into this and stuff, but Tim is right, and i’m glad that he brought up the very first website. You gave an awesome description of of the history of how website styling has come a long ways. It’s even further now, because there are advanced styling which is SAS you know SCSS which is syntactically awesome style sheets, and it’s a structure for your CSS sheets that Tim describes so beautifully and eloquently. SAS allows you to organize and put that structure in place, and it’s like the next level of CSS and stuff. And um i mean you can dive off into the weeds, it’s awesome, it’s fun and stuff. But we wanted to give you kind of the basics and stuff. Anyways, tomorrow we’ve got another great topic, how to know if your WordPress website is hacked. Most importantly how you fix it. Until tomorrow we’ll see you then. 

08:15 Tim Strifler: Take care, bye.