CSS is a great thing you can use to make simple changes on your WordPress site. It can seem pretty overwhelming to learn CSS at first, but once you know the basics, it’s really fun to play around with! I am going to teach you the very basics of CSS: how to select certain parts of your web page to edit, the anatomy of CSS, how to change colors, how to change font size/colors/styles, and how to add borders, padding, and margins.
HTML vs. CSS vs. PHP
What’s the difference? Simply put, HTML is like the bones of a body and CSS is like the skin.
I always love this car analogy from johnhaydon.com: Think of HTML and CSS as a car. For funsies, we’ll throw in PHP too (another coding language) since most all websites use these three things – HTML, CSS, and PHP.
If these three languages were a car:
HTML – Things you can see – like a car door or windshield. In the website, the parts you can see and click on.
CSS – The style, shape, and color of the car. On your website, the general look and feel of everything.
PHP – The things that make the car do stuff. Like an engine or brakes. On your website, this would be forms, ecommerce shops, and all that fun stuff.
Where Do You Find CSS on a WordPress Blog?
You can’t find and edit the specific HTML that makes up your WordPress site to edit because WordPress it uses PHP to build its functions and be its bones, and it then generates HTML to be seen on the browser screen. You really don’t even need to learn a lot about PHP edit WordPress themes. If you want to learn more about this, check out WPbeginner, they explain things really well.
We’re not going to worry about HTML or PHP that too much for now, let’s talk about CSS! You can easily find and edit CSS for your WordPress site and by doing that, you’ll have the amazing power to change the styles of your site!
In your WordPress Dashboard, navigate to Appearance > Editor. This will take you to you theme’s stylesheet. Here you see all of the styles for your website! It’s a little crazy in there, but you will notice a basic structure to the madness. For example, you will see selectors (something like .main-navigation), and under that you will see all of the properties and values to edit the style of that selection – like font-size: 12px. font size is the property, and 12px is the value of that property. This piece of code will tell all of the text in your main navigation to be 12px:
The graphic below will explain all of that better than my words can. 😉
Basic Structure of CSS
- Selector: Tells you what part of the website to edit.
- Property: What about the part of your site would you like to edit?
- Value: Tells the property what to do.
- Curly brackets: Surrounds the selector rules.
- Semicolons: Separates selector rules.
Font Size, Font Color, and Text Decorations
Here are some properties and values you can use to change the font of certain parts of your website. Let’s say you want to change the text of your sidebar titles. (The selector may be different depending on your WordPress theme)
font-size: 12px; (how big the font is)
color: #000000; (hex code for the font color. You can also use color names like black, white, pink, green, etc.)
text-decoration: underline; (will underline the text. Other options for text decoration: overline, line-through)
Padding, Margins, Borders
Padding, margins, and borders can be a confusing concept and easily can be mixed up. They define the space in the areas around the content you are styling. These three properties are called the box model.
So, what’s the difference between these three things?
Padding: Defined by a number and pixels. (Ex: Padding: 12px;) Defines the space between the content and the border.
Margins: The space between the content & the contents border, and the other content surrounding it on the page. Also defined by pixels. (Ex: Margin: 12px;)
Borders: A border around the content. This is defined by pixels (how wide the border is), colors, and border styles (dashed, single, double, grooved, and more cool styles!) (Ex: border: 1px solid black;)
There are some cool sites where you can practice coding with both HTML and CSS, and see the changes happen live before applying it to your website! My favorite “coding playground” to use is codepen.io.
Check out the pen I created for you here. In this code, I’ve created some bones for you (the HTML) to style and add some skin on top of (CSS). The HTML is just a basic DIV box (a container that can hold text). Try playing around with the borders, font size, font color, and background color. I also added in some padding and margins, so change the numbers around to see what it does!
You can also target a specific side of your content with borders, margins, and paddings. For example, padding-left: 12px; will only add 12px padding on the left side of your content. Try changing left to top, bottom, or right and see what happens.
Inspector Tool (The BEST way to practice in my opinion!)
The inspector tool is one of the main tools that helps me get better at coding. Did you know you can right click on any part of a web page, click on “inspect”, and see the HTML and CSS for that page? AND, the coolest thing about it is that you can change the code in the browser to see what would happen on the webpage, but there are no permanent changes made! Once you refresh the page, the changes are gone. It’s a great way to practice styling websites with CSS.
The best way to get better at CSS is to practice. Using coding playground and the inspector tool is a great way to start doing that!
Some amazing resources I recommend:
Want to learn even more and create the blog of your dreams ALL BY YOURSELF? Check out my course on creating beautiful blog!