Langley Foxall
Jacob Brassington

WordPress-CSS How To Guide

First of all, a small introduction to me before I introduce some of you to CSS. I am a software development apprentice and am currently working on in house stuff learning new things everyday. I thought I would write a blog describing some of the basics to help you make your website even better.

How to format your website with CSS

Wordpress enables you to make a responsive website without needing to know any html, CSS or JavaScript. This is amazing if you have no coding experience, but by knowing some html, CSS or JavaScript you can further customise your website to match your vision exactly. Here I'll show you how to add additional CSS to your Wordpress website.

Firstly you need to get access to the CSS style sheet, to do this you must do the following; log into your Wordpress admin area, click 'appearance' in the menu on the left side, then click 'background' finally navigate to and click 'additional CSS'.

Here is where we'll put the additional CSS code to modify the look of the website
alt
Additional CSS should be formatted like this but we'll come back to this later.
.classNameHere {

display: block;
max-Width: 100px;
max-Height: 100px;  

}

So we'll need two things, first we will need to find out what the class is.
To get to the image below you need to right click and select inspect, this will allow you to see the code behind and then see what parts of the page have what class.
In order to do this we need to look at the code, the part that is highlighted is about the title, this is a h2 title which means that the class is h2.

alt
For the body of the CSS there are many different ways to stylise. To get them all to go to the link below to see all of the possibilities. css reference
For example if you wanted to centre some text shown in the picture you would do some CSS that looks like:
.h2 {
text-align: center;
}