What is CSS?
“CSS is a language that describes the style of an HTML document.
CSS describes how HTML elements should be displayed.” – w3schools.com/css
Websites are made with HTML. But with CSS, you can style the website in ways the appearance editor cannot. This is a tutorial to teach you how to use the Custom CSS Plugin for edublogs to stylize your page even more than the appearance editor lets you!
Let’s begin
Before you begin
One of the biggest gripes with Custom CSS and Edublogs is well… Edublogs! You do not have entire control over what happens using custom CSS depending on your theme. For one thing, most of them don’t let you change the background color and can sometimes be really weird to work with! The theme I’m currently using is Amadeus because it surprisingly gives you the most control over what to do with your blog!
Activating the CSS Plugin
To activate the CSS plugin, go to your dashboard and click plugins. Search for the Custom CSS Plugin and activate it. Once you have done that, go to the drop down menu in Appearance and click Custom CSS. Once, you have done that you should now see the CSS Editor.
Creating a comment
Let’s start off by do the most simple thing which is making a comment. This is super easy to do and it doesn’t affect the code in any way. You enter it in like this:
/* <comment_goes_here> */
This is useful for adding references in your code so that you can discribe what your are trying to do here.
CSS Explanation | Changing the background color
To explain how CSS works type this into the Code Workspace
body {
background-color: lightblue;
}
This is a very simple piece of code, let’s break this down:
First, body is something called a ‘selector’ so we are selecting body as what to change. Next, background-color is called a ‘property’ so we are changing the property to the ‘argument’ which in this case is lightblue. Some properties have multiple arguments but most like this one only have one.
This here will change the background color in your website to lightblue. And now you know how to change the color of your background. Now save your CSS and go to your website and the color of the background should now be lightblue
A Few References
Before we finish, I want to show you a few references on where to get certain information, if you want references on properties, selectors and how to use them, check out W3Schools. They have good sources on CSS and other website languages. And if you wanted to change the background color to a custom value, check out their Color Picker to get hexadecimal value on literally every color possible (around 16.5 million).
One last thing about warning messages
One thing before I finish this part, if you ever see an orange triangle, that’s a warning message. IGNORE IT! That is CSS lint coming into play, it is something that check certain things too *try* and help you optimise your website. The only issue with that is it really doesn’t matter unless there is a lot going on with your website, and with edublogs, there really isn’t. Some of the messages give you really bad advice such as “<class>.<selector> is over qualified. Just use .<selector>” or “don’t use id’s in the selectors”. While you don’t know about id’s or classes yet. I can just say, don’t follow their advice! Now if you have an error message which is red, don’t ignore that!
Thanks for reading this tutorial on how to use Custom CSS. I will be adding more parts to this if you are interested in customizing your website even more than even the Appearance Editor can. In the next part, I will be showing you custom fonts and how to make titles look cool!
– Aidan Schulmeister